jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-24 09:46:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

Redesign about page (#18383)

Browse Source
This commit is contained in:
Paul Bottein 2023-10-24 20:07:12 +02:00 committed by GitHub
parent 8efc0816bb
commit c840f1cbb1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 107 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

162
src/panels/config/info/ha-config-info.ts
View File

@ -7,8 +7,15 @@ import {
mdiNewspaperVariant,
mdiTshirtCrew,
} from "@mdi/js";
import { CSSResultGroup, LitElement, TemplateResult, css, html } from "lit";
import { property, state } from "lit/decorators";
import {
CSSResultGroup,
LitElement,
TemplateResult,
css,
html,
nothing,
} from "lit";
import { customElement, property, state } from "lit/decorators";
import { isComponentLoaded } from "../../../common/config/is_component_loaded";
import "../../../components/ha-card";
import "../../../components/ha-clickable-list-item";
@ -77,6 +84,7 @@ const PAGES = [
iconColor: string;
}[];
@customElement("ha-config-info")
class HaConfigInfo extends LitElement {
@property({ attribute: false }) public hass!: HomeAssistant;
@ -105,41 +113,56 @@ class HaConfigInfo extends LitElement {
.header=${this.hass.localize("ui.panel.config.info.caption")}
>
<div class="content">
<ha-card outlined>
<div class="logo-versions">
<a
href=${documentationUrl(this.hass, "")}
target="_blank"
rel="noreferrer"
<ha-card outlined class="header">
<a
href=${documentationUrl(this.hass, "")}
target="_blank"
rel="noreferrer"
>
<ha-logo-svg
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>
</ha-logo-svg>
</a>
<p>Home Assistant</p>
<ul class="versions">
<li>
<span class="version-label">Core</span>
<span class="version">${hass.connection.haVersion}</span>
</li>
${this._hassioInfo
? html`
<li>
<span class="version-label">Supervisor</span>
<span class="version"
>${this._hassioInfo.supervisor}</span
>
</li>
`
: nothing}
${this._osInfo
? html`
<li>
<span class="version-label">Operating System</span>
<span class="version">${this._osInfo.version}</span>
</li>
`
: nothing}
<li>
<span class="version-label">
${this.hass.localize(
"ui.panel.config.info.frontend_version",
"version",
JS_VERSION,
"type",
JS_TYPE
"ui.panel.config.info.frontend_version_label"
)}
</span>
</div>
</div>
<span class="version">
${JS_VERSION}${JS_TYPE !== "latest" ? ` ⸱ ${JS_TYPE}` : ""}
</span>
</li>
</ul>
</ha-card>
<ha-card outlined class="pages">
<mwc-list>
${PAGES.map(
(page) => html`
@ -164,9 +187,8 @@ class HaConfigInfo extends LitElement {
`
)}
</mwc-list>
${!customUiList.length
? ""
: html`
${customUiList.length
? html`
<div class="custom-ui">
${this.hass.localize("ui.panel.config.info.custom_uis")}
${customUiList.map(
@ -178,7 +200,8 @@ class HaConfigInfo extends LitElement {
`
)}
</div>
`}
`
: nothing}
</ha-card>
</div>
</hass-subpage>
@ -222,32 +245,58 @@ class HaConfigInfo extends LitElement {
}
ha-logo-svg {
padding: 12px;
height: 150px;
width: 150px;
height: 56px;
width: 56px;
}
ha-card {
padding: 16px;
max-width: 600px;
margin: 0 auto;
margin-bottom: 24px;
margin-bottom: max(24px, env(safe-area-inset-bottom));
margin-bottom: 16px;
padding: 16px;
}
.logo-versions {
.header {
display: flex;
justify-content: flex-start;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 32px 8px 16px 8px;
}
.header p {
font-size: 22px;
font-weight: 400;
line-height: 28px;
text-align: center;
margin: 24px;
}
.versions {
display: flex;
flex-direction: column;
color: var(--secondary-text-color);
padding: 12px 0;
align-self: stretch;
justify-content: flex-start;
padding: 0 12px;
margin: 0;
}
.versions li {
display: flex;
flex-direction: row;
justify-content: space-between;
font-size: 14px;
font-weight: 400;
padding: 4px 0;
}
.version-label {
color: var(--primary-text-color);
}
.version {
color: var(--secondary-text-color);
}
.ha-version {
@ -256,8 +305,18 @@ class HaConfigInfo extends LitElement {
font-size: 16px;
}
.pages {
margin-bottom: max(24px, env(safe-area-inset-bottom));
padding: 4px 0;
}
mwc-list {
--mdc-list-side-padding: 4px;
--mdc-list-side-padding: 16px;
--mdc-list-vertical-padding: 0;
}
ha-clickable-list-item {
height: 64px;
}
ha-svg-icon {
@ -272,13 +331,6 @@ class HaConfigInfo extends LitElement {
border-radius: 50%;
}
@media all and (max-width: 500px), all and (max-height: 500px) {
ha-logo-svg {
height: 100px;
width: 100px;
}
}
.custom-ui {
color: var(--secondary-text-color);
text-align: center;
@ -293,5 +345,3 @@ declare global {
"ha-config-info": HaConfigInfo;
}
}
customElements.define("ha-config-info", HaConfigInfo);

2
src/translations/en.json
View File

@ -2025,7 +2025,7 @@
"frontend": "frontend-ui",
"built_using": "Built using",
"icons_by": "Icons by",
"frontend_version": "Frontend {version} - {type}",
"frontend_version_label": "Frontend",
"custom_uis": "Custom UIs:",
"system_health_error": "System Health component is not loaded. Add 'system_health:' to configuration.yaml",
"documentation": "Documentation",