mirror of
https://github.com/Matysh/houseplan-card
synced 2026-07-31 16:38:31 +00:00
device icon: the size multiplier scales the glyph, not just the badge
User report via the owner: change a marker's size and the icon stays at its default size — a big empty box around a small glyph. The badge, ripple and value badges all derive from --dev-size (base size x per-device multiplier), but --mdc-icon-size was pinned to the BASE --icon-size, so the multiplier never reached the glyph. One calc argument: --dev-size. New smoke_icon_scale: at size 3 the glyph grows with the badge and keeps the 0.62 proportion. Inventory: 147 / 51 / 43 / 69.
This commit is contained in:
@@ -0,0 +1,38 @@
|
|||||||
|
// Множитель «размер значка» обязан масштабировать ГЛИФ вместе с подложкой:
|
||||||
|
// --mdc-icon-size считался от базового --icon-size, и «увеличенный» значок
|
||||||
|
// был пустой рамкой вокруг дефолтной иконки (репорт пользователя, 2026-07-29).
|
||||||
|
import { launch, checkAll, finish } from './serve.mjs';
|
||||||
|
const { page, browser } = await launch();
|
||||||
|
const out = await page.evaluate(async () => {
|
||||||
|
const o = {};
|
||||||
|
const c = window.__card;
|
||||||
|
const sr = () => c.shadowRoot || c.renderRoot;
|
||||||
|
const d = c._devices.find((x) => x.space === 'f1' && x.bindingKind === 'device');
|
||||||
|
const glyphW = () => {
|
||||||
|
const el = [...sr().querySelectorAll('.dev')].find((e) => !e.classList.contains('ghost'));
|
||||||
|
const ic = el?.querySelector('ha-icon');
|
||||||
|
return ic ? ic.getBoundingClientRect().width : 0;
|
||||||
|
};
|
||||||
|
const badgeW = () => {
|
||||||
|
const el = [...sr().querySelectorAll('.dev')].find((e) => !e.classList.contains('ghost'));
|
||||||
|
return el ? el.getBoundingClientRect().width : 0;
|
||||||
|
};
|
||||||
|
// базовый размер
|
||||||
|
const g1 = glyphW(), b1 = badgeW();
|
||||||
|
// множитель ×3 на всех авто-устройствах через маркер первого
|
||||||
|
c._serverCfg.markers = (c._serverCfg.markers || []).filter((m) => m.id !== d.id);
|
||||||
|
c._serverCfg.markers.push({ id: d.id, binding: 'device:' + d.bindingRef, size: 3 });
|
||||||
|
c._cfgEpoch++; c._regSignature = '';
|
||||||
|
c._maybeRebuildDevices(); c.requestUpdate(); await c.updateComplete;
|
||||||
|
await new Promise((r) => setTimeout(r, 100));
|
||||||
|
const scaled = [...sr().querySelectorAll('.dev')].find((e) => (e.getAttribute('style') || '').includes('--dev-scale:3'));
|
||||||
|
const g3 = scaled?.querySelector('ha-icon')?.getBoundingClientRect().width || 0;
|
||||||
|
const b3 = scaled?.getBoundingClientRect().width || 0;
|
||||||
|
o.badgeScales = b3 > b1 * 2.5;
|
||||||
|
o.glyphScalesWithBadge = g3 > g1 * 2.5; // раньше глиф оставался базовым
|
||||||
|
o.glyphFillsBadge = g3 / b3 > 0.45 && g3 / b3 < 0.8; // пропорция сохранена
|
||||||
|
c._serverCfg.markers = c._serverCfg.markers.filter((m) => m.id !== d.id);
|
||||||
|
c._cfgEpoch++; c._regSignature = ''; c._maybeRebuildDevices();
|
||||||
|
return o;
|
||||||
|
});
|
||||||
|
await finish(browser, checkAll(out));
|
||||||
@@ -942,7 +942,11 @@ const t=globalThis,e=t.ShadowRoot&&(void 0===t.ShadyCSS||t.ShadyCSS.nativeShadow
|
|||||||
z-index: 2;
|
z-index: 2;
|
||||||
}
|
}
|
||||||
.dev ha-icon {
|
.dev ha-icon {
|
||||||
--mdc-icon-size: calc(var(--icon-size, 2.5cqw) * 0.62);
|
/* from --dev-size, NOT --icon-size: the per-device size multiplier must
|
||||||
|
scale the GLYPH with its badge. Pinned to the base size, "make this
|
||||||
|
icon bigger" grew an empty box around a default-size glyph (user
|
||||||
|
report via the owner, 2026-07-29). */
|
||||||
|
--mdc-icon-size: calc(var(--dev-size, var(--icon-size, 2.5cqw)) * 0.62);
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
|||||||
Vendored
+5
-1
@@ -942,7 +942,11 @@ const t=globalThis,e=t.ShadowRoot&&(void 0===t.ShadyCSS||t.ShadyCSS.nativeShadow
|
|||||||
z-index: 2;
|
z-index: 2;
|
||||||
}
|
}
|
||||||
.dev ha-icon {
|
.dev ha-icon {
|
||||||
--mdc-icon-size: calc(var(--icon-size, 2.5cqw) * 0.62);
|
/* from --dev-size, NOT --icon-size: the per-device size multiplier must
|
||||||
|
scale the GLYPH with its badge. Pinned to the base size, "make this
|
||||||
|
icon bigger" grew an empty box around a default-size glyph (user
|
||||||
|
report via the owner, 2026-07-29). */
|
||||||
|
--mdc-icon-size: calc(var(--dev-size, var(--icon-size, 2.5cqw)) * 0.62);
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
|||||||
@@ -244,6 +244,9 @@ Run the *core flows* (marked ★ below) in each environment at least once per mi
|
|||||||
at 70% of a device icon and zooming WITH the plan; the small metric rows
|
at 70% of a device icon and zooming WITH the plan; the small metric rows
|
||||||
under the room name now show in the plan editor too
|
under the room name now show in the plan editor too
|
||||||
[auto: smoke_room_cards gearDetached/plainInPlan]
|
[auto: smoke_room_cards gearDetached/plainInPlan]
|
||||||
|
- [ ] Icon size multiplier scales the glyph (dev): set a marker's size to 3 —
|
||||||
|
the icon inside grows with the badge instead of staying default
|
||||||
|
[auto: smoke_icon_scale]
|
||||||
- [ ] Auto-grid parity (v1.51.2, HP-1511-01): with an empty layout, a visible
|
- [ ] Auto-grid parity (v1.51.2, HP-1511-01): with an empty layout, a visible
|
||||||
device among hidden ones sits at the same spot on both cards
|
device among hidden ones sits at the same spot on both cards
|
||||||
[auto: smoke_hidden_flag autoGridParity]
|
[auto: smoke_hidden_flag autoGridParity]
|
||||||
|
|||||||
+5
-1
@@ -939,7 +939,11 @@ export const cardStyles = css`
|
|||||||
z-index: 2;
|
z-index: 2;
|
||||||
}
|
}
|
||||||
.dev ha-icon {
|
.dev ha-icon {
|
||||||
--mdc-icon-size: calc(var(--icon-size, 2.5cqw) * 0.62);
|
/* from --dev-size, NOT --icon-size: the per-device size multiplier must
|
||||||
|
scale the GLYPH with its badge. Pinned to the base size, "make this
|
||||||
|
icon bigger" grew an empty box around a default-size glyph (user
|
||||||
|
report via the owner, 2026-07-29). */
|
||||||
|
--mdc-icon-size: calc(var(--dev-size, var(--icon-size, 2.5cqw)) * 0.62);
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
|||||||
Reference in New Issue
Block a user