jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-24 09:46:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

Use ha-icon-button-group in more info cover (#16911)

Browse Source
This commit is contained in:
Paul Bottein 2023-06-20 16:45:45 +02:00 committed by GitHub
parent 7bc2ca3b65
commit 13b864e261
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 25 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
src/dialogs/more-info/controls/more-info-cover.ts
View File

@ -11,6 +11,8 @@ import { customElement, property, state } from "lit/decorators";
import { computeStateDisplay } from "../../../common/entity/compute_state_display";
import { supportsFeature } from "../../../common/entity/supports-feature";
import "../../../components/ha-attributes";
import "../../../components/ha-icon-button-group";
import "../../../components/ha-icon-button-toggle";
import {
computeCoverPositionStateDisplay,
CoverEntity,
@ -24,6 +26,8 @@ import "../components/cover/ha-more-info-cover-toggle";
import { moreInfoControlStyle } from "../components/ha-more-info-control-style";
import "../components/ha-more-info-state-header";
type Mode = "position" | "button";
@customElement("more-info-cover")
class MoreInfoCover extends LitElement {
@property({ attribute: false }) public hass!: HomeAssistant;
@ -34,10 +38,10 @@ class MoreInfoCover extends LitElement {
@state() private _liveTilt?: number;
@state() private _mode?: "position" | "button";
@state() private _mode?: Mode;
private _toggleMode() {
this._mode = this._mode === "position" ? "button" : "position";
private _setMode(ev) {
this._mode = ev.currentTarget.mode;
}
private _positionSliderMoved(ev) {
@ -192,19 +196,26 @@ class MoreInfoCover extends LitElement {
(supportsPosition || supportsTiltPosition) &&
(supportsOpenClose || supportsTilt)
? html`
<div class="actions">
<ha-icon-button
<ha-icon-button-group>
<ha-icon-button-toggle
.label=${this.hass.localize(
`ui.dialogs.more_info_control.cover.switch_mode.${
this._mode === "position" ? "button" : "position"
}`
`ui.dialogs.more_info_control.cover.switch_mode.position`
)}
.path=${this._mode === "position"
? mdiSwapVertical
: mdiMenu}
@click=${this._toggleMode}
></ha-icon-button>
</div>
.selected=${this._mode === "position"}
.path=${mdiMenu}
.mode=${"position"}
@click=${this._setMode}
></ha-icon-button-toggle>
<ha-icon-button-toggle
.label=${this.hass.localize(
`ui.dialogs.more_info_control.cover.switch_mode.button`
)}
.selected=${this._mode === "button"}
.path=${mdiSwapVertical}
.mode=${"button"}
@click=${this._setMode}
></ha-icon-button-toggle>
</ha-icon-button-group>
`
: nothing
}