From 0e044acaa9183e4eed2ff6f1e84461eeca02110a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Thomas=20Lov=C3=A9n?= Date: Tue, 7 May 2019 18:26:56 +0200 Subject: [PATCH] ha-card migration Step #1 Configuration (#3161) * Improvements to ha-card. Better paper-card compatibility * Remove named slots * Tweak distance between header and contents * Further css tweaking * Convert config dashboard to ha-card * Convert cloud configuration to ha-card. * Convert integrations configuration to ha-card. * Convert user configuration to ha-card. * Convert core configuration to ha-card * Convert person, entity and area config to ha-card * Convert automation and script editor to ha-card * Convert customization editor to ha-card --- .../area_registry/ha-config-area-registry.ts | 10 ++-- .../config/automation/ha-automation-editor.ts | 10 ++-- .../config/automation/ha-automation-picker.js | 10 +++- src/panels/config/cloud/cloud-alexa-pref.ts | 12 ++-- src/panels/config/cloud/cloud-google-pref.ts | 12 ++-- src/panels/config/cloud/cloud-remote-pref.ts | 19 +++---- src/panels/config/cloud/cloud-webhooks.ts | 25 ++++----- .../config/cloud/ha-config-cloud-account.js | 9 +-- .../cloud/ha-config-cloud-forgot-password.js | 10 ++-- .../config/cloud/ha-config-cloud-login.js | 25 ++++----- .../config/cloud/ha-config-cloud-register.js | 13 +---- .../config/core/ha-config-section-core.js | 20 +++---- .../config/dashboard/ha-config-dashboard.js | 16 +++--- .../config/dashboard/ha-config-navigation.js | 10 ++-- .../ha-config-entity-registry.ts | 10 ++-- src/panels/config/ha-entity-config.js | 9 ++- .../integrations/ha-ce-entities-card.js | 8 +-- .../ha-config-entries-dashboard.js | 16 +++--- .../integrations/ha-config-entry-page.js | 1 - .../config/integrations/ha-device-card.js | 8 +-- src/panels/config/js/automation.js | 6 +- .../config/js/condition/condition_row.js | 56 +++++++++---------- src/panels/config/js/condition/index.js | 6 +- src/panels/config/js/script.js | 6 +- src/panels/config/js/script/action_row.js | 56 +++++++++---------- src/panels/config/js/script/index.js | 6 +- src/panels/config/js/trigger/index.js | 6 +- src/panels/config/js/trigger/trigger_row.js | 56 +++++++++---------- src/panels/config/person/ha-config-person.ts | 16 +++--- src/panels/config/script/ha-script-editor.js | 7 +-- src/panels/config/script/ha-script-picker.js | 10 +++- .../config/users/ha-config-user-picker.js | 10 ++-- src/panels/config/users/ha-user-editor.ts | 18 ++---- 33 files changed, 246 insertions(+), 266 deletions(-) diff --git a/src/panels/config/area_registry/ha-config-area-registry.ts b/src/panels/config/area_registry/ha-config-area-registry.ts index e34c92272c..c96748b141 100644 --- a/src/panels/config/area_registry/ha-config-area-registry.ts +++ b/src/panels/config/area_registry/ha-config-area-registry.ts @@ -8,7 +8,6 @@ import { } from "lit-element"; import "@polymer/paper-item/paper-item"; import "@polymer/paper-item/paper-item-body"; -import "@polymer/paper-card/paper-card"; import "@polymer/paper-fab/paper-fab"; import { HomeAssistant } from "../../../types"; @@ -19,6 +18,7 @@ import { deleteAreaRegistryEntry, createAreaRegistryEntry, } from "../../../data/area_registry"; +import "../../../components/ha-card"; import "../../../layouts/hass-subpage"; import "../../../layouts/hass-loading-screen"; import compare from "../../../common/string/compare"; @@ -72,7 +72,7 @@ class HaConfigAreaRegistry extends LitElement { )} - + ${this._items.map((entry) => { return html` @@ -96,7 +96,7 @@ class HaConfigAreaRegistry extends LitElement { ` : html``} - + @@ -178,10 +178,10 @@ All devices in this area will become unassigned.`) a { color: var(--primary-color); } - paper-card { - display: block; + ha-card { max-width: 600px; margin: 16px auto; + overflow: hidden; } .empty { text-align: center; diff --git a/src/panels/config/automation/ha-automation-editor.ts b/src/panels/config/automation/ha-automation-editor.ts index 06003edcb2..dfc7b8d632 100644 --- a/src/panels/config/automation/ha-automation-editor.ts +++ b/src/panels/config/automation/ha-automation-editor.ts @@ -226,6 +226,9 @@ class HaAutomationEditor extends LitElement { return [ haStyle, css` + ha-card { + overflow: hidden; + } .errors { padding: 20px; font-weight: bold; @@ -234,15 +237,12 @@ class HaAutomationEditor extends LitElement { .content { padding-bottom: 20px; } - paper-card { - display: block; - } .triggers, .script { margin-top: -16px; } - .triggers paper-card, - .script paper-card { + .triggers ha-card, + .script ha-card { margin-top: 16px; } .add-card mwc-button { diff --git a/src/panels/config/automation/ha-automation-picker.js b/src/panels/config/automation/ha-automation-picker.js index 4ae79560cc..ea9eb0c156 100644 --- a/src/panels/config/automation/ha-automation-picker.js +++ b/src/panels/config/automation/ha-automation-picker.js @@ -1,6 +1,5 @@ import "@polymer/app-layout/app-header/app-header"; import "@polymer/app-layout/app-toolbar/app-toolbar"; -import "@polymer/paper-card/paper-card"; import "@polymer/paper-fab/paper-fab"; import "@polymer/paper-icon-button/paper-icon-button"; import "@polymer/paper-item/paper-item-body"; @@ -8,6 +7,7 @@ import "@polymer/paper-item/paper-item"; import { html } from "@polymer/polymer/lib/utils/html-tag"; import { PolymerElement } from "@polymer/polymer/polymer-element"; +import "../../../components/ha-card"; import "../../../components/ha-paper-icon-button-arrow-prev"; import "../../../layouts/ha-app-layout"; @@ -32,6 +32,10 @@ class HaAutomationPicker extends LocalizeMixin(NavigateMixin(PolymerElement)) { display: block; } + ha-card { + overflow: hidden; + } + paper-item { cursor: pointer; } @@ -91,7 +95,7 @@ class HaAutomationPicker extends LocalizeMixin(NavigateMixin(PolymerElement)) {

