Skip to content

Commit 1fbee60

Browse files
timmo001timmo001
committed
Migrate favorite color dialog to ha-wa-dialog
1 parent 28032d9 commit 1fbee60

File tree

1 file changed

+75
-103
lines changed

1 file changed

+75
-103
lines changed

‎src/dialogs/more-info/components/lights/dialog-light-color-favorite.ts‎

Lines changed: 75 additions & 103 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,11 @@
1-
import { mdiClose } from "@mdi/js";
21
import type { CSSResultGroup } from "lit";
32
import { css, html, LitElement, nothing } from "lit";
4-
import { customElement, property, state, query } from "lit/decorators";
3+
import { customElement, property, state } from "lit/decorators";
54
import { classMap } from "lit/directives/class-map";
65
import { fireEvent } from "../../../../common/dom/fire_event";
76
import "../../../../components/ha-button";
8-
import {
9-
getMobileOpenFromBottomAnimation,
10-
getMobileCloseToBottomAnimation,
11-
} from "../../../../components/ha-md-dialog";
12-
import type { HaMdDialog } from "../../../../components/ha-md-dialog";
13-
import "../../../../components/ha-dialog-header";
7+
import "../../../../components/ha-wa-dialog";
8+
import "../../../../components/ha-dialog-footer";
149
import "../../../../components/ha-icon-button-toggle";
1510
import type { EntityRegistryEntry } from "../../../../data/entity_registry";
1611
import type { LightColor, LightEntity } from "../../../../data/light";
@@ -41,7 +36,7 @@ class DialogLightColorFavorite extends LitElement {
4136

4237
@state() private _modes: LightPickerMode[] = [];
4338

44-
@query("ha-md-dialog") private _dialog?: HaMdDialog;
39+
@state() private _open = false;
4540

4641
public async showDialog(
4742
dialogParams: LightColorFavoriteDialogParams
@@ -50,10 +45,11 @@ class DialogLightColorFavorite extends LitElement {
5045
this._dialogParams = dialogParams;
5146
this._color = dialogParams.initialColor ?? this._computeCurrentColor();
5247
this._updateModes();
48+
this._open = true;
5349
}
5450

5551
public closeDialog(): void {
56-
this._dialog?.close();
52+
this._open = false;
5753
}
5854

5955
private _updateModes() {
@@ -124,11 +120,6 @@ class DialogLightColorFavorite extends LitElement {
124120
this._dialogParams?.cancel?.();
125121
}
126122

127-
private _cancelDialog() {
128-
this._cancel();
129-
this.closeDialog();
130-
}
131-
132123
private _dialogClosed(): void {
133124
this._dialogParams = undefined;
134125
this._entry = undefined;
@@ -159,108 +150,89 @@ class DialogLightColorFavorite extends LitElement {
159150
}
160151

161152
return html`
162-
<ha-md-dialog
163-
open
153+
<ha-wa-dialog
154+
.hass=${this.hass}
155+
.open=${this._open}
164156
@cancel=${this._cancel}
165157
@closed=${this._dialogClosed}
166-
aria-labelledby="dialog-light-color-favorite-title"
167-
.getOpenAnimation=${getMobileOpenFromBottomAnimation}
168-
.getCloseAnimation=${getMobileCloseToBottomAnimation}
158+
header-title=${this._dialogParams?.title}
169159
>
170-
<ha-dialog-header slot="headline">
171-
<ha-icon-button
172-
slot="navigationIcon"
173-
@click=${this.closeDialog}
174-
.label=${this.hass.localize("ui.common.close")}
175-
.path=${mdiClose}
176-
></ha-icon-button>
177-
<span slot="title" id="dialog-light-color-favorite-title"
178-
>${this._dialogParams?.title}</span
179-
>
180-
</ha-dialog-header>
181-
<div slot="content">
182-
<div class="header">
183-
${this._modes.length > 1
184-
? html`
185-
<div class="modes">
186-
${this._modes.map(
187-
(value) => html`
188-
<ha-icon-button-toggle
189-
border-only
190-
.selected=${value === this._mode}
191-
.label=${this.hass.localize(
192-
`ui.dialogs.more_info_control.light.color_picker.mode.${value}`
193-
)}
194-
.mode=${value}
195-
@click=${this._modeChanged}
196-
>
197-
<span
198-
class="wheel ${classMap({ [value]: true })}"
199-
></span>
200-
</ha-icon-button-toggle>
201-
`
202-
)}
203-
</div>
204-
`
205-
: nothing}
206-
</div>
207-
<div class="content">
208-
${this._mode === "color_temp"
209-
? html`
210-
<light-color-temp-picker
211-
.hass=${this.hass}
212-
.stateObj=${this.stateObj}
213-
@color-changed=${this._colorChanged}
214-
>
215-
</light-color-temp-picker>
216-
`
217-
: nothing}
218-
${this._mode === "color"
219-
? html`
220-
<light-color-rgb-picker
221-
.hass=${this.hass}
222-
.stateObj=${this.stateObj}
223-
@color-changed=${this._colorChanged}
224-
>
225-
</light-color-rgb-picker>
226-
`
227-
: nothing}
228-
</div>
160+
<div class="header">
161+
${this._modes.length > 1
162+
? html`
163+
<div class="modes">
164+
${this._modes.map(
165+
(value) => html`
166+
<ha-icon-button-toggle
167+
border-only
168+
.selected=${value === this._mode}
169+
.label=${this.hass.localize(
170+
`ui.dialogs.more_info_control.light.color_picker.mode.${value}`
171+
)}
172+
.mode=${value}
173+
@click=${this._modeChanged}
174+
>
175+
<span
176+
class="wheel ${classMap({ [value]: true })}"
177+
></span>
178+
</ha-icon-button-toggle>
179+
`
180+
)}
181+
</div>
182+
`
183+
: nothing}
184+
</div>
185+
<div class="content">
186+
${this._mode === "color_temp"
187+
? html`
188+
<light-color-temp-picker
189+
.hass=${this.hass}
190+
.stateObj=${this.stateObj}
191+
@color-changed=${this._colorChanged}
192+
>
193+
</light-color-temp-picker>
194+
`
195+
: nothing}
196+
${this._mode === "color"
197+
? html`
198+
<light-color-rgb-picker
199+
.hass=${this.hass}
200+
.stateObj=${this.stateObj}
201+
@color-changed=${this._colorChanged}
202+
>
203+
</light-color-rgb-picker>
204+
`
205+
: nothing}
229206
</div>
230-
<div slot="actions">
231-
<ha-button appearance="plain" @click=${this._cancelDialog}>
207+
208+
<ha-dialog-footer slot="footer">
209+
<ha-button
210+
slot="secondaryAction"
211+
appearance="plain"
212+
data-dialog="close"
213+
@click=${this._cancel}
214+
>
232215
${this.hass.localize("ui.common.cancel")}
233216
</ha-button>
234-
<ha-button @click=${this._save} .disabled=${!this._color}
235-
>${this.hass.localize("ui.common.save")}</ha-button
217+
<ha-button
218+
slot="primaryAction"
219+
appearance="accent"
220+
@click=${this._save}
221+
.disabled=${!this._color}
236222
>
237-
</div>
238-
</ha-md-dialog>
223+
${this.hass.localize("ui.common.save")}
224+
</ha-button>
225+
</ha-dialog-footer>
226+
</ha-wa-dialog>
239227
`;
240228
}
241229

242230
static get styles(): CSSResultGroup {
243231
return [
244232
haStyleDialog,
245233
css`
246-
ha-md-dialog {
247-
min-width: 420px; /* prevent width jumps when switching modes */
248-
max-height: min(
249-
600px,
250-
100% - 48px
251-
); /* prevent scrolling on desktop */
252-
}
253-
254-
@media all and (max-width: 450px), all and (max-height: 500px) {
255-
ha-md-dialog {
256-
min-width: 100%;
257-
min-height: auto;
258-
max-height: calc(100% - 100px);
259-
margin-bottom: 0;
260-
261-
--md-dialog-container-shape-start-start: 28px;
262-
--md-dialog-container-shape-start-end: 28px;
263-
}
234+
ha-wa-dialog {
235+
--dialog-content-padding: 0;
264236
}
265237
266238
.content {

0 commit comments

Comments
 (0)