jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-28 11:46: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 { 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
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 { 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
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 { 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;
}
}

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 { 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;
}
}

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

@ -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;
}
}

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);
};
@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;
}
}

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 "./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;
}
}

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

@ -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;
}
`;
}

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

@ -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;
}
`;
}

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 { 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;
}
`;
}

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 { 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;
}
`;
}