Remove data-theme attribute when mode="auto" instead of setting it to "auto". Pico's OS-dark selector is :root:not([data-theme]), so any value (even "auto") prevents dark-mode Pico styles. Add Pico form element background vars and color-scheme: light to match active theme. Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
101 lines
4.9 KiB
HTML
101 lines
4.9 KiB
HTML
{% import "partials/icons.html" as ico %}
|
|
<div id="printer-list">
|
|
{% if not grouped %}
|
|
<div class="card">
|
|
<div class="empty">
|
|
<span class="empty-ico">{{ ico.i('printer', 18) }}</span>
|
|
<strong x-data x-text="$store.i18n.t('no_printers')">No printers configured yet.</strong>
|
|
<p x-data x-text="$store.i18n.t('step_printer_desc')">Name, IP address, driver, and the defaults the workstation gets.</p>
|
|
<a href="/printers/new" class="btn sm" x-data>{{ ico.i('plus', 14) }}<span x-text="$store.i18n.t('add_printer')">Add printer</span></a>
|
|
</div>
|
|
</div>
|
|
{% else %}
|
|
{% for client_name, printers in grouped.items() %}
|
|
{% set group_client_id = printers[0].client_id if printers else None %}
|
|
{# Group search text must cover everything its rows match on, or a row can
|
|
match while its group stays hidden. #}
|
|
{% set gsearch = (printers | map(attribute='name') | join(' ')) ~ ' '
|
|
~ (printers | map(attribute='ip_address') | join(' ')) ~ ' '
|
|
~ (printers | map(attribute='port_name') | join(' ')) ~ ' '
|
|
~ (printers | selectattr('driver_id') | map(attribute='driver.original_filename') | join(' ')) ~ ' '
|
|
~ (printers | selectattr('driver_id') | map(attribute='driver.label') | join(' ')) ~ ' '
|
|
~ client_name %}
|
|
<section class="card card-flush"
|
|
data-search="{{ gsearch | lower }}"
|
|
x-data
|
|
x-show="!$store.filter.q.trim() || $el.dataset.search.includes($store.filter.q.trim().toLowerCase())">
|
|
<div class="group-head">
|
|
{{ ico.i('group') }}
|
|
{% if group_client_id %}
|
|
<h3><a href="/clients/{{ group_client_id }}">{{ client_name }}</a></h3>
|
|
{% else %}
|
|
<h3 x-data x-text="$store.i18n.t('unassigned')">{{ client_name }}</h3>
|
|
{% endif %}
|
|
<span class="count">{{ printers | length }}</span>
|
|
</div>
|
|
<div class="table-scroll">
|
|
<table class="data-table">
|
|
<thead>
|
|
<tr>
|
|
<th x-data x-text="$store.i18n.t('th_name')">Name</th>
|
|
<th x-data x-text="$store.i18n.t('th_status')">Status</th>
|
|
<th class="col-defaults" x-data x-text="$store.i18n.t('th_config')">Defaults</th>
|
|
<th x-data x-text="$store.i18n.t('th_actions')">Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for p in printers %}
|
|
<tr data-search="{{ (p.name ~ ' ' ~ p.ip_address ~ ' ' ~ p.port_name ~ ' ' ~ client_name ~ ' ' ~ (p.driver.original_filename ~ ' ' ~ p.driver.label if p.driver_id else '')) | lower }}"
|
|
x-data
|
|
x-show="!$store.filter.q.trim() || $el.dataset.search.includes($store.filter.q.trim().toLowerCase())">
|
|
<td>
|
|
<a class="cell-name" href="/printers/{{ p.id }}">{{ p.name }}</a>
|
|
<span class="cell-sub">{{ p.ip_address }} · {{ p.port_name }}</span>
|
|
</td>
|
|
<td>
|
|
{% if p.driver_id %}
|
|
<span class="badge ok">{{ ico.i('check', 12) }}<span x-data x-text="$store.i18n.t('ready_to_export')">Ready</span></span>
|
|
<span class="cell-sub">{{ p.driver.label }}</span>
|
|
{% else %}
|
|
<span class="badge warn">{{ ico.i('alert', 12) }}<span x-data x-text="$store.i18n.t('needs_driver')">Driver needed</span></span>
|
|
{% endif %}
|
|
</td>
|
|
<td class="col-defaults">
|
|
<span class="pill-row">
|
|
<span class="pill" x-data
|
|
x-text="$store.i18n.t('{{ 'one_sided' if p.duplex_mode == 'OneSided' else ('long_edge' if p.duplex_mode == 'LongEdge' else 'short_edge') }}')">{{ p.duplex_mode }}</span>
|
|
<span class="pill" x-data
|
|
x-text="$store.i18n.t('{{ 'color_value' if p.color_mode else 'grayscale_value' }}')">{{ 'Color' if p.color_mode else 'Grayscale' }}</span>
|
|
<span class="pill">{{ p.paper_size }}</span>
|
|
{% if p.collate %}
|
|
<span class="pill" x-data x-text="$store.i18n.t('collate')">Collate</span>
|
|
{% endif %}
|
|
</span>
|
|
</td>
|
|
<td class="actions">
|
|
<span class="btn-row">
|
|
{% if p.driver_id %}
|
|
<a class="btn quiet sm" href="/printers/{{ p.id }}/packages/intunewin"
|
|
title=".intunewin">{{ ico.i('download', 14) }}</a>
|
|
{% endif %}
|
|
{% include "partials/printer_edit_modal.html" %}
|
|
<button class="btn danger sm"
|
|
hx-delete="/printers/{{ p.id }}"
|
|
hx-target="#printer-list"
|
|
hx-swap="outerHTML"
|
|
hx-confirm="Delete '{{ p.name }}'?"
|
|
x-data :title="$store.i18n.t('delete')">
|
|
{{ ico.i('trash', 14) }}
|
|
</button>
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</section>
|
|
{% endfor %}
|
|
{% endif %}
|
|
</div>
|