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

data-entry-flow: replace paper-dialog with mwc-dialog (#6129)

Browse Source
This commit is contained in:
Bram Kragten 2020-06-09 22:31:27 +02:00 committed by GitHub
parent 25cc76e022
commit 20dd3ca21c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 111 additions and 117 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/ha-dialog.ts
View File

@ -35,6 +35,9 @@ export class HaDialog extends MwcDialog {
display: block; display: block;
height: 20px; height: 20px;
} }
.mdc-dialog__content {
padding: var(--dialog-content-padding, 20px 24px);
}
.header_button { .header_button {
position: absolute; position: absolute;
right: 16px; right: 16px;

204
src/dialogs/config-flow/dialog-data-entry-flow.ts
View File

@ -14,8 +14,7 @@ import {
PropertyValues, PropertyValues,
TemplateResult, TemplateResult,
} from "lit-element"; } from "lit-element";
import "../../components/dialog/ha-paper-dialog"; import "../../components/ha-dialog";
import type { HaPaperDialog } from "../../components/dialog/ha-paper-dialog";
import "../../components/ha-form/ha-form"; import "../../components/ha-form/ha-form";
import "../../components/ha-markdown"; import "../../components/ha-markdown";
import { import {
@ -27,7 +26,6 @@ import {
DeviceRegistryEntry, DeviceRegistryEntry,
subscribeDeviceRegistry, subscribeDeviceRegistry,
} from "../../data/device_registry"; } from "../../data/device_registry";
import { PolymerChangedEvent } from "../../polymer-types";
import { haStyleDialog } from "../../resources/styles"; import { haStyleDialog } from "../../resources/styles";
import type { HomeAssistant } from "../../types"; import type { HomeAssistant } from "../../types";
import { DataEntryFlowDialogParams } from "./show-dialog-data-entry-flow"; import { DataEntryFlowDialogParams } from "./show-dialog-data-entry-flow";
@ -90,7 +88,6 @@ class DataEntryFlowDialog extends LitElement {
// We only load the handlers once // We only load the handlers once
if (this._handlers === undefined) { if (this._handlers === undefined) {
this._loading = true; this._loading = true;
this.updateComplete.then(() => this._scheduleCenterDialog());
try { try {
this._handlers = await params.flowConfig.getFlowHandlers(this.hass); this._handlers = await params.flowConfig.getFlowHandlers(this.hass);
} finally { } finally {
@ -98,7 +95,6 @@ class DataEntryFlowDialog extends LitElement {
} }
} }
await this.updateComplete; await this.updateComplete;
this._scheduleCenterDialog();
return; return;
} }
@ -115,9 +111,6 @@ class DataEntryFlowDialog extends LitElement {
this._processStep(step); this._processStep(step);
this._loading = false; this._loading = false;
// When the flow changes, center the dialog.
// Don't do it on each step or else the dialog keeps bouncing.
this._scheduleCenterDialog();
} }
protected render(): TemplateResult { protected render(): TemplateResult {
@ -126,80 +119,84 @@ class DataEntryFlowDialog extends LitElement {
} }
return html` return html`
<ha-paper-dialog <ha-dialog
with-backdrop open
opened @closing=${this._close}
modal scrimClickAction
@opened-changed=${this._openedChanged} escapeKeyAction
hideActions
> >
${this._loading || (this._step === null && this._handlers === undefined) <div>
? html` ${this._loading ||
<step-flow-loading (this._step === null && this._handlers === undefined)
.label=${this.hass.localize( ? html`
"ui.panel.config.integrations.config_flow.loading_first_time" <step-flow-loading
)} .label=${this.hass.localize(
></step-flow-loading> "ui.panel.config.integrations.config_flow.loading_first_time"
` )}
: this._step === undefined ></step-flow-loading>
? // When we are going to next step, we render 1 round of empty `
// to reset the element. : this._step === undefined
"" ? // When we are going to next step, we render 1 round of empty
: html` // to reset the element.
<ha-icon-button ""
aria-label=${this.hass.localize( : html`
"ui.panel.config.integrations.config_flow.dismiss" <ha-icon-button
)} aria-label=${this.hass.localize(
icon="hass:close" "ui.panel.config.integrations.config_flow.dismiss"
dialog-dismiss )}
></ha-icon-button> icon="hass:close"
${this._step === null dialogAction="close"
? // Show handler picker ></ha-icon-button>
html` ${this._step === null
<step-flow-pick-handler ? // Show handler picker
.flowConfig=${this._params.flowConfig} html`
.hass=${this.hass} <step-flow-pick-handler
.handlers=${this._handlers} .flowConfig=${this._params.flowConfig}
.showAdvanced=${this._params.showAdvanced} .hass=${this.hass}
></step-flow-pick-handler> .handlers=${this._handlers}
` .showAdvanced=${this._params.showAdvanced}
: this._step.type === "form" ></step-flow-pick-handler>
? html` `
<step-flow-form : this._step.type === "form"
.flowConfig=${this._params.flowConfig} ? html`
.step=${this._step} <step-flow-form
.hass=${this.hass} .flowConfig=${this._params.flowConfig}
></step-flow-form> .step=${this._step}
` .hass=${this.hass}
: this._step.type === "external" ></step-flow-form>
? html` `
<step-flow-external : this._step.type === "external"
.flowConfig=${this._params.flowConfig} ? html`
.step=${this._step} <step-flow-external
.hass=${this.hass} .flowConfig=${this._params.flowConfig}
></step-flow-external> .step=${this._step}
` .hass=${this.hass}
: this._step.type === "abort" ></step-flow-external>
? html` `
<step-flow-abort : this._step.type === "abort"
.flowConfig=${this._params.flowConfig} ? html`
.step=${this._step} <step-flow-abort
.hass=${this.hass} .flowConfig=${this._params.flowConfig}
></step-flow-abort> .step=${this._step}
` .hass=${this.hass}
: this._devices === undefined || this._areas === undefined ></step-flow-abort>
? // When it's a create entry result, we will fetch device & area registry `
html` <step-flow-loading></step-flow-loading> ` : this._devices === undefined || this._areas === undefined
: html` ? // When it's a create entry result, we will fetch device & area registry
<step-flow-create-entry html` <step-flow-loading></step-flow-loading> `
.flowConfig=${this._params.flowConfig} : html`
.step=${this._step} <step-flow-create-entry
.hass=${this.hass} .flowConfig=${this._params.flowConfig}
.devices=${this._devices} .step=${this._step}
.areas=${this._areas} .hass=${this.hass}
></step-flow-create-entry> .devices=${this._devices}
`} .areas=${this._areas}
`} ></step-flow-create-entry>
</ha-paper-dialog> `}
`}
</div>
</ha-dialog>
`; `;
} }
@ -225,18 +222,6 @@ class DataEntryFlowDialog extends LitElement {
this._areas = []; this._areas = [];
} }
} }
if (changedProps.has("_devices") && this._dialog) {
this._scheduleCenterDialog();
}
}
private _scheduleCenterDialog() {
setTimeout(() => this._dialog.center(), 0);
}
private get _dialog(): HaPaperDialog {
return this.shadowRoot!.querySelector("ha-paper-dialog")!;
} }
private async _fetchDevices(configEntryId) { private async _fetchDevices(configEntryId) {
@ -310,16 +295,13 @@ class DataEntryFlowDialog extends LitElement {
} }
} }
private _openedChanged(ev: PolymerChangedEvent<boolean>): void { private _close(): void {
// Closed dialog by clicking on the overlay if (this._step) {
if (!ev.detail.value) { this._flowDone();
if (this._step) { } else if (this._step === null) {
this._flowDone(); // Flow aborted during picking flow
} else if (this._step === null) { this._step = undefined;
// Flow aborted during picking flow this._params = undefined;
this._step = undefined;
this._params = undefined;
}
} }
} }
@ -327,18 +309,14 @@ class DataEntryFlowDialog extends LitElement {
return [ return [
haStyleDialog, haStyleDialog,
css` css`
ha-paper-dialog { ha-dialog {
max-width: 600px; --dialog-content-padding: 0;
}
ha-paper-dialog > * {
margin: 0;
display: block;
padding: 0;
} }
ha-icon-button { ha-icon-button {
display: inline-block; padding: 16px;
padding: 8px; position: absolute;
float: right; top: 0;
right: 0;
} }
`, `,
]; ];

15
src/dialogs/config-flow/styles.ts
View File

@ -2,8 +2,21 @@ import { css } from "lit-element";
export const configFlowContentStyles = css` export const configFlowContentStyles = css`
h2 { h2 {
margin-top: 24px; margin: 24px 0 0;
padding: 0 24px; padding: 0 24px;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
font-family: var(
--mdc-typography-headline6-font-family,
var(--mdc-typography-font-family, Roboto, sans-serif)
);
font-size: var(--mdc-typography-headline6-font-size, 1.25rem);
line-height: var(--mdc-typography-headline6-line-height, 2rem);
font-weight: var(--mdc-typography-headline6-font-weight, 500);
letter-spacing: var(--mdc-typography-headline6-letter-spacing, 0.0125em);
text-decoration: var(--mdc-typography-headline6-text-decoration, inherit);
text-transform: var(--mdc-typography-headline6-text-transform, inherit);
box-sizing: border-box;
} }
.content { .content {

6
src/panels/config/person/dialog-person-detail.ts
View File

@ -65,9 +65,9 @@ class DialogPersonDetail extends LitElement {
return html` return html`
<ha-dialog <ha-dialog
open open
@closing="${this._close}" @closing=${this._close}
scrimClickAction="" scrimClickAction
escapeKeyAction="" escapeKeyAction
.heading=${createCloseHeading( .heading=${createCloseHeading(
this.hass, this.hass,
this._params.entry this._params.entry