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

Make entry flow dialog modal (#4440)

Browse Source 
* Make entry flow dialog modal

* Add close button

* Update dialog-data-entry-flow.ts

* Fix aria-label
This commit is contained in:
Bram Kragten 2020-01-11 01:40:19 +01:00 committed by Paulus Schoutsen
parent 433aa16ea6
commit 5a172a64c5
3 changed files with 86 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -11,6 +11,7 @@ import {
import "@material/mwc-button";
import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
import "@polymer/paper-tooltip/paper-tooltip";
import "@polymer/paper-icon-button/paper-icon-button";
import "@polymer/paper-spinner/paper-spinner";
import { UnsubscribeFunc } from "home-assistant-js-websocket";
@ -124,6 +125,7 @@ class DataEntryFlowDialog extends LitElement {
<ha-paper-dialog
with-backdrop
opened
modal
@opened-changed=${this._openedChanged}
>
${this._loading || (this._step === null && this._handlers === undefined)
@ -134,53 +136,62 @@ class DataEntryFlowDialog extends LitElement {
? // When we are going to next step, we render 1 round of empty
// to reset the element.
""
: this._step === null
? // Show handler picker
html`
<step-flow-pick-handler
.flowConfig=${this._params.flowConfig}
.hass=${this.hass}
.handlers=${this._handlers}
.showAdvanced=${this._params.showAdvanced}
></step-flow-pick-handler>
`
: this._step.type === "form"
? html`
<step-flow-form
.flowConfig=${this._params.flowConfig}
.step=${this._step}
.hass=${this.hass}
></step-flow-form>
`
: this._step.type === "external"
? html`
<step-flow-external
.flowConfig=${this._params.flowConfig}
.step=${this._step}
.hass=${this.hass}
></step-flow-external>
`
: this._step.type === "abort"
? html`
<step-flow-abort
.flowConfig=${this._params.flowConfig}
.step=${this._step}
.hass=${this.hass}
></step-flow-abort>
`
: this._devices === undefined || this._areas === undefined
? // When it's a create entry result, we will fetch device & area registry
html`
<step-flow-loading></step-flow-loading>
`
: html`
<step-flow-create-entry
.flowConfig=${this._params.flowConfig}
.step=${this._step}
.hass=${this.hass}
.devices=${this._devices}
.areas=${this._areas}
></step-flow-create-entry>
<paper-icon-button
aria-label=${this.hass.localize(
"ui.panel.config.integrations.config_flow.dismiss"
)}
icon="hass:close"
dialog-dismiss
></paper-icon-button>
${this._step === null
? // Show handler picker
html`
<step-flow-pick-handler
.flowConfig=${this._params.flowConfig}
.hass=${this.hass}
.handlers=${this._handlers}
.showAdvanced=${this._params.showAdvanced}
></step-flow-pick-handler>
`
: this._step.type === "form"
? html`
<step-flow-form
.flowConfig=${this._params.flowConfig}
.step=${this._step}
.hass=${this.hass}
></step-flow-form>
`
: this._step.type === "external"
? html`
<step-flow-external
.flowConfig=${this._params.flowConfig}
.step=${this._step}
.hass=${this.hass}
></step-flow-external>
`
: this._step.type === "abort"
? html`
<step-flow-abort
.flowConfig=${this._params.flowConfig}
.step=${this._step}
.hass=${this.hass}
></step-flow-abort>
`
: this._devices === undefined || this._areas === undefined
? // When it's a create entry result, we will fetch device & area registry
html`
<step-flow-loading></step-flow-loading>
`
: html`
<step-flow-create-entry
.flowConfig=${this._params.flowConfig}
.step=${this._step}
.hass=${this.hass}
.devices=${this._devices}
.areas=${this._areas}
></step-flow-create-entry>
`}
`}
</ha-paper-dialog>
`;
@ -318,6 +329,12 @@ class DataEntryFlowDialog extends LitElement {
display: block;
padding: 0;
}
paper-icon-button {
display: inline-block;
padding: 8px;
margin: 16px 16px 0 0;
float: right;
}
`,
];
}

44
src/dialogs/config-flow/step-flow-pick-handler.ts
View File

@ -19,6 +19,7 @@ import "../../components/ha-icon-next";
import "../../common/search/search-input";
import { styleMap } from "lit-html/directives/style-map";
import { FlowConfig } from "./show-dialog-data-entry-flow";
import { configFlowContentStyles } from "./styles";
interface HandlerObj {
name: string;
@ -133,28 +134,27 @@ class StepFlowPickHandler extends LitElement {
});
}
static get styles(): CSSResult {
return css`
h2 {
margin-bottom: 2px;
padding-left: 16px;
}
div {
overflow: auto;
max-height: 600px;
}
paper-item {
cursor: pointer;
}
p {
text-align: center;
padding: 16px;
margin: 0;
}
p > a {
color: var(--primary-color);
}
`;
static get styles(): CSSResult[] {
return [
configFlowContentStyles,
css`
div {
overflow: auto;
max-height: 600px;
}
paper-item {
cursor: pointer;
}
p {
text-align: center;
padding: 16px;
margin: 0;
}
p > a {
color: var(--primary-color);
}
`,
];
}
}

1
src/translations/en.json
View File

@ -1373,6 +1373,7 @@
"config_flow": {
"aborted": "Aborted",
"close": "Close",
"dismiss": "Dismiss dialog",
"finish": "Finish",
"submit": "Submit",
"not_all_required_fields": "Not all required fields are filled in.",