veenm/ha-dashboard-studio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Dashboard Studio 2.3.1: light colours behind a palette button

Browse Source 
- The light card's colours wait behind a palette button next to the
  brightness; picking a colour folds them away again

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Mel van Veen
2026-10-27 11:47:13 +01:00
parent 2e929b55bb
commit 095b23481e
7 changed files with 33 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dashboard_studio/web/widgets.js
+8 -3
View File
@@ -259,14 +259,19 @@
entities: (c, ha) => [c.entity, ...(ha?.states[c.entity]?.attributes.entity_id || [])].filter(Boolean),
// The card is the lamp: when it's on, the brightness fills the card from the left in the lamp's colour,
// and dragging anywhere across it dims. A group adds a row per light, each its own little fader.
render(c, { ha }) {
render(c, { ha, cache }) {
const s = ha.states[c.entity];
if (!s) return missing(c.entity, "a light");
const members = c.members !== false && Array.isArray(s.attributes.entity_id) ? s.attributes.entity_id.filter((e) => ha.states[e]) : [];
const name = friendly(s, c.name);
const onCount = members.filter((e) => ha.states[e].state === "on").length;
const sub = members.length ? (onCount ? t("{0} of {1} on", onCount, members.length) : t("All off")) : lightNote(s);
const colors = c.colors !== false && !members.length ? swatches(c.entity, s, { compact: true }) : "";
// The colours wait behind a palette button; opened, they take the figure's place until one is picked.
const hasColors = c.colors !== false && (canTemp(s) || canColor(s));
const open = hasColors && cache.colors;
const foot = open
? `<div class="lt-colors">${swatches(c.entity, s)}<button class="lt-pal wbtn" data-act="light-colors" aria-expanded="true" aria-label="${t("Close colors")}">${Icons.svg("close")}</button></div>`
: `<span class="lt-big num">${esc(bigText(s))}</span>${hasColors ? `<button class="lt-pal wbtn" data-act="light-colors" aria-expanded="false" aria-label="${esc(t("Colors for {0}", name))}">${Icons.svg("palette")}</button>` : ""}`;
const rows = members.map((eid) => {
const m = ha.states[eid];
@@ -281,7 +286,7 @@
<span class="lt-title"><span class="name">${esc(name)}</span><span class="lt-sub">${esc(sub)}</span></span>
<button class="light-switch wbtn" role="switch" aria-checked="${isOn(s)}" data-act="toggle" data-e="${esc(c.entity)}" aria-label="${esc(name)}"><span class="switch"></span></button>
</div>
<div class="lt-foot"><span class="lt-big num">${esc(bigText(s))}</span>${colors}</div>`, "lt-main");
<div class="lt-foot">${foot}</div>`, "lt-main");
return `<div class="lt ${members.length ? "group" : ""} ${isOn(s) ? "on" : ""}">${main}${rows ? `<div class="lt-rows" role="group" aria-label="${t("Lights in {0}", esc(name))}">${rows}</div>` : ""}</div>`;
},
lit: (c, { ha }) => litKind(ha.states[c.entity]),