mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-28 03:36:44 +00:00
Rename bar components to control components (#15508)
* 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:
parent
5f9f51f92d
commit
bef586efb3
@ -1,3 +0,0 @@
|
||||
---
|
||||
title: Bar Button
|
||||
---
|
@ -1,3 +0,0 @@
|
||||
---
|
||||
title: Bar Slider
|
||||
---
|
@ -1,3 +0,0 @@
|
||||
---
|
||||
title: Bar Switch
|
||||
---
|
3
gallery/src/pages/components/ha-control-button.markdown
Normal file
3
gallery/src/pages/components/ha-control-button.markdown
Normal file
@ -0,0 +1,3 @@
|
||||
---
|
||||
title: Control Button
|
||||
---
|
@ -8,10 +8,10 @@ import { css, html, LitElement, TemplateResult } from "lit";
|
||||
import { customElement } from "lit/decorators";
|
||||
import { ifDefined } from "lit/directives/if-defined";
|
||||
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-svg-icon";
|
||||
import "../../../../src/components/ha-bar-button-group";
|
||||
import "../../../../src/components/ha-control-button-group";
|
||||
|
||||
type Button = {
|
||||
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 {
|
||||
protected render(): TemplateResult {
|
||||
return html`
|
||||
@ -56,13 +56,13 @@ export class DemoHaBarButton extends LitElement {
|
||||
(btn) => html`
|
||||
<div class="card-content">
|
||||
<pre>Config: ${JSON.stringify(btn)}</pre>
|
||||
<ha-bar-button
|
||||
<ha-control-button
|
||||
class=${ifDefined(btn.class)}
|
||||
label=${ifDefined(btn.label)}
|
||||
disabled=${ifDefined(btn.disabled)}
|
||||
>
|
||||
<ha-svg-icon .path=${btn.icon || mdiLightbulb}></ha-svg-icon>
|
||||
</ha-bar-button>
|
||||
</ha-control-button>
|
||||
</div>
|
||||
`
|
||||
)}
|
||||
@ -74,26 +74,26 @@ export class DemoHaBarButton extends LitElement {
|
||||
(group) => html`
|
||||
<div class="card-content">
|
||||
<pre>Config: ${JSON.stringify(group)}</pre>
|
||||
<ha-bar-button-group class=${ifDefined(group.class)}>
|
||||
<ha-bar-button>
|
||||
<ha-control-button-group class=${ifDefined(group.class)}>
|
||||
<ha-control-button>
|
||||
<ha-svg-icon
|
||||
.path=${mdiFanSpeed1}
|
||||
label="Speed 1"
|
||||
></ha-svg-icon>
|
||||
</ha-bar-button>
|
||||
<ha-bar-button>
|
||||
</ha-control-button>
|
||||
<ha-control-button>
|
||||
<ha-svg-icon
|
||||
.path=${mdiFanSpeed2}
|
||||
label="Speed 2"
|
||||
></ha-svg-icon>
|
||||
</ha-bar-button>
|
||||
<ha-bar-button>
|
||||
</ha-control-button>
|
||||
<ha-control-button>
|
||||
<ha-svg-icon
|
||||
.path=${mdiFanSpeed3}
|
||||
label="Speed 3"
|
||||
></ha-svg-icon>
|
||||
</ha-bar-button>
|
||||
</ha-bar-button-group>
|
||||
</ha-control-button>
|
||||
</ha-control-button-group>
|
||||
</div>
|
||||
`
|
||||
)}
|
||||
@ -105,26 +105,29 @@ export class DemoHaBarButton extends LitElement {
|
||||
${repeat(
|
||||
buttonGroups,
|
||||
(group) => html`
|
||||
<ha-bar-button-group vertical class=${ifDefined(group.class)}>
|
||||
<ha-bar-button>
|
||||
<ha-control-button-group
|
||||
vertical
|
||||
class=${ifDefined(group.class)}
|
||||
>
|
||||
<ha-control-button>
|
||||
<ha-svg-icon
|
||||
.path=${mdiFanSpeed1}
|
||||
label="Speed 1"
|
||||
></ha-svg-icon>
|
||||
</ha-bar-button>
|
||||
<ha-bar-button>
|
||||
</ha-control-button>
|
||||
<ha-control-button>
|
||||
<ha-svg-icon
|
||||
.path=${mdiFanSpeed2}
|
||||
label="Speed 2"
|
||||
></ha-svg-icon>
|
||||
</ha-bar-button>
|
||||
<ha-bar-button>
|
||||
</ha-control-button>
|
||||
<ha-control-button>
|
||||
<ha-svg-icon
|
||||
.path=${mdiFanSpeed3}
|
||||
label="Speed 3"
|
||||
></ha-svg-icon>
|
||||
</ha-bar-button>
|
||||
</ha-bar-button-group>
|
||||
</ha-control-button>
|
||||
</ha-control-button-group>
|
||||
`
|
||||
)}
|
||||
</div>
|
||||
@ -150,20 +153,20 @@ export class DemoHaBarButton extends LitElement {
|
||||
font-weight: 600;
|
||||
}
|
||||
.custom {
|
||||
--button-bar-icon-color: var(--primary-color);
|
||||
--button-bar-background-color: var(--primary-color);
|
||||
--button-bar-background-opacity: 0.2;
|
||||
--button-bar-border-radius: 18px;
|
||||
--control-button-icon-color: var(--primary-color);
|
||||
--control-button-background-color: var(--primary-color);
|
||||
--control-button-background-opacity: 0.2;
|
||||
--control-button-border-radius: 18px;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
.custom-group {
|
||||
--button-bar-group-thickness: 100px;
|
||||
--button-bar-group-border-radius: 18px;
|
||||
--button-bar-group-spacing: 20px;
|
||||
--control-button-group-thickness: 100px;
|
||||
--control-button-group-border-radius: 18px;
|
||||
--control-button-group-spacing: 20px;
|
||||
}
|
||||
.custom-group ha-bar-button {
|
||||
--button-bar-border-radius: 18px;
|
||||
.custom-group ha-control-button {
|
||||
--control-button-border-radius: 18px;
|
||||
--mdc-icon-size: 32px;
|
||||
}
|
||||
.vertical-buttons {
|
||||
@ -184,6 +187,6 @@ export class DemoHaBarButton extends LitElement {
|
||||
|
||||
declare global {
|
||||
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
3
gallery/src/pages/components/ha-control-slider.markdown
Normal file
@ -0,0 +1,3 @@
|
||||
---
|
||||
title: Control Slider
|
||||
---
|
@ -2,7 +2,7 @@ import { css, html, LitElement, TemplateResult } from "lit";
|
||||
import { customElement, state } from "lit/decorators";
|
||||
import { ifDefined } from "lit/directives/if-defined";
|
||||
import { repeat } from "lit/directives/repeat";
|
||||
import "../../../../src/components/ha-bar-slider";
|
||||
import "../../../../src/components/ha-control-slider";
|
||||
import "../../../../src/components/ha-card";
|
||||
|
||||
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 {
|
||||
@state() private value = 50;
|
||||
|
||||
@ -86,7 +86,7 @@ export class DemoHaBarSlider extends LitElement {
|
||||
<div class="card-content">
|
||||
<label id=${id}>${label}</label>
|
||||
<pre>Config: ${JSON.stringify(config)}</pre>
|
||||
<ha-bar-slider
|
||||
<ha-control-slider
|
||||
.value=${this.value}
|
||||
.mode=${config.mode}
|
||||
class=${ifDefined(config.class)}
|
||||
@ -94,7 +94,7 @@ export class DemoHaBarSlider extends LitElement {
|
||||
@slider-moved=${this.handleSliderMoved}
|
||||
aria-labelledby=${id}
|
||||
>
|
||||
</ha-bar-slider>
|
||||
</ha-control-slider>
|
||||
</div>
|
||||
</ha-card>
|
||||
`;
|
||||
@ -106,7 +106,7 @@ export class DemoHaBarSlider extends LitElement {
|
||||
${repeat(sliders, (slider) => {
|
||||
const { id, label, ...config } = slider;
|
||||
return html`
|
||||
<ha-bar-slider
|
||||
<ha-control-slider
|
||||
.value=${this.value}
|
||||
.mode=${config.mode}
|
||||
vertical
|
||||
@ -115,7 +115,7 @@ export class DemoHaBarSlider extends LitElement {
|
||||
@slider-moved=${this.handleSliderMoved}
|
||||
aria-label=${label}
|
||||
>
|
||||
</ha-bar-slider>
|
||||
</ha-control-slider>
|
||||
`;
|
||||
})}
|
||||
</div>
|
||||
@ -141,11 +141,11 @@ export class DemoHaBarSlider extends LitElement {
|
||||
font-weight: 600;
|
||||
}
|
||||
.custom {
|
||||
--slider-bar-color: #ffcf4c;
|
||||
--slider-bar-background: #ffcf4c;
|
||||
--slider-bar-background-opacity: 0.2;
|
||||
--slider-bar-thickness: 100px;
|
||||
--slider-bar-border-radius: 24px;
|
||||
--control-slider-color: #ffcf4c;
|
||||
--control-slider-background: #ffcf4c;
|
||||
--control-slider-background-opacity: 0.2;
|
||||
--control-slider-thickness: 100px;
|
||||
--control-slider-border-radius: 24px;
|
||||
}
|
||||
.vertical-sliders {
|
||||
height: 300px;
|
||||
@ -165,6 +165,6 @@ export class DemoHaBarSlider extends LitElement {
|
||||
|
||||
declare global {
|
||||
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
3
gallery/src/pages/components/ha-control-switch.markdown
Normal file
@ -0,0 +1,3 @@
|
||||
---
|
||||
title: Control Switch
|
||||
---
|
@ -8,7 +8,7 @@ import { css, html, LitElement, TemplateResult } from "lit";
|
||||
import { customElement, state } from "lit/decorators";
|
||||
import { ifDefined } from "lit/directives/if-defined";
|
||||
import { repeat } from "lit/directives/repeat";
|
||||
import "../../../../src/components/ha-bar-switch";
|
||||
import "../../../../src/components/ha-control-switch";
|
||||
import "../../../../src/components/ha-card";
|
||||
|
||||
const switches: {
|
||||
@ -39,8 +39,8 @@ const switches: {
|
||||
},
|
||||
];
|
||||
|
||||
@customElement("demo-components-ha-bar-switch")
|
||||
export class DemoHaBarSwitch extends LitElement {
|
||||
@customElement("demo-components-ha-control-switch")
|
||||
export class DemoHaControlSwitch extends LitElement {
|
||||
@state() private checked = false;
|
||||
|
||||
handleValueChanged(e: any) {
|
||||
@ -56,7 +56,7 @@ export class DemoHaBarSwitch extends LitElement {
|
||||
<div class="card-content">
|
||||
<label id=${id}>${label}</label>
|
||||
<pre>Config: ${JSON.stringify(config)}</pre>
|
||||
<ha-bar-switch
|
||||
<ha-control-switch
|
||||
.checked=${this.checked}
|
||||
class=${ifDefined(config.class)}
|
||||
@change=${this.handleValueChanged}
|
||||
@ -66,7 +66,7 @@ export class DemoHaBarSwitch extends LitElement {
|
||||
disabled=${ifDefined(config.disabled)}
|
||||
reversed=${ifDefined(config.reversed)}
|
||||
>
|
||||
</ha-bar-switch>
|
||||
</ha-control-switch>
|
||||
</div>
|
||||
</ha-card>
|
||||
`;
|
||||
@ -78,7 +78,7 @@ export class DemoHaBarSwitch extends LitElement {
|
||||
${repeat(switches, (sw) => {
|
||||
const { id, label, ...config } = sw;
|
||||
return html`
|
||||
<ha-bar-switch
|
||||
<ha-control-switch
|
||||
.checked=${this.checked}
|
||||
vertical
|
||||
class=${ifDefined(config.class)}
|
||||
@ -89,7 +89,7 @@ export class DemoHaBarSwitch extends LitElement {
|
||||
disabled=${ifDefined(config.disabled)}
|
||||
reversed=${ifDefined(config.reversed)}
|
||||
>
|
||||
</ha-bar-switch>
|
||||
</ha-control-switch>
|
||||
`;
|
||||
})}
|
||||
</div>
|
||||
@ -115,11 +115,11 @@ export class DemoHaBarSwitch extends LitElement {
|
||||
font-weight: 600;
|
||||
}
|
||||
.custom {
|
||||
--switch-bar-on-color: var(--green-color);
|
||||
--switch-bar-off-color: var(--red-color);
|
||||
--switch-bar-thickness: 100px;
|
||||
--switch-bar-border-radius: 24px;
|
||||
--switch-bar-padding: 6px;
|
||||
--control-switch-on-color: var(--green-color);
|
||||
--control-switch-off-color: var(--red-color);
|
||||
--control-switch-thickness: 100px;
|
||||
--control-switch-border-radius: 24px;
|
||||
--control-switch-padding: 6px;
|
||||
--mdc-icon-size: 24px;
|
||||
}
|
||||
.vertical-switches {
|
||||
@ -140,6 +140,6 @@ export class DemoHaBarSwitch extends LitElement {
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
"demo-components-ha-bar-switch": DemoHaBarSwitch;
|
||||
"demo-components-ha-control-switch": DemoHaControlSwitch;
|
||||
}
|
||||
}
|
@ -1,8 +1,8 @@
|
||||
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
|
||||
import { customElement, property } from "lit/decorators";
|
||||
|
||||
@customElement("ha-bar-button-group")
|
||||
export class HaBarButtonGroup extends LitElement {
|
||||
@customElement("ha-control-button-group")
|
||||
export class HaControlButtonGroup extends LitElement {
|
||||
@property({ type: Boolean, reflect: true })
|
||||
public vertical = false;
|
||||
|
||||
@ -17,9 +17,9 @@ export class HaBarButtonGroup extends LitElement {
|
||||
static get styles(): CSSResultGroup {
|
||||
return css`
|
||||
:host {
|
||||
--button-bar-group-spacing: 12px;
|
||||
--button-bar-group-thickness: 40px;
|
||||
height: var(--button-bar-group-thickness);
|
||||
--control-button-group-spacing: 12px;
|
||||
--control-button-group-thickness: 40px;
|
||||
height: var(--control-button-group-thickness);
|
||||
width: auto;
|
||||
display: block;
|
||||
}
|
||||
@ -35,22 +35,22 @@ export class HaBarButtonGroup extends LitElement {
|
||||
width: 100%;
|
||||
}
|
||||
::slotted(*:not(:last-child)) {
|
||||
margin-right: var(--button-bar-group-spacing);
|
||||
margin-inline-end: var(--button-bar-group-spacing);
|
||||
margin-right: var(--control-button-group-spacing);
|
||||
margin-inline-end: var(--control-button-group-spacing);
|
||||
margin-inline-start: initial;
|
||||
direction: var(--direction);
|
||||
}
|
||||
:host([vertical]) {
|
||||
width: var(--button-bar-group-thickness);
|
||||
width: var(--control-button-group-thickness);
|
||||
height: auto;
|
||||
}
|
||||
:host([vertical]) .container {
|
||||
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-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 {
|
||||
interface HTMLElementTagNameMap {
|
||||
"ha-bar-button-group": HaBarButtonGroup;
|
||||
"ha-control-button-group": HaControlButtonGroup;
|
||||
}
|
||||
}
|
@ -10,8 +10,8 @@ import {
|
||||
} from "lit/decorators";
|
||||
import { ifDefined } from "lit/directives/if-defined";
|
||||
|
||||
@customElement("ha-bar-button")
|
||||
export class HaBarButton extends LitElement {
|
||||
@customElement("ha-control-button")
|
||||
export class HaControlButton extends LitElement {
|
||||
@property({ type: Boolean, reflect: true }) disabled = false;
|
||||
|
||||
@property() public label?: string;
|
||||
@ -80,10 +80,11 @@ export class HaBarButton extends LitElement {
|
||||
return css`
|
||||
:host {
|
||||
display: block;
|
||||
--button-bar-icon-color: var(--primary-text-color);
|
||||
--button-bar-background-color: var(--disabled-color);
|
||||
--button-bar-background-opacity: 0.2;
|
||||
--button-bar-border-radius: 10px;
|
||||
--control-button-icon-color: var(--primary-text-color);
|
||||
--control-button-background-color: var(--disabled-color);
|
||||
--control-button-background-opacity: 0.2;
|
||||
--control-button-border-radius: 10px;
|
||||
--mdc-icon-size: 20px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
@ -97,7 +98,7 @@ export class HaBarButton extends LitElement {
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: var(--button-bar-border-radius);
|
||||
border-radius: var(--control-button-border-radius);
|
||||
border: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
@ -107,7 +108,7 @@ export class HaBarButton extends LitElement {
|
||||
overflow: hidden;
|
||||
background: none;
|
||||
z-index: 1;
|
||||
--mdc-ripple-color: var(--button-bar-background-color);
|
||||
--mdc-ripple-color: var(--control-button-background-color);
|
||||
}
|
||||
.button::before {
|
||||
content: "";
|
||||
@ -116,21 +117,21 @@ export class HaBarButton extends LitElement {
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-color: var(--button-bar-background-color);
|
||||
background-color: var(--control-button-background-color);
|
||||
transition: background-color 180ms ease-in-out,
|
||||
opacity 180ms ease-in-out;
|
||||
opacity: var(--button-bar-background-opacity);
|
||||
opacity: var(--control-button-background-opacity);
|
||||
}
|
||||
.button ::slotted(*) {
|
||||
transition: color 180ms ease-in-out;
|
||||
color: var(--button-bar-icon-color);
|
||||
color: var(--control-button-icon-color);
|
||||
pointer-events: none;
|
||||
}
|
||||
.button:disabled {
|
||||
cursor: not-allowed;
|
||||
--button-bar-background-color: var(--disabled-color);
|
||||
--button-bar-icon-color: var(--disabled-text-color);
|
||||
--button-bar-background-opacity: 0.2;
|
||||
--control-button-background-color: var(--disabled-color);
|
||||
--control-button-icon-color: var(--disabled-text-color);
|
||||
--control-button-background-opacity: 0.2;
|
||||
}
|
||||
`;
|
||||
}
|
||||
@ -138,6 +139,6 @@ export class HaBarButton extends LitElement {
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
"ha-bar-button": HaBarButton;
|
||||
"ha-control-button": HaControlButton;
|
||||
}
|
||||
}
|
@ -42,8 +42,8 @@ const getPercentageFromEvent = (e: HammerInput, vertical: boolean) => {
|
||||
return Math.max(Math.min(1, (x - offset) / total), 0);
|
||||
};
|
||||
|
||||
@customElement("ha-bar-slider")
|
||||
export class HaBarSlider extends LitElement {
|
||||
@customElement("ha-control-slider")
|
||||
export class HaControlSlider extends LitElement {
|
||||
@property({ type: Boolean })
|
||||
public disabled = false;
|
||||
|
||||
@ -271,29 +271,29 @@ export class HaBarSlider extends LitElement {
|
||||
return css`
|
||||
:host {
|
||||
display: block;
|
||||
--slider-bar-color: var(--primary-color);
|
||||
--slider-bar-background: var(--disabled-color);
|
||||
--slider-bar-background-opacity: 0.2;
|
||||
--slider-bar-thickness: 40px;
|
||||
--slider-bar-border-radius: 10px;
|
||||
height: var(--slider-bar-thickness);
|
||||
--control-slider-color: var(--primary-color);
|
||||
--control-slider-background: var(--disabled-color);
|
||||
--control-slider-background-opacity: 0.2;
|
||||
--control-slider-thickness: 40px;
|
||||
--control-slider-border-radius: 10px;
|
||||
height: var(--control-slider-thickness);
|
||||
width: 100%;
|
||||
border-radius: var(--slider-bar-border-radius);
|
||||
border-radius: var(--control-slider-border-radius);
|
||||
outline: none;
|
||||
transition: box-shadow 180ms ease-in-out;
|
||||
}
|
||||
: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]) {
|
||||
width: var(--slider-bar-thickness);
|
||||
width: var(--control-slider-thickness);
|
||||
height: 100%;
|
||||
}
|
||||
.slider {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
border-radius: var(--slider-bar-border-radius);
|
||||
border-radius: var(--control-slider-border-radius);
|
||||
transform: translateZ(0);
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
@ -307,18 +307,18 @@ export class HaBarSlider extends LitElement {
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background: var(--slider-bar-background);
|
||||
opacity: var(--slider-bar-background-opacity);
|
||||
background: var(--control-slider-background);
|
||||
opacity: var(--control-slider-background-opacity);
|
||||
}
|
||||
.slider .slider-track-bar {
|
||||
--border-radius: var(--slider-bar-border-radius);
|
||||
--border-radius: var(--control-slider-border-radius);
|
||||
--handle-size: 4px;
|
||||
--handle-margin: calc(var(--slider-bar-thickness) / 8);
|
||||
--handle-margin: calc(var(--control-slider-thickness) / 8);
|
||||
--slider-size: 100%;
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-color: var(--slider-bar-color);
|
||||
background-color: var(--control-slider-color);
|
||||
transition: transform 180ms ease-in-out;
|
||||
}
|
||||
.slider .slider-track-bar.show-handle {
|
||||
@ -413,7 +413,7 @@ export class HaBarSlider extends LitElement {
|
||||
}
|
||||
|
||||
.slider .slider-track-cursor {
|
||||
--cursor-size: calc(var(--slider-bar-thickness) / 4);
|
||||
--cursor-size: calc(var(--control-slider-thickness) / 4);
|
||||
--handle-size: 4px;
|
||||
position: absolute;
|
||||
background-color: white;
|
||||
@ -452,6 +452,6 @@ export class HaBarSlider extends LitElement {
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
"ha-bar-slider": HaBarSlider;
|
||||
"ha-control-slider": HaControlSlider;
|
||||
}
|
||||
}
|
@ -10,8 +10,8 @@ import { customElement, property } from "lit/decorators";
|
||||
import { fireEvent } from "../common/dom/fire_event";
|
||||
import "./ha-svg-icon";
|
||||
|
||||
@customElement("ha-bar-switch")
|
||||
export class HaBarSwitch extends LitElement {
|
||||
@customElement("ha-control-switch")
|
||||
export class HaControlSwitch extends LitElement {
|
||||
@property({ type: Boolean, attribute: "disabled" })
|
||||
public disabled = false;
|
||||
|
||||
@ -92,36 +92,36 @@ export class HaBarSwitch extends LitElement {
|
||||
return css`
|
||||
:host {
|
||||
display: block;
|
||||
--switch-bar-on-color: var(--primary-color);
|
||||
--switch-bar-off-color: var(--disabled-color);
|
||||
--switch-bar-background-opacity: 0.2;
|
||||
--switch-bar-thickness: 40px;
|
||||
--switch-bar-border-radius: 12px;
|
||||
--switch-bar-padding: 4px;
|
||||
--control-switch-on-color: var(--primary-color);
|
||||
--control-switch-off-color: var(--disabled-color);
|
||||
--control-switch-background-opacity: 0.2;
|
||||
--control-switch-thickness: 40px;
|
||||
--control-switch-border-radius: 12px;
|
||||
--control-switch-padding: 4px;
|
||||
--mdc-icon-size: 20px;
|
||||
height: var(--switch-bar-thickness);
|
||||
height: var(--control-switch-thickness);
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
border-radius: var(--switch-bar-border-radius);
|
||||
border-radius: var(--control-switch-border-radius);
|
||||
outline: none;
|
||||
transition: box-shadow 180ms ease-in-out;
|
||||
}
|
||||
: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) {
|
||||
box-shadow: 0 0 0 2px var(--switch-bar-on-color);
|
||||
box-shadow: 0 0 0 2px var(--control-switch-on-color);
|
||||
}
|
||||
.switch {
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
border-radius: var(--switch-bar-border-radius);
|
||||
border-radius: var(--control-switch-border-radius);
|
||||
overflow: hidden;
|
||||
padding: var(--switch-bar-padding);
|
||||
padding: var(--control-switch-padding);
|
||||
display: flex;
|
||||
}
|
||||
.switch .background {
|
||||
@ -130,31 +130,31 @@ export class HaBarSwitch extends LitElement {
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-color: var(--switch-bar-off-color);
|
||||
background-color: var(--control-switch-off-color);
|
||||
transition: background-color 180ms ease-in-out;
|
||||
opacity: var(--switch-bar-background-opacity);
|
||||
opacity: var(--control-switch-background-opacity);
|
||||
}
|
||||
.switch .button {
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
background: lightgrey;
|
||||
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,
|
||||
background-color 180ms ease-in-out;
|
||||
background-color: var(--switch-bar-off-color);
|
||||
background-color: var(--control-switch-off-color);
|
||||
color: white;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
:host([checked]) .switch .background {
|
||||
background-color: var(--switch-bar-on-color);
|
||||
background-color: var(--control-switch-on-color);
|
||||
}
|
||||
:host([checked]) .switch .button {
|
||||
transform: translateX(100%);
|
||||
background-color: var(--switch-bar-on-color);
|
||||
background-color: var(--control-switch-on-color);
|
||||
}
|
||||
:host([reversed]) .switch {
|
||||
flex-direction: row-reverse;
|
||||
@ -163,7 +163,7 @@ export class HaBarSwitch extends LitElement {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
:host([vertical]) {
|
||||
width: var(--switch-bar-thickness);
|
||||
width: var(--control-switch-thickness);
|
||||
height: 100%;
|
||||
}
|
||||
:host([vertical][checked]) .switch .button {
|
||||
@ -189,6 +189,6 @@ export class HaBarSwitch extends LitElement {
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
"ha-bar-switch": HaBarSwitch;
|
||||
"ha-control-switch": HaControlSwitch;
|
||||
}
|
||||
}
|
@ -1,7 +1,7 @@
|
||||
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
|
||||
import { customElement, property } from "lit/decorators";
|
||||
import { ifDefined } from "lit/directives/if-defined";
|
||||
import "../ha-bar-slider";
|
||||
import "../ha-control-slider";
|
||||
|
||||
@customElement("ha-tile-slider")
|
||||
export class HaTileSlider extends LitElement {
|
||||
@ -30,7 +30,7 @@ export class HaTileSlider extends LitElement {
|
||||
|
||||
protected render(): TemplateResult {
|
||||
return html`
|
||||
<ha-bar-slider
|
||||
<ha-control-slider
|
||||
.disabled=${this.disabled}
|
||||
.mode=${this.mode}
|
||||
.value=${this.value}
|
||||
@ -40,24 +40,24 @@ export class HaTileSlider extends LitElement {
|
||||
aria-label=${ifDefined(this.label)}
|
||||
.showHandle=${this.showHandle}
|
||||
>
|
||||
</ha-bar-slider>
|
||||
</ha-control-slider>
|
||||
`;
|
||||
}
|
||||
|
||||
static get styles(): CSSResultGroup {
|
||||
return css`
|
||||
ha-bar-slider {
|
||||
--slider-bar-color: var(--tile-slider-color, var(--primary-color));
|
||||
--slider-bar-background: var(
|
||||
ha-control-slider {
|
||||
--control-slider-color: var(--tile-slider-color, var(--primary-color));
|
||||
--control-slider-background: var(
|
||||
--tile-slider-background,
|
||||
var(--disabled-color)
|
||||
);
|
||||
--slider-bar-background-opacity: var(
|
||||
--control-slider-background-opacity: var(
|
||||
--tile-slider-background-opacity,
|
||||
0.2
|
||||
);
|
||||
--slider-bar-thickness: 40px;
|
||||
--slider-bar-border-radius: 10px;
|
||||
--control-slider-thickness: 40px;
|
||||
--control-slider-border-radius: 10px;
|
||||
}
|
||||
`;
|
||||
}
|
||||
|
@ -7,8 +7,8 @@ import {
|
||||
computeOpenIcon,
|
||||
} from "../../../common/entity/cover_icon";
|
||||
import { supportsFeature } from "../../../common/entity/supports-feature";
|
||||
import "../../../components/ha-bar-button";
|
||||
import "../../../components/ha-bar-button-group";
|
||||
import "../../../components/ha-control-button";
|
||||
import "../../../components/ha-control-button-group";
|
||||
import {
|
||||
canClose,
|
||||
canOpen,
|
||||
@ -70,10 +70,10 @@ class HuiCoverOpenCloseTileFeature
|
||||
}
|
||||
|
||||
return html`
|
||||
<ha-bar-button-group>
|
||||
<ha-control-button-group>
|
||||
${supportsFeature(this.stateObj, CoverEntityFeature.OPEN)
|
||||
? html`
|
||||
<ha-bar-button
|
||||
<ha-control-button
|
||||
.label=${this.hass.localize(
|
||||
"ui.dialogs.more_info_control.cover.open_cover"
|
||||
)}
|
||||
@ -83,12 +83,12 @@ class HuiCoverOpenCloseTileFeature
|
||||
<ha-svg-icon
|
||||
.path=${computeOpenIcon(this.stateObj)}
|
||||
></ha-svg-icon>
|
||||
</ha-bar-button>
|
||||
</ha-control-button>
|
||||
`
|
||||
: null}
|
||||
${supportsFeature(this.stateObj, CoverEntityFeature.STOP)
|
||||
? html`
|
||||
<ha-bar-button
|
||||
<ha-control-button
|
||||
.label=${this.hass.localize(
|
||||
"ui.dialogs.more_info_control.cover.stop_cover"
|
||||
)}
|
||||
@ -96,12 +96,12 @@ class HuiCoverOpenCloseTileFeature
|
||||
.disabled=${!canStop(this.stateObj)}
|
||||
>
|
||||
<ha-svg-icon .path=${mdiStop}></ha-svg-icon>
|
||||
</ha-bar-button>
|
||||
</ha-control-button>
|
||||
`
|
||||
: null}
|
||||
${supportsFeature(this.stateObj, CoverEntityFeature.CLOSE)
|
||||
? html`
|
||||
<ha-bar-button
|
||||
<ha-control-button
|
||||
.label=${this.hass.localize(
|
||||
"ui.dialogs.more_info_control.cover.close_cover"
|
||||
)}
|
||||
@ -111,18 +111,18 @@ class HuiCoverOpenCloseTileFeature
|
||||
<ha-svg-icon
|
||||
.path=${computeCloseIcon(this.stateObj)}
|
||||
></ha-svg-icon>
|
||||
</ha-bar-button>
|
||||
</ha-control-button>
|
||||
`
|
||||
: undefined}
|
||||
</ha-bar-button-group>
|
||||
</ha-control-button-group>
|
||||
`;
|
||||
}
|
||||
|
||||
static get styles() {
|
||||
return css`
|
||||
ha-bar-button-group {
|
||||
ha-control-button-group {
|
||||
margin: 0 12px 12px 12px;
|
||||
--button-bar-group-spacing: 12px;
|
||||
--control-button-group-spacing: 12px;
|
||||
}
|
||||
`;
|
||||
}
|
||||
|
@ -3,8 +3,8 @@ import { HassEntity } from "home-assistant-js-websocket";
|
||||
import { css, html, LitElement, TemplateResult } from "lit";
|
||||
import { customElement, property, state } from "lit/decorators";
|
||||
import { supportsFeature } from "../../../common/entity/supports-feature";
|
||||
import "../../../components/ha-bar-button";
|
||||
import "../../../components/ha-bar-button-group";
|
||||
import "../../../components/ha-control-button";
|
||||
import "../../../components/ha-control-button-group";
|
||||
import {
|
||||
canCloseTilt,
|
||||
canOpenTilt,
|
||||
@ -66,10 +66,10 @@ class HuiCoverTiltTileFeature
|
||||
}
|
||||
|
||||
return html`
|
||||
<ha-bar-button-group>
|
||||
<ha-control-button-group>
|
||||
${supportsFeature(this.stateObj, CoverEntityFeature.OPEN_TILT)
|
||||
? html`
|
||||
<ha-bar-button
|
||||
<ha-control-button
|
||||
.label=${this.hass.localize(
|
||||
"ui.dialogs.more_info_control.cover.open_tilt_cover"
|
||||
)}
|
||||
@ -77,12 +77,12 @@ class HuiCoverTiltTileFeature
|
||||
.disabled=${!canOpenTilt(this.stateObj)}
|
||||
>
|
||||
<ha-svg-icon .path=${mdiArrowTopRight}></ha-svg-icon>
|
||||
</ha-bar-button>
|
||||
</ha-control-button>
|
||||
`
|
||||
: null}
|
||||
${supportsFeature(this.stateObj, CoverEntityFeature.STOP_TILT)
|
||||
? html`
|
||||
<ha-bar-button
|
||||
<ha-control-button
|
||||
.label=${this.hass.localize(
|
||||
"ui.dialogs.more_info_control.cover.stop_cover"
|
||||
)}
|
||||
@ -90,12 +90,12 @@ class HuiCoverTiltTileFeature
|
||||
.disabled=${!canStopTilt(this.stateObj)}
|
||||
>
|
||||
<ha-svg-icon .path=${mdiStop}></ha-svg-icon>
|
||||
</ha-bar-button>
|
||||
</ha-control-button>
|
||||
`
|
||||
: null}
|
||||
${supportsFeature(this.stateObj, CoverEntityFeature.CLOSE_TILT)
|
||||
? html`
|
||||
<ha-bar-button
|
||||
<ha-control-button
|
||||
.label=${this.hass.localize(
|
||||
"ui.dialogs.more_info_control.cover.close_tilt_cover"
|
||||
)}
|
||||
@ -103,18 +103,18 @@ class HuiCoverTiltTileFeature
|
||||
.disabled=${!canCloseTilt(this.stateObj)}
|
||||
>
|
||||
<ha-svg-icon .path=${mdiArrowBottomLeft}></ha-svg-icon>
|
||||
</ha-bar-button>
|
||||
</ha-control-button>
|
||||
`
|
||||
: undefined}
|
||||
</ha-bar-button-group>
|
||||
</ha-control-button-group>
|
||||
`;
|
||||
}
|
||||
|
||||
static get styles() {
|
||||
return css`
|
||||
ha-bar-button-group {
|
||||
ha-control-button-group {
|
||||
margin: 0 12px 12px 12px;
|
||||
--button-bar-group-spacing: 12px;
|
||||
--control-button-group-spacing: 12px;
|
||||
}
|
||||
`;
|
||||
}
|
||||
|
@ -11,8 +11,8 @@ import { HassEntity } from "home-assistant-js-websocket";
|
||||
import { css, html, LitElement, TemplateResult } from "lit";
|
||||
import { customElement, property, state } from "lit/decorators";
|
||||
import { supportsFeature } from "../../../common/entity/supports-feature";
|
||||
import "../../../components/ha-bar-button";
|
||||
import "../../../components/ha-bar-button-group";
|
||||
import "../../../components/ha-control-button";
|
||||
import "../../../components/ha-control-button-group";
|
||||
import { UNAVAILABLE } from "../../../data/entity";
|
||||
import {
|
||||
canReturnHome,
|
||||
@ -168,7 +168,7 @@ class HuiVacuumCommandTileFeature
|
||||
const stateObj = this.stateObj as VacuumEntity;
|
||||
|
||||
return html`
|
||||
<ha-bar-button-group>
|
||||
<ha-control-button-group>
|
||||
${VACUUM_COMMANDS.filter(
|
||||
(command) =>
|
||||
supportsVacuumCommand(stateObj, command) &&
|
||||
@ -176,7 +176,7 @@ class HuiVacuumCommandTileFeature
|
||||
).map((command) => {
|
||||
const button = VACUUM_COMMANDS_BUTTONS[command](stateObj);
|
||||
return html`
|
||||
<ha-bar-button
|
||||
<ha-control-button
|
||||
.entry=${button}
|
||||
.label=${this.hass!.localize(
|
||||
// @ts-ignore
|
||||
@ -186,18 +186,18 @@ class HuiVacuumCommandTileFeature
|
||||
.disabled=${button.disabled || stateObj.state === UNAVAILABLE}
|
||||
>
|
||||
<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() {
|
||||
return css`
|
||||
ha-bar-button-group {
|
||||
ha-control-button-group {
|
||||
margin: 0 12px 12px 12px;
|
||||
--button-bar-group-spacing: 12px;
|
||||
--control-button-group-spacing: 12px;
|
||||
}
|
||||
`;
|
||||
}
|
||||
|
Loading…
x
Reference in New Issue
Block a user