Add type picker for entity creation, icon grid filter, and serial port placeholder

- Replace inline type selectors with pre-modal type picker grid for devices,
  color strip sources, and value sources
- Add filterable search to icon grid when items > 9 (no auto-focus on touch)
- Show disabled (grayed-out) filtered items instead of hiding them
- Responsive grid columns (2-5 cols based on viewport width)
- Add "Select a port..." placeholder to serial port dropdown
- Update en/ru/zh locales with new keys

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-03-14 21:44:26 +03:00
parent 6395709bb8
commit a922c6e052
9 changed files with 233 additions and 16 deletions

View File

@@ -695,6 +695,80 @@ textarea:focus-visible {
.icon-select-grid { gap: 4px; padding: 4px; }
}
/* ── Type Picker Overlay ─────────────────────────────────── */
.type-picker-overlay {
position: fixed;
inset: 0;
z-index: 3000;
display: flex;
justify-content: center;
padding-top: 15vh;
background: rgba(0, 0, 0, 0);
backdrop-filter: blur(0px);
transition: background 0.2s, backdrop-filter 0.2s;
}
.type-picker-overlay.open {
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(2px);
}
.type-picker-dialog {
align-self: flex-start;
width: min(680px, 90vw);
max-height: 70vh;
overflow-y: auto;
background: var(--card-bg);
border: 1px solid var(--border-color);
border-radius: 12px;
box-shadow: 0 16px 48px var(--shadow-color);
padding: 16px;
opacity: 0;
transform: translateY(-12px) scale(0.98);
transition: opacity 0.2s, transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.type-picker-overlay.open .type-picker-dialog {
opacity: 1;
transform: translateY(0) scale(1);
}
.type-picker-title {
font-size: 0.85rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--text-secondary);
margin-bottom: 12px;
text-align: center;
}
.type-picker-filter {
width: 100%;
padding: 8px 12px;
margin-bottom: 12px;
border: 1px solid var(--border-color);
border-radius: var(--radius);
background: var(--bg-secondary);
color: var(--text-color);
font-size: 0.9rem;
outline: none;
box-sizing: border-box;
}
.type-picker-filter::placeholder {
color: var(--text-secondary);
}
.type-picker-filter:focus {
border-color: var(--primary-color);
}
.type-picker-dialog .icon-select-grid {
border: none;
background: none;
padding: 0;
/* Override inline columns — use responsive auto-fill */
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
}
.type-picker-dialog .icon-select-cell.disabled {
opacity: 0.25;
pointer-events: none;
}
/* ── Entity Palette (command-palette style selector) ─────── */
.entity-palette-overlay {