From 5b42d0616e7bc33000774167ce966ff472884f18 Mon Sep 17 00:00:00 2001 From: Ludeeus Date: Sat, 29 Aug 2020 08:09:42 +0000 Subject: [PATCH 1/2] hassio-host-info feedback --- hassio/src/system/hassio-host-info.ts | 153 ++++++++++++++------------ 1 file changed, 85 insertions(+), 68 deletions(-) diff --git a/hassio/src/system/hassio-host-info.ts b/hassio/src/system/hassio-host-info.ts index 38ea35fa21ec..6f4f16d8fb65 100644 --- a/hassio/src/system/hassio-host-info.ts +++ b/hassio/src/system/hassio-host-info.ts @@ -42,6 +42,8 @@ import { import { showHassioMarkdownDialog } from "../dialogs/markdown/show-dialog-hassio-markdown"; import { showNetworkDialog } from "../dialogs/network/show-dialog-network"; +import "../../../src/components/buttons/ha-progress-button"; + import "../../../src/components/ha-button-menu"; import "../../../src/components/ha-card"; import "../../../src/components/ha-settings-row"; @@ -108,12 +110,12 @@ class HassioHostInfo extends LitElement { ${this.hostInfo.version !== this.hostInfo.version_latest && this.hostInfo.features.includes("hassos") ? html` - - + Update + ` : ""} @@ -141,24 +143,24 @@ class HassioHostInfo extends LitElement {
${this.hostInfo.features.includes("reboot") ? html` - - + Reboot + ` : ""} ${this.hostInfo.features.includes("shutdown") ? html` - - + Shutdown + ` : ""} @@ -185,62 +187,6 @@ class HassioHostInfo extends LitElement { `; } - static get styles(): CSSResult[] { - return [ - haStyle, - hassioStyle, - css` - ha-card { - height: 100%; - justify-content: space-between; - flex-direction: column; - display: flex; - } - .card-actions { - height: 48px; - border-top: none; - display: flex; - justify-content: space-between; - align-items: center; - } - ha-settings-row { - padding: 0; - height: 54px; - width: 100%; - } - ha-settings-row[three-line] { - height: 74px; - } - ha-settings-row > span[slot="description"] { - white-space: normal; - color: var(--secondary-text-color); - } - - .warning { - --mdc-theme-primary: var(--error-color); - } - - ha-button-menu { - color: var(--secondary-text-color); - --mdc-menu-min-width: 200px; - } - @media (min-width: 563px) { - paper-listbox { - max-height: 150px; - overflow: auto; - } - } - paper-item { - cursor: pointer; - min-height: 35px; - } - mwc-list-item ha-svg-icon { - color: var(--secondary-text-color); - } - `, - ]; - } - protected firstUpdated(): void { this._loadData(); } @@ -281,7 +227,10 @@ class HassioHostInfo extends LitElement { } } - private async _hostReboot(): Promise { + private async _hostReboot(ev: CustomEvent): Promise { + const button = ev.target as any; + button.progress = true; + const confirmed = await showConfirmationDialog(this, { title: "Reboot", text: "Are you sure you want to reboot the host?", @@ -290,6 +239,7 @@ class HassioHostInfo extends LitElement { }); if (!confirmed) { + button.progress = false; return; } @@ -302,9 +252,13 @@ class HassioHostInfo extends LitElement { typeof err === "object" ? err.body?.message || "Unkown error" : err, }); } + button.progress = false; } - private async _hostShutdown(): Promise { + private async _hostShutdown(ev: CustomEvent): Promise { + const button = ev.target as any; + button.progress = true; + const confirmed = await showConfirmationDialog(this, { title: "Shutdown", text: "Are you sure you want to shutdown the host?", @@ -313,6 +267,7 @@ class HassioHostInfo extends LitElement { }); if (!confirmed) { + button.progress = false; return; } @@ -325,9 +280,13 @@ class HassioHostInfo extends LitElement { typeof err === "object" ? err.body?.message || "Unkown error" : err, }); } + button.progress = false; } - private async _osUpdate(): Promise { + private async _osUpdate(ev: CustomEvent): Promise { + const button = ev.target as any; + button.progress = true; + const confirmed = await showConfirmationDialog(this, { title: "Update", text: "Are you sure you want to update the OS?", @@ -336,6 +295,7 @@ class HassioHostInfo extends LitElement { }); if (!confirmed) { + button.progress = false; return; } @@ -348,6 +308,7 @@ class HassioHostInfo extends LitElement { typeof err === "object" ? err.body?.message || "Unkown error" : err, }); } + button.progress = false; } private async _changeNetworkClicked(): Promise { @@ -396,6 +357,62 @@ class HassioHostInfo extends LitElement { private async _loadData(): Promise { this._networkInfo = await fetchNetworkInfo(this.hass); } + + static get styles(): CSSResult[] { + return [ + haStyle, + hassioStyle, + css` + ha-card { + height: 100%; + justify-content: space-between; + flex-direction: column; + display: flex; + } + .card-actions { + height: 48px; + border-top: none; + display: flex; + justify-content: space-between; + align-items: center; + } + ha-settings-row { + padding: 0; + height: 54px; + width: 100%; + } + ha-settings-row[three-line] { + height: 74px; + } + ha-settings-row > span[slot="description"] { + white-space: normal; + color: var(--secondary-text-color); + } + + .warning { + --mdc-theme-primary: var(--error-color); + } + + ha-button-menu { + color: var(--secondary-text-color); + --mdc-menu-min-width: 200px; + } + @media (min-width: 563px) { + paper-listbox { + max-height: 150px; + overflow: auto; + } + } + paper-item { + cursor: pointer; + min-height: 35px; + } + mwc-list-item ha-svg-icon { + color: var(--secondary-text-color); + } + `, + ]; + } } declare global { From 7ac077123ad58cd7a8493c79d8b8eef412cb9bfd Mon Sep 17 00:00:00 2001 From: Ludeeus Date: Wed, 2 Sep 2020 14:09:50 +0000 Subject: [PATCH 2/2] lint --- hassio/src/system/hassio-host-info.ts | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/hassio/src/system/hassio-host-info.ts b/hassio/src/system/hassio-host-info.ts index fd054656ed6c..3ab270f4eadc 100644 --- a/hassio/src/system/hassio-host-info.ts +++ b/hassio/src/system/hassio-host-info.ts @@ -14,6 +14,7 @@ import { TemplateResult, } from "lit-element"; import memoizeOne from "memoize-one"; +import "../../../src/components/buttons/ha-progress-button"; import "../../../src/components/ha-button-menu"; import "../../../src/components/ha-card"; import "../../../src/components/ha-settings-row"; @@ -42,13 +43,8 @@ import { haStyle } from "../../../src/resources/styles"; import { HomeAssistant } from "../../../src/types"; import { showHassioMarkdownDialog } from "../dialogs/markdown/show-dialog-hassio-markdown"; import { showNetworkDialog } from "../dialogs/network/show-dialog-network"; -import "../../../src/components/buttons/ha-progress-button"; -import "../../../src/components/ha-button-menu"; -import "../../../src/components/ha-card"; -import "../../../src/components/ha-settings-row"; import { hassioStyle } from "../resources/hassio-style"; - @customElement("hassio-host-info") class HassioHostInfo extends LitElement { @property({ attribute: false }) public hass!: HomeAssistant;