Move tags input under name field in all entity editor modals
Remove the separate tags form-group (label, hint toggle, hint text) from all 14 editor modals and place the tags container directly below the name input for a cleaner, more compact layout. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
2
TODO.md
2
TODO.md
@@ -52,5 +52,5 @@ Priority: `P1` quick win · `P2` moderate · `P3` large effort
|
||||
- [ ] `P1` **Collapse dashboard running target stats** — Show only FPS chart by default; uptime, errors, and pipeline timings in an expandable section collapsed by default
|
||||
- [ ] `P1` **Review new CSS types (Daylight & Candlelight)** — End-to-end review: create via UI, assign to targets, verify LED rendering, check edge cases (0 candles, extreme latitude, real-time toggle)
|
||||
- [x] `P1` **Daylight brightness value source** — New value source type that reports a 0–255 brightness level based on daylight cycle time (real-time or simulated), reusing the daylight LUT logic
|
||||
- [ ] `P1` **Tags input: move under name, remove hint/title** — Move the tags chip input directly below the name field in all entity editor modals; remove the hint toggle and section title for a cleaner layout
|
||||
- [x] `P1` **Tags input: move under name, remove hint/title** — Move the tags chip input directly below the name field in all entity editor modals; remove the hint toggle and section title for a cleaner layout
|
||||
- [ ] `P1` **IconSelect grid overflow & scroll jump** — Expandable icon grid sometimes renders outside the visible viewport; opening it causes the modal/page to jump scroll
|
||||
|
||||
@@ -19,6 +19,7 @@
|
||||
</div>
|
||||
<small class="input-hint" style="display:none" data-i18n="audio_source.name.hint">A descriptive name for this audio source</small>
|
||||
<input type="text" id="audio-source-name" data-i18n-placeholder="audio_source.name.placeholder" placeholder="System Audio" required>
|
||||
<div id="audio-source-tags-container"></div>
|
||||
</div>
|
||||
|
||||
<!-- Type (hidden — determined by which add button was clicked) -->
|
||||
@@ -86,14 +87,6 @@
|
||||
<input type="text" id="audio-source-description" data-i18n-placeholder="audio_source.description.placeholder" placeholder="Describe this audio source...">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<div class="label-row">
|
||||
<label data-i18n="tags.label">Tags:</label>
|
||||
<button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?" data-i18n-aria-label="aria.hint">?</button>
|
||||
</div>
|
||||
<small class="input-hint" style="display:none" data-i18n="tags.hint">Assign tags for grouping and filtering cards</small>
|
||||
<div id="audio-source-tags-container"></div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
|
||||
@@ -11,6 +11,7 @@
|
||||
<div class="form-group">
|
||||
<label for="audio-template-name" data-i18n="audio_template.name">Template Name:</label>
|
||||
<input type="text" id="audio-template-name" data-i18n-placeholder="audio_template.name.placeholder" placeholder="My Audio Template" required>
|
||||
<div id="audio-template-tags-container"></div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
@@ -34,15 +35,6 @@
|
||||
<div id="audio-engine-config-fields"></div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<div class="label-row">
|
||||
<label data-i18n="tags.label">Tags:</label>
|
||||
<button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?">?</button>
|
||||
</div>
|
||||
<small class="input-hint" style="display:none" data-i18n="tags.hint">Assign tags for grouping and filtering cards</small>
|
||||
<div id="audio-template-tags-container"></div>
|
||||
</div>
|
||||
|
||||
<div id="audio-template-error" class="error-message" style="display: none;"></div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
@@ -16,6 +16,7 @@
|
||||
</div>
|
||||
<small class="input-hint" style="display:none" data-i18n="automations.name.hint">A descriptive name for this automation</small>
|
||||
<input type="text" id="automation-editor-name" data-i18n-placeholder="automations.name.placeholder" placeholder="My Automation" required>
|
||||
<div id="automation-tags-container"></div>
|
||||
</div>
|
||||
|
||||
<div class="form-group settings-toggle-group">
|
||||
@@ -85,15 +86,6 @@
|
||||
<select id="automation-fallback-scene-id"></select>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<div class="label-row">
|
||||
<label data-i18n="tags.label">Tags:</label>
|
||||
<button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?">?</button>
|
||||
</div>
|
||||
<small class="input-hint" style="display:none" data-i18n="tags.hint">Assign tags for grouping and filtering cards</small>
|
||||
<div id="automation-tags-container"></div>
|
||||
</div>
|
||||
|
||||
<div id="automation-editor-error" class="error-message" style="display: none;"></div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
@@ -11,6 +11,7 @@
|
||||
<div class="form-group">
|
||||
<label for="template-name" data-i18n="templates.name">Template Name:</label>
|
||||
<input type="text" id="template-name" data-i18n-placeholder="templates.name.placeholder" placeholder="My Custom Template" required>
|
||||
<div id="capture-template-tags-container"></div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
@@ -34,15 +35,6 @@
|
||||
<div id="engine-config-fields"></div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<div class="label-row">
|
||||
<label data-i18n="tags.label">Tags:</label>
|
||||
<button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?">?</button>
|
||||
</div>
|
||||
<small class="input-hint" style="display:none" data-i18n="tags.hint">Assign tags for grouping and filtering cards</small>
|
||||
<div id="capture-template-tags-container"></div>
|
||||
</div>
|
||||
|
||||
<div id="template-error" class="error-message" style="display: none;"></div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
@@ -12,6 +12,7 @@
|
||||
<div class="form-group">
|
||||
<label for="css-editor-name" data-i18n="color_strip.name">Name:</label>
|
||||
<input type="text" id="css-editor-name" data-i18n-placeholder="color_strip.name.placeholder" placeholder="Wall Strip" required>
|
||||
<div id="css-tags-container"></div>
|
||||
</div>
|
||||
|
||||
<div id="css-editor-type-group" class="form-group">
|
||||
@@ -649,15 +650,6 @@
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<div class="label-row">
|
||||
<label data-i18n="tags.label">Tags:</label>
|
||||
<button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?">?</button>
|
||||
</div>
|
||||
<small class="input-hint" style="display:none" data-i18n="tags.hint">Assign tags for grouping and filtering cards</small>
|
||||
<div id="css-tags-container"></div>
|
||||
</div>
|
||||
|
||||
<div id="css-editor-error" class="error-message" style="display: none;"></div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
@@ -12,6 +12,7 @@
|
||||
<div class="form-group">
|
||||
<label for="settings-device-name" data-i18n="device.name">Device Name:</label>
|
||||
<input type="text" id="settings-device-name" data-i18n-placeholder="device.name.placeholder" placeholder="Living Room TV" required>
|
||||
<div id="device-tags-container"></div>
|
||||
</div>
|
||||
|
||||
<div class="form-group" id="settings-url-group">
|
||||
@@ -136,15 +137,6 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<div class="label-row">
|
||||
<label data-i18n="tags.label">Tags:</label>
|
||||
<button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?">?</button>
|
||||
</div>
|
||||
<small class="input-hint" style="display:none" data-i18n="tags.hint">Assign tags for grouping and filtering cards</small>
|
||||
<div id="device-tags-container"></div>
|
||||
</div>
|
||||
|
||||
<div id="settings-error" class="error-message" style="display: none;"></div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
@@ -12,6 +12,7 @@
|
||||
<div class="form-group">
|
||||
<label for="kc-editor-name" data-i18n="kc.name">Target Name:</label>
|
||||
<input type="text" id="kc-editor-name" data-i18n-placeholder="kc.name.placeholder" placeholder="My Key Colors Target" required>
|
||||
<div id="kc-tags-container"></div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
@@ -80,15 +81,6 @@
|
||||
<input type="range" id="kc-editor-smoothing" min="0.0" max="1.0" step="0.05" value="0.3" oninput="document.getElementById('kc-editor-smoothing-value').textContent = this.value">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<div class="label-row">
|
||||
<label data-i18n="tags.label">Tags:</label>
|
||||
<button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?">?</button>
|
||||
</div>
|
||||
<small class="input-hint" style="display:none" data-i18n="tags.hint">Assign tags for grouping and filtering cards</small>
|
||||
<div id="kc-tags-container"></div>
|
||||
</div>
|
||||
|
||||
<div id="kc-editor-error" class="error-message" style="display: none;"></div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
@@ -16,6 +16,7 @@
|
||||
</div>
|
||||
<small class="input-hint" style="display:none" data-i18n="pattern.name.hint">A descriptive name for this rectangle layout</small>
|
||||
<input type="text" id="pattern-template-name" data-i18n-placeholder="pattern.name.placeholder" placeholder="My Pattern Template" required>
|
||||
<div id="pattern-tags-container"></div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
@@ -56,15 +57,6 @@
|
||||
<div id="pattern-rect-list" class="pattern-rect-list"></div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<div class="label-row">
|
||||
<label data-i18n="tags.label">Tags:</label>
|
||||
<button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?">?</button>
|
||||
</div>
|
||||
<small class="input-hint" style="display:none" data-i18n="tags.hint">Assign tags for grouping and filtering cards</small>
|
||||
<div id="pattern-tags-container"></div>
|
||||
</div>
|
||||
|
||||
<div id="pattern-template-error" class="error-message" style="display: none;"></div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
@@ -11,6 +11,7 @@
|
||||
<div class="form-group">
|
||||
<label for="pp-template-name" data-i18n="postprocessing.name">Template Name:</label>
|
||||
<input type="text" id="pp-template-name" data-i18n-placeholder="postprocessing.name.placeholder" placeholder="My Processing Template" required>
|
||||
<div id="pp-template-tags-container"></div>
|
||||
</div>
|
||||
|
||||
<!-- Dynamic filter list -->
|
||||
@@ -28,15 +29,6 @@
|
||||
<input type="text" id="pp-template-description" data-i18n-placeholder="postprocessing.description_placeholder" placeholder="Describe this template...">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<div class="label-row">
|
||||
<label data-i18n="tags.label">Tags:</label>
|
||||
<button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?">?</button>
|
||||
</div>
|
||||
<small class="input-hint" style="display:none" data-i18n="tags.hint">Assign tags for grouping and filtering cards</small>
|
||||
<div id="pp-template-tags-container"></div>
|
||||
</div>
|
||||
|
||||
<div id="pp-template-error" class="error-message" style="display: none;"></div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
@@ -16,6 +16,7 @@
|
||||
</div>
|
||||
<small class="input-hint" style="display:none" data-i18n="scenes.name.hint">A descriptive name for this scene preset</small>
|
||||
<input type="text" id="scene-preset-editor-name" data-i18n-placeholder="scenes.name.placeholder" placeholder="My Scene" required>
|
||||
<div id="scene-tags-container"></div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
@@ -37,15 +38,6 @@
|
||||
<button type="button" id="scene-target-add-btn" class="btn btn-sm btn-secondary" onclick="addSceneTarget()" style="margin-top: 6px;">+ <span data-i18n="scenes.targets.add">Add Target</span></button>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<div class="label-row">
|
||||
<label data-i18n="tags.label">Tags:</label>
|
||||
<button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?">?</button>
|
||||
</div>
|
||||
<small class="input-hint" style="display:none" data-i18n="tags.hint">Assign tags for grouping and filtering cards</small>
|
||||
<div id="scene-tags-container"></div>
|
||||
</div>
|
||||
|
||||
<div id="scene-preset-editor-error" class="error-message" style="display: none;"></div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
@@ -16,6 +16,7 @@
|
||||
<div class="form-group">
|
||||
<label for="stream-name" data-i18n="streams.name">Source Name:</label>
|
||||
<input type="text" id="stream-name" data-i18n-placeholder="streams.name.placeholder" placeholder="My Source" required>
|
||||
<div id="stream-tags-container"></div>
|
||||
</div>
|
||||
|
||||
<input type="hidden" id="stream-type" value="raw">
|
||||
@@ -96,15 +97,6 @@
|
||||
<input type="text" id="stream-description" data-i18n-placeholder="streams.description_placeholder" placeholder="Describe this source...">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<div class="label-row">
|
||||
<label data-i18n="tags.label">Tags:</label>
|
||||
<button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?">?</button>
|
||||
</div>
|
||||
<small class="input-hint" style="display:none" data-i18n="tags.hint">Assign tags for grouping and filtering cards</small>
|
||||
<div id="stream-tags-container"></div>
|
||||
</div>
|
||||
|
||||
<div id="stream-error" class="error-message" style="display: none;"></div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
@@ -19,6 +19,7 @@
|
||||
</div>
|
||||
<small class="input-hint" style="display:none" data-i18n="sync_clock.name.hint">A descriptive name for this synchronization clock</small>
|
||||
<input type="text" id="sync-clock-name" data-i18n-placeholder="sync_clock.name.placeholder" placeholder="Main Clock" required>
|
||||
<div id="sync-clock-tags-container"></div>
|
||||
</div>
|
||||
|
||||
<!-- Speed -->
|
||||
@@ -42,14 +43,6 @@
|
||||
<input type="text" id="sync-clock-description" data-i18n-placeholder="sync_clock.description.placeholder" placeholder="">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<div class="label-row">
|
||||
<label data-i18n="tags.label">Tags:</label>
|
||||
<button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?" data-i18n-aria-label="aria.hint">?</button>
|
||||
</div>
|
||||
<small class="input-hint" style="display:none" data-i18n="tags.hint">Assign tags for grouping and filtering cards</small>
|
||||
<div id="sync-clock-tags-container"></div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
|
||||
@@ -12,6 +12,7 @@
|
||||
<div class="form-group">
|
||||
<label for="target-editor-name" data-i18n="targets.name">Target Name:</label>
|
||||
<input type="text" id="target-editor-name" data-i18n-placeholder="targets.name.placeholder" placeholder="My Target" required>
|
||||
<div id="target-tags-container"></div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
@@ -113,15 +114,6 @@
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<div class="form-group">
|
||||
<div class="label-row">
|
||||
<label data-i18n="tags.label">Tags:</label>
|
||||
<button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?">?</button>
|
||||
</div>
|
||||
<small class="input-hint" style="display:none" data-i18n="tags.hint">Assign tags for grouping and filtering cards</small>
|
||||
<div id="target-tags-container"></div>
|
||||
</div>
|
||||
|
||||
<div id="target-editor-error" class="error-message" style="display: none;"></div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
@@ -19,6 +19,7 @@
|
||||
</div>
|
||||
<small class="input-hint" style="display:none" data-i18n="value_source.name.hint">A descriptive name for this value source</small>
|
||||
<input type="text" id="value-source-name" data-i18n-placeholder="value_source.name.placeholder" placeholder="Brightness Pulse" required>
|
||||
<div id="value-source-tags-container"></div>
|
||||
</div>
|
||||
|
||||
<!-- Type (hidden in edit mode since type is immutable) -->
|
||||
@@ -304,14 +305,6 @@
|
||||
<input type="text" id="value-source-description" data-i18n-placeholder="value_source.description.placeholder" placeholder="Describe this value source...">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<div class="label-row">
|
||||
<label data-i18n="tags.label">Tags:</label>
|
||||
<button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?" data-i18n-aria-label="aria.hint">?</button>
|
||||
</div>
|
||||
<small class="input-hint" style="display:none" data-i18n="tags.hint">Assign tags for grouping and filtering cards</small>
|
||||
<div id="value-source-tags-container"></div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
|
||||
Reference in New Issue
Block a user