TheThomaas/ha-cookcli
1
0
Fork 0
Code Issues 2 Pull requests Actions Packages Projects 1 Releases 6 Wiki Activity

Update cookcli-recipe-strategy.js

Browse source
This commit is contained in:
TheThomaas 2026-09-24 13:43:16 +02:00
parent cdf11290a0
commit df8cffe74c
1 changed files with 43 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

54
custom_components/cookcli/www/cookcli-recipe-strategy.js
View file

@ -198,12 +198,7 @@ class CookCliRecipeViewStrategy extends HTMLElement {
} }
} }
static _navButton(entity, targetIndex, label, icon, style = null) { static _navButton(entity, targetIndex, label, icon, accent = false) {
let card_mod = { card_mod: `style: :host { position:absolute; bottom:0; right:0; }` };
if (label == "Précédent") {
card_mod = { card_mod: `style: :host { position:absolute; bottom:0; left:0; }` };
}
return { return {
type: "button", type: "button",
name: label, name: label,
@ -214,7 +209,20 @@ class CookCliRecipeViewStrategy extends HTMLElement {
target: { entity_id: entity }, target: { entity_id: entity },
data: { value: targetIndex }, data: { value: targetIndex },
}, },
...card_mod card_mod: {
style: `
ha-card {
border-radius: 999px;
--ha-card-border-width: 0;
box-shadow: none;
${accent
? `background: var(--primary-color);
--primary-text-color: var(--text-primary-color, #fff);
--paper-item-icon-color: var(--text-primary-color, #fff);`
: `background: var(--secondary-background-color);`}
}
`,
},
}; };
} }
@ -264,7 +272,7 @@ class CookCliRecipeViewStrategy extends HTMLElement {
} }
if (config.step_entity && stepCount > 0) { if (config.step_entity && stepCount > 0) {
rightCards.push(this._navButton(config.step_entity, 1, "Commencer", "mdi:play")); rightCards.push(this._navButton(config.step_entity, 1, "Commencer", "mdi:play", true));
} }
cards.push({ type: "vertical-stack", cards: rightCards }); cards.push({ type: "vertical-stack", cards: rightCards });
@ -330,15 +338,39 @@ class CookCliRecipeViewStrategy extends HTMLElement {
]; ];
if (!isLast) { if (!isLast) {
navButtons.push( navButtons.push(
this._navButton(config.step_entity, tabIndex + 1, "Suivant", "mdi:arrow-right") this._navButton(config.step_entity, tabIndex + 1, "Suivant", "mdi:arrow-right", true)
); );
} }
cards.push({ type: "horizontal-stack", cards: navButtons }); cards.push({
type: "horizontal-stack",
cards: navButtons,
card_mod: {
style: `
:host {
position: fixed;
bottom: calc(16px + env(safe-area-inset-bottom, 0px));
left: 50%;
transform: translateX(-50%);
width: min(420px, calc(100vw - 32px));
z-index: 5;
padding: 8px;
border-radius: 999px;
background: color-mix(in srgb, var(--card-background-color) 80%, transparent);
backdrop-filter: blur(10px);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}
`,
},
});
} }
const tab = { const tab = {
name: section.name ? `${section.name} ${step.number ?? ""}`.trim() : `Étape ${tabIndex}`, name: section.name ? `${section.name} ${step.number ?? ""}`.trim() : `Étape ${tabIndex}`,
card: { type: "vertical-stack", cards }, card: {
type: "vertical-stack",
cards,
card_mod: { style: ":host { display: block; padding-bottom: 96px; }" },
},
}; };
if (config.step_entity) tab.auto_select = { entity: config.step_entity, state: `${tabIndex}.0` }; if (config.step_entity) tab.auto_select = { entity: config.step_entity, state: `${tabIndex}.0` };
return tab; return tab;