Home-Assistant/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2026-02-15 07:25:54 +00:00
Code 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
17 changed files with 177 additions and 173 deletions
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;
}
}