From 3ff8211a8180ccd5a2d437ec726dd2e9c4aa4b1a Mon Sep 17 00:00:00 2001 From: Zack Arnett Date: Sat, 29 Aug 2020 01:52:48 -0500 Subject: [PATCH] style updates --- .../buttons/ha-call-service-button.js | 6 + src/components/buttons/ha-progress-button.js | 27 +- .../config/cloud/account/cloud-account.js | 71 +++-- src/panels/config/cloud/login/cloud-login.js | 2 +- .../config/cloud/register/cloud-register.js | 2 +- src/panels/config/core/ha-config-core.ts | 107 +++---- src/panels/config/core/ha-config-name-form.ts | 17 + .../config/core/ha-config-section-core.ts | 171 ++++------ src/panels/config/ha-config-section.ts | 31 +- .../ha-config-server-control.ts | 297 ++++++++++++------ 10 files changed, 432 insertions(+), 299 deletions(-) diff --git a/src/components/buttons/ha-call-service-button.js b/src/components/buttons/ha-call-service-button.js index 391c9b8e22..dc6b1abf70 100644 --- a/src/components/buttons/ha-call-service-button.js +++ b/src/components/buttons/ha-call-service-button.js @@ -16,6 +16,7 @@ class HaCallServiceButton extends EventsMixin(PolymerElement) { progress="[[progress]]" on-click="buttonTapped" tabindex="0" + raised="[[raised]]" > `; @@ -48,6 +49,11 @@ class HaCallServiceButton extends EventsMixin(PolymerElement) { confirmation: { type: String, }, + + raised: { + type: Boolean, + value: false, + }, }; } diff --git a/src/components/buttons/ha-progress-button.js b/src/components/buttons/ha-progress-button.js index ea4f90184c..7ff4591f19 100644 --- a/src/components/buttons/ha-progress-button.js +++ b/src/components/buttons/ha-progress-button.js @@ -10,6 +10,7 @@ class HaProgressButton extends PolymerElement { -
+
@@ -74,6 +86,11 @@ class HaProgressButton extends PolymerElement { type: Boolean, value: false, }, + + raised: { + type: Boolean, + value: false, + }, }; } @@ -105,6 +122,10 @@ class HaProgressButton extends PolymerElement { computeDisabled(disabled, progress) { return disabled || progress; } + + computeClasses(raised) { + return raised ? "raised" : ""; + } } customElements.define("ha-progress-button", HaProgressButton); diff --git a/src/panels/config/cloud/account/cloud-account.js b/src/panels/config/cloud/account/cloud-account.js index fda5256c36..34871b5d7b 100644 --- a/src/panels/config/cloud/account/cloud-account.js +++ b/src/panels/config/cloud/account/cloud-account.js @@ -60,10 +60,32 @@ class CloudAccount extends EventsMixin(LocalizeMixin(PolymerElement)) { a { color: var(--primary-color); } + + .integrations { + display: flex; + flex-wrap: wrap; + justify-content: space-between; + } + + .integrations cloud-alexa-pref, + .integrations cloud-google-pref { + width: calc(50% - 12px); + margin-top: 24px; + } + + .integrations cloud-webhooks { + margin-top: 24px; + width: 100%; + } + + .integrations.narrow cloud-alexa-pref, + .integrations.narrow cloud-google-pref { + width: 100%; + }
- + [[localize('ui.panel.config.cloud.caption')]] @@ -128,30 +150,31 @@ class CloudAccount extends EventsMixin(LocalizeMixin(PolymerElement)) { >.

+
+ - + - + - - - + +
@@ -227,6 +250,10 @@ class CloudAccount extends EventsMixin(LocalizeMixin(PolymerElement)) { _computeRTLDirection(hass) { return computeRTLDirection(hass); } + + _computeIsNarrow(isWide) { + return isWide ? "" : "narrow"; + } } customElements.define("cloud-account", CloudAccount); diff --git a/src/panels/config/cloud/login/cloud-login.js b/src/panels/config/cloud/login/cloud-login.js index 3b060d9bd1..12c5b2696e 100644 --- a/src/panels/config/cloud/login/cloud-login.js +++ b/src/panels/config/cloud/login/cloud-login.js @@ -78,7 +78,7 @@ class CloudLogin extends LocalizeMixin(
- + [[localize('ui.panel.config.cloud.caption')]] diff --git a/src/panels/config/cloud/register/cloud-register.js b/src/panels/config/cloud/register/cloud-register.js index 8b5b04c5b1..d073e13c29 100644 --- a/src/panels/config/cloud/register/cloud-register.js +++ b/src/panels/config/cloud/register/cloud-register.js @@ -48,7 +48,7 @@ class CloudRegister extends LocalizeMixin(EventsMixin(PolymerElement)) {
- + [[localize('ui.panel.config.cloud.register.headline')]]

diff --git a/src/panels/config/core/ha-config-core.ts b/src/panels/config/core/ha-config-core.ts index 75d59b5aa5..1670beb12d 100644 --- a/src/panels/config/core/ha-config-core.ts +++ b/src/panels/config/core/ha-config-core.ts @@ -1,73 +1,66 @@ -import "@polymer/app-layout/app-header/app-header"; -import "@polymer/app-layout/app-toolbar/app-toolbar"; -import "../../../components/ha-icon-button"; -import { html } from "@polymer/polymer/lib/utils/html-tag"; -/* eslint-plugin-disable lit */ -import { PolymerElement } from "@polymer/polymer/polymer-element"; -import "../../../layouts/hass-tabs-subpage"; -import LocalizeMixin from "../../../mixins/localize-mixin"; -import "../../../styles/polymer-ha-style"; +import { + LitElement, + CSSResult, + css, + TemplateResult, + html, + property, + customElement, +} from "lit-element"; +import type { HomeAssistant, Route } from "../../../types"; import { configSections } from "../ha-panel-config"; + +import "../../../layouts/hass-tabs-subpage"; import "./ha-config-section-core"; -/* - * @appliesMixin LocalizeMixin - */ -class HaConfigCore extends LocalizeMixin(PolymerElement) { - static get template() { +@customElement("ha-config-core") +export class HaConfigCore extends LitElement { + @property({ attribute: false }) public hass!: HomeAssistant; + + @property({ type: Boolean }) public narrow!: boolean; + + @property({ type: Boolean }) public isWide!: boolean; + + @property({ attribute: false }) public route!: Route; + + @property({ type: Boolean }) public showAdvanced!: boolean; + + protected render(): TemplateResult { return html` - - -

- -
+ `; } - static get properties() { - return { - hass: Object, - isWide: Boolean, - narrow: Boolean, - showAdvanced: Boolean, - route: Object, - }; - } - - _computeTabs() { - return configSections.general; - } - computeClasses(isWide) { return isWide ? "content" : "content narrow"; } + + static get styles(): CSSResult { + return css` + ha-config-section-core { + display: block; + padding-bottom: 32px; + } + `; + } } -customElements.define("ha-config-core", HaConfigCore); +declare global { + interface HTMLElementTagNameMap { + "ha-config-core": HaConfigCore; + } +} diff --git a/src/panels/config/core/ha-config-name-form.ts b/src/panels/config/core/ha-config-name-form.ts index d8315c6104..3df7eb90fe 100644 --- a/src/panels/config/core/ha-config-name-form.ts +++ b/src/panels/config/core/ha-config-name-form.ts @@ -10,6 +10,8 @@ import { property, internalProperty, TemplateResult, + CSSResult, + css, } from "lit-element"; import "../../../components/ha-card"; import { ConfigUpdateValues, saveCoreConfig } from "../../../data/core"; @@ -87,6 +89,21 @@ class ConfigNameForm extends LitElement { this._working = false; } } + + static get styles(): CSSResult { + return css` + :host { + display: flex; + } + + ha-card { + justify-content: space-between; + display: flex; + flex-direction: column; + width: 100%; + } + `; + } } declare global { diff --git a/src/panels/config/core/ha-config-section-core.ts b/src/panels/config/core/ha-config-section-core.ts index 3dc768f19d..d65918d5de 100644 --- a/src/panels/config/core/ha-config-section-core.ts +++ b/src/panels/config/core/ha-config-section-core.ts @@ -1,126 +1,79 @@ -import "@material/mwc-button"; -import "@polymer/paper-input/paper-input"; -import { html } from "@polymer/polymer/lib/utils/html-tag"; -/* eslint-plugin-disable lit */ -import { PolymerElement } from "@polymer/polymer/polymer-element"; -import { isComponentLoaded } from "../../../common/config/is_component_loaded"; -import "../../../components/buttons/ha-call-service-button"; -import "../../../components/ha-card"; -import LocalizeMixin from "../../../mixins/localize-mixin"; -import "../../../styles/polymer-ha-style"; +import { + LitElement, + CSSResult, + css, + html, + property, + TemplateResult, + customElement, +} from "lit-element"; + +import type { HomeAssistant } from "../../../types"; + import "../ha-config-section"; -import "./ha-config-core-form"; import "./ha-config-name-form"; +import "./ha-config-core-form"; import "./ha-config-url-form"; -/* - * @appliesMixin LocalizeMixin - */ -class HaConfigSectionCore extends LocalizeMixin(PolymerElement) { - static get template() { +@customElement("ha-config-section-core") +export class HaConfigSectionCore extends LitElement { + @property({ attribute: false }) public hass!: HomeAssistant; + + @property({ type: Boolean }) public isWide!: boolean; + + @property({ type: Boolean, attribute: "narrow", reflect: true }) + public narrow!: boolean; + + protected render(): TemplateResult { return html` - - + [[localize('ui.panel.config.core.section.core.header')]]${this.hass.localize( + "ui.panel.config.core.section.core.header" + )} [[localize('ui.panel.config.core.section.core.introduction')]]${this.hass.localize( + "ui.panel.config.core.section.core.introduction" + )} - - - - +
+ + + +
`; } - static get properties() { - return { - hass: { - type: Object, - }, - - isWide: { - type: Boolean, - value: false, - }, - - validating: { - type: Boolean, - value: false, - }, - - isValid: { - type: Boolean, - value: null, - }, - - validateLog: { - type: String, - value: "", - }, - - showAdvanced: Boolean, - }; - } - - groupLoaded(hass) { - return isComponentLoaded(hass, "group"); - } - - automationLoaded(hass) { - return isComponentLoaded(hass, "automation"); - } - - scriptLoaded(hass) { - return isComponentLoaded(hass, "script"); - } - - validateConfig() { - this.validating = true; - this.validateLog = ""; - this.isValid = null; - - this.hass.callApi("POST", "config/core/check_config").then((result) => { - this.validating = false; - this.isValid = result.result === "valid"; - - if (!this.isValid) { - this.validateLog = result.errors; + static get styles(): CSSResult { + return css` + .content { + display: flex; + flex-wrap: wrap; + justify-content: space-between; } - }); + + ha-config-name-form, + ha-config-url-form { + width: calc(50% - 12px); + } + + :host([narrow]) ha-config-url-form, + ha-config-core-form { + margin-top: 24px; + width: 100%; + } + + :host([narrow]) ha-config-name-form { + width: 100%; + } + `; } } -customElements.define("ha-config-section-core", HaConfigSectionCore); +declare global { + interface HTMLElementTagNameMap { + "ha-config-section-core": HaConfigSectionCore; + } +} diff --git a/src/panels/config/ha-config-section.ts b/src/panels/config/ha-config-section.ts index 5f76bdfdd2..ead28199cc 100644 --- a/src/panels/config/ha-config-section.ts +++ b/src/panels/config/ha-config-section.ts @@ -3,7 +3,7 @@ import { classMap } from "lit-html/directives/class-map"; @customElement("ha-config-section") export class HaConfigSection extends LitElement { - @property() public isWide = false; + @property({ type: Boolean }) public isWide = false; protected render() { return html` @@ -12,7 +12,10 @@ export class HaConfigSection extends LitElement { narrow: !this.isWide, })}" > -
+
+
+
+
-
@@ -38,10 +40,18 @@ export class HaConfigSection extends LitElement { margin: 0 auto; } + :host([side-by-side]) .content:not(.narrow) { + display: flex; + } + .layout { display: flex; } + :host([side-by-side]) .content:not(.narrow) .layout { + width: 100%; + } + .horizontal { flex-direction: row; } @@ -54,6 +64,11 @@ export class HaConfigSection extends LitElement { flex: 1 1 auto; } + :host([side-by-side]) .content:not(.narrow) .heading { + max-width: 400px; + margin-right: 40px; + } + .header { font-family: var(--paper-font-headline_-_font-family); -webkit-font-smoothing: var( @@ -64,6 +79,7 @@ export class HaConfigSection extends LitElement { letter-spacing: var(--paper-font-headline_-_letter-spacing); line-height: var(--paper-font-headline_-_line-height); opacity: var(--dark-primary-opacity); + padding-bottom: 8px; } .together { @@ -78,7 +94,6 @@ export class HaConfigSection extends LitElement { font-weight: var(--paper-font-subhead_-_font-weight); line-height: var(--paper-font-subhead_-_line-height); width: 100%; - max-width: 400px; margin-right: 40px; opacity: var(--dark-primary-opacity); font-size: 14px; @@ -86,7 +101,7 @@ export class HaConfigSection extends LitElement { } .panel { - margin-top: -24px; + margin-top: -48px; } .panel ::slotted(*) { @@ -108,3 +123,9 @@ export class HaConfigSection extends LitElement { `; } } + +declare global { + interface HTMLElementTagNameMap { + "ha-config-section": HaConfigSection; + } +} diff --git a/src/panels/config/server_control/ha-config-server-control.ts b/src/panels/config/server_control/ha-config-server-control.ts index 22ef7646eb..9b739b89d2 100644 --- a/src/panels/config/server_control/ha-config-server-control.ts +++ b/src/panels/config/server_control/ha-config-server-control.ts @@ -43,13 +43,14 @@ const reloadableDomains = [ export class HaConfigServerControl extends LitElement { @property({ attribute: false }) public hass!: HomeAssistant; - @property() public isWide!: boolean; + @property({ type: Boolean }) public isWide!: boolean; - @property() public narrow!: boolean; + @property({ type: Boolean, attribute: "narrow", reflect: true }) + public narrow!: boolean; - @property() public route!: Route; + @property({ attribute: false }) public route!: Route; - @property() public showAdvanced!: boolean; + @property({ type: Boolean }) public showAdvanced!: boolean; @internalProperty() private _validating = false; @@ -60,90 +61,91 @@ export class HaConfigServerControl extends LitElement { protected render(): TemplateResult { return html` - - ${this.hass.localize( - "ui.panel.config.server_control.caption" - )} - ${this.hass.localize( - "ui.panel.config.server_control.description" - )} - +
+
+ ${this.hass.localize("ui.panel.config.server_control.caption")} +
+
+ ${this.hass.localize("ui.panel.config.server_control.description")} +
+
+
${this.showAdvanced - ? html` -
- ${this.hass.localize( - "ui.panel.config.server_control.section.validation.introduction" + ? html` + - ${!this._validating - ? html` - ${this._isValid - ? html`
- ${this.hass.localize( - "ui.panel.config.server_control.section.validation.valid" - )} -
` - : ""} - - ${this.hass.localize( - "ui.panel.config.server_control.section.validation.check_config" - )} - - ` - : html` - - `} -
- ` - : html` -
- - ${this.hass.localize( - "ui.panel.config.server_control.section.validation.invalid" - )} - - - ${this.hass.localize( - "ui.panel.config.server_control.section.validation.check_config" - )} - -
-
- ${this._validateLog} -
- `} -
- ` + > +
+ ${this.hass.localize( + "ui.panel.config.server_control.section.validation.introduction" + )} + ${!this._validateLog + ? html` +
+ ${!this._validating + ? html` + ${this._isValid + ? html`
+ ${this.hass.localize( + "ui.panel.config.server_control.section.validation.valid" + )} +
` + : ""} + + ${this.hass.localize( + "ui.panel.config.server_control.section.validation.check_config" + )} + + ` + : html` + + `} +
+ ` + : html` +
+ + ${this.hass.localize( + "ui.panel.config.server_control.section.validation.invalid" + )} + + + ${this.hass.localize( + "ui.panel.config.server_control.section.validation.check_config" + )} + +
+
+ ${this._validateLog} +
+ `} +
+ + ` : ""} -
+
${this.hass.localize( + > + ${this.hass.localize( "ui.panel.config.server_control.section.server_management.restart" )} ${this.hass.localize( + > + ${this.hass.localize( "ui.panel.config.server_control.section.server_management.stop" )} @@ -184,6 +192,7 @@ export class HaConfigServerControl extends LitElement { ${this.showAdvanced ? html` -
+
${this.hass.localize( + .hass=${this.hass} + > + ${this.hass.localize( "ui.panel.config.server_control.section.reloading.core" )} + ${reloadableDomains.map((domain) => + isServiceLoaded(this.hass, domain, "reload") + ? html` + + ${this.hass.localize( + `ui.panel.config.server_control.section.reloading.${domain}` + )} + + ` + : "" + )}
- ${reloadableDomains.map((domain) => - isServiceLoaded(this.hass, domain, "reload") - ? html`
- ${this.hass.localize( - `ui.panel.config.server_control.section.reloading.${domain}` - )} - -
` - : "" - )} ` : ""} - +
`; } @@ -243,10 +254,50 @@ export class HaConfigServerControl extends LitElement { return [ haStyle, css` - .validate-container { + .heading, + .content { + max-width: 1040px; + margin: 0px auto; + } + + .heading { + padding: 28px 20px 0px; + } + + .content { + padding: 16px 20px 16px; + display: flex; + flex-wrap: wrap; + justify-content: space-between; + } + + .validate-card, + .server-management-card { + width: calc(50% - 12px); + } + + .header { + font-size: 24px; + line-height: 32px; + padding-bottom: 8px; + opacity: var(--dark-primary-opacity); + } + + .description { + opacity: var(--dark-primary-opacity); + font-size: 14px; + padding-bottom: 8px; + } + + .validate-container, + .server-management-container { height: 140px; } + .server-management-container ha-call-service-button { + padding-right: 16px; + } + .validate-result { color: var(--success-color); font-weight: 500; @@ -270,7 +321,51 @@ export class HaConfigServerControl extends LitElement { white-space: pre-wrap; direction: ltr; } + + .warning { + --mdc-theme-primary: var(--error-color); + } + + .reload { + margin-top: 24px; + } + + .reload .actions { + width: 100%; + display: flex; + flex-wrap: wrap; + } + + .reload ha-call-service-button { + padding: 8px; + display: inline-block; + border: 1px solid var(--divider-color, #e8e8e8); + width: calc(33% - 24px); + margin: 4px; + } + + :host([narrow]) .validate-card, + :host([narrow]) .server-management-card { + width: 100%; + } + + :host([narrow]) .server-management-card { + margin-top: 24px; + } + + :host([narrow]) .reload ha-call-service-button { + width: 100%; + margin: 0; + border: none; + border-top: 1px solid var(--divider-color, #e8e8e8); + } `, ]; } } + +declare global { + interface HTMLElementTagNameMap { + "ha-config-server-control": HaConfigServerControl; + } +}