diff --git a/src/components/ha-blueprint-picker.ts b/src/components/ha-blueprint-picker.ts index 73df1d44a2..ba17709a76 100644 --- a/src/components/ha-blueprint-picker.ts +++ b/src/components/ha-blueprint-picker.ts @@ -23,6 +23,10 @@ class HaBluePrintPicker extends LitElement { @property({ type: Boolean }) public disabled = false; + public open() { + this.shadowRoot!.querySelector("paper-dropdown-menu-light")!.open(); + } + private _processedBlueprints = memoizeOne((blueprints?: Blueprints) => { if (!blueprints) { return []; diff --git a/src/panels/config/automation/dialog-new-automation.ts b/src/panels/config/automation/dialog-new-automation.ts index a86d06bc19..3f00995b05 100644 --- a/src/panels/config/automation/dialog-new-automation.ts +++ b/src/panels/config/automation/dialog-new-automation.ts @@ -1,24 +1,19 @@ import "@material/mwc-button"; import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit"; import { customElement, property, state } from "lit/decorators"; -import { isComponentLoaded } from "../../../common/config/is_component_loaded"; import { fireEvent } from "../../../common/dom/fire_event"; import { nextRender } from "../../../common/util/render-status"; import "../../../components/ha-blueprint-picker"; import "../../../components/ha-card"; import "../../../components/ha-circular-progress"; import { createCloseHeading } from "../../../components/ha-dialog"; -import { - AutomationConfig, - showAutomationEditor, -} from "../../../data/automation"; -import { - HassDialog, - replaceDialog, -} from "../../../dialogs/make-dialog-manager"; +import { showAutomationEditor } from "../../../data/automation"; +import { HassDialog } from "../../../dialogs/make-dialog-manager"; import { haStyle, haStyleDialog } from "../../../resources/styles"; import type { HomeAssistant } from "../../../types"; -import { showThingtalkDialog } from "./thingtalk/show-dialog-thingtalk"; +import "@material/mwc-list/mwc-list-item"; +import "../../../components/ha-icon-next"; +import "@material/mwc-list/mwc-list"; @customElement("ha-dialog-new-automation") class DialogNewAutomation extends LitElement implements HassDialog { @@ -42,84 +37,52 @@ class DialogNewAutomation extends LitElement implements HassDialog { return html` -
- ${this.hass.localize("ui.panel.config.automation.dialog_new.how")} -
- ${isComponentLoaded(this.hass, "cloud") - ? html` -
-

- ${this.hass.localize( - "ui.panel.config.automation.dialog_new.thingtalk.header" - )} -

- ${this.hass.localize( - "ui.panel.config.automation.dialog_new.thingtalk.intro" - )} -
- - ${this.hass.localize( - "ui.panel.config.automation.dialog_new.thingtalk.create" - )} -
-
-
` - : html``} - ${isComponentLoaded(this.hass, "blueprint") - ? html` -
-

- ${this.hass.localize( - "ui.panel.config.automation.dialog_new.blueprint.use_blueprint" - )} -

- -
-
` - : html``} -
-
- - ${this.hass.localize( - "ui.panel.config.automation.dialog_new.start_empty" - )} - + + + ${this.hass.localize( + "ui.panel.config.automation.dialog_new.blueprint.use_blueprint" + )} + + + + +
  • + + ${this.hass.localize( + "ui.panel.config.automation.dialog_new.start_empty" + )} + + ${this.hass.localize( + "ui.panel.config.automation.dialog_new.start_empty_description" + )} + + +
    `; } - private _thingTalk() { - replaceDialog(); - showThingtalkDialog(this, { - callback: (config: Partial | undefined) => - showAutomationEditor(config), - input: this.shadowRoot!.querySelector("paper-input")!.value as string, - }); - this.closeDialog(); - } - private async _blueprintPicked(ev: CustomEvent) { this.closeDialog(); await nextRender(); showAutomationEditor({ use_blueprint: { path: ev.detail.value } }); } + private async _blueprint() { + this.shadowRoot!.querySelector("ha-blueprint-picker")!.open(); + } + private async _blank() { this.closeDialog(); await nextRender(); @@ -131,38 +94,14 @@ class DialogNewAutomation extends LitElement implements HassDialog { haStyle, haStyleDialog, css` - .container { - display: flex; - } - ha-card { - width: calc(50% - 8px); - margin: 4px; - } - ha-card div { - height: 100%; - display: flex; - flex-direction: column; - justify-content: space-between; - } - ha-card { - box-sizing: border-box; - padding: 8px; + mwc-list-item.blueprint { + height: 92px; } ha-blueprint-picker { - width: 100%; + margin-top: -16px; } - .side-by-side { - display: flex; - flex-direction: row; - align-items: flex-end; - } - @media all and (max-width: 500px) { - .container { - flex-direction: column; - } - ha-card { - width: 100%; - } + ha-dialog { + --dialog-content-padding: 0; } `, ]; diff --git a/src/panels/config/automation/ha-automation-picker.ts b/src/panels/config/automation/ha-automation-picker.ts index 0008f75059..cf06bc92ea 100644 --- a/src/panels/config/automation/ha-automation-picker.ts +++ b/src/panels/config/automation/ha-automation-picker.ts @@ -315,10 +315,7 @@ class HaAutomationPicker extends LitElement { }; private _createNew() { - if ( - isComponentLoaded(this.hass, "cloud") || - isComponentLoaded(this.hass, "blueprint") - ) { + if (isComponentLoaded(this.hass, "blueprint")) { showNewAutomationDialog(this); } else { navigate("/config/automation/edit/new");