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": {