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