Home-Assistant/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-12-20 02:38:53 +00:00
Code Activity

Move duplicate css to shared styles for state control toggles (#27377)

Browse Source
This commit is contained in:
Aidan Timson
2025-10-06 13:48:14 +01:00
committed by GitHub
parent bcfe5add33
commit e66724ca9e
5 changed files with 82 additions and 161 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
src/resources/state-control-styles.ts Normal file
View File

@@ -0,0 +1,67 @@
import { css } from "lit";
/**
* Shared styles for state control toggle components
* Used by: cover, valve, lock, fan, light toggle controls
*/
export const stateControlToggleStyle = css`
ha-control-switch {
height: 45vh;
max-height: 320px;
min-height: 200px;
--control-switch-thickness: 130px;
--control-switch-border-radius: var(--ha-border-radius-6xl);
--control-switch-padding: 6px;
--mdc-icon-size: 24px;
}
.buttons {
display: flex;
flex-direction: column;
width: 130px;
height: 45vh;
max-height: 320px;
min-height: 200px;
padding: 6px;
box-sizing: border-box;
}
ha-control-button {
flex: 1;
width: 100%;
--control-button-border-radius: var(--ha-border-radius-6xl);
--mdc-icon-size: 24px;
}
ha-control-button.active {
--control-button-icon-color: white;
--control-button-background-color: var(--color);
--control-button-focus-color: var(--color);
--control-button-background-opacity: 1;
}
ha-control-button:not(:last-child) {
margin-bottom: 6px;
}
`;
/**
* Additional styles for components with pulse animation (like lock toggle)
*/
export const stateControlPulseStyle = css`
@keyframes pulse {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.pulse {
animation: pulse 1s infinite;
}
`;

39
src/state-control/cover/ha-state-control-cover-toggle.ts
View File

@@ -1,6 +1,6 @@
import type { HassEntity } from "home-assistant-js-websocket";
import type { TemplateResult } from "lit";
import { css, html, LitElement } from "lit";
import { html, LitElement } from "lit";
import { customElement, property } from "lit/decorators";
import { classMap } from "lit/directives/class-map";
import { styleMap } from "lit/directives/style-map";
@@ -10,6 +10,7 @@ import "../../components/ha-control-switch";
import "../../components/ha-state-icon";
import { UNAVAILABLE, UNKNOWN } from "../../data/entity";
import { forwardHaptic } from "../../data/haptics";
import { stateControlToggleStyle } from "../../resources/state-control-styles";
import type { HomeAssistant } from "../../types";
@customElement("ha-state-control-cover-toggle")
@@ -137,41 +138,7 @@ export class HaStateControlCoverToggle extends LitElement {
`;
}
static styles = css`
ha-control-switch {
height: 45vh;
max-height: 320px;
min-height: 200px;
--control-switch-thickness: 130px;
--control-switch-border-radius: var(--ha-border-radius-6xl);
--control-switch-padding: 6px;
--mdc-icon-size: 24px;
}
.buttons {
display: flex;
flex-direction: column;
width: 130px;
height: 45vh;
max-height: 320px;
min-height: 200px;
padding: 6px;
box-sizing: border-box;
}
ha-control-button {
flex: 1;
width: 100%;
--control-button-border-radius: var(--ha-border-radius-6xl);
--mdc-icon-size: 24px;
}
ha-control-button.active {
--control-button-icon-color: white;
--control-button-background-color: var(--color);
--control-button-background-opacity: 1;
}
ha-control-button:not(:last-child) {
margin-bottom: 6px;
}
`;
static styles = [stateControlToggleStyle];
}
declare global {

40
src/state-control/ha-state-control-toggle.ts
View File

@@ -1,7 +1,7 @@
import { mdiFlash, mdiFlashOff } from "@mdi/js";
import type { HassEntity } from "home-assistant-js-websocket";
import type { TemplateResult } from "lit";
import { LitElement, css, html } from "lit";
import { LitElement, html } from "lit";
import { customElement, property } from "lit/decorators";
import { classMap } from "lit/directives/class-map";
import { styleMap } from "lit/directives/style-map";
@@ -12,6 +12,7 @@ import "../components/ha-control-button";
import "../components/ha-control-switch";
import { UNAVAILABLE, UNKNOWN } from "../data/entity";
import { forwardHaptic } from "../data/haptics";
import { stateControlToggleStyle } from "../resources/state-control-styles";
import type { HomeAssistant } from "../types";
@customElement("ha-state-control-toggle")
@@ -128,42 +129,7 @@ export class HaStateControlToggle extends LitElement {
`;
}
static styles = css`
ha-control-switch {
height: 45vh;
max-height: 320px;
min-height: 200px;
--control-switch-thickness: 130px;
--control-switch-border-radius: var(--ha-border-radius-6xl);
--control-switch-padding: 6px;
--mdc-icon-size: 24px;
}
.buttons {
display: flex;
flex-direction: column;
width: 130px;
height: 45vh;
max-height: 320px;
min-height: 200px;
padding: 6px;
box-sizing: border-box;
}
ha-control-button {
flex: 1;
width: 100%;
--control-button-border-radius: var(--ha-border-radius-6xl);
--mdc-icon-size: 24px;
}
ha-control-button.active {
--control-button-icon-color: white;
--control-button-background-color: var(--color);
--control-button-focus-color: var(--color);
--control-button-background-opacity: 1;
}
ha-control-button:not(:last-child) {
margin-bottom: 6px;
}
`;
static styles = [stateControlToggleStyle];
}
declare global {

57
src/state-control/lock/ha-state-control-lock-toggle.ts
View File

@@ -1,5 +1,5 @@
import type { PropertyValues, TemplateResult } from "lit";
import { css, html, LitElement } from "lit";
import { html, LitElement } from "lit";
import { customElement, property, state } from "lit/decorators";
import { classMap } from "lit/directives/class-map";
import { styleMap } from "lit/directives/style-map";
@@ -12,6 +12,10 @@ import { UNAVAILABLE, UNKNOWN } from "../../data/entity";
import { forwardHaptic } from "../../data/haptics";
import type { LockEntity } from "../../data/lock";
import { callProtectedLockService } from "../../data/lock";
import {
stateControlToggleStyle,
stateControlPulseStyle,
} from "../../resources/state-control-styles";
import type { HomeAssistant } from "../../types";
declare global {
@@ -145,56 +149,7 @@ export class HaStateControlLockToggle extends LitElement {
`;
}
static styles = css`
@keyframes pulse {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
ha-control-switch {
height: 45vh;
max-height: 320px;
min-height: 200px;
--control-switch-thickness: 130px;
--control-switch-border-radius: var(--ha-border-radius-6xl);
--control-switch-padding: 6px;
--mdc-icon-size: 24px;
}
.pulse {
animation: pulse 1s infinite;
}
.buttons {
display: flex;
flex-direction: column;
width: 130px;
height: 45vh;
max-height: 320px;
min-height: 200px;
padding: 6px;
box-sizing: border-box;
}
ha-control-button {
flex: 1;
width: 100%;
--control-button-border-radius: var(--ha-border-radius-6xl);
--mdc-icon-size: 24px;
}
ha-control-button.active {
--control-button-icon-color: white;
--control-button-background-color: var(--color);
--control-button-focus-color: var(--color);
--control-button-background-opacity: 1;
}
ha-control-button:not(:last-child) {
margin-bottom: 6px;
}
`;
static styles = [stateControlToggleStyle, stateControlPulseStyle];
}
declare global {

40
src/state-control/valve/ha-state-control-valve-toggle.ts
View File

@@ -1,6 +1,6 @@
import type { HassEntity } from "home-assistant-js-websocket";
import type { TemplateResult } from "lit";
import { css, html, LitElement } from "lit";
import { html, LitElement } from "lit";
import { customElement, property } from "lit/decorators";
import { classMap } from "lit/directives/class-map";
import { styleMap } from "lit/directives/style-map";
@@ -10,6 +10,7 @@ import "../../components/ha-control-switch";
import "../../components/ha-state-icon";
import { UNAVAILABLE, UNKNOWN } from "../../data/entity";
import { forwardHaptic } from "../../data/haptics";
import { stateControlToggleStyle } from "../../resources/state-control-styles";
import type { HomeAssistant } from "../../types";
@customElement("ha-state-control-valve-toggle")
@@ -137,42 +138,7 @@ export class HaStateControlValveToggle extends LitElement {
`;
}
static styles = css`
ha-control-switch {
height: 45vh;
max-height: 320px;
min-height: 200px;
--control-switch-thickness: 130px;
--control-switch-border-radius: var(--ha-border-radius-6xl);
--control-switch-padding: 6px;
--mdc-icon-size: 24px;
}
.buttons {
display: flex;
flex-direction: column;
width: 130px;
height: 45vh;
max-height: 320px;
min-height: 200px;
padding: 6px;
box-sizing: border-box;
}
ha-control-button {
flex: 1;
width: 100%;
--control-button-border-radius: var(--ha-border-radius-6xl);
--mdc-icon-size: 24px;
}
ha-control-button.active {
--control-button-icon-color: white;
--control-button-background-color: var(--color);
--control-button-focus-color: var(--color);
--control-button-background-opacity: 1;
}
ha-control-button:not(:last-child) {
margin-bottom: 6px;
}
`;
static styles = [stateControlToggleStyle];
}
declare global {