From 014448e7ea1e725fb588ff58a9c26d326e3f761c Mon Sep 17 00:00:00 2001 From: Zack Barett Date: Wed, 29 Jun 2022 01:56:30 -0500 Subject: [PATCH] Update about page (#12653) Co-authored-by: Philip Allgaier --- src/panels/config/info/ha-config-info.ts | 323 ++++++++++++++--------- src/translations/en.json | 11 +- 2 files changed, 215 insertions(+), 119 deletions(-) diff --git a/src/panels/config/info/ha-config-info.ts b/src/panels/config/info/ha-config-info.ts index 9412160247..8c9e92cd54 100644 --- a/src/panels/config/info/ha-config-info.ts +++ b/src/panels/config/info/ha-config-info.ts @@ -1,6 +1,18 @@ +import "@material/mwc-list/mwc-list"; +import { + mdiBug, + mdiFileDocument, + mdiHandsPray, + mdiHelp, + mdiHomeAssistant, + mdiPower, + mdiTshirtCrew, +} from "@mdi/js"; import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit"; import { property, state } from "lit/decorators"; import { isComponentLoaded } from "../../../common/config/is_component_loaded"; +import "../../../components/ha-card"; +import "../../../components/ha-clickable-list-item"; import "../../../components/ha-logo-svg"; import { fetchHassioHassOsInfo, @@ -9,12 +21,61 @@ import { import { fetchHassioInfo, HassioInfo } from "../../../data/hassio/supervisor"; import "../../../layouts/hass-subpage"; import { haStyle } from "../../../resources/styles"; -import { HomeAssistant, Route } from "../../../types"; +import type { HomeAssistant, Route } from "../../../types"; import { documentationUrl } from "../../../util/documentation-url"; -const JS_TYPE = __BUILD__; const JS_VERSION = __VERSION__; +const PAGES: Array<{ + name: string; + path: string; + iconPath: string; + iconColor: string; +}> = [ + { + name: "change_log", + path: "/latest-release-notes/", + iconPath: mdiPower, + iconColor: "#4A5963", + }, + { + name: "thanks", + path: "/developers/credits/", + iconPath: mdiHandsPray, + iconColor: "#3B808E", + }, + { + name: "merch", + path: "/merch", + iconPath: mdiTshirtCrew, + iconColor: "#C65326", + }, + { + name: "feature", + path: "/feature-requests", + iconPath: mdiHomeAssistant, + iconColor: "#0D47A1", + }, + { + name: "bug", + path: "/issues", + iconPath: mdiBug, + iconColor: "#F1C447", + }, + { + name: "help", + path: "/community", + iconPath: mdiHelp, + iconColor: "#B1345C", + }, + { + name: "license", + path: "/developers/license/", + iconPath: mdiFileDocument, + iconColor: "#518C43", + }, +]; + class HaConfigInfo extends LitElement { @property({ attribute: false }) public hass!: HomeAssistant; @@ -42,96 +103,76 @@ class HaConfigInfo extends LitElement { back-path="/config" .header=${this.hass.localize("ui.panel.config.info.caption")} > -
- - + +
+ + + + +
+ Home Assistant ${hass.connection.haVersion} + ${this._hassioInfo + ? html`Supervisor ${this._hassioInfo.supervisor}` + : ""} + ${this._osInfo?.version + ? html`Operating System ${this._osInfo.version}` + : ""} + + ${this.hass.localize( + "ui.panel.config.info.frontend_version", + "version", + JS_VERSION + )} + +
+
+ + ${PAGES.map( + (page) => html` + +
+ +
+ + ${this.hass.localize( + `ui.panel.config.info.items.${page.name}` + )} + + + ` )} - > - - -
-

Home Assistant Core ${hass.connection.haVersion}

- ${this._hassioInfo - ? html` -

- Home Assistant Supervisor ${this._hassioInfo.supervisor} -

- ` - : ""} - ${this._osInfo?.version - ? html`

Home Assistant OS ${this._osInfo.version}

` - : ""} -

- ${this.hass.localize( - "ui.panel.config.info.path_configuration", - "path", - hass.config.config_dir - )} -

-

- - ${this.hass.localize("ui.panel.config.info.developed_by")} - -

-

- ${this.hass.localize("ui.panel.config.info.license")}
- ${this.hass.localize("ui.panel.config.info.source")} - ${this.hass.localize("ui.panel.config.info.server")} - — - ${this.hass.localize("ui.panel.config.info.frontend")} -

-

- ${this.hass.localize("ui.panel.config.info.built_using")} - Python 3, - Lit, - ${this.hass.localize("ui.panel.config.info.icons_by")} - Google - ${this.hass.localize("ui.common.and")} - Material Design Icons. -

-

- ${this.hass.localize( - "ui.panel.config.info.frontend_version", - "version", - JS_VERSION, - "type", - JS_TYPE - )} - ${customUiList.length > 0 - ? html` -

+ +

+ ${this.hass.localize( + "ui.panel.config.info.path_configuration", + "path", + hass.config.config_dir + )} +

+ ${!customUiList.length + ? "" + : html` +
${this.hass.localize("ui.panel.config.info.custom_uis")} ${customUiList.map( (item) => html` @@ -142,9 +183,8 @@ class HaConfigInfo extends LitElement { ` )}
- ` - : ""} -

+ `} +
`; @@ -176,40 +216,87 @@ class HaConfigInfo extends LitElement { this._osInfo = osInfo; } + private _entryClicked(ev) { + ev.currentTarget.blur(); + } + static get styles(): CSSResultGroup { return [ haStyle, css` - :host { - -ms-user-select: initial; - -webkit-user-select: initial; - -moz-user-select: initial; + .content { + padding: 28px 20px 0; + max-width: 1040px; + margin: 0 auto; } - .about { - text-align: center; - line-height: 2em; - } - - .version { - @apply --paper-font-headline; - } - - .develop { - @apply --paper-font-subhead; - } - - .about a { - color: var(--primary-color); - } ha-logo-svg { padding: 12px; - height: 180px; - width: 180px; + height: 150px; + width: 150px; } - h4 { - font-weight: 400; + ha-card { + padding: 16px; + max-width: 600px; + margin: 0 auto; + margin-bottom: 24px; + margin-bottom: max(24px, env(safe-area-inset-bottom)); + } + + .logo-versions { + display: flex; + justify-content: flex-start; + align-items: center; + } + + .versions { + display: flex; + flex-direction: column; + color: var(--secondary-text-color); + padding: 12px 0; + align-self: stretch; + justify-content: flex-start; + } + + .ha-version { + color: var(--primary-text-color); + font-weight: 500; + font-size: 16px; + } + + mwc-list { + --mdc-list-side-padding: 4px; + } + + ha-svg-icon { + height: 24px; + width: 24px; + display: block; + padding: 8px; + color: #fff; + } + + .icon-background { + border-radius: 50%; + } + + @media all and (max-width: 500px), all and (max-height: 500px) { + ha-logo-svg { + height: 100px; + width: 100px; + } + } + + .config-path { + color: var(--secondary-text-color); + text-align: center; + font-style: italic; + } + + .custom-ui { + color: var(--secondary-text-color); + text-align: center; } `, ]; diff --git a/src/translations/en.json b/src/translations/en.json index a6e5a65b75..5d22072f24 100755 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -1601,7 +1601,7 @@ "frontend": "frontend-ui", "built_using": "Built using", "icons_by": "Icons by", - "frontend_version": "Frontend version: {version} - {type}", + "frontend_version": "Frontend {version} - {type}", "custom_uis": "Custom UIs:", "system_health_error": "System Health component is not loaded. Add 'system_health:' to configuration.yaml", "documentation": "Documentation", @@ -1610,6 +1610,15 @@ "system_health": { "manage": "Manage", "more_info": "more info" + }, + "items": { + "change_log": "Change Log", + "thanks": "Thanks To", + "merch": "Merchandise", + "feature": "Feature Requests", + "bug": "Bug Reports", + "help": "Help", + "license": "License" } }, "logs": {