fix(settings): polish dialog colours and actions (#605)

Make colour tiles solid, readable and fully clickable; align Data actions and device icon field with the form kit. Cover narrow Windows layouts and both icon-picker branches with a focused browser smoke.

Issue: #605
User-Visible: yes

src/editors/form-kit.ts

@@ -274,7 +274,7 @@ export function colorField({
   const pct = opacity === undefined ? null : Math.round(Math.min(1, Math.max(0, opacity)) * 100);
   return html`<div class="hpf-colorfield">
     ${picker}
-    <code class="hpf-hex">${hex}</code>
+    <code class="hpf-hex">${hex.toUpperCase()}</code>
     ${pct === null ? nothing : html`<span class="hpf-opacity">${opacityLabel ?? ''}
       <span class="hpf-unit"><input type="number" inputmode="numeric" min="0" max="100" step="1"
         .value=${String(pct)} ?disabled=${disabled} aria-label=${opacityLabel ?? 'Opacity'}
@@ -317,7 +317,7 @@ export function colorTile({ label, hex, opacity, opacityLabel, picker, onOpacity
       ${picker}<span>${label}</span>
     </div>
     <div class="hpf-colortile-meta">
-      <code class="hpf-hex">${hex}</code>
+      <code class="hpf-hex">${hex.toUpperCase()}</code>
       <span class="hpf-unit" title=${opacityLabel}><input type="number" inputmode="numeric" min="0" max="100" step="1"
         .value=${String(pct)} aria-label=${opacityLabel}
         @input=${(e: Event) => {

src/editors/general-settings-dialog.ts

@@ -64,7 +64,7 @@ export function renderGeneralSettingsDialog(this: HouseplanEditorRuntime): Templ
     return colorTile({
       label, hex: v.c, opacity: v.a, opacityLabel: st('gs.opacity_of', { name: label }),
       onOpacity: (a) => this._setFillColor(key, { c: v.c, a }),
-      picker: html`<hp-color-opacity .label=${label} hide-label
+      picker: html`<hp-color-opacity .label=${label} hide-label flat-swatch cover-swatch
         .opacityLabel=${t('space.opacity')}
         .pickerLabels=${host._colorPickerLabels}
         .color=${v.c} .opacity=${v.a} .showOpacity=${true}
@@ -144,7 +144,9 @@ export function renderGeneralSettingsDialog(this: HouseplanEditorRuntime): Templ
             picker: colorField({
               hex: d.colors.wall_fill.c, opacity: d.colors.wall_fill.a, opacityLabel: t('space.opacity'),
               onOpacity: (a) => this._setFillColor('wall_fill', { c: d.colors.wall_fill.c, a }),
-              picker: html`<hp-color-opacity .label=${t('gs.wall_fill')} hide-label
+              resetLabel: t('btn.reset'),
+              onReset: () => this._setFillColor('wall_fill', { ...DEFAULT_FILL_COLORS.wall_fill }),
+              picker: html`<hp-color-opacity .label=${t('gs.wall_fill')} hide-label flat-swatch
                 .opacityLabel=${t('space.opacity')} .pickerLabels=${host._colorPickerLabels}
                 .color=${d.colors.wall_fill.c} .opacity=${d.colors.wall_fill.a} .showOpacity=${true}
                 @hp-color-opacity-change=${(e: CustomEvent<{ color: string; opacity: number }>) => {
@@ -173,7 +175,7 @@ export function renderGeneralSettingsDialog(this: HouseplanEditorRuntime): Templ
                   hex: d.bgColor || host._stageBgHex(),
                   resetLabel: d.bgColor ? t('gs.bg_default') : undefined,
                   onReset: () => set({ bgColor: null }),
-                  picker: html`<hp-color-opacity .label=${t('gs.bg_color')} hide-label
+                  picker: html`<hp-color-opacity .label=${t('gs.bg_color')} hide-label flat-swatch
                     .pickerLabels=${host._colorPickerLabels}
                     .color=${d.bgColor || host._stageBgHex()} .opacity=${1} .showOpacity=${false}
                     @hp-color-opacity-change=${(e: CustomEvent<{ color: string }>) => set({ bgColor: e.detail.color })}></hp-color-opacity>`,
@@ -220,28 +222,28 @@ export function renderGeneralSettingsDialog(this: HouseplanEditorRuntime): Templ
           ${host._canEdit ? html`
             ${subsection({ title: t('gs.backup_group'), help: this._help('gs.backup_group.help') })}
             <div class="hpf-actions">
-              <button class="btn ghost" @click=${() => this._openBackupExport()}>
+              <button class="btn" @click=${() => this._openBackupExport()}>
                 <ha-icon icon="mdi:download"></ha-icon>${t('backup.export_open')}
               </button>
               <span class="backupupload">
-                <button class="btn ghost" type="button" @click=${(e: Event) =>
+                <button class="btn" type="button" @click=${(e: Event) =>
                   ((e.currentTarget as HTMLElement).nextElementSibling as HTMLInputElement | null)?.click()}>
                   <ha-icon icon="mdi:upload"></ha-icon>${t('backup.import_open')}
                 </button>
                 <input type="file" accept="application/json,.json" @change=${(event: Event) => this._pickBackupImport(event)} />
               </span>
               ${host._canOptimizeUndo && host._undoKind === 'import' ? html`
-                <button class="btn ghost" @click=${() => this._undoPlanOptimization()} ?disabled=${host._optimizeUndoBusy}>
+                <button class="btn" @click=${() => this._undoPlanOptimization()} ?disabled=${host._optimizeUndoBusy}>
                   <ha-icon icon="mdi:undo-variant"></ha-icon>${t('backup.undo_import')}
                 </button>` : nothing}
             </div>` : nothing}
           ${subsection({ title: t('gs.grid_group'), help: this._help('gs.grid_group.help') })}
           <div class="hpf-actions">
-            <button class="btn ghost alignall" @click=${() => this._openAlignDialog()}>
+            <button class="btn" @click=${() => this._openAlignDialog()}>
               <ha-icon icon="mdi:broom"></ha-icon>${t('gs.align_all')}
             </button>
             ${host._canOptimizeUndo && host._undoKind !== 'import' ? html`
-              <button class="btn ghost alignall" @click=${() => this._undoPlanOptimization()} ?disabled=${host._optimizeUndoBusy}>
+              <button class="btn" @click=${() => this._undoPlanOptimization()} ?disabled=${host._optimizeUndoBusy}>
                 <ha-icon icon="mdi:undo-variant"></ha-icon>${t('gs.optimize_undo')}
               </button>` : nothing}
           </div>`,

src/editors/marker-dialog.ts

@@ -458,7 +458,7 @@ export function renderMarkerDialog(this: HouseplanEditorRuntime): TemplateResult
           label: t('marker.glow_color'),
           control: colorField({
             hex: d.glowColor, disabled: glowSourceDisabled,
-            picker: html`<hp-color-opacity .label=${t('marker.glow_color')} hide-label
+            picker: html`<hp-color-opacity .label=${t('marker.glow_color')} hide-label flat-swatch
               .color=${d.glowColor} .opacity=${1} .showOpacity=${false}
               .pickerLabels=${this.host._colorPickerLabels}
               .disabled=${glowSourceDisabled}
@@ -575,7 +575,7 @@ export function renderMarkerDialog(this: HouseplanEditorRuntime): TemplateResult
       // the glyph and the mdi:* label. autoIcon is presentation-only:
       // untouched dialogs still save d.icon as an empty auto override.
       ? html`<ha-icon-picker id="marker-icon" .hass=${this.host.hass} .value=${d.icon || d.autoIcon}
-          .placeholder=${d.autoIcon || undefined}
+          .placeholder=${d.autoIcon || 'mdi:shape-outline'}
           .fallbackPath=${undefined}
           @value-changed=${(e: CustomEvent<{ value?: string }>) => {
             const icon = e.detail.value || '';
@@ -596,8 +596,11 @@ export function renderMarkerDialog(this: HouseplanEditorRuntime): TemplateResult
         ${field({
           label: t('marker.icon_label'), htmlFor: 'marker-icon', help: shelp('marker.icon.help'),
           control: html`<div class="hpf-iconfield">
-            <span class="hpf-iconpreview" aria-hidden="true"><ha-icon icon=${d.icon || d.autoIcon || 'mdi:shape-outline'}></ha-icon></span>
-            ${iconControl}
+            <div class="hpf-iconfield-control">
+              ${customElements.get('ha-icon-picker') ? nothing : html`
+                <span class="hpf-iconpreview" aria-hidden="true"><ha-icon icon=${d.icon || d.autoIcon || 'mdi:shape-outline'}></ha-icon></span>`}
+              ${iconControl}
+            </div>
             ${d.icon
               ? html`<button class="btn ghost hpf-iconclear" type="button" aria-label=${t('btn.reset')} title=${t('btn.reset')}
                   @click=${() => (this.host._markerDialog = { ...d, icon: '' })}><ha-icon icon="mdi:close"></ha-icon></button>`
@@ -626,7 +629,7 @@ export function renderMarkerDialog(this: HouseplanEditorRuntime): TemplateResult
               label: t('marker.activity_color'),
               control: html`<div class="ripple-colorrow">${colorField({
                 hex: d.rippleColor || '#3ea6ff',
-                picker: html`<hp-color-opacity .label=${t('marker.activity_color')} hide-label
+                picker: html`<hp-color-opacity .label=${t('marker.activity_color')} hide-label flat-swatch
                   .pickerLabels=${this.host._colorPickerLabels}
                   .color=${d.rippleColor || '#3ea6ff'} .opacity=${1} .showOpacity=${false}
                   @hp-color-opacity-change=${(e: CustomEvent<{ color: string }>) => {

src/editors/room-settings-dialog.ts

@@ -207,7 +207,7 @@ export function renderRoomSettingsDialog(this: HouseplanEditorRuntime): Template
                     onOpacity: (a) => { host._roomCustomFill = { c: customFill.c, a }; host.requestUpdate(); },
                     resetLabel: host._roomCustomFill ? t('btn.reset') : undefined,
                     onReset: () => { host._roomCustomFill = null; host.requestUpdate(); },
-                    picker: html`<hp-color-opacity .label=${customLabel} hide-label
+                    picker: html`<hp-color-opacity .label=${customLabel} hide-label flat-swatch
                       .opacityLabel=${t('space.opacity')}
                       .pickerLabels=${host._colorPickerLabels}
                       .color=${customFill.c}

src/editors/space-form.ts

@@ -280,7 +280,7 @@ function renderAppearance(port: SpaceFormPort, d: SpaceDialogState, id: (n: stri
           onOpacity: (a) => set(port, { ...d, customFill: { c: (d.customFill || DEFAULT_CUSTOM_FILL).c, a } }),
           resetLabel: d.customFill ? t('btn.reset') : undefined,
           onReset: () => set(port, { ...d, customFill: null }),
-          picker: html`<hp-color-opacity .label=${t('space.custom_fill')} hide-label .opacityLabel=${t('space.opacity')}
+          picker: html`<hp-color-opacity .label=${t('space.custom_fill')} hide-label flat-swatch .opacityLabel=${t('space.opacity')}
             .pickerLabels=${host._colorPickerLabels}
             .color=${(d.customFill || DEFAULT_CUSTOM_FILL).c} .opacity=${(d.customFill || DEFAULT_CUSTOM_FILL).a}
             @hp-color-opacity-change=${(e: CustomEvent<{ color: string; opacity: number }>) => {
@@ -345,7 +345,7 @@ function renderAppearance(port: SpaceFormPort, d: SpaceDialogState, id: (n: stri
           onOpacity: (a) => set(port, { ...d, roomOpacity: a }),
           resetLabel: d.roomColor !== DEFAULT_ROOM_COLOR || d.roomOpacity !== DEFAULT_ROOM_OPACITY ? t('btn.reset') : undefined,
           onReset: () => set(port, { ...d, roomColor: DEFAULT_ROOM_COLOR, roomOpacity: DEFAULT_ROOM_OPACITY }),
-          picker: html`<hp-color-opacity .label=${t('space.room_color')} hide-label .opacityLabel=${t('space.opacity')}
+          picker: html`<hp-color-opacity .label=${t('space.room_color')} hide-label flat-swatch .opacityLabel=${t('space.opacity')}
             .pickerLabels=${host._colorPickerLabels}
             .color=${d.roomColor} .opacity=${d.roomOpacity} .showOpacity=${true}
             @hp-color-opacity-change=${(e: CustomEvent<{ color: string; opacity: number }>) => {
@@ -470,7 +470,7 @@ function renderSunAndLight(port: SpaceFormPort, d: SpaceDialogState, id: (n: str
               hex: d.bgColor || stageBgOf(host._settings, { bgColor: null }) || host._stageBgHex(),
               resetLabel: d.bgColor ? t('space.bg_inherit') : undefined,
               onReset: () => set(port, { ...d, bgColor: null }),
-              picker: html`<hp-color-opacity .label=${t('space.bg_color')} hide-label .pickerLabels=${host._colorPickerLabels}
+              picker: html`<hp-color-opacity .label=${t('space.bg_color')} hide-label flat-swatch .pickerLabels=${host._colorPickerLabels}
                 .color=${d.bgColor || stageBgOf(host._settings, { bgColor: null }) || host._stageBgHex()}
                 .opacity=${1} .showOpacity=${false}
                 @hp-color-opacity-change=${(e: CustomEvent<{ color: string }>) => set(port, { ...d, bgColor: e.detail.color })}></hp-color-opacity>`,

src/hp-color-opacity.ts

@@ -40,6 +40,10 @@ export class HpColorOpacity extends LitElement {
   public disabled = false;
   public showOpacity = true;
   public hideLabel = false;
+  /** Settings form-kit uses a solid swatch instead of the alpha checkerboard. */
+  public flatSwatch = false;
+  /** Let the existing trigger cover an entire settings colour tile. */
+  public coverSwatch = false;
   public pickerLabels: ColorPickerLabels = DEFAULT_LABELS;
 
   private _open = false;
@@ -69,6 +73,8 @@ export class HpColorOpacity extends LitElement {
     // #600 Q5: компактная плашка набора рисует подпись сама; `label` при этом
     // остаётся источником title/aria триггера и заголовка панели.
     hideLabel: { type: Boolean, attribute: 'hide-label' },
+    flatSwatch: { type: Boolean, attribute: 'flat-swatch' },
+    coverSwatch: { type: Boolean, attribute: 'cover-swatch' },
     pickerLabels: { attribute: false },
     _open: { state: true },
     _hue: { state: true },
@@ -106,6 +112,13 @@ export class HpColorOpacity extends LitElement {
         linear-gradient(45deg, #b8b8b8 25%, #eee 25%) 5px 5px / 10px 10px;
       cursor: pointer;
     }
+    :host([flat-swatch]) .trigger { background: none; }
+    :host([cover-swatch]) { display: block; width: 100%; height: 100%; }
+    :host([cover-swatch]) .trigger {
+      width: 100%; height: 100%; padding: 0; border: 0; border-radius: 6px;
+    }
+    :host([cover-swatch]) .swatch { border-radius: 6px; box-shadow: none; }
+    :host([cover-swatch]) .trigger:focus-visible { outline-offset: -2px; }
     :host([data-pointer-hover]) .trigger:hover {
       border-color: var(--primary-color, #03a9f4);
     }
@@ -836,7 +849,7 @@ export class HpColorOpacity extends LitElement {
       <button class="trigger" type="button" .disabled=${this.disabled}
         aria-label=${title} aria-haspopup="dialog" aria-expanded=${this._open ? 'true' : 'false'}
         title=${title} @click=${this._toggle}>
-        <span class="swatch" style=${`background:${color};opacity:${this.showOpacity ? pct / 100 : 1}`}></span>
+        <span class="swatch" style=${`background:${color};opacity:${this.flatSwatch ? 1 : this.showOpacity ? pct / 100 : 1}`}></span>
       </button>
       ${this._open && !this.disabled && this._supportsPopover() ? this._pickerTemplate(true) : nothing}
     `;

src/i18n/de.json

@@ -256,7 +256,7 @@
   "marker.lqi_a11y_mid": "LQI {value}, mittleres Signal",
   "marker.lqi_a11y_high": "LQI {value}, starkes Signal",
   "marker.size_label": "Symbolgröße und Drehung",
-  "marker.angle_label": "Drehen",
+  "marker.angle_label": "Drehung",
   "marker.model_label": "Modell",
   "marker.model_ph": "z.B. Aqara T&H",
   "marker.link_label": "Link",

src/i18n/en.json

@@ -256,7 +256,7 @@
   "marker.lqi_a11y_mid": "LQI {value}, medium signal",
   "marker.lqi_a11y_high": "LQI {value}, high signal",
   "marker.size_label": "Icon size and rotation",
-  "marker.angle_label": "Rotate",
+  "marker.angle_label": "Rotation",
   "marker.model_label": "Model",
   "marker.model_ph": "e.g. Aqara T&H",
   "marker.link_label": "Link",

src/styles/form-kit.styles.ts

@@ -363,13 +363,16 @@ function extrasCss(options: FormKitCssOptions): string {
   .${p}-tile:has(input:disabled) input { cursor: default; }
   .${p}-colortiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
   .${p}-colortile { display: grid; gap: 6px; min-width: 0; padding: 6px 6px 7px; border: 1px solid var(${tokens.line}); border-radius: 8px; background: var(${tokens.surface}); }
-  .${p}-colortile > .${p}-colortile-swatch { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 3px 8px 3px 3px; border: 1px solid var(${tokens.line}); border-radius: 6px; font-size: .875rem; font-weight: 500; line-height: 1.25; }
-  .${p}-colortile > .${p}-colortile-swatch > span { min-width: 0; overflow-wrap: anywhere; }
-  .${p}-colortile > .${p}-colortile-swatch > hp-color-opacity { flex: none; }
-  .${p}-colortile-meta { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
+  .${p}-colortile > .${p}-colortile-swatch { position: relative; min-height: 48px; border: 1px solid var(${tokens.line}); border-radius: 6px; font-size: .875rem; font-weight: 500; line-height: 1.25; }
+  .${p}-colortile > .${p}-colortile-swatch > span { position: absolute; z-index: 1; inset: 0; display: flex; align-items: center; padding: 5px 10px; min-width: 0; overflow-wrap: anywhere; pointer-events: none; }
+  .${p}-colortile > .${p}-colortile-swatch > hp-color-opacity { position: absolute; inset: 0; }
+  .${p}-colortile-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; }
   .${p}-colortile-meta .${p}-hex { font-size: .8125rem; }
   .${p}-colortile-meta .${p}-unit { height: 32px; }
-  .${p}-colortile-meta .${p}-unit > input { width: 3.2em; min-width: 3em; padding: 4px 4px 4px 7px; font-size: .8125rem; }
+  .${p}-colortile-meta .${p}-unit > input { width: 3.6em; min-width: 3.6em; padding: 4px 4px 4px 7px; font-size: .8125rem; }
+  .${p}-colortile-meta .${p}-unit > input[type='number'] { appearance: textfield; }
+  .${p}-colortile-meta .${p}-unit > input[type='number']::-webkit-inner-spin-button,
+  .${p}-colortile-meta .${p}-unit > input[type='number']::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
   .${p}-colortile-meta .${p}-unit > span { padding: 0 7px 0 0; font-size: .8125rem; }
   .${p}-colorfield {
     display: flex;
@@ -389,6 +392,9 @@ function extrasCss(options: FormKitCssOptions): string {
   .${p}-colorfield > .${p}-opacity { display: flex; align-items: center; gap: 8px; font-size: .875rem; color: var(${tokens.muted}); }
   .${p}-colorfield > .${p}-opacity > .${p}-unit { height: 38px; }
   .${p}-colorfield > .${p}-opacity > .${p}-unit > input { width: 4.8em; min-width: 4.8em; }
+  .${p}-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 8px; min-width: 0; }
+  .${p}-actions .btn { box-sizing: border-box; min-height: 44px; max-width: 100%; white-space: normal; text-align: left; }
+  .${p}-actions .backupupload { max-width: 100%; }
   .${p}-colorrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 16px; min-height: 56px; }
   .${p}-colorrow > .${p}-colorfield { justify-self: end; }
   .${p}-colorrow > .${p}-labelrow { min-height: 0; }
@@ -470,9 +476,14 @@ function extrasCss(options: FormKitCssOptions): string {
   .${p}-toolbar > .${p}-input { flex: 1 1 200px; width: auto; }
   .${p}-check { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; font-size: .875rem; color: var(${tokens.muted}); cursor: pointer; white-space: nowrap; }
   .${p}-check > input { width: 18px; height: 18px; margin: 0; accent-color: var(${tokens.accent}); cursor: pointer; }
-  .${p}-iconfield { display: flex; align-items: center; gap: 8px; }
-  .${p}-iconfield > .${p}-input, .${p}-iconfield > ha-icon-picker { flex: 1 1 auto; min-width: 0; }
-  .${p}-iconpreview { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 44px; width: 44px; height: 44px; border: 1px solid var(${tokens.line}); border-radius: 7px; background: var(${tokens.canvas}); color: var(${tokens.muted}); }
+  .${p}-iconfield { display: flex; align-items: center; gap: 8px; min-width: 0; }
+  .${p}-iconfield-control { box-sizing: border-box; display: flex; align-items: center; flex: 1 1 auto; min-width: 0; min-height: 44px; border: 1px solid var(${tokens.line}); border-radius: 7px; background: var(${tokens.canvas}); }
+  .${p}-iconfield-control:focus-within { outline: 2px solid var(${tokens.accent}); outline-offset: 2px; }
+  .${p}-iconfield-control > .${p}-input, .${p}-iconfield-control > ha-icon-picker { flex: 1 1 auto; min-width: 0; width: 100%; }
+  ${form} .${p}-iconfield-control > .${p}-input { min-height: 42px; height: 42px; border: 0; background: transparent; }
+  .${p}-iconfield-control > .${p}-input:focus { outline: 0; }
+  .${p}-iconfield-control > ha-icon-picker { display: block; min-height: 42px; --mdc-text-field-fill-color: transparent; --mdc-text-field-idle-line-color: transparent; --mdc-text-field-hover-line-color: transparent; --mdc-text-field-height: 42px; --mdc-shape-small: 7px; --ha-color-form-background: transparent; --ha-color-border-neutral-loud: transparent; --md-list-item-one-line-container-height: 42px; --md-list-item-two-line-container-height: 42px; }
+  .${p}-iconpreview { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 42px; width: 42px; height: 42px; color: var(${tokens.muted}); }
   .${p}-mono { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .8125rem; }
   .${p}-hint > .${p}-link { padding: 0; }
   .${p}-hint ha-icon { --mdc-icon-size: 16px; display: inline-flex; vertical-align: -3px; }