german/houseplan-card
1
0
Fork 0
mirror of https://github.com/Matysh/houseplan-card synced 2026-10-04 05:41:34 +00:00
Code Issues Actions 14 Packages Projects Releases Wiki Activity

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

Browse Source 
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
This commit is contained in:
Claude
2026-09-21 13:13:50 +03:00
parent 82f99e3109
commit 08a56953cc
69 changed files with 904 additions and 688 deletions
Download Patch File Download Diff File Expand all files Collapse all files
test/fixtures/form-kit-card-dialog-with-switch.css
Vendored
+19 -8
View File
@@ -237,13 +237,16 @@
.hpf-tile:has(input:disabled) input { cursor: default; }
.hpf-colortiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.hpf-colortile { display: grid; gap: 6px; min-width: 0; padding: 6px 6px 7px; border: 1px solid var(--hpf-line); border-radius: 8px; background: var(--hpf-surface); }
.hpf-colortile > .hpf-colortile-swatch { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 3px 8px 3px 3px; border: 1px solid var(--hpf-line); border-radius: 6px; font-size: .875rem; font-weight: 500; line-height: 1.25; }
.hpf-colortile > .hpf-colortile-swatch > span { min-width: 0; overflow-wrap: anywhere; }
.hpf-colortile > .hpf-colortile-swatch > hp-color-opacity { flex: none; }
.hpf-colortile-meta { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.hpf-colortile > .hpf-colortile-swatch { position: relative; min-height: 48px; border: 1px solid var(--hpf-line); border-radius: 6px; font-size: .875rem; font-weight: 500; line-height: 1.25; }
.hpf-colortile > .hpf-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; }
.hpf-colortile > .hpf-colortile-swatch > hp-color-opacity { position: absolute; inset: 0; }
.hpf-colortile-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; }
.hpf-colortile-meta .hpf-hex { font-size: .8125rem; }
.hpf-colortile-meta .hpf-unit { height: 32px; }
.hpf-colortile-meta .hpf-unit > input { width: 3.2em; min-width: 3em; padding: 4px 4px 4px 7px; font-size: .8125rem; }
.hpf-colortile-meta .hpf-unit > input { width: 3.6em; min-width: 3.6em; padding: 4px 4px 4px 7px; font-size: .8125rem; }
.hpf-colortile-meta .hpf-unit > input[type='number'] { appearance: textfield; }
.hpf-colortile-meta .hpf-unit > input[type='number']::-webkit-inner-spin-button,
.hpf-colortile-meta .hpf-unit > input[type='number']::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.hpf-colortile-meta .hpf-unit > span { padding: 0 7px 0 0; font-size: .8125rem; }
.hpf-colorfield {
display: flex;
@@ -263,6 +266,9 @@
.hpf-colorfield > .hpf-opacity { display: flex; align-items: center; gap: 8px; font-size: .875rem; color: var(--hpf-muted); }
.hpf-colorfield > .hpf-opacity > .hpf-unit { height: 38px; }
.hpf-colorfield > .hpf-opacity > .hpf-unit > input { width: 4.8em; min-width: 4.8em; }
.hpf-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 8px; min-width: 0; }
.hpf-actions .btn { box-sizing: border-box; min-height: 44px; max-width: 100%; white-space: normal; text-align: left; }
.hpf-actions .backupupload { max-width: 100%; }
.hpf-colorrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 16px; min-height: 56px; }
.hpf-colorrow > .hpf-colorfield { justify-self: end; }
.hpf-colorrow > .hpf-labelrow { min-height: 0; }
@@ -344,9 +350,14 @@
.hpf-toolbar > .hpf-input { flex: 1 1 200px; width: auto; }
.hpf-check { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; font-size: .875rem; color: var(--hpf-muted); cursor: pointer; white-space: nowrap; }
.hpf-check > input { width: 18px; height: 18px; margin: 0; accent-color: var(--hpf-accent); cursor: pointer; }
.hpf-iconfield { display: flex; align-items: center; gap: 8px; }
.hpf-iconfield > .hpf-input, .hpf-iconfield > ha-icon-picker { flex: 1 1 auto; min-width: 0; }
.hpf-iconpreview { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 44px; width: 44px; height: 44px; border: 1px solid var(--hpf-line); border-radius: 7px; background: var(--hpf-canvas); color: var(--hpf-muted); }
.hpf-iconfield { display: flex; align-items: center; gap: 8px; min-width: 0; }
.hpf-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(--hpf-line); border-radius: 7px; background: var(--hpf-canvas); }
.hpf-iconfield-control:focus-within { outline: 2px solid var(--hpf-accent); outline-offset: 2px; }
.hpf-iconfield-control > .hpf-input, .hpf-iconfield-control > ha-icon-picker { flex: 1 1 auto; min-width: 0; width: 100%; }
hp-dialog .hpf-form .hpf-iconfield-control > .hpf-input { min-height: 42px; height: 42px; border: 0; background: transparent; }
.hpf-iconfield-control > .hpf-input:focus { outline: 0; }
.hpf-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; }
.hpf-iconpreview { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 42px; width: 42px; height: 42px; color: var(--hpf-muted); }
.hpf-mono { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .8125rem; }
.hpf-hint > .hpf-link { padding: 0; }
.hpf-hint ha-icon { --mdc-icon-size: 16px; display: inline-flex; vertical-align: -3px; }
test/fixtures/form-kit-card-dialog.css
Vendored
+19 -8
View File
@@ -223,13 +223,16 @@
.hpf-tile:has(input:disabled) input { cursor: default; }
.hpf-colortiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.hpf-colortile { display: grid; gap: 6px; min-width: 0; padding: 6px 6px 7px; border: 1px solid var(--hpf-line); border-radius: 8px; background: var(--hpf-surface); }
.hpf-colortile > .hpf-colortile-swatch { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 3px 8px 3px 3px; border: 1px solid var(--hpf-line); border-radius: 6px; font-size: .875rem; font-weight: 500; line-height: 1.25; }
.hpf-colortile > .hpf-colortile-swatch > span { min-width: 0; overflow-wrap: anywhere; }
.hpf-colortile > .hpf-colortile-swatch > hp-color-opacity { flex: none; }
.hpf-colortile-meta { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.hpf-colortile > .hpf-colortile-swatch { position: relative; min-height: 48px; border: 1px solid var(--hpf-line); border-radius: 6px; font-size: .875rem; font-weight: 500; line-height: 1.25; }
.hpf-colortile > .hpf-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; }
.hpf-colortile > .hpf-colortile-swatch > hp-color-opacity { position: absolute; inset: 0; }
.hpf-colortile-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; }
.hpf-colortile-meta .hpf-hex { font-size: .8125rem; }
.hpf-colortile-meta .hpf-unit { height: 32px; }
.hpf-colortile-meta .hpf-unit > input { width: 3.2em; min-width: 3em; padding: 4px 4px 4px 7px; font-size: .8125rem; }
.hpf-colortile-meta .hpf-unit > input { width: 3.6em; min-width: 3.6em; padding: 4px 4px 4px 7px; font-size: .8125rem; }
.hpf-colortile-meta .hpf-unit > input[type='number'] { appearance: textfield; }
.hpf-colortile-meta .hpf-unit > input[type='number']::-webkit-inner-spin-button,
.hpf-colortile-meta .hpf-unit > input[type='number']::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.hpf-colortile-meta .hpf-unit > span { padding: 0 7px 0 0; font-size: .8125rem; }
.hpf-colorfield {
display: flex;
@@ -249,6 +252,9 @@
.hpf-colorfield > .hpf-opacity { display: flex; align-items: center; gap: 8px; font-size: .875rem; color: var(--hpf-muted); }
.hpf-colorfield > .hpf-opacity > .hpf-unit { height: 38px; }
.hpf-colorfield > .hpf-opacity > .hpf-unit > input { width: 4.8em; min-width: 4.8em; }
.hpf-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 8px; min-width: 0; }
.hpf-actions .btn { box-sizing: border-box; min-height: 44px; max-width: 100%; white-space: normal; text-align: left; }
.hpf-actions .backupupload { max-width: 100%; }
.hpf-colorrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 16px; min-height: 56px; }
.hpf-colorrow > .hpf-colorfield { justify-self: end; }
.hpf-colorrow > .hpf-labelrow { min-height: 0; }
@@ -330,9 +336,14 @@
.hpf-toolbar > .hpf-input { flex: 1 1 200px; width: auto; }
.hpf-check { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; font-size: .875rem; color: var(--hpf-muted); cursor: pointer; white-space: nowrap; }
.hpf-check > input { width: 18px; height: 18px; margin: 0; accent-color: var(--hpf-accent); cursor: pointer; }
.hpf-iconfield { display: flex; align-items: center; gap: 8px; }
.hpf-iconfield > .hpf-input, .hpf-iconfield > ha-icon-picker { flex: 1 1 auto; min-width: 0; }
.hpf-iconpreview { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 44px; width: 44px; height: 44px; border: 1px solid var(--hpf-line); border-radius: 7px; background: var(--hpf-canvas); color: var(--hpf-muted); }
.hpf-iconfield { display: flex; align-items: center; gap: 8px; min-width: 0; }
.hpf-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(--hpf-line); border-radius: 7px; background: var(--hpf-canvas); }
.hpf-iconfield-control:focus-within { outline: 2px solid var(--hpf-accent); outline-offset: 2px; }
.hpf-iconfield-control > .hpf-input, .hpf-iconfield-control > ha-icon-picker { flex: 1 1 auto; min-width: 0; width: 100%; }
hp-dialog .hpf-form .hpf-iconfield-control > .hpf-input { min-height: 42px; height: 42px; border: 0; background: transparent; }
.hpf-iconfield-control > .hpf-input:focus { outline: 0; }
.hpf-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; }
.hpf-iconpreview { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 42px; width: 42px; height: 42px; color: var(--hpf-muted); }
.hpf-mono { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .8125rem; }
.hpf-hint > .hpf-link { padding: 0; }
.hpf-hint ha-icon { --mdc-icon-size: 16px; display: inline-flex; vertical-align: -3px; }
test/form-kit.test.mjs
+2
View File
@@ -125,6 +125,8 @@ test('#597 собранный лист панели совпадает с зам
* это объявлено в issue, а не заодно с правкой панели (К9/AC11 — тест выше).
* #602 намеренно выровнял тумблеры, поля прозрачности и строки шкал; фикстуры
* снова пересняты вместе с объявленным изменением UI.
* #605 меняет только объявленную полировку плиток, кнопок Data и поля иконки;
* лист панели по-прежнему остаётся замороженным без изменений.
*/
test('#597/#600 лист диалогов карточки совпадает с объявленным', () => {
assert.equal(formKitCss(CARD_DIALOG_FORM_KIT, { withSwitch: false }), FROZEN_CARD_KIT_CSS);
test/i18n.test.mjs
+2
View File
@@ -532,6 +532,8 @@ test('i18n: French values equal to English are explicitly reviewed (#371)', () =
'gs.about_version',
'gs.north_letter',
'gs.unit_m',
// #605: Rotation is the same noun in English and French.
'marker.angle_label',
'marker.desc_label',
'marker.preview.multiple_sources',
'marker.value_badge_attr_current_position',