- - + + - + `; } @@ -92,10 +93,11 @@ export class CloudAlexaPref extends LitElement { a { color: var(--primary-color); } - paper-card > paper-toggle-button { + ha-card > paper-toggle-button { + margin: -4px 0; position: absolute; right: 8px; - top: 16px; + top: 32px; } `; } diff --git a/src/panels/config/cloud/cloud-google-pref.ts b/src/panels/config/cloud/cloud-google-pref.ts index 18753a83f6..52be2cb5a4 100644 --- a/src/panels/config/cloud/cloud-google-pref.ts +++ b/src/panels/config/cloud/cloud-google-pref.ts @@ -7,12 +7,13 @@ import { css, } from "lit-element"; import "@material/mwc-button"; -import "@polymer/paper-card/paper-card"; import "@polymer/paper-toggle-button/paper-toggle-button"; // tslint:disable-next-line import { PaperToggleButtonElement } from "@polymer/paper-toggle-button/paper-toggle-button"; import "../../../components/buttons/ha-call-api-button"; +import "../../../components/ha-card"; + import { fireEvent } from "../../../common/dom/fire_event"; import { HomeAssistant } from "../../../types"; import "./cloud-exposed-entities"; @@ -41,7 +42,7 @@ export class CloudGooglePref extends LitElement { } = this.cloudStatus.prefs; return html` - + Sync devices - + `; } @@ -137,10 +138,11 @@ export class CloudGooglePref extends LitElement { a { color: var(--primary-color); } - paper-card > paper-toggle-button { + ha-card > paper-toggle-button { + margin: -4px 0; position: absolute; right: 8px; - top: 16px; + top: 32px; } ha-call-api-button { color: var(--primary-color); diff --git a/src/panels/config/cloud/cloud-remote-pref.ts b/src/panels/config/cloud/cloud-remote-pref.ts index bf0fdebce6..140be2c388 100644 --- a/src/panels/config/cloud/cloud-remote-pref.ts +++ b/src/panels/config/cloud/cloud-remote-pref.ts @@ -8,12 +8,13 @@ import { css, } from "lit-element"; import "@material/mwc-button"; -import "@polymer/paper-card/paper-card"; import "@polymer/paper-toggle-button/paper-toggle-button"; import "@polymer/paper-item/paper-item-body"; // tslint:disable-next-line import { PaperToggleButtonElement } from "@polymer/paper-toggle-button/paper-toggle-button"; +import "../../../components/ha-card"; + import { fireEvent } from "../../../common/dom/fire_event"; import { HomeAssistant } from "../../../types"; import { @@ -48,16 +49,16 @@ export class CloudRemotePref extends LitElement { if (!remote_certificate) { return html` - +
Remote access is being prepared. We will notify you when it's ready.
- + `; } return html` - + - + `; } @@ -111,19 +112,17 @@ export class CloudRemotePref extends LitElement { static get styles(): CSSResult { return css` - paper-card { - display: block; - } .preparing { padding: 0 16px 16px; } a { color: var(--primary-color); } - paper-card > paper-toggle-button { + ha-card > paper-toggle-button { + margin: -4px 0; position: absolute; right: 8px; - top: 16px; + top: 32px; } .card-actions { display: flex; diff --git a/src/panels/config/cloud/cloud-webhooks.ts b/src/panels/config/cloud/cloud-webhooks.ts index 88ae355426..0074ac122e 100644 --- a/src/panels/config/cloud/cloud-webhooks.ts +++ b/src/panels/config/cloud/cloud-webhooks.ts @@ -51,19 +51,17 @@ export class CloudWebhooks extends LitElement { return html` ${this.renderStyle()} -
+
Anything that is configured to be triggered by a webhook can be given a publicly accessible URL to allow you to send data back to Home Assistant from anywhere, without exposing your instance to the - internet. -
+ internet. ${this._renderBody()} - ${this._renderBody()} - -
- - Learn more about creating webhook-powered automations. - +
+ + Learn more about creating webhook-powered automations. + +
`; @@ -194,15 +192,12 @@ export class CloudWebhooks extends LitElement { private renderStyle() { return html`
- +
-

Forgot your password?

Enter your email address and we will send you a link to reset your password. @@ -72,7 +70,7 @@ class HaConfigCloudForgotPassword extends EventsMixin(PolymerElement) { >Send reset email

- +
`; diff --git a/src/panels/config/cloud/ha-config-cloud-login.js b/src/panels/config/cloud/ha-config-cloud-login.js index 7445a2769b..2bc2063948 100644 --- a/src/panels/config/cloud/ha-config-cloud-login.js +++ b/src/panels/config/cloud/ha-config-cloud-login.js @@ -1,5 +1,4 @@ import "@material/mwc-button"; -import "@polymer/paper-card/paper-card"; import "@polymer/paper-icon-button/paper-icon-button"; import "@polymer/paper-input/paper-input"; import "@polymer/paper-item/paper-item-body"; @@ -8,6 +7,7 @@ import "@polymer/paper-ripple/paper-ripple"; import { html } from "@polymer/polymer/lib/utils/html-tag"; import { PolymerElement } from "@polymer/polymer/polymer-element"; +import "../../../components/ha-card"; import "../../../components/buttons/ha-progress-button"; import "../../../layouts/hass-subpage"; import "../../../resources/ha-style"; @@ -34,14 +34,14 @@ class HaConfigCloudLogin extends NavigateMixin(EventsMixin(PolymerElement)) { [slot="introduction"] a { color: var(--primary-color); } - paper-card { - display: block; - } paper-item { cursor: pointer; } - paper-card:last-child { - margin-top: 24px; + ha-card { + overflow: hidden; + } + ha-card .card-header { + margin-bottom: -8px; } h1 { @apply --paper-font-headline; @@ -97,7 +97,7 @@ class HaConfigCloudLogin extends NavigateMixin(EventsMixin(PolymerElement)) {

- +
[[flashMessage]]
- + - +
-

Sign In

[[_error]]
- + - + Start your free 1 month trial @@ -152,7 +151,7 @@ class HaConfigCloudLogin extends NavigateMixin(EventsMixin(PolymerElement)) { - + diff --git a/src/panels/config/cloud/ha-config-cloud-register.js b/src/panels/config/cloud/ha-config-cloud-register.js index b387e18d01..a783810bdf 100644 --- a/src/panels/config/cloud/ha-config-cloud-register.js +++ b/src/panels/config/cloud/ha-config-cloud-register.js @@ -1,8 +1,8 @@ -import "@polymer/paper-card/paper-card"; import "@polymer/paper-input/paper-input"; import { html } from "@polymer/polymer/lib/utils/html-tag"; import { PolymerElement } from "@polymer/polymer/polymer-element"; +import "../../../components/ha-card"; import "../../../components/buttons/ha-progress-button"; import "../../../layouts/hass-subpage"; import "../../../resources/ha-style"; @@ -29,15 +29,9 @@ class HaConfigCloudRegister extends EventsMixin(PolymerElement) { a { color: var(--primary-color); } - paper-card { - display: block; - } paper-item { cursor: pointer; } - paper-card:last-child { - margin-top: 24px; - } h1 { @apply --paper-font-headline; margin: 0; @@ -84,10 +78,9 @@ class HaConfigCloudRegister extends EventsMixin(PolymerElement) {

- +
-

Create Account

[[_error]]
@@ -97,7 +90,7 @@ class HaConfigCloudRegister extends EventsMixin(PolymerElement) { Start trial
- + diff --git a/src/panels/config/core/ha-config-section-core.js b/src/panels/config/core/ha-config-section-core.js index ee9c3547d0..4824b74fc5 100644 --- a/src/panels/config/core/ha-config-section-core.js +++ b/src/panels/config/core/ha-config-section-core.js @@ -1,9 +1,9 @@ import "@material/mwc-button"; -import "@polymer/paper-card/paper-card"; import "@polymer/paper-input/paper-input"; import { html } from "@polymer/polymer/lib/utils/html-tag"; import { PolymerElement } from "@polymer/polymer/polymer-element"; +import "../../../components/ha-card"; import "../../../components/buttons/ha-call-service-button"; import "../../../resources/ha-style"; @@ -57,8 +57,8 @@ class HaConfigSectionCore extends LocalizeMixin(PolymerElement) { >[[localize('ui.panel.config.core.section.core.introduction')]] -
[[localize('ui.panel.config.core.section.core.validation.introduction')]] @@ -91,10 +91,10 @@ class HaConfigSectionCore extends LocalizeMixin(PolymerElement) {
[[validateLog]]
- + -
[[localize('ui.panel.config.core.section.core.reloading.introduction')]] @@ -128,10 +128,10 @@ class HaConfigSectionCore extends LocalizeMixin(PolymerElement) { >[[localize('ui.panel.config.core.section.core.reloading.script')]]
- + -
[[localize('ui.panel.config.core.section.core.server_management.introduction')]] @@ -152,7 +152,7 @@ class HaConfigSectionCore extends LocalizeMixin(PolymerElement) { >[[localize('ui.panel.config.core.section.core.server_management.stop')]]
- + `; } diff --git a/src/panels/config/dashboard/ha-config-dashboard.js b/src/panels/config/dashboard/ha-config-dashboard.js index 41d6226f71..8c4a40a721 100644 --- a/src/panels/config/dashboard/ha-config-dashboard.js +++ b/src/panels/config/dashboard/ha-config-dashboard.js @@ -2,12 +2,12 @@ import "@polymer/app-layout/app-header-layout/app-header-layout"; import "@polymer/app-layout/app-header/app-header"; import "@polymer/app-layout/app-toolbar/app-toolbar"; import "@polymer/iron-icon/iron-icon"; -import "@polymer/paper-card/paper-card"; import "@polymer/paper-item/paper-item-body"; import "@polymer/paper-item/paper-item"; import { html } from "@polymer/polymer/lib/utils/html-tag"; import { PolymerElement } from "@polymer/polymer/polymer-element"; +import "../../../components/ha-card"; import "../../../components/ha-menu-button"; import "../../../components/ha-icon-next"; @@ -25,12 +25,12 @@ class HaConfigDashboard extends NavigateMixin(LocalizeMixin(PolymerElement)) { static get template() { return html` - + - + `; } diff --git a/src/panels/config/entity_registry/ha-config-entity-registry.ts b/src/panels/config/entity_registry/ha-config-entity-registry.ts index 8e5bd8b375..39b5666ca9 100644 --- a/src/panels/config/entity_registry/ha-config-entity-registry.ts +++ b/src/panels/config/entity_registry/ha-config-entity-registry.ts @@ -8,7 +8,6 @@ import { } from "lit-element"; import "@polymer/paper-item/paper-icon-item"; import "@polymer/paper-item/paper-item-body"; -import "@polymer/paper-card/paper-card"; import { HomeAssistant } from "../../../types"; import { @@ -20,6 +19,7 @@ import { } from "../../../data/entity_registry"; import "../../../layouts/hass-subpage"; import "../../../layouts/hass-loading-screen"; +import "../../../components/ha-card"; import "../../../components/ha-icon"; import compare from "../../../common/string/compare"; import domainIcon from "../../../common/entity/domain_icon"; @@ -77,7 +77,7 @@ class HaConfigEntityRegistry extends LitElement { )} - + ${this._items.map((entry) => { const state = this.hass!.states[entry.entity_id]; return html` @@ -103,7 +103,7 @@ class HaConfigEntityRegistry extends LitElement { `; })} - + `; @@ -162,9 +162,9 @@ Deleting an entry will not remove the entity from Home Assistant. To do this, yo a { color: var(--primary-color); } - paper-card { - display: block; + ha-card { direction: ltr; + overflow: hidden; } paper-icon-item { cursor: pointer; diff --git a/src/panels/config/ha-entity-config.js b/src/panels/config/ha-entity-config.js index f2e0386871..15661b5c62 100644 --- a/src/panels/config/ha-entity-config.js +++ b/src/panels/config/ha-entity-config.js @@ -1,11 +1,11 @@ import "@material/mwc-button"; -import "@polymer/paper-card/paper-card"; import "@polymer/paper-dropdown-menu/paper-dropdown-menu"; import "@polymer/paper-item/paper-item"; import "@polymer/paper-listbox/paper-listbox"; import "@polymer/paper-spinner/paper-spinner"; import { html } from "@polymer/polymer/lib/utils/html-tag"; import { PolymerElement } from "@polymer/polymer/polymer-element"; +import "../../components/ha-card"; import computeStateName from "../../common/entity/compute_state_name"; @@ -13,8 +13,7 @@ class HaEntityConfig extends PolymerElement { static get template() { return html` - +
- + `; } diff --git a/src/panels/config/integrations/ha-ce-entities-card.js b/src/panels/config/integrations/ha-ce-entities-card.js index c06a75d525..1deeaf1cd9 100644 --- a/src/panels/config/integrations/ha-ce-entities-card.js +++ b/src/panels/config/integrations/ha-ce-entities-card.js @@ -1,9 +1,9 @@ import "@polymer/paper-item/paper-icon-item"; import "@polymer/paper-item/paper-item-body"; -import "@polymer/paper-card/paper-card"; import { html } from "@polymer/polymer/lib/utils/html-tag"; import { PolymerElement } from "@polymer/polymer/polymer-element"; +import "../../../components/ha-card"; import "../../../layouts/hass-subpage"; import EventsMixin from "../../../mixins/events-mixin"; @@ -19,7 +19,7 @@ class HaCeEntitiesCard extends LocalizeMixIn(EventsMixin(PolymerElement)) { static get template() { return html` - + - + `; } diff --git a/src/panels/config/integrations/ha-config-entries-dashboard.js b/src/panels/config/integrations/ha-config-entries-dashboard.js index e7582b6c91..2d73bda80b 100644 --- a/src/panels/config/integrations/ha-config-entries-dashboard.js +++ b/src/panels/config/integrations/ha-config-entries-dashboard.js @@ -2,13 +2,13 @@ import "@polymer/iron-flex-layout/iron-flex-layout-classes"; import "@polymer/paper-tooltip/paper-tooltip"; import "@material/mwc-button"; import "@polymer/paper-fab/paper-fab"; -import "@polymer/paper-card/paper-card"; import "@polymer/iron-icon/iron-icon"; import "@polymer/paper-item/paper-item"; import "@polymer/paper-item/paper-item-body"; import { html } from "@polymer/polymer/lib/utils/html-tag"; import { PolymerElement } from "@polymer/polymer/polymer-element"; +import "../../../components/ha-card"; import "../../../components/entity/ha-state-icon"; import "../../../layouts/hass-subpage"; import "../../../resources/ha-style"; @@ -34,13 +34,13 @@ class HaConfigManagerDashboard extends LocalizeMixin( static get template() { return html` - +