Improve more info dialog navigation for specific view (#20312)

This commit is contained in:
Paul Bottein 2024-04-02 12:45:39 +02:00 committed by GitHub
parent db59e138e9
commit 21263a1ffb
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 49 additions and 7 deletions

View File

@ -77,6 +77,8 @@ declare global {
} }
} }
const DEFAULT_VIEW: View = "info";
@customElement("ha-more-info-dialog") @customElement("ha-more-info-dialog")
export class MoreInfoDialog extends LitElement { export class MoreInfoDialog extends LitElement {
@property({ attribute: false }) public hass!: HomeAssistant; @property({ attribute: false }) public hass!: HomeAssistant;
@ -85,7 +87,9 @@ export class MoreInfoDialog extends LitElement {
@state() private _entityId?: string | null; @state() private _entityId?: string | null;
@state() private _currView: View = "info"; @state() private _currView: View = DEFAULT_VIEW;
@state() private _initialView: View = DEFAULT_VIEW;
@state() private _childView?: ChildView; @state() private _childView?: ChildView;
@ -102,7 +106,8 @@ export class MoreInfoDialog extends LitElement {
this.closeDialog(); this.closeDialog();
return; return;
} }
this._currView = params.view || "info"; this._currView = params.view || DEFAULT_VIEW;
this._initialView = params.view || DEFAULT_VIEW;
this._childView = undefined; this._childView = undefined;
this.large = false; this.large = false;
this._loadEntityRegistryEntry(); this._loadEntityRegistryEntry();
@ -127,6 +132,7 @@ export class MoreInfoDialog extends LitElement {
this._entry = undefined; this._entry = undefined;
this._childView = undefined; this._childView = undefined;
this._infoEditMode = false; this._infoEditMode = false;
this._initialView = DEFAULT_VIEW;
fireEvent(this, "dialog-closed", { dialog: this.localName }); fireEvent(this, "dialog-closed", { dialog: this.localName });
} }
@ -183,10 +189,15 @@ export class MoreInfoDialog extends LitElement {
if (this._childView) { if (this._childView) {
this._childView = undefined; this._childView = undefined;
} else { } else {
this.setView("info"); this.setView(this._initialView);
} }
} }
private _resetInitialView() {
this._initialView = DEFAULT_VIEW;
this.setView(DEFAULT_VIEW);
}
private _goToHistory() { private _goToHistory() {
this.setView("history"); this.setView("history");
} }
@ -262,7 +273,10 @@ export class MoreInfoDialog extends LitElement {
const title = this._childView?.viewTitle ?? name; const title = this._childView?.viewTitle ?? name;
const isInfoView = this._currView === "info" && !this._childView; const isDefaultView = this._currView === DEFAULT_VIEW && !this._childView;
const isSpecificInitialView =
this._initialView !== DEFAULT_VIEW && !this._childView;
const showCloseIcon = isDefaultView || isSpecificInitialView;
return html` return html`
<ha-dialog <ha-dialog
@ -274,7 +288,7 @@ export class MoreInfoDialog extends LitElement {
flexContent flexContent
> >
<ha-dialog-header slot="heading"> <ha-dialog-header slot="heading">
${isInfoView ${showCloseIcon
? html` ? html`
<ha-icon-button <ha-icon-button
slot="navigationIcon" slot="navigationIcon"
@ -297,7 +311,7 @@ export class MoreInfoDialog extends LitElement {
<span slot="title" .title=${title} @click=${this._enlarge}> <span slot="title" .title=${title} @click=${this._enlarge}>
${title} ${title}
</span> </span>
${isInfoView ${isDefaultView
? html` ? html`
${this.shouldShowHistory(domain) ${this.shouldShowHistory(domain)
? html` ? html`
@ -407,7 +421,34 @@ export class MoreInfoDialog extends LitElement {
` `
: nothing} : nothing}
` `
: nothing} : isSpecificInitialView
? html`
<ha-button-menu
corner="BOTTOM_END"
menuCorner="END"
slot="actionItems"
@closed=${stopPropagation}
fixed
>
<ha-icon-button
slot="trigger"
.label=${this.hass.localize("ui.common.menu")}
.path=${mdiDotsVertical}
></ha-icon-button>
<ha-list-item
graphic="icon"
@request-selected=${this._resetInitialView}
>
${this.hass.localize("ui.dialogs.more_info_control.info")}
<ha-svg-icon
slot="graphic"
.path=${mdiInformationOutline}
></ha-svg-icon>
</ha-list-item>
</ha-button-menu>
`
: nothing}
</ha-dialog-header> </ha-dialog-header>
<div <div
class="content" class="content"

View File

@ -1114,6 +1114,7 @@
"edit": "Edit entity", "edit": "Edit entity",
"details": "Details", "details": "Details",
"back_to_info": "Back to info", "back_to_info": "Back to info",
"info": "Information",
"related": "Related", "related": "Related",
"history": "History", "history": "History",
"logbook": "Logbook", "logbook": "Logbook",