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

Use md list in config navigation (#24885)

Browse Source
This commit is contained in:
Bram Kragten 2025-04-01 18:11:29 +02:00 committed by GitHub
parent cd39e2d0f2
commit 4fbc155f8b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 66 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/entity/state-badge.ts
View File

@ -193,17 +193,16 @@ export class StateBadge extends LitElement {
css` css`
:host { :host {
position: relative; position: relative;
display: inline-block; display: inline-flex;
width: 40px; width: 40px;
color: var(--paper-item-icon-color, #44739e); color: var(--paper-item-icon-color, #44739e);
border-radius: 50%; border-radius: 50%;
height: 40px; height: 40px;
text-align: center;
background-size: cover; background-size: cover;
line-height: 40px;
vertical-align: middle;
box-sizing: border-box; box-sizing: border-box;
--state-inactive-color: initial; --state-inactive-color: initial;
align-items: center;
justify-content: center;
} }
:host(:focus) { :host(:focus) {
outline: none; outline: none;

50
src/components/ha-navigation-list.ts
View File

@ -1,15 +1,14 @@
import "@material/mwc-list/mwc-list";
import type { ActionDetail } from "@material/mwc-list/mwc-list";
import type { CSSResultGroup, TemplateResult } from "lit"; import type { CSSResultGroup, TemplateResult } from "lit";
import { css, html, LitElement } from "lit"; import { css, html, LitElement } from "lit";
import { customElement, property } from "lit/decorators"; import { customElement, property } from "lit/decorators";
import { ifDefined } from "lit/directives/if-defined"; import { ifDefined } from "lit/directives/if-defined";
import { navigate } from "../common/navigate";
import type { PageNavigation } from "../layouts/hass-tabs-subpage"; import type { PageNavigation } from "../layouts/hass-tabs-subpage";
import type { HomeAssistant } from "../types"; import type { HomeAssistant } from "../types";
import "./ha-icon-next"; import "./ha-icon-next";
import "./ha-list-item"; import "./ha-list-item";
import "./ha-svg-icon"; import "./ha-svg-icon";
import "./ha-md-list";
import "./ha-md-list-item";
@customElement("ha-navigation-list") @customElement("ha-navigation-list")
class HaNavigationList extends LitElement { class HaNavigationList extends LitElement {
@ -26,21 +25,21 @@ class HaNavigationList extends LitElement {
public render(): TemplateResult { public render(): TemplateResult {
return html` return html`
<mwc-list <ha-md-list
innerRole="menu" innerRole="menu"
itemRoles="menuitem" itemRoles="menuitem"
innerAriaLabel=${ifDefined(this.label)} innerAriaLabel=${ifDefined(this.label)}
@action=${this._handleListAction}
> >
${this.pages.map( ${this.pages.map((page) => {
(page) => html` const externalApp = page.path.endsWith("#external-app-configuration");
<ha-list-item return html`
graphic="avatar" <ha-md-list-item
.twoline=${this.hasSecondary} .type=${externalApp ? "button" : "link"}
.hasMeta=${!this.narrow} .href=${externalApp ? undefined : page.path}
@click=${externalApp ? this._handleExternalApp : undefined}
> >
<div <div
slot="graphic" slot="start"
class=${page.iconColor ? "icon-background" : ""} class=${page.iconColor ? "icon-background" : ""}
.style="background-color: ${page.iconColor || "undefined"}" .style="background-color: ${page.iconColor || "undefined"}"
> >
@ -48,31 +47,23 @@ class HaNavigationList extends LitElement {
</div> </div>
<span>${page.name}</span> <span>${page.name}</span>
${this.hasSecondary ${this.hasSecondary
? html`<span slot="secondary">${page.description}</span>` ? html`<span slot="supporting-text">${page.description}</span>`
: ""} : ""}
${!this.narrow ${!this.narrow
? html`<ha-icon-next slot="meta"></ha-icon-next>` ? html`<ha-icon-next slot="end"></ha-icon-next>`
: ""} : ""}
</ha-list-item> </ha-md-list-item>
` `;
)} })}
</mwc-list> </ha-md-list>
`; `;
} }
private _handleListAction(ev: CustomEvent<ActionDetail>) { private _handleExternalApp() {
const path = this.pages[ev.detail.index].path; this.hass.auth.external!.fireMessage({ type: "config_screen/show" });
if (path.endsWith("#external-app-configuration")) {
this.hass.auth.external!.fireMessage({ type: "config_screen/show" });
} else {
navigate(path);
}
} }
static styles: CSSResultGroup = css` static styles: CSSResultGroup = css`
:host {
--mdc-list-vertical-padding: 0;
}
ha-svg-icon, ha-svg-icon,
ha-icon-next { ha-icon-next {
color: var(--secondary-text-color); color: var(--secondary-text-color);
@ -89,8 +80,7 @@ class HaNavigationList extends LitElement {
.icon-background ha-svg-icon { .icon-background ha-svg-icon {
color: #fff; color: #fff;
} }
ha-list-item { ha-md-list-item {
cursor: pointer;
font-size: var(--navigation-list-item-title-font-size); font-size: var(--navigation-list-item-title-font-size);
} }
`; `;

3
src/panels/config/core/ha-config-section-updates.ts
View File

@ -197,6 +197,9 @@ class HaConfigSectionUpdates extends LitElement {
display: flex; display: flex;
margin-bottom: max(24px, env(safe-area-inset-bottom)); margin-bottom: max(24px, env(safe-area-inset-bottom));
} }
ha-config-updates {
margin-bottom: 8px;
}
.card-content { .card-content {
display: flex; display: flex;

83
src/panels/config/dashboard/ha-config-updates.ts
View File

@ -1,5 +1,3 @@
import "@material/mwc-button/mwc-button";
import "@material/mwc-list/mwc-list";
import type { UnsubscribeFunc } from "home-assistant-js-websocket"; import type { UnsubscribeFunc } from "home-assistant-js-websocket";
import type { CSSResultGroup } from "lit"; import type { CSSResultGroup } from "lit";
import { css, html, LitElement, nothing } from "lit"; import { css, html, LitElement, nothing } from "lit";
@ -11,7 +9,8 @@ import { computeDeviceNameDisplay } from "../../../common/entity/compute_device_
import "../../../components/entity/state-badge"; import "../../../components/entity/state-badge";
import "../../../components/ha-alert"; import "../../../components/ha-alert";
import "../../../components/ha-icon-next"; import "../../../components/ha-icon-next";
import "../../../components/ha-list-item"; import "../../../components/ha-md-list";
import "../../../components/ha-md-list-item";
import "../../../components/ha-spinner"; import "../../../components/ha-spinner";
import type { DeviceRegistryEntry } from "../../../data/device_registry"; import type { DeviceRegistryEntry } from "../../../data/device_registry";
import { subscribeDeviceRegistry } from "../../../data/device_registry"; import { subscribeDeviceRegistry } from "../../../data/device_registry";
@ -69,7 +68,7 @@ class HaConfigUpdates extends SubscribeMixin(LitElement) {
count: this.total || this.updateEntities.length, count: this.total || this.updateEntities.length,
})} })}
</div> </div>
<mwc-list> <ha-md-list>
${updates.map((entity) => { ${updates.map((entity) => {
const entityEntry = this.getEntityEntry(entity.entity_id); const entityEntry = this.getEntityEntry(entity.entity_id);
const deviceEntry = const deviceEntry =
@ -78,44 +77,43 @@ class HaConfigUpdates extends SubscribeMixin(LitElement) {
: undefined; : undefined;
return html` return html`
<ha-list-item <ha-md-list-item
twoline
graphic="medium"
class=${ifDefined( class=${ifDefined(
entity.attributes.skipped_version ? "skipped" : undefined entity.attributes.skipped_version ? "skipped" : undefined
)} )}
.entity_id=${entity.entity_id} .entity_id=${entity.entity_id}
.hasMeta=${!this.narrow} .hasMeta=${!this.narrow}
type="button"
@click=${this._openMoreInfo} @click=${this._openMoreInfo}
> >
<state-badge <div slot="start">
slot="graphic" <state-badge
.title=${entity.attributes.title || .title=${entity.attributes.title ||
entity.attributes.friendly_name} entity.attributes.friendly_name}
.hass=${this.hass} .hass=${this.hass}
.stateObj=${entity} .stateObj=${entity}
class=${ifDefined( class=${ifDefined(
this.narrow && entity.attributes.in_progress this.narrow && entity.attributes.in_progress
? "updating" ? "updating"
: undefined : undefined
)} )}
></state-badge> ></state-badge>
${this.narrow && entity.attributes.in_progress ${this.narrow && entity.attributes.in_progress
? html`<ha-spinner ? html`<ha-spinner
slot="graphic" class="absolute"
class="absolute" size="small"
size="small" .ariaLabel=${this.hass.localize(
.ariaLabel=${this.hass.localize( "ui.panel.config.updates.update_in_progress"
"ui.panel.config.updates.update_in_progress" )}
)} ></ha-spinner>`
></ha-spinner>` : ""}
: ""} </div>
<span <span
>${deviceEntry >${deviceEntry
? computeDeviceNameDisplay(deviceEntry, this.hass) ? computeDeviceNameDisplay(deviceEntry, this.hass)
: entity.attributes.friendly_name}</span : entity.attributes.friendly_name}</span
> >
<span slot="secondary"> <span slot="supporting-text">
${entity.attributes.title} ${entity.attributes.latest_version} ${entity.attributes.title} ${entity.attributes.latest_version}
${entity.attributes.skipped_version ${entity.attributes.skipped_version
? `(${this.hass.localize("ui.panel.config.updates.skipped")})` ? `(${this.hass.localize("ui.panel.config.updates.skipped")})`
@ -123,7 +121,7 @@ class HaConfigUpdates extends SubscribeMixin(LitElement) {
</span> </span>
${!this.narrow ${!this.narrow
? entity.attributes.in_progress ? entity.attributes.in_progress
? html`<div slot="meta"> ? html`<div slot="end">
<ha-spinner <ha-spinner
size="small" size="small"
.ariaLabel=${this.hass.localize( .ariaLabel=${this.hass.localize(
@ -131,12 +129,12 @@ class HaConfigUpdates extends SubscribeMixin(LitElement) {
)} )}
></ha-spinner> ></ha-spinner>
</div>` </div>`
: html`<ha-icon-next slot="meta"></ha-icon-next>` : html`<ha-icon-next slot="end"></ha-icon-next>`
: ""} : ""}
</ha-list-item> </ha-md-list-item>
`; `;
})} })}
</mwc-list> </ha-md-list>
`; `;
} }
@ -149,9 +147,6 @@ class HaConfigUpdates extends SubscribeMixin(LitElement) {
static get styles(): CSSResultGroup[] { static get styles(): CSSResultGroup[] {
return [ return [
css` css`
:host {
--mdc-list-vertical-padding: 0;
}
.title { .title {
font-size: 16px; font-size: 16px;
padding: 16px; padding: 16px;
@ -160,8 +155,8 @@ class HaConfigUpdates extends SubscribeMixin(LitElement) {
.skipped { .skipped {
background: var(--secondary-background-color); background: var(--secondary-background-color);
} }
ha-list-item { ha-md-list-item {
--mdc-list-item-graphic-size: 40px; --md-list-item-leading-icon-size: 40px;
} }
ha-icon-next { ha-icon-next {
color: var(--secondary-text-color); color: var(--secondary-text-color);
@ -184,14 +179,16 @@ class HaConfigUpdates extends SubscribeMixin(LitElement) {
outline: none; outline: none;
text-decoration: underline; text-decoration: underline;
} }
ha-list-item { ha-md-list-item {
cursor: pointer;
font-size: 16px; font-size: 16px;
} }
div[slot="start"] {
position: relative;
}
ha-spinner.absolute { ha-spinner.absolute {
position: absolute; position: absolute;
width: 28px; left: 6px;
height: 28px; top: 6px;
} }
state-badge.updating { state-badge.updating {
opacity: 0.5; opacity: 0.5;