Add searchable manufacturer picker

This commit is contained in:
2026-08-05 15:50:36 +02:00
parent 1914c7d141
commit a1e3f537e3
6 changed files with 181 additions and 2 deletions
+20
View File
@@ -76,6 +76,20 @@
.arrow-button:hover:not(:disabled), .action-button:hover:not(:disabled) { @apply border-slate-500 bg-slate-700 text-white; }
.arrow-button:disabled, .action-button:disabled { @apply cursor-not-allowed opacity-50; }
.input-like { @apply h-7 px-1 text-[11px]; }
.native-manufacturer-select { @apply hidden; }
.manufacturer-picker { @apply relative; }
.manufacturer-trigger { @apply flex h-7 w-full items-center justify-between rounded border border-slate-700 bg-slate-800 px-2 text-[11px] text-slate-200 shadow-sm; }
.manufacturer-trigger:hover { @apply border-slate-500 bg-slate-700; }
.manufacturer-trigger[aria-expanded="true"] { @apply border-catalog-focus ring-2 ring-catalog-focus/25; }
.manufacturer-trigger span:first-child { @apply min-w-0 truncate; }
.picker-chevron { @apply ml-2 text-slate-400; }
.manufacturer-menu { @apply absolute left-0 right-0 top-full z-50 mt-1 rounded border border-slate-300 bg-white p-1 shadow-xl; }
.manufacturer-menu[hidden] { display: none; }
.manufacturer-search { @apply mb-1 h-7 w-full rounded border border-slate-300 px-2 text-[11px] text-slate-800 outline-none focus:border-catalog-focus focus:ring-2 focus:ring-catalog-focus/25; }
.manufacturer-options { @apply max-h-60 overflow-y-auto; }
.manufacturer-option { @apply block min-h-7 w-full truncate rounded px-2 py-1 text-left text-[11px] text-slate-700 hover:bg-slate-100; }
.manufacturer-option[aria-selected="true"] { @apply bg-slate-200 font-medium text-slate-900; }
.manufacturer-empty { @apply px-2 py-2 text-[11px] text-slate-500; }
#scanInput { @apply bg-slate-700 placeholder:text-slate-400; }
.input-like:focus { @apply border-catalog-focus outline-none ring-2 ring-catalog-focus/25; }
.picture-slot { @apply aspect-square w-full overflow-hidden rounded border border-dashed border-slate-500 bg-catalog-panel-soft p-1 text-center text-[11px] text-slate-200; }
@@ -205,6 +219,8 @@
html:not(.dark) .mapping-box { @apply border-slate-300 bg-white text-slate-600; }
html:not(.dark) .mapping-toggle::before { @apply text-slate-700; }
html:not(.dark) .app-status { @apply border-slate-300 bg-white text-slate-700; }
html:not(.dark) .manufacturer-trigger { @apply border-slate-300 bg-white text-slate-700; }
html:not(.dark) .manufacturer-trigger:hover { @apply border-slate-400 bg-slate-200; }
html.dark body { @apply bg-slate-950 text-slate-100; }
html.dark .control-panel { @apply bg-slate-950; }
@@ -223,6 +239,10 @@
html.dark .arrow-button:hover:not(:disabled),
html.dark .action-button:hover:not(:disabled) { @apply border-slate-400 bg-slate-700; }
html.dark #scanInput { @apply bg-slate-700 placeholder:text-slate-400; }
html.dark .manufacturer-menu { @apply border-slate-700 bg-slate-900; }
html.dark .manufacturer-search { @apply border-slate-600 bg-slate-800 text-slate-100; }
html.dark .manufacturer-option { @apply text-slate-200 hover:bg-slate-800; }
html.dark .manufacturer-option[aria-selected="true"] { @apply bg-slate-700 text-white; }
html.dark .settings-dialog,
html.dark .suggested-dialog,
html.dark .source-dialog { @apply border-slate-700 bg-slate-900; }