Home-Assistant/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2026-04-02 00:27:49 +01:00
Code Activity

Fix app info descriptions and metrics (#30287)

Browse Source 
* Improve app info descriptions

* Space tokens on rest of files

* Don't display empty value
This commit is contained in:
Aidan Timson
2026-03-23 17:36:29 +00:00
committed by GitHub
parent 02acd2996c
commit 823c222a55
3 changed files with 45 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
src/components/ha-settings-row.ts
View File

@@ -14,6 +14,8 @@ export class HaSettingsRow extends LitElement {
@property({ type: Boolean, attribute: "wrap-heading", reflect: true })
public wrapHeading = false;
@property({ type: Boolean, reflect: true }) public empty = false;
protected render(): TemplateResult {
return html`
<div class="prefix-wrap">
@@ -27,25 +29,30 @@ export class HaSettingsRow extends LitElement {
<div class="secondary"><slot name="description"></slot></div>
</div>
</div>
<div class="content"><slot></slot></div>
<div class="content">
<slot></slot>
</div>
`;
}
static styles = css`
:host {
display: flex;
padding: 0 16px;
padding: 0 var(--ha-space-4);
align-content: normal;
align-self: auto;
align-items: center;
}
.body {
padding-top: 8px;
padding-bottom: 8px;
padding-top: var(--settings-row-body-padding-top, var(--ha-space-2));
padding-bottom: var(
--settings-row-body-padding-bottom,
var(--ha-space-2)
);
padding-left: 0;
padding-inline-start: 0;
padding-right: 16px;
padding-inline-end: 16px;
padding-right: var(--ha-space-4);
padding-inline-end: var(--ha-space-4);
overflow: hidden;
display: var(--layout-vertical_-_display, flex);
flex-direction: var(--layout-vertical_-_flex-direction, column);
@@ -63,7 +70,7 @@ export class HaSettingsRow extends LitElement {
}
.body > .secondary {
display: block;
padding-top: 4px;
padding-top: var(--ha-space-1);
font-family: var(
--mdc-typography-body2-font-family,
var(--mdc-typography-font-family, var(--ha-font-family-body))
@@ -90,7 +97,10 @@ export class HaSettingsRow extends LitElement {
justify-content: flex-end;
flex: 1;
min-width: 0;
padding: 16px 0;
padding: var(--settings-row-content-padding-block, var(--ha-space-4)) 0;
}
:host([empty]) .content {
display: none;
}
.content ::slotted(*) {
width: var(--settings-row-content-width);
@@ -99,16 +109,16 @@ export class HaSettingsRow extends LitElement {
align-items: normal;
flex-direction: column;
border-top: 1px solid var(--divider-color);
padding-bottom: 8px;
padding-bottom: var(--ha-space-2);
}
::slotted(ha-switch) {
padding: 16px 0;
padding: var(--settings-row-switch-padding-block, var(--ha-space-4)) 0;
}
.secondary {
white-space: normal;
}
.prefix-wrap {
flex: 1;
flex: var(--settings-row-prefix-flex, 1);
display: var(--settings-row-prefix-display);
}
:host([narrow]) .prefix-wrap {

6
src/panels/config/apps/app-view/components/supervisor-app-metric.ts
View File

@@ -16,7 +16,7 @@ class SupervisorAppMetric extends LitElement {
protected render(): TemplateResult {
const roundedValue = roundWithOneDecimal(this.value);
return html`<ha-settings-row>
return html`<ha-settings-row empty>
<span slot="heading"> ${this.description} </span>
<div slot="description" .title=${this.tooltip ?? ""}>
<span class="value"> ${roundedValue} % </span>
@@ -60,9 +60,9 @@ class SupervisorAppMetric extends LitElement {
}
.value {
width: 48px;
padding-right: 4px;
padding-right: var(--ha-space-1);
padding-inline-start: initial;
padding-inline-end: 4px;
padding-inline-end: var(--ha-space-1);
flex-shrink: 0;
}
`;

33
src/panels/config/apps/app-view/info/supervisor-app-info.ts
View File

@@ -629,7 +629,7 @@ class SupervisorAppInfo extends LitElement {
</div>
<div>
${this.addon.version && this.addon.state === "started"
? html`<ha-settings-row ?three-line=${this.narrow}>
? html`<ha-settings-row ?three-line=${this.narrow} empty>
<span slot="heading">
${this.hass.localize(
"ui.panel.config.apps.dashboard.hostname"
@@ -1286,7 +1286,7 @@ class SupervisorAppInfo extends LitElement {
}
ha-card {
display: block;
margin-bottom: 16px;
margin-bottom: var(--ha-space-4);
}
ha-card.warning {
background-color: var(--error-color);
@@ -1322,21 +1322,18 @@ class SupervisorAppInfo extends LitElement {
}
.errors {
color: var(--error-color);
margin-bottom: 16px;
margin-bottom: var(--ha-space-4);
}
.description {
margin-bottom: 16px;
margin-bottom: var(--ha-space-4);
}
img.logo {
max-width: 100%;
max-height: 60px;
margin: 16px 0;
margin: var(--ha-space-4) 0;
display: block;
}
ha-switch {
display: flex;
}
ha-svg-icon.running {
color: var(--success-color);
}
@@ -1383,7 +1380,7 @@ class SupervisorAppInfo extends LitElement {
);
}
.capabilities {
margin-bottom: 16px;
margin-bottom: var(--ha-space-4);
}
.card-actions {
justify-content: space-between;
@@ -1399,13 +1396,17 @@ class SupervisorAppInfo extends LitElement {
cursor: pointer;
}
ha-markdown {
padding: 16px;
padding: var(--ha-space-4);
--markdown-image-background-color: transparent;
--markdown-image-border-radius: 0;
--markdown-image-min-height: auto;
--markdown-image-text-indent: 0;
--markdown-image-transition: none;
}
ha-settings-row,
supervisor-app-metric {
--settings-row-prefix-flex: 2;
}
ha-settings-row {
padding: 0;
height: 54px;
@@ -1418,6 +1419,14 @@ class SupervisorAppInfo extends LitElement {
ha-settings-row[three-line] {
height: 74px;
}
.addon-options ha-settings-row {
padding: 0;
width: 100%;
--settings-row-body-padding-top: 0;
--settings-row-body-padding-bottom: 0;
--settings-row-content-padding-block: var(--ha-space-2);
--settings-row-switch-padding-block: var(--ha-space-2);
}
.addon-options {
max-width: 90%;
@@ -1439,7 +1448,7 @@ class SupervisorAppInfo extends LitElement {
:host > ha-alert {
display: block;
margin-bottom: 16px;
margin-bottom: var(--ha-space-4);
}
a {
@@ -1447,7 +1456,7 @@ class SupervisorAppInfo extends LitElement {
}
supervisor-app-update-available-card {
padding-bottom: 16px;
padding-bottom: var(--ha-space-4);
}
@media (max-width: 720px) {