From 823c222a5561e7c305991c1ce753a34539bac8d9 Mon Sep 17 00:00:00 2001 From: Aidan Timson Date: Mon, 23 Mar 2026 17:36:29 +0000 Subject: [PATCH] Fix app info descriptions and metrics (#30287) * Improve app info descriptions * Space tokens on rest of files * Don't display empty value --- src/components/ha-settings-row.ts | 32 +++++++++++------- .../components/supervisor-app-metric.ts | 6 ++-- .../apps/app-view/info/supervisor-app-info.ts | 33 ++++++++++++------- 3 files changed, 45 insertions(+), 26 deletions(-) diff --git a/src/components/ha-settings-row.ts b/src/components/ha-settings-row.ts index ed366a39f9..8fd5312a29 100644 --- a/src/components/ha-settings-row.ts +++ b/src/components/ha-settings-row.ts @@ -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`
@@ -27,25 +29,30 @@ export class HaSettingsRow extends LitElement {
-
+
+ +
`; } 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 { diff --git a/src/panels/config/apps/app-view/components/supervisor-app-metric.ts b/src/panels/config/apps/app-view/components/supervisor-app-metric.ts index e081321a7a..426bb7d35d 100644 --- a/src/panels/config/apps/app-view/components/supervisor-app-metric.ts +++ b/src/panels/config/apps/app-view/components/supervisor-app-metric.ts @@ -16,7 +16,7 @@ class SupervisorAppMetric extends LitElement { protected render(): TemplateResult { const roundedValue = roundWithOneDecimal(this.value); - return html` + return html` ${this.description}
${roundedValue} % @@ -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; } `; diff --git a/src/panels/config/apps/app-view/info/supervisor-app-info.ts b/src/panels/config/apps/app-view/info/supervisor-app-info.ts index a99b7d4ee1..bf2df43292 100644 --- a/src/panels/config/apps/app-view/info/supervisor-app-info.ts +++ b/src/panels/config/apps/app-view/info/supervisor-app-info.ts @@ -629,7 +629,7 @@ class SupervisorAppInfo extends LitElement {
${this.addon.version && this.addon.state === "started" - ? html` + ? html` ${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) {