From 5606b2bf520837d929a2bbc1a7496df9de63e79a Mon Sep 17 00:00:00 2001 From: ludeeus Date: Sat, 1 Feb 2020 10:09:03 +0000 Subject: [PATCH 01/13] Use iconimg where available --- .../addon-store/hassio-addon-repository.ts | 13 ++++ hassio/src/components/hassio-card-content.ts | 61 ++++++++++++++++--- hassio/src/dashboard/hassio-addons.ts | 26 ++++++-- 3 files changed, 88 insertions(+), 12 deletions(-) diff --git a/hassio/src/addon-store/hassio-addon-repository.ts b/hassio/src/addon-store/hassio-addon-repository.ts index 895b72997353..5b3e6f6b2e58 100644 --- a/hassio/src/addon-store/hassio-addon-repository.ts +++ b/hassio/src/addon-store/hassio-addon-repository.ts @@ -75,6 +75,7 @@ class HassioAddonRepositoryEl extends LitElement { .icon=${this.computeIcon(addon)} .iconTitle=${this.computeIconTitle(addon)} .iconClass=${this.computeIconClass(addon)} + .iconImage=${this._computeIconImageURL(addon)} > @@ -113,6 +114,18 @@ class HassioAddonRepositoryEl extends LitElement { navigate(this, `/hassio/addon/${ev.currentTarget.addon.slug}`); } + private get _computeHA105plus(): boolean { + const [major, minor] = this.hass.config.version.split(".", 2); + return Number(major) > 0 || (major === "0" && Number(minor) >= 105); + } + + private _computeIconImageURL(addon: HassioAddonInfo): string | undefined { + if (this._computeHA105plus && addon.icon) { + return `/api/hassio/addons/${addon.slug}/icon`; + } + return undefined; + } + static get styles(): CSSResultArray { return [ hassioStyle, diff --git a/hassio/src/components/hassio-card-content.ts b/hassio/src/components/hassio-card-content.ts index ad13904c2073..e4152ac9b45f 100644 --- a/hassio/src/components/hassio-card-content.ts +++ b/hassio/src/components/hassio-card-content.ts @@ -7,6 +7,7 @@ import { property, customElement, } from "lit-element"; +import { classMap } from "lit-html/directives/class-map"; import "@polymer/iron-icon/iron-icon"; import "../../../src/components/ha-relative-time"; @@ -17,21 +18,45 @@ class HassioCardContent extends LitElement { @property() public hass!: HomeAssistant; @property() public title!: string; @property() public description?: string; - @property({ type: Boolean }) public available?: boolean; + @property({ type: Boolean }) public available: boolean = true; + @property({ type: Boolean }) public updateAvailable: boolean = false; @property() public datetime?: string; @property() public iconTitle?: string; @property() public iconClass?: string; @property() public icon = "hass:help-circle"; + @property() public iconImage?: string; protected render(): TemplateResult { + console.log(this.available); return html` - + ${this.iconImage + ? html` +
+ +
+
+ ` + : html` + + `}
-
${this.title}
+
+ ${this.title} + ${this.updateAvailable + ? html` +
+ ` + : ""} +
${this.description} ${/* treat as available when undefined */ @@ -53,7 +78,8 @@ class HassioCardContent extends LitElement { static get styles(): CSSResult { return css` iron-icon { - margin-right: 16px; + margin-right: 24px; + margin-left: 8px; margin-top: 16px; float: left; color: var(--secondary-text-color); @@ -88,6 +114,25 @@ class HassioCardContent extends LitElement { ha-relative-time { display: block; } + .icon_image img { + max-height: 40px; + max-width: 40px; + margin-top: 4px; + margin-right: 16px; + float: left; + } + .grayscale { + filter: grayscale(1); + } + .update-available { + position: absolute; + background-color: var(--paper-orange-400); + width: 12px; + height: 12px; + top: 8px; + right: 8px; + border-radius: 50%; + } `; } } diff --git a/hassio/src/dashboard/hassio-addons.ts b/hassio/src/dashboard/hassio-addons.ts index e0403b4cf28c..3f59df23fe5c 100644 --- a/hassio/src/dashboard/hassio-addons.ts +++ b/hassio/src/dashboard/hassio-addons.ts @@ -47,9 +47,11 @@ class HassioAddons extends LitElement { title=${addon.name} description=${addon.description} ?available=${addon.available} + ?UpdateAvailable=${addon.installed !== addon.version} icon=${this._computeIcon(addon)} .iconTitle=${this._computeIconTitle(addon)} .iconClass=${this._computeIconClass(addon)} + .iconImage=${this._computeIconImageURL(addon)} >
@@ -79,19 +81,23 @@ class HassioAddons extends LitElement { } private _computeIconTitle(addon: HassioAddonInfo): string { + if (addon.state !== "started") { + return "Add-on is stopped"; + } if (addon.installed !== addon.version) { return "New version available"; } - return addon.state === "started" - ? "Add-on is running" - : "Add-on is stopped"; + return "Add-on is running"; } private _computeIconClass(addon: HassioAddonInfo): string { + if (addon.installed) { + return addon.state === "started" ? "running" : "stopped"; + } if (addon.installed !== addon.version) { return "update"; } - return addon.state === "started" ? "running" : ""; + return ""; } private _addonTapped(ev: any): void { @@ -101,6 +107,18 @@ class HassioAddons extends LitElement { private _openStore(): void { navigate(this, "/hassio/store"); } + + private get _computeHA105plus(): boolean { + const [major, minor] = this.hass.config.version.split(".", 2); + return Number(major) > 0 || (major === "0" && Number(minor) >= 105); + } + + private _computeIconImageURL(addon: HassioAddonInfo): string | undefined { + if (this._computeHA105plus && addon.icon) { + return `/api/hassio/addons/${addon.slug}/icon`; + } + return undefined; + } } declare global { From d9c82d7ba2593d0ac7d729e3eca857f15729acd9 Mon Sep 17 00:00:00 2001 From: ludeeus Date: Sat, 1 Feb 2020 10:27:16 +0000 Subject: [PATCH 02/13] Adjust margin for icon --- hassio/src/components/hassio-card-content.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/hassio/src/components/hassio-card-content.ts b/hassio/src/components/hassio-card-content.ts index e4152ac9b45f..c21df13345f5 100644 --- a/hassio/src/components/hassio-card-content.ts +++ b/hassio/src/components/hassio-card-content.ts @@ -80,7 +80,7 @@ class HassioCardContent extends LitElement { iron-icon { margin-right: 24px; margin-left: 8px; - margin-top: 16px; + margin-top: 12px; float: left; color: var(--secondary-text-color); } From 65b151db94b33101c3a8e41d4a9dd50ef163bb2d Mon Sep 17 00:00:00 2001 From: ludeeus Date: Sat, 1 Feb 2020 10:44:48 +0000 Subject: [PATCH 03/13] remove log --- hassio/src/components/hassio-card-content.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/hassio/src/components/hassio-card-content.ts b/hassio/src/components/hassio-card-content.ts index c21df13345f5..d285fa1e6264 100644 --- a/hassio/src/components/hassio-card-content.ts +++ b/hassio/src/components/hassio-card-content.ts @@ -27,7 +27,6 @@ class HassioCardContent extends LitElement { @property() public iconImage?: string; protected render(): TemplateResult { - console.log(this.available); return html` ${this.iconImage ? html` From 00ab9007ecbd60a7e10b8829ff06a2a021189cab Mon Sep 17 00:00:00 2001 From: ludeeus Date: Sun, 2 Feb 2020 07:49:08 +0000 Subject: [PATCH 04/13] Fix property casing --- hassio/src/dashboard/hassio-addons.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/hassio/src/dashboard/hassio-addons.ts b/hassio/src/dashboard/hassio-addons.ts index 3f59df23fe5c..45343ccd0b62 100644 --- a/hassio/src/dashboard/hassio-addons.ts +++ b/hassio/src/dashboard/hassio-addons.ts @@ -47,7 +47,7 @@ class HassioAddons extends LitElement { title=${addon.name} description=${addon.description} ?available=${addon.available} - ?UpdateAvailable=${addon.installed !== addon.version} + ?updateAvailable=${addon.installed !== addon.version} icon=${this._computeIcon(addon)} .iconTitle=${this._computeIconTitle(addon)} .iconClass=${this._computeIconClass(addon)} From 4a1124201260b8ded21a0f7d0244afbc0b7150af Mon Sep 17 00:00:00 2001 From: ludeeus Date: Sun, 2 Feb 2020 08:08:42 +0000 Subject: [PATCH 05/13] Add blue topbar, and generalize properties --- .../addon-store/hassio-addon-repository.ts | 1 + hassio/src/components/hassio-card-content.ts | 23 +++++++++-- hassio/src/dashboard/hassio-addons.ts | 39 ++++++------------- 3 files changed, 32 insertions(+), 31 deletions(-) diff --git a/hassio/src/addon-store/hassio-addon-repository.ts b/hassio/src/addon-store/hassio-addon-repository.ts index 5b3e6f6b2e58..cd7b0e38878d 100644 --- a/hassio/src/addon-store/hassio-addon-repository.ts +++ b/hassio/src/addon-store/hassio-addon-repository.ts @@ -76,6 +76,7 @@ class HassioAddonRepositoryEl extends LitElement { .iconTitle=${this.computeIconTitle(addon)} .iconClass=${this.computeIconClass(addon)} .iconImage=${this._computeIconImageURL(addon)} + ?showBlueTopbar=${addon.installed} >
diff --git a/hassio/src/components/hassio-card-content.ts b/hassio/src/components/hassio-card-content.ts index d285fa1e6264..9a5da42d0e92 100644 --- a/hassio/src/components/hassio-card-content.ts +++ b/hassio/src/components/hassio-card-content.ts @@ -19,7 +19,8 @@ class HassioCardContent extends LitElement { @property() public title!: string; @property() public description?: string; @property({ type: Boolean }) public available: boolean = true; - @property({ type: Boolean }) public updateAvailable: boolean = false; + @property({ type: Boolean }) public showDot: boolean = false; + @property({ type: Boolean }) public showBlueTopbar: boolean = false; @property() public datetime?: string; @property() public iconTitle?: string; @property() public iconClass?: string; @@ -28,6 +29,11 @@ class HassioCardContent extends LitElement { protected render(): TemplateResult { return html` + ${this.showBlueTopbar + ? html` +
+ ` + : ""} ${this.iconImage ? html`
${this.title} - ${this.updateAvailable + ${this.showDot ? html` -
+
` : ""}
@@ -123,7 +129,7 @@ class HassioCardContent extends LitElement { .grayscale { filter: grayscale(1); } - .update-available { + .dot { position: absolute; background-color: var(--paper-orange-400); width: 12px; @@ -132,6 +138,15 @@ class HassioCardContent extends LitElement { right: 8px; border-radius: 50%; } + .blue-topbar { + position: absolute; + width: 100%; + border: 0px; + height: 2px; + top: 0; + left: 0; + background-color: var(--google-blue-500); + } `; } } diff --git a/hassio/src/dashboard/hassio-addons.ts b/hassio/src/dashboard/hassio-addons.ts index 45343ccd0b62..0eef90d6cf7a 100644 --- a/hassio/src/dashboard/hassio-addons.ts +++ b/hassio/src/dashboard/hassio-addons.ts @@ -47,11 +47,19 @@ class HassioAddons extends LitElement { title=${addon.name} description=${addon.description} ?available=${addon.available} - ?updateAvailable=${addon.installed !== addon.version} - icon=${this._computeIcon(addon)} - .iconTitle=${this._computeIconTitle(addon)} + ?showDot=${addon.installed !== addon.version} + icon=${addon.installed !== addon.version + ? "hassio:arrow-up-bold-circle" + : "hassio:puzzle"} + .iconTitle=${addon.state !== "started" + ? "Add-on is stopped" + : addon.installed !== addon.version + ? "New version available" + : "Add-on is running"} .iconClass=${this._computeIconClass(addon)} - .iconImage=${this._computeIconImageURL(addon)} + .iconImage=${this._computeHA105plus && addon.icon + ? `/api/hassio/addons/${addon.slug}/icon` + : undefined} >
@@ -74,22 +82,6 @@ class HassioAddons extends LitElement { ]; } - private _computeIcon(addon: HassioAddonInfo): string { - return addon.installed !== addon.version - ? "hassio:arrow-up-bold-circle" - : "hassio:puzzle"; - } - - private _computeIconTitle(addon: HassioAddonInfo): string { - if (addon.state !== "started") { - return "Add-on is stopped"; - } - if (addon.installed !== addon.version) { - return "New version available"; - } - return "Add-on is running"; - } - private _computeIconClass(addon: HassioAddonInfo): string { if (addon.installed) { return addon.state === "started" ? "running" : "stopped"; @@ -112,13 +104,6 @@ class HassioAddons extends LitElement { const [major, minor] = this.hass.config.version.split(".", 2); return Number(major) > 0 || (major === "0" && Number(minor) >= 105); } - - private _computeIconImageURL(addon: HassioAddonInfo): string | undefined { - if (this._computeHA105plus && addon.icon) { - return `/api/hassio/addons/${addon.slug}/icon`; - } - return undefined; - } } declare global { From fd394e6d9a6bd1833ccd127ba51ec3abd11b14c9 Mon Sep 17 00:00:00 2001 From: ludeeus Date: Sun, 2 Feb 2020 08:11:04 +0000 Subject: [PATCH 06/13] Inline checks --- hassio/src/dashboard/hassio-addons.ts | 17 ++++++----------- 1 file changed, 6 insertions(+), 11 deletions(-) diff --git a/hassio/src/dashboard/hassio-addons.ts b/hassio/src/dashboard/hassio-addons.ts index 0eef90d6cf7a..0afb5bd39225 100644 --- a/hassio/src/dashboard/hassio-addons.ts +++ b/hassio/src/dashboard/hassio-addons.ts @@ -56,7 +56,12 @@ class HassioAddons extends LitElement { : addon.installed !== addon.version ? "New version available" : "Add-on is running"} - .iconClass=${this._computeIconClass(addon)} + .iconClass=${addon.installed && + addon.installed !== addon.version + ? "update" + : addon.installed && addon.state === "started" + ? "running" + : "stopped"} .iconImage=${this._computeHA105plus && addon.icon ? `/api/hassio/addons/${addon.slug}/icon` : undefined} @@ -82,16 +87,6 @@ class HassioAddons extends LitElement { ]; } - private _computeIconClass(addon: HassioAddonInfo): string { - if (addon.installed) { - return addon.state === "started" ? "running" : "stopped"; - } - if (addon.installed !== addon.version) { - return "update"; - } - return ""; - } - private _addonTapped(ev: any): void { navigate(this, `/hassio/addon/${ev.currentTarget.addon.slug}`); } From 4141da0fbb68fcdcb3b1d06f5127fc4b8ad16840 Mon Sep 17 00:00:00 2001 From: ludeeus Date: Sun, 2 Feb 2020 08:17:20 +0000 Subject: [PATCH 07/13] inline property functions --- .../addon-store/hassio-addon-repository.ts | 59 +++++++------------ 1 file changed, 22 insertions(+), 37 deletions(-) diff --git a/hassio/src/addon-store/hassio-addon-repository.ts b/hassio/src/addon-store/hassio-addon-repository.ts index cd7b0e38878d..eab6a35d8565 100644 --- a/hassio/src/addon-store/hassio-addon-repository.ts +++ b/hassio/src/addon-store/hassio-addon-repository.ts @@ -64,7 +64,7 @@ class HassioAddonRepositoryEl extends LitElement {
@@ -87,31 +103,7 @@ class HassioAddonRepositoryEl extends LitElement { `; } - private computeIcon(addon) { - return addon.installed && addon.installed !== addon.version - ? "hassio:arrow-up-bold-circle" - : "hassio:puzzle"; - } - - private computeIconTitle(addon) { - if (addon.installed) { - return addon.installed !== addon.version - ? "New version available" - : "Add-on is installed"; - } - return addon.available - ? "Add-on is not installed" - : "Add-on is not available on your system"; - } - - private computeIconClass(addon) { - if (addon.installed) { - return addon.installed !== addon.version ? "update" : "installed"; - } - return !addon.available ? "not_available" : ""; - } - - private addonTapped(ev) { + private _addonTapped(ev) { navigate(this, `/hassio/addon/${ev.currentTarget.addon.slug}`); } @@ -120,13 +112,6 @@ class HassioAddonRepositoryEl extends LitElement { return Number(major) > 0 || (major === "0" && Number(minor) >= 105); } - private _computeIconImageURL(addon: HassioAddonInfo): string | undefined { - if (this._computeHA105plus && addon.icon) { - return `/api/hassio/addons/${addon.slug}/icon`; - } - return undefined; - } - static get styles(): CSSResultArray { return [ hassioStyle, From 5431a55c3fae5aec21d0935bbcf3ee8e30d7e725 Mon Sep 17 00:00:00 2001 From: ludeeus Date: Sun, 2 Feb 2020 08:38:21 +0000 Subject: [PATCH 08/13] Limit compute --- hassio/src/addon-store/hassio-addon-repository.ts | 3 ++- hassio/src/dashboard/hassio-addons.ts | 3 ++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/hassio/src/addon-store/hassio-addon-repository.ts b/hassio/src/addon-store/hassio-addon-repository.ts index eab6a35d8565..f2d7e217794f 100644 --- a/hassio/src/addon-store/hassio-addon-repository.ts +++ b/hassio/src/addon-store/hassio-addon-repository.ts @@ -39,6 +39,7 @@ class HassioAddonRepositoryEl extends LitElement { protected render(): TemplateResult { const repo = this.repo; const addons = this._getAddons(this.addons, this.filter); + const HA105plus = this._computeHA105plus; if (this.filter && addons.length < 1) { return html` @@ -89,7 +90,7 @@ class HassioAddonRepositoryEl extends LitElement { : !addon.available ? "not_available" : ""} - .iconImage=${this._computeHA105plus && addon.icon + .iconImage=${HA105plus && addon.icon ? `/api/hassio/addons/${addon.slug}/icon` : undefined} ?showBlueTopbar=${addon.installed} diff --git a/hassio/src/dashboard/hassio-addons.ts b/hassio/src/dashboard/hassio-addons.ts index 0afb5bd39225..1f29342f53d4 100644 --- a/hassio/src/dashboard/hassio-addons.ts +++ b/hassio/src/dashboard/hassio-addons.ts @@ -22,6 +22,7 @@ class HassioAddons extends LitElement { @property() public addons?: HassioAddonInfo[]; protected render(): TemplateResult { + const HA105plus = this._computeHA105plus; return html`

Add-ons

@@ -62,7 +63,7 @@ class HassioAddons extends LitElement { : addon.installed && addon.state === "started" ? "running" : "stopped"} - .iconImage=${this._computeHA105plus && addon.icon + .iconImage=${HA105plus && addon.icon ? `/api/hassio/addons/${addon.slug}/icon` : undefined} > From 78b43fc36cf0f45bbf4e03dc9fb287e04e6d2ed3 Mon Sep 17 00:00:00 2001 From: ludeeus Date: Sun, 2 Feb 2020 09:00:40 +0000 Subject: [PATCH 09/13] Linting --- hassio/src/addon-store/hassio-addon-repository.ts | 4 ++-- hassio/src/dashboard/hassio-addons.ts | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/hassio/src/addon-store/hassio-addon-repository.ts b/hassio/src/addon-store/hassio-addon-repository.ts index f2d7e217794f..0fecd8c92360 100644 --- a/hassio/src/addon-store/hassio-addon-repository.ts +++ b/hassio/src/addon-store/hassio-addon-repository.ts @@ -39,7 +39,7 @@ class HassioAddonRepositoryEl extends LitElement { protected render(): TemplateResult { const repo = this.repo; const addons = this._getAddons(this.addons, this.filter); - const HA105plus = this._computeHA105plus; + const Ha105Pluss = this._computeHA105plus; if (this.filter && addons.length < 1) { return html` @@ -90,7 +90,7 @@ class HassioAddonRepositoryEl extends LitElement { : !addon.available ? "not_available" : ""} - .iconImage=${HA105plus && addon.icon + .iconImage=${Ha105Pluss && addon.icon ? `/api/hassio/addons/${addon.slug}/icon` : undefined} ?showBlueTopbar=${addon.installed} diff --git a/hassio/src/dashboard/hassio-addons.ts b/hassio/src/dashboard/hassio-addons.ts index 1f29342f53d4..9a52fc467d67 100644 --- a/hassio/src/dashboard/hassio-addons.ts +++ b/hassio/src/dashboard/hassio-addons.ts @@ -22,7 +22,7 @@ class HassioAddons extends LitElement { @property() public addons?: HassioAddonInfo[]; protected render(): TemplateResult { - const HA105plus = this._computeHA105plus; + const Ha105Pluss = this._computeHA105plus; return html`

Add-ons

@@ -63,7 +63,7 @@ class HassioAddons extends LitElement { : addon.installed && addon.state === "started" ? "running" : "stopped"} - .iconImage=${HA105plus && addon.icon + .iconImage=${Ha105Pluss && addon.icon ? `/api/hassio/addons/${addon.slug}/icon` : undefined} > From da411f221703d5c743a95b4e47e67fe60e2ed2e6 Mon Sep 17 00:00:00 2001 From: ludeeus Date: Sun, 2 Feb 2020 09:48:18 +0000 Subject: [PATCH 10/13] lovercase const --- hassio/src/addon-store/hassio-addon-repository.ts | 4 ++-- hassio/src/dashboard/hassio-addons.ts | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/hassio/src/addon-store/hassio-addon-repository.ts b/hassio/src/addon-store/hassio-addon-repository.ts index 0fecd8c92360..4947ced716bb 100644 --- a/hassio/src/addon-store/hassio-addon-repository.ts +++ b/hassio/src/addon-store/hassio-addon-repository.ts @@ -39,7 +39,7 @@ class HassioAddonRepositoryEl extends LitElement { protected render(): TemplateResult { const repo = this.repo; const addons = this._getAddons(this.addons, this.filter); - const Ha105Pluss = this._computeHA105plus; + const ha105pluss = this._computeHA105plus; if (this.filter && addons.length < 1) { return html` @@ -90,7 +90,7 @@ class HassioAddonRepositoryEl extends LitElement { : !addon.available ? "not_available" : ""} - .iconImage=${Ha105Pluss && addon.icon + .iconImage=${ha105pluss && addon.icon ? `/api/hassio/addons/${addon.slug}/icon` : undefined} ?showBlueTopbar=${addon.installed} diff --git a/hassio/src/dashboard/hassio-addons.ts b/hassio/src/dashboard/hassio-addons.ts index 9a52fc467d67..dc4bc5e22140 100644 --- a/hassio/src/dashboard/hassio-addons.ts +++ b/hassio/src/dashboard/hassio-addons.ts @@ -22,7 +22,7 @@ class HassioAddons extends LitElement { @property() public addons?: HassioAddonInfo[]; protected render(): TemplateResult { - const Ha105Pluss = this._computeHA105plus; + const ha105pluss = this._computeHA105plus; return html`

Add-ons

@@ -63,7 +63,7 @@ class HassioAddons extends LitElement { : addon.installed && addon.state === "started" ? "running" : "stopped"} - .iconImage=${Ha105Pluss && addon.icon + .iconImage=${ha105pluss && addon.icon ? `/api/hassio/addons/${addon.slug}/icon` : undefined} > From 9854a6d38b1465c63d8019203659f4d23a25e23e Mon Sep 17 00:00:00 2001 From: Bram Kragten Date: Tue, 4 Feb 2020 11:57:22 +0100 Subject: [PATCH 11/13] Review comments and move update dot to line --- .../addon-store/hassio-addon-repository.ts | 11 ++++++-- hassio/src/addon-view/hassio-addon-info.ts | 1 - hassio/src/components/hassio-card-content.ts | 28 +++++++++++-------- hassio/src/dashboard/hassio-addons.ts | 20 ++++++------- 4 files changed, 34 insertions(+), 26 deletions(-) diff --git a/hassio/src/addon-store/hassio-addon-repository.ts b/hassio/src/addon-store/hassio-addon-repository.ts index 4947ced716bb..accfe7d8ed35 100644 --- a/hassio/src/addon-store/hassio-addon-repository.ts +++ b/hassio/src/addon-store/hassio-addon-repository.ts @@ -73,7 +73,7 @@ class HassioAddonRepositoryEl extends LitElement { .title=${addon.name} .description=${addon.description} .available=${addon.available} - icon=${addon.installed !== addon.version + .icon=${addon.installed && addon.installed !== addon.version ? "hassio:arrow-up-bold-circle" : "hassio:puzzle"} .iconTitle=${addon.installed @@ -93,7 +93,14 @@ class HassioAddonRepositoryEl extends LitElement { .iconImage=${ha105pluss && addon.icon ? `/api/hassio/addons/${addon.slug}/icon` : undefined} - ?showBlueTopbar=${addon.installed} + .showTopbar=${addon.installed || !addon.available} + .topbarClass=${addon.installed + ? addon.installed !== addon.version + ? "update" + : "installed" + : !addon.available + ? "unavailable" + : ""} >
diff --git a/hassio/src/addon-view/hassio-addon-info.ts b/hassio/src/addon-view/hassio-addon-info.ts index 947ac651dcc4..d8f5ff69db67 100644 --- a/hassio/src/addon-view/hassio-addon-info.ts +++ b/hassio/src/addon-view/hassio-addon-info.ts @@ -454,7 +454,6 @@ class HassioAddonInfo extends LitElement { Install diff --git a/hassio/src/components/hassio-card-content.ts b/hassio/src/components/hassio-card-content.ts index 9a5da42d0e92..9b36dafe470f 100644 --- a/hassio/src/components/hassio-card-content.ts +++ b/hassio/src/components/hassio-card-content.ts @@ -19,8 +19,8 @@ class HassioCardContent extends LitElement { @property() public title!: string; @property() public description?: string; @property({ type: Boolean }) public available: boolean = true; - @property({ type: Boolean }) public showDot: boolean = false; - @property({ type: Boolean }) public showBlueTopbar: boolean = false; + @property({ type: Boolean }) public showTopbar: boolean = false; + @property() public topbarClass?: string; @property() public datetime?: string; @property() public iconTitle?: string; @property() public iconClass?: string; @@ -29,9 +29,9 @@ class HassioCardContent extends LitElement { protected render(): TemplateResult { return html` - ${this.showBlueTopbar + ${this.showTopbar ? html` -
+
` : ""} ${this.iconImage @@ -56,11 +56,6 @@ class HassioCardContent extends LitElement {
${this.title} - ${this.showDot - ? html` -
- ` - : ""}
${this.description} @@ -138,14 +133,23 @@ class HassioCardContent extends LitElement { right: 8px; border-radius: 50%; } - .blue-topbar { + .topbar { position: absolute; width: 100%; - border: 0px; height: 2px; top: 0; left: 0; - background-color: var(--google-blue-500); + border-top-left-radius: 2px; + border-top-right-radius: 2px; + } + .topbar.installed { + background-color: var(--primary-color); + } + .topbar.update { + background-color: var(--accent-color); + } + .topbar.unavailable { + background-color: var(--error-color); } `; } diff --git a/hassio/src/dashboard/hassio-addons.ts b/hassio/src/dashboard/hassio-addons.ts index dc4bc5e22140..dcc548fa5f40 100644 --- a/hassio/src/dashboard/hassio-addons.ts +++ b/hassio/src/dashboard/hassio-addons.ts @@ -22,7 +22,9 @@ class HassioAddons extends LitElement { @property() public addons?: HassioAddonInfo[]; protected render(): TemplateResult { - const ha105pluss = this._computeHA105plus; + const [major, minor] = this.hass.config.version.split(".", 2); + const ha105pluss = + Number(major) > 0 || (major === "0" && Number(minor) >= 105); return html`

Add-ons

@@ -45,11 +47,12 @@ class HassioAddons extends LitElement {
0 || (major === "0" && Number(minor) >= 105); - } } declare global { From 72e1608e428eaeb6d9dadf86993eeb216b55e86b Mon Sep 17 00:00:00 2001 From: Bram Kragten Date: Tue, 4 Feb 2020 12:03:11 +0100 Subject: [PATCH 12/13] Add roboto font to hassio --- hassio/src/entrypoint.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/hassio/src/entrypoint.ts b/hassio/src/entrypoint.ts index 13e57019fd82..935d5676d7c1 100644 --- a/hassio/src/entrypoint.ts +++ b/hassio/src/entrypoint.ts @@ -1,9 +1,12 @@ window.loadES5Adapter().then(() => { + // eslint-disable-next-line + import(/* webpackChunkName: "roboto" */ "../../src/resources/roboto"); // eslint-disable-next-line import(/* webpackChunkName: "hassio-icons" */ "./resources/hassio-icons"); // eslint-disable-next-line import(/* webpackChunkName: "hassio-main" */ "./hassio-main"); }); + const styleEl = document.createElement("style"); styleEl.innerHTML = ` body { From 84e27293077334d96974bd06e42d6a39ad249a61 Mon Sep 17 00:00:00 2001 From: Bram Kragten Date: Tue, 4 Feb 2020 12:35:34 +0100 Subject: [PATCH 13/13] Fix update and stopped styles colliding --- hassio/src/components/hassio-card-content.ts | 10 +++------- hassio/src/dashboard/hassio-addons.ts | 4 +++- hassio/src/resources/hassio-style.ts | 4 ++-- 3 files changed, 8 insertions(+), 10 deletions(-) diff --git a/hassio/src/components/hassio-card-content.ts b/hassio/src/components/hassio-card-content.ts index 9b36dafe470f..bf3ce9756d1e 100644 --- a/hassio/src/components/hassio-card-content.ts +++ b/hassio/src/components/hassio-card-content.ts @@ -36,12 +36,7 @@ class HassioCardContent extends LitElement { : ""} ${this.iconImage ? html` -
+
@@ -121,7 +116,8 @@ class HassioCardContent extends LitElement { margin-right: 16px; float: left; } - .grayscale { + .icon_image.stopped, + .icon_image.not_available { filter: grayscale(1); } .dot { diff --git a/hassio/src/dashboard/hassio-addons.ts b/hassio/src/dashboard/hassio-addons.ts index dcc548fa5f40..801afd1854d7 100644 --- a/hassio/src/dashboard/hassio-addons.ts +++ b/hassio/src/dashboard/hassio-addons.ts @@ -62,7 +62,9 @@ class HassioAddons extends LitElement { : "Add-on is running"} .iconClass=${addon.installed && addon.installed !== addon.version - ? "update" + ? addon.state === "started" + ? "update" + : "update stopped" : addon.installed && addon.state === "started" ? "running" : "stopped"} diff --git a/hassio/src/resources/hassio-style.ts b/hassio/src/resources/hassio-style.ts index fa33f100b3b9..a12a21b954ff 100644 --- a/hassio/src/resources/hassio-style.ts +++ b/hassio/src/resources/hassio-style.ts @@ -17,11 +17,11 @@ export const hassioStyle = css` font-weight: var(--paper-font-headline_-_font-weight); letter-spacing: var(--paper-font-headline_-_letter-spacing); line-height: var(--paper-font-headline_-_line-height); - padding-left: 16px; + padding-left: 8px; } .description { margin-top: 4px; - padding-left: 16px; + padding-left: 8px; } .card-group { display: grid;