mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-25 10:16:46 +00:00
Update about page (#12653)
Co-authored-by: Philip Allgaier <mail@spacegaier.de>
This commit is contained in:
parent
08eff0509a
commit
014448e7ea
@ -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 { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
|
||||||
import { property, state } from "lit/decorators";
|
import { property, state } from "lit/decorators";
|
||||||
import { isComponentLoaded } from "../../../common/config/is_component_loaded";
|
import { isComponentLoaded } from "../../../common/config/is_component_loaded";
|
||||||
|
import "../../../components/ha-card";
|
||||||
|
import "../../../components/ha-clickable-list-item";
|
||||||
import "../../../components/ha-logo-svg";
|
import "../../../components/ha-logo-svg";
|
||||||
import {
|
import {
|
||||||
fetchHassioHassOsInfo,
|
fetchHassioHassOsInfo,
|
||||||
@ -9,12 +21,61 @@ import {
|
|||||||
import { fetchHassioInfo, HassioInfo } from "../../../data/hassio/supervisor";
|
import { fetchHassioInfo, HassioInfo } from "../../../data/hassio/supervisor";
|
||||||
import "../../../layouts/hass-subpage";
|
import "../../../layouts/hass-subpage";
|
||||||
import { haStyle } from "../../../resources/styles";
|
import { haStyle } from "../../../resources/styles";
|
||||||
import { HomeAssistant, Route } from "../../../types";
|
import type { HomeAssistant, Route } from "../../../types";
|
||||||
import { documentationUrl } from "../../../util/documentation-url";
|
import { documentationUrl } from "../../../util/documentation-url";
|
||||||
|
|
||||||
const JS_TYPE = __BUILD__;
|
|
||||||
const JS_VERSION = __VERSION__;
|
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 {
|
class HaConfigInfo extends LitElement {
|
||||||
@property({ attribute: false }) public hass!: HomeAssistant;
|
@property({ attribute: false }) public hass!: HomeAssistant;
|
||||||
|
|
||||||
@ -42,96 +103,76 @@ class HaConfigInfo extends LitElement {
|
|||||||
back-path="/config"
|
back-path="/config"
|
||||||
.header=${this.hass.localize("ui.panel.config.info.caption")}
|
.header=${this.hass.localize("ui.panel.config.info.caption")}
|
||||||
>
|
>
|
||||||
<div class="about">
|
<div class="content">
|
||||||
<a
|
<ha-card outlined>
|
||||||
href=${documentationUrl(this.hass, "")}
|
<div class="logo-versions">
|
||||||
target="_blank"
|
<a
|
||||||
rel="noreferrer"
|
href=${documentationUrl(this.hass, "")}
|
||||||
>
|
target="_blank"
|
||||||
<ha-logo-svg
|
rel="noreferrer"
|
||||||
title=${this.hass.localize(
|
>
|
||||||
"ui.panel.config.info.home_assistant_logo"
|
<ha-logo-svg
|
||||||
|
title=${this.hass.localize(
|
||||||
|
"ui.panel.config.info.home_assistant_logo"
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
</ha-logo-svg>
|
||||||
|
</a>
|
||||||
|
<div class="versions">
|
||||||
|
<span class="ha-version"
|
||||||
|
>Home Assistant ${hass.connection.haVersion}</span
|
||||||
|
>
|
||||||
|
${this._hassioInfo
|
||||||
|
? html`<span>Supervisor ${this._hassioInfo.supervisor}</span>`
|
||||||
|
: ""}
|
||||||
|
${this._osInfo?.version
|
||||||
|
? html`<span>Operating System ${this._osInfo.version}</span>`
|
||||||
|
: ""}
|
||||||
|
<span>
|
||||||
|
${this.hass.localize(
|
||||||
|
"ui.panel.config.info.frontend_version",
|
||||||
|
"version",
|
||||||
|
JS_VERSION
|
||||||
|
)}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<mwc-list>
|
||||||
|
${PAGES.map(
|
||||||
|
(page) => html`
|
||||||
|
<ha-clickable-list-item
|
||||||
|
graphic="avatar"
|
||||||
|
openNewTab
|
||||||
|
href=${documentationUrl(this.hass, page.path)}
|
||||||
|
@click=${this._entryClicked}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
slot="graphic"
|
||||||
|
class="icon-background"
|
||||||
|
.style="background-color: ${page.iconColor}"
|
||||||
|
>
|
||||||
|
<ha-svg-icon .path=${page.iconPath}></ha-svg-icon>
|
||||||
|
</div>
|
||||||
|
<span>
|
||||||
|
${this.hass.localize(
|
||||||
|
`ui.panel.config.info.items.${page.name}`
|
||||||
|
)}
|
||||||
|
</span>
|
||||||
|
</ha-clickable-list-item>
|
||||||
|
`
|
||||||
)}
|
)}
|
||||||
>
|
</mwc-list>
|
||||||
</ha-logo-svg>
|
<p class="config-path">
|
||||||
</a>
|
${this.hass.localize(
|
||||||
<br />
|
"ui.panel.config.info.path_configuration",
|
||||||
<h3>Home Assistant Core ${hass.connection.haVersion}</h3>
|
"path",
|
||||||
${this._hassioInfo
|
hass.config.config_dir
|
||||||
? html`
|
)}
|
||||||
<h3>
|
</p>
|
||||||
Home Assistant Supervisor ${this._hassioInfo.supervisor}
|
${!customUiList.length
|
||||||
</h3>
|
? ""
|
||||||
`
|
: html`
|
||||||
: ""}
|
<div class="custom-ui">
|
||||||
${this._osInfo?.version
|
|
||||||
? html`<h3>Home Assistant OS ${this._osInfo.version}</h3>`
|
|
||||||
: ""}
|
|
||||||
<p>
|
|
||||||
${this.hass.localize(
|
|
||||||
"ui.panel.config.info.path_configuration",
|
|
||||||
"path",
|
|
||||||
hass.config.config_dir
|
|
||||||
)}
|
|
||||||
</p>
|
|
||||||
<p class="develop">
|
|
||||||
<a
|
|
||||||
href=${documentationUrl(this.hass, "/developers/credits/")}
|
|
||||||
target="_blank"
|
|
||||||
rel="noreferrer"
|
|
||||||
>
|
|
||||||
${this.hass.localize("ui.panel.config.info.developed_by")}
|
|
||||||
</a>
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
${this.hass.localize("ui.panel.config.info.license")}<br />
|
|
||||||
${this.hass.localize("ui.panel.config.info.source")}
|
|
||||||
<a
|
|
||||||
href="https://github.com/home-assistant/core"
|
|
||||||
target="_blank"
|
|
||||||
rel="noreferrer"
|
|
||||||
>${this.hass.localize("ui.panel.config.info.server")}</a
|
|
||||||
>
|
|
||||||
—
|
|
||||||
<a
|
|
||||||
href="https://github.com/home-assistant/frontend"
|
|
||||||
target="_blank"
|
|
||||||
rel="noreferrer"
|
|
||||||
>${this.hass.localize("ui.panel.config.info.frontend")}</a
|
|
||||||
>
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
${this.hass.localize("ui.panel.config.info.built_using")}
|
|
||||||
<a href="https://www.python.org" target="_blank" rel="noreferrer"
|
|
||||||
>Python 3</a
|
|
||||||
>,
|
|
||||||
<a href="https://lit.dev" target="_blank" rel="noreferrer">Lit</a>,
|
|
||||||
${this.hass.localize("ui.panel.config.info.icons_by")}
|
|
||||||
<a
|
|
||||||
href="https://fonts.google.com/icons?selected=Material+Icons"
|
|
||||||
target="_blank"
|
|
||||||
rel="noreferrer"
|
|
||||||
>Google</a
|
|
||||||
>
|
|
||||||
${this.hass.localize("ui.common.and")}
|
|
||||||
<a
|
|
||||||
href="https://materialdesignicons.com/"
|
|
||||||
target="_blank"
|
|
||||||
rel="noreferrer"
|
|
||||||
>Material Design Icons</a
|
|
||||||
>.
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
${this.hass.localize(
|
|
||||||
"ui.panel.config.info.frontend_version",
|
|
||||||
"version",
|
|
||||||
JS_VERSION,
|
|
||||||
"type",
|
|
||||||
JS_TYPE
|
|
||||||
)}
|
|
||||||
${customUiList.length > 0
|
|
||||||
? html`
|
|
||||||
<div>
|
|
||||||
${this.hass.localize("ui.panel.config.info.custom_uis")}
|
${this.hass.localize("ui.panel.config.info.custom_uis")}
|
||||||
${customUiList.map(
|
${customUiList.map(
|
||||||
(item) => html`
|
(item) => html`
|
||||||
@ -142,9 +183,8 @@ class HaConfigInfo extends LitElement {
|
|||||||
`
|
`
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
`
|
`}
|
||||||
: ""}
|
</ha-card>
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
</hass-subpage>
|
</hass-subpage>
|
||||||
`;
|
`;
|
||||||
@ -176,40 +216,87 @@ class HaConfigInfo extends LitElement {
|
|||||||
this._osInfo = osInfo;
|
this._osInfo = osInfo;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
private _entryClicked(ev) {
|
||||||
|
ev.currentTarget.blur();
|
||||||
|
}
|
||||||
|
|
||||||
static get styles(): CSSResultGroup {
|
static get styles(): CSSResultGroup {
|
||||||
return [
|
return [
|
||||||
haStyle,
|
haStyle,
|
||||||
css`
|
css`
|
||||||
:host {
|
.content {
|
||||||
-ms-user-select: initial;
|
padding: 28px 20px 0;
|
||||||
-webkit-user-select: initial;
|
max-width: 1040px;
|
||||||
-moz-user-select: initial;
|
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 {
|
ha-logo-svg {
|
||||||
padding: 12px;
|
padding: 12px;
|
||||||
height: 180px;
|
height: 150px;
|
||||||
width: 180px;
|
width: 150px;
|
||||||
}
|
}
|
||||||
|
|
||||||
h4 {
|
ha-card {
|
||||||
font-weight: 400;
|
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;
|
||||||
}
|
}
|
||||||
`,
|
`,
|
||||||
];
|
];
|
||||||
|
@ -1601,7 +1601,7 @@
|
|||||||
"frontend": "frontend-ui",
|
"frontend": "frontend-ui",
|
||||||
"built_using": "Built using",
|
"built_using": "Built using",
|
||||||
"icons_by": "Icons by",
|
"icons_by": "Icons by",
|
||||||
"frontend_version": "Frontend version: {version} - {type}",
|
"frontend_version": "Frontend {version} - {type}",
|
||||||
"custom_uis": "Custom UIs:",
|
"custom_uis": "Custom UIs:",
|
||||||
"system_health_error": "System Health component is not loaded. Add 'system_health:' to configuration.yaml",
|
"system_health_error": "System Health component is not loaded. Add 'system_health:' to configuration.yaml",
|
||||||
"documentation": "Documentation",
|
"documentation": "Documentation",
|
||||||
@ -1610,6 +1610,15 @@
|
|||||||
"system_health": {
|
"system_health": {
|
||||||
"manage": "Manage",
|
"manage": "Manage",
|
||||||
"more_info": "more info"
|
"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": {
|
"logs": {
|
||||||
|
Loading…
x
Reference in New Issue
Block a user