mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-27 19:26:36 +00:00
Use md list in config navigation (#24885)
This commit is contained in:
Bram Kragten
GitHub
parent
cd39e2d0f2
commit
4fbc155f8b
@ -193,17 +193,16 @@ export class StateBadge extends LitElement {
|
||||
css`
|
||||
:host {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
display: inline-flex;
|
||||
width: 40px;
|
||||
color: var(--paper-item-icon-color, #44739e);
|
||||
border-radius: 50%;
|
||||
height: 40px;
|
||||
text-align: center;
|
||||
background-size: cover;
|
||||
line-height: 40px;
|
||||
vertical-align: middle;
|
||||
box-sizing: border-box;
|
||||
--state-inactive-color: initial;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
:host(:focus) {
|
||||
outline: none;
|
||||
|
||||
@ -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 { css, html, LitElement } from "lit";
|
||||
import { customElement, property } from "lit/decorators";
|
||||
import { ifDefined } from "lit/directives/if-defined";
|
||||
import { navigate } from "../common/navigate";
|
||||
import type { PageNavigation } from "../layouts/hass-tabs-subpage";
|
||||
import type { HomeAssistant } from "../types";
|
||||
import "./ha-icon-next";
|
||||
import "./ha-list-item";
|
||||
import "./ha-svg-icon";
|
||||
import "./ha-md-list";
|
||||
import "./ha-md-list-item";
|
||||
|
||||
@customElement("ha-navigation-list")
|
||||
class HaNavigationList extends LitElement {
|
||||
@ -26,21 +25,21 @@ class HaNavigationList extends LitElement {
|
||||
|
||||
public render(): TemplateResult {
|
||||
return html`
|
||||
<mwc-list
|
||||
<ha-md-list
|
||||
innerRole="menu"
|
||||
itemRoles="menuitem"
|
||||
innerAriaLabel=${ifDefined(this.label)}
|
||||
@action=${this._handleListAction}
|
||||
>
|
||||
${this.pages.map(
|
||||
(page) => html`
|
||||
<ha-list-item
|
||||
graphic="avatar"
|
||||
.twoline=${this.hasSecondary}
|
||||
.hasMeta=${!this.narrow}
|
||||
${this.pages.map((page) => {
|
||||
const externalApp = page.path.endsWith("#external-app-configuration");
|
||||
return html`
|
||||
<ha-md-list-item
|
||||
.type=${externalApp ? "button" : "link"}
|
||||
.href=${externalApp ? undefined : page.path}
|
||||
@click=${externalApp ? this._handleExternalApp : undefined}
|
||||
>
|
||||
<div
|
||||
slot="graphic"
|
||||
slot="start"
|
||||
class=${page.iconColor ? "icon-background" : ""}
|
||||
.style="background-color: ${page.iconColor || "undefined"}"
|
||||
>
|
||||
@ -48,31 +47,23 @@ class HaNavigationList extends LitElement {
|
||||
</div>
|
||||
<span>${page.name}</span>
|
||||
${this.hasSecondary
|
||||
? html`<span slot="secondary">${page.description}</span>`
|
||||
? html`<span slot="supporting-text">${page.description}</span>`
|
||||
: ""}
|
||||
${!this.narrow
|
||||
? html`<ha-icon-next slot="meta"></ha-icon-next>`
|
||||
? html`<ha-icon-next slot="end"></ha-icon-next>`
|
||||
: ""}
|
||||
</ha-list-item>
|
||||
`
|
||||
)}
|
||||
</mwc-list>
|
||||
</ha-md-list-item>
|
||||
`;
|
||||
})}
|
||||
</ha-md-list>
|
||||
`;
|
||||
}
|
||||
|
||||
private _handleListAction(ev: CustomEvent<ActionDetail>) {
|
||||
const path = this.pages[ev.detail.index].path;
|
||||
if (path.endsWith("#external-app-configuration")) {
|
||||
this.hass.auth.external!.fireMessage({ type: "config_screen/show" });
|
||||
} else {
|
||||
navigate(path);
|
||||
}
|
||||
private _handleExternalApp() {
|
||||
this.hass.auth.external!.fireMessage({ type: "config_screen/show" });
|
||||
}
|
||||
|
||||
static styles: CSSResultGroup = css`
|
||||
:host {
|
||||
--mdc-list-vertical-padding: 0;
|
||||
}
|
||||
ha-svg-icon,
|
||||
ha-icon-next {
|
||||
color: var(--secondary-text-color);
|
||||
@ -89,8 +80,7 @@ class HaNavigationList extends LitElement {
|
||||
.icon-background ha-svg-icon {
|
||||
color: #fff;
|
||||
}
|
||||
ha-list-item {
|
||||
cursor: pointer;
|
||||
ha-md-list-item {
|
||||
font-size: var(--navigation-list-item-title-font-size);
|
||||
}
|
||||
`;
|
||||
|
||||
@ -197,6 +197,9 @@ class HaConfigSectionUpdates extends LitElement {
|
||||
display: flex;
|
||||
margin-bottom: max(24px, env(safe-area-inset-bottom));
|
||||
}
|
||||
ha-config-updates {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.card-content {
|
||||
display: flex;
|
||||
|
||||
@ -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 { CSSResultGroup } 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/ha-alert";
|
||||
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 type { DeviceRegistryEntry } 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,
|
||||
})}
|
||||
</div>
|
||||
<mwc-list>
|
||||
<ha-md-list>
|
||||
${updates.map((entity) => {
|
||||
const entityEntry = this.getEntityEntry(entity.entity_id);
|
||||
const deviceEntry =
|
||||
@ -78,44 +77,43 @@ class HaConfigUpdates extends SubscribeMixin(LitElement) {
|
||||
: undefined;
|
||||
|
||||
return html`
|
||||
<ha-list-item
|
||||
twoline
|
||||
graphic="medium"
|
||||
<ha-md-list-item
|
||||
class=${ifDefined(
|
||||
entity.attributes.skipped_version ? "skipped" : undefined
|
||||
)}
|
||||
.entity_id=${entity.entity_id}
|
||||
.hasMeta=${!this.narrow}
|
||||
type="button"
|
||||
@click=${this._openMoreInfo}
|
||||
>
|
||||
<state-badge
|
||||
slot="graphic"
|
||||
.title=${entity.attributes.title ||
|
||||
entity.attributes.friendly_name}
|
||||
.hass=${this.hass}
|
||||
.stateObj=${entity}
|
||||
class=${ifDefined(
|
||||
this.narrow && entity.attributes.in_progress
|
||||
? "updating"
|
||||
: undefined
|
||||
)}
|
||||
></state-badge>
|
||||
${this.narrow && entity.attributes.in_progress
|
||||
? html`<ha-spinner
|
||||
slot="graphic"
|
||||
class="absolute"
|
||||
size="small"
|
||||
.ariaLabel=${this.hass.localize(
|
||||
"ui.panel.config.updates.update_in_progress"
|
||||
)}
|
||||
></ha-spinner>`
|
||||
: ""}
|
||||
<div slot="start">
|
||||
<state-badge
|
||||
.title=${entity.attributes.title ||
|
||||
entity.attributes.friendly_name}
|
||||
.hass=${this.hass}
|
||||
.stateObj=${entity}
|
||||
class=${ifDefined(
|
||||
this.narrow && entity.attributes.in_progress
|
||||
? "updating"
|
||||
: undefined
|
||||
)}
|
||||
></state-badge>
|
||||
${this.narrow && entity.attributes.in_progress
|
||||
? html`<ha-spinner
|
||||
class="absolute"
|
||||
size="small"
|
||||
.ariaLabel=${this.hass.localize(
|
||||
"ui.panel.config.updates.update_in_progress"
|
||||
)}
|
||||
></ha-spinner>`
|
||||
: ""}
|
||||
</div>
|
||||
<span
|
||||
>${deviceEntry
|
||||
? computeDeviceNameDisplay(deviceEntry, this.hass)
|
||||
: entity.attributes.friendly_name}</span
|
||||
>
|
||||
<span slot="secondary">
|
||||
<span slot="supporting-text">
|
||||
${entity.attributes.title} ${entity.attributes.latest_version}
|
||||
${entity.attributes.skipped_version
|
||||
? `(${this.hass.localize("ui.panel.config.updates.skipped")})`
|
||||
@ -123,7 +121,7 @@ class HaConfigUpdates extends SubscribeMixin(LitElement) {
|
||||
</span>
|
||||
${!this.narrow
|
||||
? entity.attributes.in_progress
|
||||
? html`<div slot="meta">
|
||||
? html`<div slot="end">
|
||||
<ha-spinner
|
||||
size="small"
|
||||
.ariaLabel=${this.hass.localize(
|
||||
@ -131,12 +129,12 @@ class HaConfigUpdates extends SubscribeMixin(LitElement) {
|
||||
)}
|
||||
></ha-spinner>
|
||||
</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[] {
|
||||
return [
|
||||
css`
|
||||
:host {
|
||||
--mdc-list-vertical-padding: 0;
|
||||
}
|
||||
.title {
|
||||
font-size: 16px;
|
||||
padding: 16px;
|
||||
@ -160,8 +155,8 @@ class HaConfigUpdates extends SubscribeMixin(LitElement) {
|
||||
.skipped {
|
||||
background: var(--secondary-background-color);
|
||||
}
|
||||
ha-list-item {
|
||||
--mdc-list-item-graphic-size: 40px;
|
||||
ha-md-list-item {
|
||||
--md-list-item-leading-icon-size: 40px;
|
||||
}
|
||||
ha-icon-next {
|
||||
color: var(--secondary-text-color);
|
||||
@ -184,14 +179,16 @@ class HaConfigUpdates extends SubscribeMixin(LitElement) {
|
||||
outline: none;
|
||||
text-decoration: underline;
|
||||
}
|
||||
ha-list-item {
|
||||
cursor: pointer;
|
||||
ha-md-list-item {
|
||||
font-size: 16px;
|
||||
}
|
||||
div[slot="start"] {
|
||||
position: relative;
|
||||
}
|
||||
ha-spinner.absolute {
|
||||
position: absolute;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
left: 6px;
|
||||
top: 6px;
|
||||
}
|
||||
state-badge.updating {
|
||||
opacity: 0.5;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user