From f1a1654371828535f31ebc7b85fa563390c75a8d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Joakim=20S=C3=B8rensen?= Date: Tue, 4 Feb 2020 12:36:09 +0100 Subject: [PATCH] Use icon image where available (#4721) * Use iconimg where available * Adjust margin for icon * remove log * Fix property casing * Add blue topbar, and generalize properties * Inline checks * inline property functions * Limit compute * Linting * lovercase const * Review comments and move update dot to line * Add roboto font to hassio * Fix update and stopped styles colliding Co-authored-by: Bram Kragten --- .../addon-store/hassio-addon-repository.ts | 65 +++++++++------- hassio/src/addon-view/hassio-addon-info.ts | 1 - hassio/src/components/hassio-card-content.ts | 77 ++++++++++++++++--- hassio/src/dashboard/hassio-addons.ts | 55 +++++++------ hassio/src/entrypoint.ts | 3 + hassio/src/resources/hassio-style.ts | 4 +- 6 files changed, 136 insertions(+), 69 deletions(-) diff --git a/hassio/src/addon-store/hassio-addon-repository.ts b/hassio/src/addon-store/hassio-addon-repository.ts index 895b729973..accfe7d8ed 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 ha105pluss = this._computeHA105plus; if (this.filter && addons.length < 1) { return html` @@ -64,7 +65,7 @@ class HassioAddonRepositoryEl extends LitElement {
@@ -85,34 +111,15 @@ 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}`); } + private get _computeHA105plus(): boolean { + const [major, minor] = this.hass.config.version.split(".", 2); + return Number(major) > 0 || (major === "0" && Number(minor) >= 105); + } + static get styles(): CSSResultArray { return [ hassioStyle, diff --git a/hassio/src/addon-view/hassio-addon-info.ts b/hassio/src/addon-view/hassio-addon-info.ts index 947ac651dc..d8f5ff69db 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 ad13904c20..bf3ce9756d 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,40 @@ 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 showTopbar: boolean = false; + @property() public topbarClass?: string; @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 { return html` - + ${this.showTopbar + ? html` +
+ ` + : ""} + ${this.iconImage + ? html` +
+ +
+
+ ` + : html` + + `}
-
${this.title}
+
+ ${this.title} +
${this.description} ${/* treat as available when undefined */ @@ -53,8 +73,9 @@ class HassioCardContent extends LitElement { static get styles(): CSSResult { return css` iron-icon { - margin-right: 16px; - margin-top: 16px; + margin-right: 24px; + margin-left: 8px; + margin-top: 12px; float: left; color: var(--secondary-text-color); } @@ -88,6 +109,44 @@ 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; + } + .icon_image.stopped, + .icon_image.not_available { + filter: grayscale(1); + } + .dot { + position: absolute; + background-color: var(--paper-orange-400); + width: 12px; + height: 12px; + top: 8px; + right: 8px; + border-radius: 50%; + } + .topbar { + position: absolute; + width: 100%; + height: 2px; + top: 0; + left: 0; + 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 e0403b4cf2..801afd1854 100644 --- a/hassio/src/dashboard/hassio-addons.ts +++ b/hassio/src/dashboard/hassio-addons.ts @@ -22,6 +22,9 @@ class HassioAddons extends LitElement { @property() public addons?: HassioAddonInfo[]; protected render(): TemplateResult { + const [major, minor] = this.hass.config.version.split(".", 2); + const ha105pluss = + Number(major) > 0 || (major === "0" && Number(minor) >= 105); return html`

Add-ons

@@ -44,12 +47,30 @@ class HassioAddons extends LitElement {
@@ -72,28 +93,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.installed !== addon.version) { - return "New version available"; - } - return addon.state === "started" - ? "Add-on is running" - : "Add-on is stopped"; - } - - private _computeIconClass(addon: HassioAddonInfo): string { - if (addon.installed !== addon.version) { - return "update"; - } - return addon.state === "started" ? "running" : ""; - } - private _addonTapped(ev: any): void { navigate(this, `/hassio/addon/${ev.currentTarget.addon.slug}`); } diff --git a/hassio/src/entrypoint.ts b/hassio/src/entrypoint.ts index 13e57019fd..935d5676d7 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 { diff --git a/hassio/src/resources/hassio-style.ts b/hassio/src/resources/hassio-style.ts index fa33f100b3..a12a21b954 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;