Home-Assistant/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2026-04-17 15:45:43 +01:00
Code Activity

Add label for toggle button in area strategy (#29949)

Browse Source
This commit is contained in:
Paul Bottein
2026-03-03 13:34:05 +01:00
committed by GitHub
parent a4da7b26ea
commit d248f5614f
5 changed files with 15 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/ha-control-button.ts
View File

@@ -33,6 +33,7 @@ export class HaControlButton extends LitElement {
--control-button-background-color: var(--disabled-color);
--control-button-background-opacity: 0.2;
--control-button-border-radius: var(--ha-border-radius-md);
--control-button-font-weight: var(--ha-font-weight-medium);
--control-button-padding: 8px;
--mdc-icon-size: 20px;
--ha-ripple-color: var(--secondary-text-color);
@@ -59,7 +60,7 @@ export class HaControlButton extends LitElement {
box-sizing: border-box;
line-height: inherit;
font-family: var(--ha-font-family-body);
font-weight: var(--ha-font-weight-medium);
font-weight: var(--control-button-font-weight);
outline: none;
overflow: hidden;
background: none;

2
src/components/ha-heading-badge.ts
View File

@@ -38,7 +38,7 @@ export class HaBadge extends LitElement {
font-weight: var(--ha-heading-badge-font-weight, 400);
line-height: var(--ha-heading-badge-line-height, 20px);
letter-spacing: 0.1px;
--mdc-icon-size: 14px;
--mdc-icon-size: 16px;
}
::slotted([slot="icon"]) {
--ha-icon-display: block;

9
src/panels/light/strategies/light-view-strategy.ts
View File

@@ -17,6 +17,7 @@ import {
SMALL_SCREEN_CONDITION,
} from "../../lovelace/strategies/helpers/screen-conditions";
import type { ToggleGroupCardConfig } from "../../lovelace/cards/types";
import type { ButtonHeadingBadgeConfig } from "../../lovelace/heading-badges/types";
export interface LightViewStrategyConfig {
type: "light";
@@ -75,6 +76,7 @@ const processAreasForLight = (
{
type: "button",
icon: "mdi:power",
text: hass.localize("ui.panel.lovelace.strategy.light.off"),
tap_action: {
action: "perform-action",
perform_action: "light.turn_on",
@@ -89,11 +91,12 @@ const processAreasForLight = (
conditions: [anyOnCondition],
},
],
},
} satisfies ButtonHeadingBadgeConfig,
{
type: "button",
icon: "mdi:power",
color: "amber",
color: "orange",
text: hass.localize("ui.panel.lovelace.strategy.light.on"),
tap_action: {
action: "perform-action",
perform_action: "light.turn_off",
@@ -102,7 +105,7 @@ const processAreasForLight = (
},
},
visibility: [SMALL_SCREEN_CONDITION, anyOnCondition],
},
} satisfies ButtonHeadingBadgeConfig,
] satisfies LovelaceCardConfig[],
});

4
src/panels/lovelace/heading-badges/hui-button-heading-badge.ts
View File

@@ -108,7 +108,7 @@ export class HuiButtonHeadingBadge
var(--ha-border-radius-pill)
);
--control-button-padding: 0;
--mdc-icon-size: var(--ha-heading-badge-icon-size, 14px);
--mdc-icon-size: var(--ha-heading-badge-icon-size, 16px);
width: auto;
height: var(--ha-heading-badge-size, 26px);
min-width: var(--ha-heading-badge-size, 26px);
@@ -121,6 +121,8 @@ export class HuiButtonHeadingBadge
--control-button-icon-color: var(--color);
--control-button-background-color: var(--color);
--control-button-focus-color: var(--color);
--control-button-background-opacity: 0.2;
--control-button-font-weight: var(--ha-font-weight-bold);
--ha-ripple-color: var(--color);
}
.content {

4
src/translations/en.json
View File

@@ -8089,7 +8089,9 @@
},
"light": {
"lights": "Lights",
"other_lights": "Other lights"
"other_lights": "Other lights",
"on": "On",
"off": "Off"
},
"security": {
"devices": "Devices",