jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-29 04:06:35 +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

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

@ -11,6 +11,7 @@ import {
import "@material/mwc-button"; import "@material/mwc-button";
import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable"; import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
import "@polymer/paper-tooltip/paper-tooltip"; import "@polymer/paper-tooltip/paper-tooltip";
import "@polymer/paper-icon-button/paper-icon-button";
import "@polymer/paper-spinner/paper-spinner"; import "@polymer/paper-spinner/paper-spinner";
import { UnsubscribeFunc } from "home-assistant-js-websocket"; import { UnsubscribeFunc } from "home-assistant-js-websocket";
@ -124,6 +125,7 @@ class DataEntryFlowDialog extends LitElement {
<ha-paper-dialog <ha-paper-dialog
with-backdrop with-backdrop
opened opened
modal
@opened-changed=${this._openedChanged} @opened-changed=${this._openedChanged}
> >
${this._loading || (this._step === null && this._handlers === undefined) ${this._loading || (this._step === null && this._handlers === undefined)
@ -134,7 +136,15 @@ class DataEntryFlowDialog extends LitElement {
? // When we are going to next step, we render 1 round of empty ? // When we are going to next step, we render 1 round of empty
// to reset the element. // to reset the element.
"" ""
: this._step === null : html`
<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 ? // Show handler picker
html` html`
<step-flow-pick-handler <step-flow-pick-handler
@ -182,6 +192,7 @@ class DataEntryFlowDialog extends LitElement {
.areas=${this._areas} .areas=${this._areas}
></step-flow-create-entry> ></step-flow-create-entry>
`} `}
`}
</ha-paper-dialog> </ha-paper-dialog>
`; `;
} }
@ -318,6 +329,12 @@ class DataEntryFlowDialog extends LitElement {
display: block; display: block;
padding: 0; padding: 0;
} }
paper-icon-button {
display: inline-block;
padding: 8px;
margin: 16px 16px 0 0;
float: right;
}
`, `,
]; ];
} }

14
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 "../../common/search/search-input";
import { styleMap } from "lit-html/directives/style-map"; import { styleMap } from "lit-html/directives/style-map";
import { FlowConfig } from "./show-dialog-data-entry-flow"; import { FlowConfig } from "./show-dialog-data-entry-flow";
import { configFlowContentStyles } from "./styles";
interface HandlerObj { interface HandlerObj {
name: string; name: string;
@ -133,12 +134,10 @@ class StepFlowPickHandler extends LitElement {
}); });
} }
static get styles(): CSSResult { static get styles(): CSSResult[] {
return css` return [
h2 { configFlowContentStyles,
margin-bottom: 2px; css`
padding-left: 16px;
}
div { div {
overflow: auto; overflow: auto;
max-height: 600px; max-height: 600px;
@ -154,7 +153,8 @@ class StepFlowPickHandler extends LitElement {
p > a { p > a {
color: var(--primary-color); color: var(--primary-color);
} }
`; `,
];
} }
} }

1
src/translations/en.json
View File

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