jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-28 19:56:42 +00:00
Code Issues Packages Projects Releases Wiki Activity

Rename bar components to control components (#15508)

Browse Source 
* Rename ha-bar-slider to ha-control-slider

* Rename ha-bar-switch to ha-control-switch

* Rename ha-bar-button to ha-control-button

* Update tile features
This commit is contained in:
Paul Bottein 2023-02-20 17:34:37 +01:00 committed by GitHub
parent 5f9f51f92d
commit bef586efb3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
17 changed files with 177 additions and 173 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
gallery/src/pages/components/ha-bar-button.markdown
View File

@ -1,3 +0,0 @@
---
title: Bar Button
---

3
gallery/src/pages/components/ha-bar-slider.markdown
View File

@ -1,3 +0,0 @@
---
title: Bar Slider
---

3
gallery/src/pages/components/ha-bar-switch.markdown
View File

@ -1,3 +0,0 @@
---
title: Bar Switch
---

3
gallery/src/pages/components/ha-control-button.markdown Normal file
View File

@ -0,0 +1,3 @@
---
title: Control Button
---

65
gallery/src/pages/components/ha-bar-button.ts → gallery/src/pages/components/ha-control-button.ts
View File

@ -8,10 +8,10 @@ import { css, html, LitElement, TemplateResult } from "lit";
import { customElement } from "lit/decorators"; import { customElement } from "lit/decorators";
import { ifDefined } from "lit/directives/if-defined"; import { ifDefined } from "lit/directives/if-defined";
import { repeat } from "lit/directives/repeat"; import { repeat } from "lit/directives/repeat";
import "../../../../src/components/ha-bar-button"; import "../../../../src/components/ha-control-button";
import "../../../../src/components/ha-card"; import "../../../../src/components/ha-card";
import "../../../../src/components/ha-svg-icon"; import "../../../../src/components/ha-svg-icon";
import "../../../../src/components/ha-bar-button-group"; import "../../../../src/components/ha-control-button-group";
type Button = { type Button = {
label: string; label: string;
@ -46,7 +46,7 @@ const buttonGroups: ButtonGroup[] = [
}, },
]; ];
@customElement("demo-components-ha-bar-button") @customElement("demo-components-ha-control-button")
export class DemoHaBarButton extends LitElement { export class DemoHaBarButton extends LitElement {
protected render(): TemplateResult { protected render(): TemplateResult {
return html` return html`
@ -56,13 +56,13 @@ export class DemoHaBarButton extends LitElement {
(btn) => html` (btn) => html`
<div class="card-content"> <div class="card-content">
<pre>Config: ${JSON.stringify(btn)}</pre> <pre>Config: ${JSON.stringify(btn)}</pre>
<ha-bar-button <ha-control-button
class=${ifDefined(btn.class)} class=${ifDefined(btn.class)}
label=${ifDefined(btn.label)} label=${ifDefined(btn.label)}
disabled=${ifDefined(btn.disabled)} disabled=${ifDefined(btn.disabled)}
> >
<ha-svg-icon .path=${btn.icon || mdiLightbulb}></ha-svg-icon> <ha-svg-icon .path=${btn.icon || mdiLightbulb}></ha-svg-icon>
</ha-bar-button> </ha-control-button>
</div> </div>
` `
)} )}
@ -74,26 +74,26 @@ export class DemoHaBarButton extends LitElement {
(group) => html` (group) => html`
<div class="card-content"> <div class="card-content">
<pre>Config: ${JSON.stringify(group)}</pre> <pre>Config: ${JSON.stringify(group)}</pre>
<ha-bar-button-group class=${ifDefined(group.class)}> <ha-control-button-group class=${ifDefined(group.class)}>
<ha-bar-button> <ha-control-button>
<ha-svg-icon <ha-svg-icon
.path=${mdiFanSpeed1} .path=${mdiFanSpeed1}
label="Speed 1" label="Speed 1"
></ha-svg-icon> ></ha-svg-icon>
</ha-bar-button> </ha-control-button>
<ha-bar-button> <ha-control-button>
<ha-svg-icon <ha-svg-icon
.path=${mdiFanSpeed2} .path=${mdiFanSpeed2}
label="Speed 2" label="Speed 2"
></ha-svg-icon> ></ha-svg-icon>
</ha-bar-button> </ha-control-button>
<ha-bar-button> <ha-control-button>
<ha-svg-icon <ha-svg-icon
.path=${mdiFanSpeed3} .path=${mdiFanSpeed3}
label="Speed 3" label="Speed 3"
></ha-svg-icon> ></ha-svg-icon>
</ha-bar-button> </ha-control-button>
</ha-bar-button-group> </ha-control-button-group>
</div> </div>
` `
)} )}
@ -105,26 +105,29 @@ export class DemoHaBarButton extends LitElement {
${repeat( ${repeat(
buttonGroups, buttonGroups,
(group) => html` (group) => html`
<ha-bar-button-group vertical class=${ifDefined(group.class)}> <ha-control-button-group
<ha-bar-button> vertical
class=${ifDefined(group.class)}
>
<ha-control-button>
<ha-svg-icon <ha-svg-icon
.path=${mdiFanSpeed1} .path=${mdiFanSpeed1}
label="Speed 1" label="Speed 1"
></ha-svg-icon> ></ha-svg-icon>
</ha-bar-button> </ha-control-button>
<ha-bar-button> <ha-control-button>
<ha-svg-icon <ha-svg-icon
.path=${mdiFanSpeed2} .path=${mdiFanSpeed2}
label="Speed 2" label="Speed 2"
></ha-svg-icon> ></ha-svg-icon>
</ha-bar-button> </ha-control-button>
<ha-bar-button> <ha-control-button>
<ha-svg-icon <ha-svg-icon
.path=${mdiFanSpeed3} .path=${mdiFanSpeed3}
label="Speed 3" label="Speed 3"
></ha-svg-icon> ></ha-svg-icon>
</ha-bar-button> </ha-control-button>
</ha-bar-button-group> </ha-control-button-group>
` `
)} )}
</div> </div>
@ -150,20 +153,20 @@ export class DemoHaBarButton extends LitElement {
font-weight: 600; font-weight: 600;
} }
.custom { .custom {
--button-bar-icon-color: var(--primary-color); --control-button-icon-color: var(--primary-color);
--button-bar-background-color: var(--primary-color); --control-button-background-color: var(--primary-color);
--button-bar-background-opacity: 0.2; --control-button-background-opacity: 0.2;
--button-bar-border-radius: 18px; --control-button-border-radius: 18px;
height: 100px; height: 100px;
width: 100px; width: 100px;
} }
.custom-group { .custom-group {
--button-bar-group-thickness: 100px; --control-button-group-thickness: 100px;
--button-bar-group-border-radius: 18px; --control-button-group-border-radius: 18px;
--button-bar-group-spacing: 20px; --control-button-group-spacing: 20px;
} }
.custom-group ha-bar-button { .custom-group ha-control-button {
--button-bar-border-radius: 18px; --control-button-border-radius: 18px;
--mdc-icon-size: 32px; --mdc-icon-size: 32px;
} }
.vertical-buttons { .vertical-buttons {
@ -184,6 +187,6 @@ export class DemoHaBarButton extends LitElement {
declare global { declare global {
interface HTMLElementTagNameMap { interface HTMLElementTagNameMap {
"demo-components-ha-bar-button": DemoHaBarButton; "demo-components-ha-control-button": DemoHaBarButton;
} }
} }

3
gallery/src/pages/components/ha-control-slider.markdown Normal file
View File

@ -0,0 +1,3 @@
---
title: Control Slider
---

24
gallery/src/pages/components/ha-bar-slider.ts → gallery/src/pages/components/ha-control-slider.ts
View File

@ -2,7 +2,7 @@ import { css, html, LitElement, TemplateResult } from "lit";
import { customElement, state } from "lit/decorators"; import { customElement, state } from "lit/decorators";
import { ifDefined } from "lit/directives/if-defined"; import { ifDefined } from "lit/directives/if-defined";
import { repeat } from "lit/directives/repeat"; import { repeat } from "lit/directives/repeat";
import "../../../../src/components/ha-bar-slider"; import "../../../../src/components/ha-control-slider";
import "../../../../src/components/ha-card"; import "../../../../src/components/ha-card";
const sliders: { const sliders: {
@ -46,7 +46,7 @@ const sliders: {
}, },
]; ];
@customElement("demo-components-ha-bar-slider") @customElement("demo-components-ha-control-slider")
export class DemoHaBarSlider extends LitElement { export class DemoHaBarSlider extends LitElement {
@state() private value = 50; @state() private value = 50;
@ -86,7 +86,7 @@ export class DemoHaBarSlider extends LitElement {
<div class="card-content"> <div class="card-content">
<label id=${id}>${label}</label> <label id=${id}>${label}</label>
<pre>Config: ${JSON.stringify(config)}</pre> <pre>Config: ${JSON.stringify(config)}</pre>
<ha-bar-slider <ha-control-slider
.value=${this.value} .value=${this.value}
.mode=${config.mode} .mode=${config.mode}
class=${ifDefined(config.class)} class=${ifDefined(config.class)}
@ -94,7 +94,7 @@ export class DemoHaBarSlider extends LitElement {
@slider-moved=${this.handleSliderMoved} @slider-moved=${this.handleSliderMoved}
aria-labelledby=${id} aria-labelledby=${id}
> >
</ha-bar-slider> </ha-control-slider>
</div> </div>
</ha-card> </ha-card>
`; `;
@ -106,7 +106,7 @@ export class DemoHaBarSlider extends LitElement {
${repeat(sliders, (slider) => { ${repeat(sliders, (slider) => {
const { id, label, ...config } = slider; const { id, label, ...config } = slider;
return html` return html`
<ha-bar-slider <ha-control-slider
.value=${this.value} .value=${this.value}
.mode=${config.mode} .mode=${config.mode}
vertical vertical
@ -115,7 +115,7 @@ export class DemoHaBarSlider extends LitElement {
@slider-moved=${this.handleSliderMoved} @slider-moved=${this.handleSliderMoved}
aria-label=${label} aria-label=${label}
> >
</ha-bar-slider> </ha-control-slider>
`; `;
})} })}
</div> </div>
@ -141,11 +141,11 @@ export class DemoHaBarSlider extends LitElement {
font-weight: 600; font-weight: 600;
} }
.custom { .custom {
--slider-bar-color: #ffcf4c; --control-slider-color: #ffcf4c;
--slider-bar-background: #ffcf4c; --control-slider-background: #ffcf4c;
--slider-bar-background-opacity: 0.2; --control-slider-background-opacity: 0.2;
--slider-bar-thickness: 100px; --control-slider-thickness: 100px;
--slider-bar-border-radius: 24px; --control-slider-border-radius: 24px;
} }
.vertical-sliders { .vertical-sliders {
height: 300px; height: 300px;
@ -165,6 +165,6 @@ export class DemoHaBarSlider extends LitElement {
declare global { declare global {
interface HTMLElementTagNameMap { interface HTMLElementTagNameMap {
"demo-components-ha-bar-slider": DemoHaBarSlider; "demo-components-ha-control-slider": DemoHaBarSlider;
} }
} }

3
gallery/src/pages/components/ha-control-switch.markdown Normal file
View File

@ -0,0 +1,3 @@
---
title: Control Switch
---

26
gallery/src/pages/components/ha-bar-switch.ts → gallery/src/pages/components/ha-control-switch.ts
View File

@ -8,7 +8,7 @@ import { css, html, LitElement, TemplateResult } from "lit";
import { customElement, state } from "lit/decorators"; import { customElement, state } from "lit/decorators";
import { ifDefined } from "lit/directives/if-defined"; import { ifDefined } from "lit/directives/if-defined";
import { repeat } from "lit/directives/repeat"; import { repeat } from "lit/directives/repeat";
import "../../../../src/components/ha-bar-switch"; import "../../../../src/components/ha-control-switch";
import "../../../../src/components/ha-card"; import "../../../../src/components/ha-card";
const switches: { const switches: {
@ -39,8 +39,8 @@ const switches: {
}, },
]; ];
@customElement("demo-components-ha-bar-switch") @customElement("demo-components-ha-control-switch")
export class DemoHaBarSwitch extends LitElement { export class DemoHaControlSwitch extends LitElement {
@state() private checked = false; @state() private checked = false;
handleValueChanged(e: any) { handleValueChanged(e: any) {
@ -56,7 +56,7 @@ export class DemoHaBarSwitch extends LitElement {
<div class="card-content"> <div class="card-content">
<label id=${id}>${label}</label> <label id=${id}>${label}</label>
<pre>Config: ${JSON.stringify(config)}</pre> <pre>Config: ${JSON.stringify(config)}</pre>
<ha-bar-switch <ha-control-switch
.checked=${this.checked} .checked=${this.checked}
class=${ifDefined(config.class)} class=${ifDefined(config.class)}
@change=${this.handleValueChanged} @change=${this.handleValueChanged}
@ -66,7 +66,7 @@ export class DemoHaBarSwitch extends LitElement {
disabled=${ifDefined(config.disabled)} disabled=${ifDefined(config.disabled)}
reversed=${ifDefined(config.reversed)} reversed=${ifDefined(config.reversed)}
> >
</ha-bar-switch> </ha-control-switch>
</div> </div>
</ha-card> </ha-card>
`; `;
@ -78,7 +78,7 @@ export class DemoHaBarSwitch extends LitElement {
${repeat(switches, (sw) => { ${repeat(switches, (sw) => {
const { id, label, ...config } = sw; const { id, label, ...config } = sw;
return html` return html`
<ha-bar-switch <ha-control-switch
.checked=${this.checked} .checked=${this.checked}
vertical vertical
class=${ifDefined(config.class)} class=${ifDefined(config.class)}
@ -89,7 +89,7 @@ export class DemoHaBarSwitch extends LitElement {
disabled=${ifDefined(config.disabled)} disabled=${ifDefined(config.disabled)}
reversed=${ifDefined(config.reversed)} reversed=${ifDefined(config.reversed)}
> >
</ha-bar-switch> </ha-control-switch>
`; `;
})} })}
</div> </div>
@ -115,11 +115,11 @@ export class DemoHaBarSwitch extends LitElement {
font-weight: 600; font-weight: 600;
} }
.custom { .custom {
--switch-bar-on-color: var(--green-color); --control-switch-on-color: var(--green-color);
--switch-bar-off-color: var(--red-color); --control-switch-off-color: var(--red-color);
--switch-bar-thickness: 100px; --control-switch-thickness: 100px;
--switch-bar-border-radius: 24px; --control-switch-border-radius: 24px;
--switch-bar-padding: 6px; --control-switch-padding: 6px;
--mdc-icon-size: 24px; --mdc-icon-size: 24px;
} }
.vertical-switches { .vertical-switches {
@ -140,6 +140,6 @@ export class DemoHaBarSwitch extends LitElement {
declare global { declare global {
interface HTMLElementTagNameMap { interface HTMLElementTagNameMap {
"demo-components-ha-bar-switch": DemoHaBarSwitch; "demo-components-ha-control-switch": DemoHaControlSwitch;
} }
} }

22
src/components/ha-bar-button-group.ts → src/components/ha-control-button-group.ts
View File

@ -1,8 +1,8 @@
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit"; import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property } from "lit/decorators"; import { customElement, property } from "lit/decorators";
@customElement("ha-bar-button-group") @customElement("ha-control-button-group")
export class HaBarButtonGroup extends LitElement { export class HaControlButtonGroup extends LitElement {
@property({ type: Boolean, reflect: true }) @property({ type: Boolean, reflect: true })
public vertical = false; public vertical = false;
@ -17,9 +17,9 @@ export class HaBarButtonGroup extends LitElement {
static get styles(): CSSResultGroup { static get styles(): CSSResultGroup {
return css` return css`
:host { :host {
--button-bar-group-spacing: 12px; --control-button-group-spacing: 12px;
--button-bar-group-thickness: 40px; --control-button-group-thickness: 40px;
height: var(--button-bar-group-thickness); height: var(--control-button-group-thickness);
width: auto; width: auto;
display: block; display: block;
} }
@ -35,22 +35,22 @@ export class HaBarButtonGroup extends LitElement {
width: 100%; width: 100%;
} }
::slotted(*:not(:last-child)) { ::slotted(*:not(:last-child)) {
margin-right: var(--button-bar-group-spacing); margin-right: var(--control-button-group-spacing);
margin-inline-end: var(--button-bar-group-spacing); margin-inline-end: var(--control-button-group-spacing);
margin-inline-start: initial; margin-inline-start: initial;
direction: var(--direction); direction: var(--direction);
} }
:host([vertical]) { :host([vertical]) {
width: var(--button-bar-group-thickness); width: var(--control-button-group-thickness);
height: auto; height: auto;
} }
:host([vertical]) .container { :host([vertical]) .container {
flex-direction: column; flex-direction: column;
} }
:host([vertical]) ::slotted(ha-bar-button:not(:last-child)) { :host([vertical]) ::slotted(ha-control-button:not(:last-child)) {
margin-right: initial; margin-right: initial;
margin-inline-end: initial; margin-inline-end: initial;
margin-bottom: var(--button-bar-group-spacing); margin-bottom: var(--control-button-group-spacing);
} }
`; `;
} }
@ -58,6 +58,6 @@ export class HaBarButtonGroup extends LitElement {
declare global { declare global {
interface HTMLElementTagNameMap { interface HTMLElementTagNameMap {
"ha-bar-button-group": HaBarButtonGroup; "ha-control-button-group": HaControlButtonGroup;
} }
} }

31
src/components/ha-bar-button.ts → src/components/ha-control-button.ts
View File

@ -10,8 +10,8 @@ import {
} from "lit/decorators"; } from "lit/decorators";
import { ifDefined } from "lit/directives/if-defined"; import { ifDefined } from "lit/directives/if-defined";
@customElement("ha-bar-button") @customElement("ha-control-button")
export class HaBarButton extends LitElement { export class HaControlButton extends LitElement {
@property({ type: Boolean, reflect: true }) disabled = false; @property({ type: Boolean, reflect: true }) disabled = false;
@property() public label?: string; @property() public label?: string;
@ -80,10 +80,11 @@ export class HaBarButton extends LitElement {
return css` return css`
:host { :host {
display: block; display: block;
--button-bar-icon-color: var(--primary-text-color); --control-button-icon-color: var(--primary-text-color);
--button-bar-background-color: var(--disabled-color); --control-button-background-color: var(--disabled-color);
--button-bar-background-opacity: 0.2; --control-button-background-opacity: 0.2;
--button-bar-border-radius: 10px; --control-button-border-radius: 10px;
--mdc-icon-size: 20px;
width: 40px; width: 40px;
height: 40px; height: 40px;
-webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: transparent;
@ -97,7 +98,7 @@ export class HaBarButton extends LitElement {
justify-content: center; justify-content: center;
width: 100%; width: 100%;
height: 100%; height: 100%;
border-radius: var(--button-bar-border-radius); border-radius: var(--control-button-border-radius);
border: none; border: none;
margin: 0; margin: 0;
padding: 0; padding: 0;
@ -107,7 +108,7 @@ export class HaBarButton extends LitElement {
overflow: hidden; overflow: hidden;
background: none; background: none;
z-index: 1; z-index: 1;
--mdc-ripple-color: var(--button-bar-background-color); --mdc-ripple-color: var(--control-button-background-color);
} }
.button::before { .button::before {
content: ""; content: "";
@ -116,21 +117,21 @@ export class HaBarButton extends LitElement {
left: 0; left: 0;
height: 100%; height: 100%;
width: 100%; width: 100%;
background-color: var(--button-bar-background-color); background-color: var(--control-button-background-color);
transition: background-color 180ms ease-in-out, transition: background-color 180ms ease-in-out,
opacity 180ms ease-in-out; opacity 180ms ease-in-out;
opacity: var(--button-bar-background-opacity); opacity: var(--control-button-background-opacity);
} }
.button ::slotted(*) { .button ::slotted(*) {
transition: color 180ms ease-in-out; transition: color 180ms ease-in-out;
color: var(--button-bar-icon-color); color: var(--control-button-icon-color);
pointer-events: none; pointer-events: none;
} }
.button:disabled { .button:disabled {
cursor: not-allowed; cursor: not-allowed;
--button-bar-background-color: var(--disabled-color); --control-button-background-color: var(--disabled-color);
--button-bar-icon-color: var(--disabled-text-color); --control-button-icon-color: var(--disabled-text-color);
--button-bar-background-opacity: 0.2; --control-button-background-opacity: 0.2;
} }
`; `;
} }
@ -138,6 +139,6 @@ export class HaBarButton extends LitElement {
declare global { declare global {
interface HTMLElementTagNameMap { interface HTMLElementTagNameMap {
"ha-bar-button": HaBarButton; "ha-control-button": HaControlButton;
} }
} }

38
src/components/ha-bar-slider.ts → src/components/ha-control-slider.ts
View File

@ -42,8 +42,8 @@ const getPercentageFromEvent = (e: HammerInput, vertical: boolean) => {
return Math.max(Math.min(1, (x - offset) / total), 0); return Math.max(Math.min(1, (x - offset) / total), 0);
}; };
@customElement("ha-bar-slider") @customElement("ha-control-slider")
export class HaBarSlider extends LitElement { export class HaControlSlider extends LitElement {
@property({ type: Boolean }) @property({ type: Boolean })
public disabled = false; public disabled = false;
@ -271,29 +271,29 @@ export class HaBarSlider extends LitElement {
return css` return css`
:host { :host {
display: block; display: block;
--slider-bar-color: var(--primary-color); --control-slider-color: var(--primary-color);
--slider-bar-background: var(--disabled-color); --control-slider-background: var(--disabled-color);
--slider-bar-background-opacity: 0.2; --control-slider-background-opacity: 0.2;
--slider-bar-thickness: 40px; --control-slider-thickness: 40px;
--slider-bar-border-radius: 10px; --control-slider-border-radius: 10px;
height: var(--slider-bar-thickness); height: var(--control-slider-thickness);
width: 100%; width: 100%;
border-radius: var(--slider-bar-border-radius); border-radius: var(--control-slider-border-radius);
outline: none; outline: none;
transition: box-shadow 180ms ease-in-out; transition: box-shadow 180ms ease-in-out;
} }
:host(:focus-visible) { :host(:focus-visible) {
box-shadow: 0 0 0 2px var(--slider-bar-color); box-shadow: 0 0 0 2px var(--control-slider-color);
} }
:host([vertical]) { :host([vertical]) {
width: var(--slider-bar-thickness); width: var(--control-slider-thickness);
height: 100%; height: 100%;
} }
.slider { .slider {
position: relative; position: relative;
height: 100%; height: 100%;
width: 100%; width: 100%;
border-radius: var(--slider-bar-border-radius); border-radius: var(--control-slider-border-radius);
transform: translateZ(0); transform: translateZ(0);
overflow: hidden; overflow: hidden;
cursor: pointer; cursor: pointer;
@ -307,18 +307,18 @@ export class HaBarSlider extends LitElement {
left: 0; left: 0;
height: 100%; height: 100%;
width: 100%; width: 100%;
background: var(--slider-bar-background); background: var(--control-slider-background);
opacity: var(--slider-bar-background-opacity); opacity: var(--control-slider-background-opacity);
} }
.slider .slider-track-bar { .slider .slider-track-bar {
--border-radius: var(--slider-bar-border-radius); --border-radius: var(--control-slider-border-radius);
--handle-size: 4px; --handle-size: 4px;
--handle-margin: calc(var(--slider-bar-thickness) / 8); --handle-margin: calc(var(--control-slider-thickness) / 8);
--slider-size: 100%; --slider-size: 100%;
position: absolute; position: absolute;
height: 100%; height: 100%;
width: 100%; width: 100%;
background-color: var(--slider-bar-color); background-color: var(--control-slider-color);
transition: transform 180ms ease-in-out; transition: transform 180ms ease-in-out;
} }
.slider .slider-track-bar.show-handle { .slider .slider-track-bar.show-handle {
@ -413,7 +413,7 @@ export class HaBarSlider extends LitElement {
} }
.slider .slider-track-cursor { .slider .slider-track-cursor {
--cursor-size: calc(var(--slider-bar-thickness) / 4); --cursor-size: calc(var(--control-slider-thickness) / 4);
--handle-size: 4px; --handle-size: 4px;
position: absolute; position: absolute;
background-color: white; background-color: white;
@ -452,6 +452,6 @@ export class HaBarSlider extends LitElement {
declare global { declare global {
interface HTMLElementTagNameMap { interface HTMLElementTagNameMap {
"ha-bar-slider": HaBarSlider; "ha-control-slider": HaControlSlider;
} }
} }

44
src/components/ha-bar-switch.ts → src/components/ha-control-switch.ts
View File

@ -10,8 +10,8 @@ import { customElement, property } from "lit/decorators";
import { fireEvent } from "../common/dom/fire_event"; import { fireEvent } from "../common/dom/fire_event";
import "./ha-svg-icon"; import "./ha-svg-icon";
@customElement("ha-bar-switch") @customElement("ha-control-switch")
export class HaBarSwitch extends LitElement { export class HaControlSwitch extends LitElement {
@property({ type: Boolean, attribute: "disabled" }) @property({ type: Boolean, attribute: "disabled" })
public disabled = false; public disabled = false;
@ -92,36 +92,36 @@ export class HaBarSwitch extends LitElement {
return css` return css`
:host { :host {
display: block; display: block;
--switch-bar-on-color: var(--primary-color); --control-switch-on-color: var(--primary-color);
--switch-bar-off-color: var(--disabled-color); --control-switch-off-color: var(--disabled-color);
--switch-bar-background-opacity: 0.2; --control-switch-background-opacity: 0.2;
--switch-bar-thickness: 40px; --control-switch-thickness: 40px;
--switch-bar-border-radius: 12px; --control-switch-border-radius: 12px;
--switch-bar-padding: 4px; --control-switch-padding: 4px;
--mdc-icon-size: 20px; --mdc-icon-size: 20px;
height: var(--switch-bar-thickness); height: var(--control-switch-thickness);
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
user-select: none; user-select: none;
cursor: pointer; cursor: pointer;
border-radius: var(--switch-bar-border-radius); border-radius: var(--control-switch-border-radius);
outline: none; outline: none;
transition: box-shadow 180ms ease-in-out; transition: box-shadow 180ms ease-in-out;
} }
:host(:focus-visible) { :host(:focus-visible) {
box-shadow: 0 0 0 2px var(--switch-bar-off-color); box-shadow: 0 0 0 2px var(--control-switch-off-color);
} }
:host([checked]:focus-visible) { :host([checked]:focus-visible) {
box-shadow: 0 0 0 2px var(--switch-bar-on-color); box-shadow: 0 0 0 2px var(--control-switch-on-color);
} }
.switch { .switch {
box-sizing: border-box; box-sizing: border-box;
position: relative; position: relative;
height: 100%; height: 100%;
width: 100%; width: 100%;
border-radius: var(--switch-bar-border-radius); border-radius: var(--control-switch-border-radius);
overflow: hidden; overflow: hidden;
padding: var(--switch-bar-padding); padding: var(--control-switch-padding);
display: flex; display: flex;
} }
.switch .background { .switch .background {
@ -130,31 +130,31 @@ export class HaBarSwitch extends LitElement {
left: 0; left: 0;
height: 100%; height: 100%;
width: 100%; width: 100%;
background-color: var(--switch-bar-off-color); background-color: var(--control-switch-off-color);
transition: background-color 180ms ease-in-out; transition: background-color 180ms ease-in-out;
opacity: var(--switch-bar-background-opacity); opacity: var(--control-switch-background-opacity);
} }
.switch .button { .switch .button {
width: 50%; width: 50%;
height: 100%; height: 100%;
background: lightgrey; background: lightgrey;
border-radius: calc( border-radius: calc(
var(--switch-bar-border-radius) - var(--switch-bar-padding) var(--control-switch-border-radius) - var(--control-switch-padding)
); );
transition: transform 180ms ease-in-out, transition: transform 180ms ease-in-out,
background-color 180ms ease-in-out; background-color 180ms ease-in-out;
background-color: var(--switch-bar-off-color); background-color: var(--control-switch-off-color);
color: white; color: white;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
:host([checked]) .switch .background { :host([checked]) .switch .background {
background-color: var(--switch-bar-on-color); background-color: var(--control-switch-on-color);
} }
:host([checked]) .switch .button { :host([checked]) .switch .button {
transform: translateX(100%); transform: translateX(100%);
background-color: var(--switch-bar-on-color); background-color: var(--control-switch-on-color);
} }
:host([reversed]) .switch { :host([reversed]) .switch {
flex-direction: row-reverse; flex-direction: row-reverse;
@ -163,7 +163,7 @@ export class HaBarSwitch extends LitElement {
transform: translateX(-100%); transform: translateX(-100%);
} }
:host([vertical]) { :host([vertical]) {
width: var(--switch-bar-thickness); width: var(--control-switch-thickness);
height: 100%; height: 100%;
} }
:host([vertical][checked]) .switch .button { :host([vertical][checked]) .switch .button {
@ -189,6 +189,6 @@ export class HaBarSwitch extends LitElement {
declare global { declare global {
interface HTMLElementTagNameMap { interface HTMLElementTagNameMap {
"ha-bar-switch": HaBarSwitch; "ha-control-switch": HaControlSwitch;
} }
} }

18
src/components/tile/ha-tile-slider.ts
View File

@ -1,7 +1,7 @@
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit"; import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property } from "lit/decorators"; import { customElement, property } from "lit/decorators";
import { ifDefined } from "lit/directives/if-defined"; import { ifDefined } from "lit/directives/if-defined";
import "../ha-bar-slider"; import "../ha-control-slider";
@customElement("ha-tile-slider") @customElement("ha-tile-slider")
export class HaTileSlider extends LitElement { export class HaTileSlider extends LitElement {
@ -30,7 +30,7 @@ export class HaTileSlider extends LitElement {
protected render(): TemplateResult { protected render(): TemplateResult {
return html` return html`
<ha-bar-slider <ha-control-slider
.disabled=${this.disabled} .disabled=${this.disabled}
.mode=${this.mode} .mode=${this.mode}
.value=${this.value} .value=${this.value}
@ -40,24 +40,24 @@ export class HaTileSlider extends LitElement {
aria-label=${ifDefined(this.label)} aria-label=${ifDefined(this.label)}
.showHandle=${this.showHandle} .showHandle=${this.showHandle}
> >
</ha-bar-slider> </ha-control-slider>
`; `;
} }
static get styles(): CSSResultGroup { static get styles(): CSSResultGroup {
return css` return css`
ha-bar-slider { ha-control-slider {
--slider-bar-color: var(--tile-slider-color, var(--primary-color)); --control-slider-color: var(--tile-slider-color, var(--primary-color));
--slider-bar-background: var( --control-slider-background: var(
--tile-slider-background, --tile-slider-background,
var(--disabled-color) var(--disabled-color)
); );
--slider-bar-background-opacity: var( --control-slider-background-opacity: var(
--tile-slider-background-opacity, --tile-slider-background-opacity,
0.2 0.2
); );
--slider-bar-thickness: 40px; --control-slider-thickness: 40px;
--slider-bar-border-radius: 10px; --control-slider-border-radius: 10px;
} }
`; `;
} }

24
src/panels/lovelace/tile-features/hui-cover-open-close-tile-feature.ts
View File

@ -7,8 +7,8 @@ import {
computeOpenIcon, computeOpenIcon,
} from "../../../common/entity/cover_icon"; } from "../../../common/entity/cover_icon";
import { supportsFeature } from "../../../common/entity/supports-feature"; import { supportsFeature } from "../../../common/entity/supports-feature";
import "../../../components/ha-bar-button"; import "../../../components/ha-control-button";
import "../../../components/ha-bar-button-group"; import "../../../components/ha-control-button-group";
import { import {
canClose, canClose,
canOpen, canOpen,
@ -70,10 +70,10 @@ class HuiCoverOpenCloseTileFeature
} }
return html` return html`
<ha-bar-button-group> <ha-control-button-group>
${supportsFeature(this.stateObj, CoverEntityFeature.OPEN) ${supportsFeature(this.stateObj, CoverEntityFeature.OPEN)
? html` ? html`
<ha-bar-button <ha-control-button
.label=${this.hass.localize( .label=${this.hass.localize(
"ui.dialogs.more_info_control.cover.open_cover" "ui.dialogs.more_info_control.cover.open_cover"
)} )}
@ -83,12 +83,12 @@ class HuiCoverOpenCloseTileFeature
<ha-svg-icon <ha-svg-icon
.path=${computeOpenIcon(this.stateObj)} .path=${computeOpenIcon(this.stateObj)}
></ha-svg-icon> ></ha-svg-icon>
</ha-bar-button> </ha-control-button>
` `
: null} : null}
${supportsFeature(this.stateObj, CoverEntityFeature.STOP) ${supportsFeature(this.stateObj, CoverEntityFeature.STOP)
? html` ? html`
<ha-bar-button <ha-control-button
.label=${this.hass.localize( .label=${this.hass.localize(
"ui.dialogs.more_info_control.cover.stop_cover" "ui.dialogs.more_info_control.cover.stop_cover"
)} )}
@ -96,12 +96,12 @@ class HuiCoverOpenCloseTileFeature
.disabled=${!canStop(this.stateObj)} .disabled=${!canStop(this.stateObj)}
> >
<ha-svg-icon .path=${mdiStop}></ha-svg-icon> <ha-svg-icon .path=${mdiStop}></ha-svg-icon>
</ha-bar-button> </ha-control-button>
` `
: null} : null}
${supportsFeature(this.stateObj, CoverEntityFeature.CLOSE) ${supportsFeature(this.stateObj, CoverEntityFeature.CLOSE)
? html` ? html`
<ha-bar-button <ha-control-button
.label=${this.hass.localize( .label=${this.hass.localize(
"ui.dialogs.more_info_control.cover.close_cover" "ui.dialogs.more_info_control.cover.close_cover"
)} )}
@ -111,18 +111,18 @@ class HuiCoverOpenCloseTileFeature
<ha-svg-icon <ha-svg-icon
.path=${computeCloseIcon(this.stateObj)} .path=${computeCloseIcon(this.stateObj)}
></ha-svg-icon> ></ha-svg-icon>
</ha-bar-button> </ha-control-button>
` `
: undefined} : undefined}
</ha-bar-button-group> </ha-control-button-group>
`; `;
} }
static get styles() { static get styles() {
return css` return css`
ha-bar-button-group { ha-control-button-group {
margin: 0 12px 12px 12px; margin: 0 12px 12px 12px;
--button-bar-group-spacing: 12px; --control-button-group-spacing: 12px;
} }
`; `;
} }

24
src/panels/lovelace/tile-features/hui-cover-tilt-tile-feature.ts
View File

@ -3,8 +3,8 @@ import { HassEntity } from "home-assistant-js-websocket";
import { css, html, LitElement, TemplateResult } from "lit"; import { css, html, LitElement, TemplateResult } from "lit";
import { customElement, property, state } from "lit/decorators"; import { customElement, property, state } from "lit/decorators";
import { supportsFeature } from "../../../common/entity/supports-feature"; import { supportsFeature } from "../../../common/entity/supports-feature";
import "../../../components/ha-bar-button"; import "../../../components/ha-control-button";
import "../../../components/ha-bar-button-group"; import "../../../components/ha-control-button-group";
import { import {
canCloseTilt, canCloseTilt,
canOpenTilt, canOpenTilt,
@ -66,10 +66,10 @@ class HuiCoverTiltTileFeature
} }
return html` return html`
<ha-bar-button-group> <ha-control-button-group>
${supportsFeature(this.stateObj, CoverEntityFeature.OPEN_TILT) ${supportsFeature(this.stateObj, CoverEntityFeature.OPEN_TILT)
? html` ? html`
<ha-bar-button <ha-control-button
.label=${this.hass.localize( .label=${this.hass.localize(
"ui.dialogs.more_info_control.cover.open_tilt_cover" "ui.dialogs.more_info_control.cover.open_tilt_cover"
)} )}
@ -77,12 +77,12 @@ class HuiCoverTiltTileFeature
.disabled=${!canOpenTilt(this.stateObj)} .disabled=${!canOpenTilt(this.stateObj)}
> >
<ha-svg-icon .path=${mdiArrowTopRight}></ha-svg-icon> <ha-svg-icon .path=${mdiArrowTopRight}></ha-svg-icon>
</ha-bar-button> </ha-control-button>
` `
: null} : null}
${supportsFeature(this.stateObj, CoverEntityFeature.STOP_TILT) ${supportsFeature(this.stateObj, CoverEntityFeature.STOP_TILT)
? html` ? html`
<ha-bar-button <ha-control-button
.label=${this.hass.localize( .label=${this.hass.localize(
"ui.dialogs.more_info_control.cover.stop_cover" "ui.dialogs.more_info_control.cover.stop_cover"
)} )}
@ -90,12 +90,12 @@ class HuiCoverTiltTileFeature
.disabled=${!canStopTilt(this.stateObj)} .disabled=${!canStopTilt(this.stateObj)}
> >
<ha-svg-icon .path=${mdiStop}></ha-svg-icon> <ha-svg-icon .path=${mdiStop}></ha-svg-icon>
</ha-bar-button> </ha-control-button>
` `
: null} : null}
${supportsFeature(this.stateObj, CoverEntityFeature.CLOSE_TILT) ${supportsFeature(this.stateObj, CoverEntityFeature.CLOSE_TILT)
? html` ? html`
<ha-bar-button <ha-control-button
.label=${this.hass.localize( .label=${this.hass.localize(
"ui.dialogs.more_info_control.cover.close_tilt_cover" "ui.dialogs.more_info_control.cover.close_tilt_cover"
)} )}
@ -103,18 +103,18 @@ class HuiCoverTiltTileFeature
.disabled=${!canCloseTilt(this.stateObj)} .disabled=${!canCloseTilt(this.stateObj)}
> >
<ha-svg-icon .path=${mdiArrowBottomLeft}></ha-svg-icon> <ha-svg-icon .path=${mdiArrowBottomLeft}></ha-svg-icon>
</ha-bar-button> </ha-control-button>
` `
: undefined} : undefined}
</ha-bar-button-group> </ha-control-button-group>
`; `;
} }
static get styles() { static get styles() {
return css` return css`
ha-bar-button-group { ha-control-button-group {
margin: 0 12px 12px 12px; margin: 0 12px 12px 12px;
--button-bar-group-spacing: 12px; --control-button-group-spacing: 12px;
} }
`; `;
} }

16
src/panels/lovelace/tile-features/hui-vacuum-commands-tile-feature.ts
View File

@ -11,8 +11,8 @@ import { HassEntity } from "home-assistant-js-websocket";
import { css, html, LitElement, TemplateResult } from "lit"; import { css, html, LitElement, TemplateResult } from "lit";
import { customElement, property, state } from "lit/decorators"; import { customElement, property, state } from "lit/decorators";
import { supportsFeature } from "../../../common/entity/supports-feature"; import { supportsFeature } from "../../../common/entity/supports-feature";
import "../../../components/ha-bar-button"; import "../../../components/ha-control-button";
import "../../../components/ha-bar-button-group"; import "../../../components/ha-control-button-group";
import { UNAVAILABLE } from "../../../data/entity"; import { UNAVAILABLE } from "../../../data/entity";
import { import {
canReturnHome, canReturnHome,
@ -168,7 +168,7 @@ class HuiVacuumCommandTileFeature
const stateObj = this.stateObj as VacuumEntity; const stateObj = this.stateObj as VacuumEntity;
return html` return html`
<ha-bar-button-group> <ha-control-button-group>
${VACUUM_COMMANDS.filter( ${VACUUM_COMMANDS.filter(
(command) => (command) =>
supportsVacuumCommand(stateObj, command) && supportsVacuumCommand(stateObj, command) &&
@ -176,7 +176,7 @@ class HuiVacuumCommandTileFeature
).map((command) => { ).map((command) => {
const button = VACUUM_COMMANDS_BUTTONS[command](stateObj); const button = VACUUM_COMMANDS_BUTTONS[command](stateObj);
return html` return html`
<ha-bar-button <ha-control-button
.entry=${button} .entry=${button}
.label=${this.hass!.localize( .label=${this.hass!.localize(
// @ts-ignore // @ts-ignore
@ -186,18 +186,18 @@ class HuiVacuumCommandTileFeature
.disabled=${button.disabled || stateObj.state === UNAVAILABLE} .disabled=${button.disabled || stateObj.state === UNAVAILABLE}
> >
<ha-svg-icon .path=${button.icon}></ha-svg-icon> <ha-svg-icon .path=${button.icon}></ha-svg-icon>
</ha-bar-button> </ha-control-button>
`; `;
})} })}
</ha-bar-button-group> </ha-control-button-group>
`; `;
} }
static get styles() { static get styles() {
return css` return css`
ha-bar-button-group { ha-control-button-group {
margin: 0 12px 12px 12px; margin: 0 12px 12px 12px;
--button-bar-group-spacing: 12px; --control-button-group-spacing: 12px;
} }
`; `;
} }