From 9e60e36a7e245f95a79aac948fbb393faa456a2e Mon Sep 17 00:00:00 2001 From: Zack Arnett Date: Sun, 6 Sep 2020 01:10:51 -0500 Subject: [PATCH] Update style --- .../config/cloud/account/cloud-account.js | 17 +- .../config/core/ha-config-section-core.ts | 26 +- .../config/dashboard/ha-config-dashboard.ts | 157 ++++---- src/panels/config/ha-config-section.ts | 18 +- .../ha-config-server-control.ts | 359 +++++++++--------- 5 files changed, 298 insertions(+), 279 deletions(-) diff --git a/src/panels/config/cloud/account/cloud-account.js b/src/panels/config/cloud/account/cloud-account.js index 34871b5d7b..884d9b3fe8 100644 --- a/src/panels/config/cloud/account/cloud-account.js +++ b/src/panels/config/cloud/account/cloud-account.js @@ -4,13 +4,13 @@ import { html } from "@polymer/polymer/lib/utils/html-tag"; /* eslint-plugin-disable lit */ import { PolymerElement } from "@polymer/polymer/polymer-element"; import { formatDateTime } from "../../../../common/datetime/format_date_time"; +import { computeRTLDirection } from "../../../../common/util/compute_rtl"; import "../../../../components/buttons/ha-call-api-button"; import "../../../../components/ha-card"; import { fetchCloudSubscriptionInfo } from "../../../../data/cloud"; import "../../../../layouts/hass-subpage"; import { EventsMixin } from "../../../../mixins/events-mixin"; import LocalizeMixin from "../../../../mixins/localize-mixin"; -import { computeRTLDirection } from "../../../../common/util/compute_rtl"; import "../../../../styles/polymer-ha-style"; import "../../ha-config-section"; import "./cloud-alexa-pref"; @@ -131,7 +131,7 @@ class CloudAccount extends EventsMixin(LocalizeMixin(PolymerElement)) { - + [[localize('ui.panel.config.cloud.account.integrations')]] @@ -150,13 +150,14 @@ class CloudAccount extends EventsMixin(LocalizeMixin(PolymerElement)) { >.

+ + +
- - - ${this.hass.localize( - "ui.panel.config.core.section.core.header" - )} - ${this.hass.localize( +
+ ${this.hass.localize("ui.panel.config.core.section.core.header")} +
+
+ ${this.hass.localize( "ui.panel.config.core.section.core.introduction" - )} + )} +
diff --git a/src/panels/config/dashboard/ha-config-dashboard.ts b/src/panels/config/dashboard/ha-config-dashboard.ts index 309b9e4c15..95e38fa0d9 100644 --- a/src/panels/config/dashboard/ha-config-dashboard.ts +++ b/src/panels/config/dashboard/ha-config-dashboard.ts @@ -1,4 +1,4 @@ -import "../../../layouts/ha-app-layout"; +import { mdiCloudLock } from "@mdi/js"; import "@polymer/app-layout/app-header/app-header"; import "@polymer/app-layout/app-toolbar/app-toolbar"; import { @@ -15,12 +15,12 @@ import "../../../components/ha-card"; import "../../../components/ha-icon-next"; import "../../../components/ha-menu-button"; import { CloudStatus } from "../../../data/cloud"; +import "../../../layouts/ha-app-layout"; import { haStyle } from "../../../resources/styles"; import { HomeAssistant } from "../../../types"; import "../ha-config-section"; import { configSections } from "../ha-panel-config"; import "./ha-config-navigation"; -import { mdiCloudLock } from "@mdi/js"; @customElement("ha-config-dashboard") class HaConfigDashboard extends LitElement { @@ -36,91 +36,92 @@ class HaConfigDashboard extends LitElement { @property() public showAdvanced!: boolean; protected render(): TemplateResult { - const content = html` -
- ${this.hass.localize("ui.panel.config.header")} -
+ const content = html` + +
+ ${this.hass.localize("ui.panel.config.header")} +
-
- ${this.hass.localize("ui.panel.config.introduction")} -
+
+ ${this.hass.localize("ui.panel.config.introduction")} +
- ${this.cloudStatus && isComponentLoaded(this.hass, "cloud") - ? html` + ${this.cloudStatus && isComponentLoaded(this.hass, "cloud") + ? html` + + + + ` + : ""} + ${Object.values(configSections).map( + (section) => html` ` - : ""} - ${Object.values(configSections).map( - (section) => html` - - - - ` - )} - ${isComponentLoaded(this.hass, "zha") - ? html` -
- ${this.hass.localize( - "ui.panel.config.integration_panel_move.missing_zha", - "integrations_page", - html` - ${this.hass.localize( - "ui.panel.config.integration_panel_move.link_integration_page" - )} - ` - )} -
- ` - : ""} - ${isComponentLoaded(this.hass, "zwave") - ? html` -
- ${this.hass.localize( - "ui.panel.config.integration_panel_move.missing_zwave", - "integrations_page", - html` - ${this.hass.localize( - "ui.panel.config.integration_panel_move.link_integration_page" - )} - ` - )} -
- ` - : ""} - ${!this.showAdvanced - ? html` -
- ${this.hass.localize("ui.panel.config.advanced_mode.hint_enable")} - ${this.hass.localize( - "ui.panel.config.advanced_mode.link_profile_page" - )}. -
- ` - : ""} - `; + )} + ${isComponentLoaded(this.hass, "zha") + ? html` +
+ ${this.hass.localize( + "ui.panel.config.integration_panel_move.missing_zha", + "integrations_page", + html` + ${this.hass.localize( + "ui.panel.config.integration_panel_move.link_integration_page" + )} + ` + )} +
+ ` + : ""} + ${isComponentLoaded(this.hass, "zwave") + ? html` +
+ ${this.hass.localize( + "ui.panel.config.integration_panel_move.missing_zwave", + "integrations_page", + html` + ${this.hass.localize( + "ui.panel.config.integration_panel_move.link_integration_page" + )} + ` + )} +
+ ` + : ""} + ${!this.showAdvanced + ? html` +
+ ${this.hass.localize( + "ui.panel.config.advanced_mode.hint_enable" + )} + ${this.hass.localize( + "ui.panel.config.advanced_mode.link_profile_page" + )}. +
+ ` + : ""} + + `; if (!this.narrow && this.hass.dockedSidebar !== "always_hidden") { return content; diff --git a/src/panels/config/ha-config-section.ts b/src/panels/config/ha-config-section.ts index ead28199cc..52f4ec4cfa 100644 --- a/src/panels/config/ha-config-section.ts +++ b/src/panels/config/ha-config-section.ts @@ -5,11 +5,16 @@ import { classMap } from "lit-html/directives/class-map"; export class HaConfigSection extends LitElement { @property({ type: Boolean }) public isWide = false; + @property({ type: Boolean }) public narrow?: boolean; + + @property({ type: Boolean, attribute: "no-header" }) public noHeader = false; + protected render() { return html`
@@ -65,11 +70,12 @@ export class HaConfigSection extends LitElement { } :host([side-by-side]) .content:not(.narrow) .heading { + min-width: 400px; max-width: 400px; margin-right: 40px; } - .header { + slot[name="header"]::slotted(*) { font-family: var(--paper-font-headline_-_font-family); -webkit-font-smoothing: var( --paper-font-headline_-_-webkit-font-smoothing @@ -86,7 +92,7 @@ export class HaConfigSection extends LitElement { margin-top: 32px; } - .intro { + slot[name="introduction"]::slotted(*) { font-family: var(--paper-font-subhead_-_font-family); -webkit-font-smoothing: var( --paper-font-subhead_-_-webkit-font-smoothing @@ -115,11 +121,15 @@ export class HaConfigSection extends LitElement { .narrow .together { margin-top: 20px; } - .narrow .intro { + .narrow slot[name="introduction"]::slotted(*) { padding-bottom: 20px; margin-right: 0; max-width: 500px; } + + .no-header.content { + padding-top: 0; + } `; } } 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 5dc6f99a8b..f9cb2e9eb9 100644 --- a/src/panels/config/server_control/ha-config-server-control.ts +++ b/src/panels/config/server_control/ha-config-server-control.ts @@ -1,27 +1,27 @@ +import "@material/mwc-button"; import "@polymer/app-layout/app-header/app-header"; import "@polymer/app-layout/app-toolbar/app-toolbar"; -import "../../../layouts/hass-tabs-subpage"; -import { configSections } from "../ha-panel-config"; +import "@polymer/paper-input/paper-input"; import { - LitElement, - property, - internalProperty, - customElement, - html, css, CSSResult, + customElement, + html, + internalProperty, + LitElement, + property, TemplateResult, } from "lit-element"; -import { HomeAssistant, Route } from "../../../types"; - -import "@material/mwc-button"; -import "@polymer/paper-input/paper-input"; +import { classMap } from "lit-html/directives/class-map"; import { isServiceLoaded } from "../../../common/config/is_service_loaded"; import "../../../components/buttons/ha-call-service-button"; import "../../../components/ha-card"; -import "../ha-config-section"; -import { haStyle } from "../../../resources/styles"; import { checkCoreConfig } from "../../../data/core"; +import "../../../layouts/hass-tabs-subpage"; +import { haStyle } from "../../../resources/styles"; +import { HomeAssistant, Route } from "../../../types"; +import "../ha-config-section"; +import { configSections } from "../ha-panel-config"; const reloadableDomains = [ "group", @@ -80,172 +80,185 @@ export class HaConfigServerControl extends LitElement { .tabs=${configSections.general} .showAdvanced=${this.showAdvanced} > -
-
+ +
${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" +
+ ${this.showAdvanced + ? 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.server_management.introduction" - )} -
-
- - ${this.hass.localize( - "ui.panel.config.server_control.section.server_management.restart" - )} - - - ${this.hass.localize( - "ui.panel.config.server_control.section.server_management.stop" - )} - -
- - - ${this.showAdvanced - ? html` - -
- ${this.hass.localize( - "ui.panel.config.server_control.section.reloading.introduction" - )} -
-
- + > +
${this.hass.localize( - "ui.panel.config.server_control.section.reloading.core" + "ui.panel.config.server_control.section.validation.introduction" )} - - ${reloadableDomains.map((domain) => - isServiceLoaded(this.hass, domain, "reload") + ${!this._validateLog ? html` - - ${this.hass.localize( - `ui.panel.config.server_control.section.reloading.${domain}` - )} - + ${!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.server_management.introduction" + )} +
+
+ + ${this.hass.localize( + "ui.panel.config.server_control.section.server_management.restart" + )} + + + ${this.hass.localize( + "ui.panel.config.server_control.section.server_management.stop" + )} + +
+ +
+ + +
+ ${this.showAdvanced + ? html` + - - ` - : ""} -
+ > +
+ ${this.hass.localize( + "ui.panel.config.server_control.section.reloading.introduction" + )} +
+
+ + ${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}` + )} + + ` + : "" + )} +
+ + ` + : ""} +
+ `; } @@ -268,8 +281,7 @@ export class HaConfigServerControl extends LitElement { return [ haStyle, css` - .heading, - .content { + .heading { max-width: 1040px; margin: 0px auto; } @@ -279,7 +291,6 @@ export class HaConfigServerControl extends LitElement { } .content { - padding: 16px 20px 16px; display: flex; flex-wrap: wrap; justify-content: space-between; @@ -359,7 +370,8 @@ export class HaConfigServerControl extends LitElement { } :host([narrow]) .validate-card, - :host([narrow]) .server-management-card { + :host([narrow]) .server-management-card, + .server-management-card.no-advanced { width: 100%; } @@ -369,9 +381,8 @@ export class HaConfigServerControl extends LitElement { :host([narrow]) .reload ha-call-service-button { width: 100%; - margin: 0; + margin: 8px 0; border: none; - border-top: 1px solid var(--divider-color, #e8e8e8); } `, ];