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

More info breadcrumb clickable (#24830)

Browse Source 
* Make more info breadcrum clickable

* css adjustements
This commit is contained in:
Paul Bottein 2025-03-28 15:26:09 +01:00 committed by GitHub
parent 5ca7b1d508
commit 9e686190f6
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 56 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
src/components/ha-related-items.ts
View File

@ -211,36 +211,12 @@ export class HaRelatedItems extends LitElement {
)}
</mwc-list>`
: nothing}
${this._related.device
? html`<h3>
${this.hass.localize("ui.components.related-items.device")}
</h3>
${this._related.device.map((relatedDeviceId) => {
const device = this.hass.devices[relatedDeviceId];
if (!device) {
return nothing;
}
return html`
<a href="/config/devices/device/${relatedDeviceId}">
<ha-list-item hasMeta graphic="icon">
<ha-svg-icon
.path=${mdiDevices}
slot="graphic"
></ha-svg-icon>
${device.name_by_user || device.name}
<ha-icon-next slot="meta"></ha-icon-next>
</ha-list-item>
</a>
`;
})} </mwc-list>
`
: nothing}
${this._related.area
? html`<h3>
${this.hass.localize("ui.components.related-items.area")}
</h3>
<mwc-list
>${this._related.area.map((relatedAreaId) => {
<mwc-list>
${this._related.area.map((relatedAreaId) => {
const area = this.hass.areas[relatedAreaId];
if (!area) {
return nothing;
@ -268,8 +244,33 @@ export class HaRelatedItems extends LitElement {
</ha-list-item>
</a>
`;
})}</mwc-list
>`
})}
</mwc-list>`
: nothing}
${this._related.device
? html`<h3>
${this.hass.localize("ui.components.related-items.device")}
</h3>
<mwc-list>
${this._related.device.map((relatedDeviceId) => {
const device = this.hass.devices[relatedDeviceId];
if (!device) {
return nothing;
}
return html`
<a href="/config/devices/device/${relatedDeviceId}">
<ha-list-item hasMeta graphic="icon">
<ha-svg-icon
.path=${mdiDevices}
slot="graphic"
></ha-svg-icon>
${device.name_by_user || device.name}
<ha-icon-next slot="meta"></ha-icon-next>
</ha-list-item>
</a>
`;
})}
</mwc-list>`
: nothing}
${this._related.entity
? html`

38
src/dialogs/more-info/ha-more-info-dialog.ts
View File

@ -276,6 +276,11 @@ export class MoreInfoDialog extends LitElement {
this._setView("related");
}
private _breadcrumbClick(ev: Event) {
ev.stopPropagation();
this._setView("related");
}
private async _loadNumericDeviceClasses() {
const deviceClasses = await getSensorNumericDeviceClasses(this.hass);
this._sensorNumericDeviceClasses = deviceClasses.numeric_device_classes;
@ -350,17 +355,16 @@ export class MoreInfoDialog extends LitElement {
)}
></ha-icon-button-prev>
`}
<span
slot="title"
.title=${title}
@click=${this._enlarge}
class="title"
>
<span slot="title" @click=${this._enlarge} class="title">
${breadcrumb.length > 0
? html`
<p class="breadcrumb">
<button
class="breadcrumb"
@click=${this._breadcrumbClick}
aria-label=${breadcrumb.join(" > ")}
>
${join(breadcrumb, html`<ha-icon-next></ha-icon-next>`)}
</p>
</button>
`
: nothing}
<p class="main">${title}</p>
@ -656,6 +660,7 @@ export class MoreInfoDialog extends LitElement {
.title {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.title p {
@ -676,11 +681,22 @@ export class MoreInfoDialog extends LitElement {
color: var(--secondary-text-color);
font-size: 14px;
line-height: 16px;
margin-top: -6px;
--mdc-icon-size: 16px;
padding: 4px;
margin: -4px;
margin-top: -10px;
background: none;
border: none;
cursor: pointer;
outline: none;
display: inline-flex;
border-radius: 6px;
transition: background-color 180ms ease-in-out;
}
.title .breadcrumb {
--mdc-icon-size: 16px;
.title .breadcrumb:focus-visible,
.title .breadcrumb:hover {
background-color: rgba(var(--rgb-secondary-text-color), 0.08);
}
`,
];