mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-19 15:26:36 +00:00
Refactor sidebar renders into methods (prep for mwc-list conversion) (#7453)
This commit is contained in:
Donnie
GitHub
parent
5ec23bb7ab
commit
efe97e8f51
@ -202,195 +202,17 @@ class HaSidebar extends LitElement {
|
|||||||
private _sortable?;
|
private _sortable?;
|
||||||
|
|
||||||
protected render() {
|
protected render() {
|
||||||
const hass = this.hass;
|
if (!this.hass) {
|
||||||
|
|
||||||
if (!hass) {
|
|
||||||
return html``;
|
return html``;
|
||||||
}
|
}
|
||||||
|
|
||||||
const [beforeSpacer, afterSpacer] = computePanels(
|
// prettier-ignore
|
||||||
hass.panels,
|
|
||||||
hass.defaultPanel,
|
|
||||||
this._panelOrder,
|
|
||||||
this._hiddenPanels
|
|
||||||
);
|
|
||||||
|
|
||||||
let notificationCount = this._notifications
|
|
||||||
? this._notifications.length
|
|
||||||
: 0;
|
|
||||||
for (const entityId in hass.states) {
|
|
||||||
if (computeDomain(entityId) === "configurator") {
|
|
||||||
notificationCount++;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return html`
|
return html`
|
||||||
<div
|
${this._renderHeader()}
|
||||||
class="menu"
|
${this._renderAllPanels()}
|
||||||
@action=${this._handleAction}
|
${this._renderDivider()}
|
||||||
.actionHandler=${actionHandler({
|
${this._renderNotifications()}
|
||||||
hasHold: !this.editMode,
|
${this._renderUserItem()}
|
||||||
disabled: this.editMode,
|
|
||||||
})}
|
|
||||||
>
|
|
||||||
${!this.narrow
|
|
||||||
? html`
|
|
||||||
<mwc-icon-button
|
|
||||||
.label=${hass.localize("ui.sidebar.sidebar_toggle")}
|
|
||||||
@action=${this._toggleSidebar}
|
|
||||||
>
|
|
||||||
<ha-svg-icon
|
|
||||||
.path=${hass.dockedSidebar === "docked"
|
|
||||||
? mdiMenuOpen
|
|
||||||
: mdiMenu}
|
|
||||||
></ha-svg-icon>
|
|
||||||
</mwc-icon-button>
|
|
||||||
`
|
|
||||||
: ""}
|
|
||||||
<div class="title">
|
|
||||||
${this.editMode
|
|
||||||
? html`<mwc-button outlined @click=${this._closeEditMode}>
|
|
||||||
${hass.localize("ui.sidebar.done")}
|
|
||||||
</mwc-button>`
|
|
||||||
: "Home Assistant"}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<paper-listbox
|
|
||||||
attr-for-selected="data-panel"
|
|
||||||
class="ha-scrollbar"
|
|
||||||
.selected=${hass.panelUrl}
|
|
||||||
@focusin=${this._listboxFocusIn}
|
|
||||||
@focusout=${this._listboxFocusOut}
|
|
||||||
@scroll=${this._listboxScroll}
|
|
||||||
@keydown=${this._listboxKeydown}
|
|
||||||
>
|
|
||||||
${this.editMode
|
|
||||||
? html`<div id="sortable">
|
|
||||||
${guard([this._hiddenPanels, this._renderEmptySortable], () =>
|
|
||||||
this._renderEmptySortable
|
|
||||||
? ""
|
|
||||||
: this._renderPanels(beforeSpacer)
|
|
||||||
)}
|
|
||||||
</div>`
|
|
||||||
: this._renderPanels(beforeSpacer)}
|
|
||||||
<div class="spacer" disabled></div>
|
|
||||||
${this.editMode && this._hiddenPanels.length
|
|
||||||
? html`
|
|
||||||
${this._hiddenPanels.map((url) => {
|
|
||||||
const panel = this.hass.panels[url];
|
|
||||||
if (!panel) {
|
|
||||||
return "";
|
|
||||||
}
|
|
||||||
return html`<paper-icon-item
|
|
||||||
@click=${this._unhidePanel}
|
|
||||||
class="hidden-panel"
|
|
||||||
.panel=${url}
|
|
||||||
>
|
|
||||||
<ha-icon
|
|
||||||
slot="item-icon"
|
|
||||||
.icon=${panel.url_path === this.hass.defaultPanel
|
|
||||||
? "mdi:view-dashboard"
|
|
||||||
: panel.icon}
|
|
||||||
></ha-icon>
|
|
||||||
<span class="item-text"
|
|
||||||
>${panel.url_path === this.hass.defaultPanel
|
|
||||||
? hass.localize("panel.states")
|
|
||||||
: hass.localize(`panel.${panel.title}`) ||
|
|
||||||
panel.title}</span
|
|
||||||
>
|
|
||||||
<mwc-icon-button class="show-panel">
|
|
||||||
<ha-svg-icon .path=${mdiPlus}></ha-svg-icon>
|
|
||||||
</mwc-icon-button>
|
|
||||||
</paper-icon-item>`;
|
|
||||||
})}
|
|
||||||
<div class="spacer" disabled></div>
|
|
||||||
`
|
|
||||||
: ""}
|
|
||||||
${this._renderPanels(afterSpacer)}
|
|
||||||
${this._externalConfig && this._externalConfig.hasSettingsScreen
|
|
||||||
? html`
|
|
||||||
<a
|
|
||||||
aria-role="option"
|
|
||||||
aria-label=${hass.localize(
|
|
||||||
"ui.sidebar.external_app_configuration"
|
|
||||||
)}
|
|
||||||
href="#external-app-configuration"
|
|
||||||
tabindex="-1"
|
|
||||||
@click=${this._handleExternalAppConfiguration}
|
|
||||||
@mouseenter=${this._itemMouseEnter}
|
|
||||||
@mouseleave=${this._itemMouseLeave}
|
|
||||||
>
|
|
||||||
<paper-icon-item>
|
|
||||||
<ha-svg-icon
|
|
||||||
slot="item-icon"
|
|
||||||
.path=${mdiCellphoneCog}
|
|
||||||
></ha-svg-icon>
|
|
||||||
<span class="item-text">
|
|
||||||
${hass.localize("ui.sidebar.external_app_configuration")}
|
|
||||||
</span>
|
|
||||||
</paper-icon-item>
|
|
||||||
</a>
|
|
||||||
`
|
|
||||||
: ""}
|
|
||||||
</paper-listbox>
|
|
||||||
|
|
||||||
<div class="divider"></div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
class="notifications-container"
|
|
||||||
@mouseenter=${this._itemMouseEnter}
|
|
||||||
@mouseleave=${this._itemMouseLeave}
|
|
||||||
>
|
|
||||||
<paper-icon-item
|
|
||||||
class="notifications"
|
|
||||||
aria-role="option"
|
|
||||||
@click=${this._handleShowNotificationDrawer}
|
|
||||||
>
|
|
||||||
<ha-svg-icon slot="item-icon" .path=${mdiBell}></ha-svg-icon>
|
|
||||||
${!this.expanded && notificationCount > 0
|
|
||||||
? html`
|
|
||||||
<span class="notification-badge" slot="item-icon">
|
|
||||||
${notificationCount}
|
|
||||||
</span>
|
|
||||||
`
|
|
||||||
: ""}
|
|
||||||
<span class="item-text">
|
|
||||||
${hass.localize("ui.notification_drawer.title")}
|
|
||||||
</span>
|
|
||||||
${this.expanded && notificationCount > 0
|
|
||||||
? html`
|
|
||||||
<span class="notification-badge">${notificationCount}</span>
|
|
||||||
`
|
|
||||||
: ""}
|
|
||||||
</paper-icon-item>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<a
|
|
||||||
class=${classMap({
|
|
||||||
profile: true,
|
|
||||||
// Mimick behavior that paper-listbox provides
|
|
||||||
"iron-selected": hass.panelUrl === "profile",
|
|
||||||
})}
|
|
||||||
href="/profile"
|
|
||||||
data-panel="panel"
|
|
||||||
tabindex="-1"
|
|
||||||
aria-role="option"
|
|
||||||
aria-label=${hass.localize("panel.profile")}
|
|
||||||
@mouseenter=${this._itemMouseEnter}
|
|
||||||
@mouseleave=${this._itemMouseLeave}
|
|
||||||
>
|
|
||||||
<paper-icon-item>
|
|
||||||
<ha-user-badge
|
|
||||||
slot="item-icon"
|
|
||||||
.user=${hass.user}
|
|
||||||
.hass=${hass}
|
|
||||||
></ha-user-badge>
|
|
||||||
|
|
||||||
<span class="item-text">
|
|
||||||
${hass.user ? hass.user.name : ""}
|
|
||||||
</span>
|
|
||||||
</paper-icon-item>
|
|
||||||
</a>
|
|
||||||
<div disabled class="bottom-spacer"></div>
|
<div disabled class="bottom-spacer"></div>
|
||||||
<div class="tooltip"></div>
|
<div class="tooltip"></div>
|
||||||
`;
|
`;
|
||||||
@ -475,6 +297,215 @@ class HaSidebar extends LitElement {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
private _renderHeader() {
|
||||||
|
return html`<div
|
||||||
|
class="menu"
|
||||||
|
@action=${this._handleAction}
|
||||||
|
.actionHandler=${actionHandler({
|
||||||
|
hasHold: !this.editMode,
|
||||||
|
disabled: this.editMode,
|
||||||
|
})}
|
||||||
|
>
|
||||||
|
${!this.narrow
|
||||||
|
? html`
|
||||||
|
<mwc-icon-button
|
||||||
|
.label=${this.hass.localize("ui.sidebar.sidebar_toggle")}
|
||||||
|
@action=${this._toggleSidebar}
|
||||||
|
>
|
||||||
|
<ha-svg-icon
|
||||||
|
.path=${this.hass.dockedSidebar === "docked"
|
||||||
|
? mdiMenuOpen
|
||||||
|
: mdiMenu}
|
||||||
|
></ha-svg-icon>
|
||||||
|
</mwc-icon-button>
|
||||||
|
`
|
||||||
|
: ""}
|
||||||
|
<div class="title">
|
||||||
|
${this.editMode
|
||||||
|
? html`<mwc-button outlined @click=${this._closeEditMode}>
|
||||||
|
${this.hass.localize("ui.sidebar.done")}
|
||||||
|
</mwc-button>`
|
||||||
|
: "Home Assistant"}
|
||||||
|
</div>
|
||||||
|
</div>`;
|
||||||
|
}
|
||||||
|
|
||||||
|
private _renderAllPanels() {
|
||||||
|
const [beforeSpacer, afterSpacer] = computePanels(
|
||||||
|
this.hass.panels,
|
||||||
|
this.hass.defaultPanel,
|
||||||
|
this._panelOrder,
|
||||||
|
this._hiddenPanels
|
||||||
|
);
|
||||||
|
|
||||||
|
// prettier-ignore
|
||||||
|
return html`
|
||||||
|
<paper-listbox
|
||||||
|
attr-for-selected="data-panel"
|
||||||
|
class="ha-scrollbar"
|
||||||
|
.selected=${this.hass.panelUrl}
|
||||||
|
@focusin=${this._listboxFocusIn}
|
||||||
|
@focusout=${this._listboxFocusOut}
|
||||||
|
@scroll=${this._listboxScroll}
|
||||||
|
@keydown=${this._listboxKeydown}
|
||||||
|
>
|
||||||
|
${this.editMode
|
||||||
|
? this._renderPanelsEdit(beforeSpacer)
|
||||||
|
: this._renderPanels(beforeSpacer)}
|
||||||
|
${this._renderSpacer()}
|
||||||
|
${this._renderPanels(afterSpacer)}
|
||||||
|
${this._renderExternalConfiguration()}
|
||||||
|
</paper-listbox>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
private _renderPanelsEdit(beforeSpacer: PanelInfo[]) {
|
||||||
|
// prettier-ignore
|
||||||
|
return html`<div id="sortable">
|
||||||
|
${guard([this._hiddenPanels, this._renderEmptySortable], () =>
|
||||||
|
this._renderEmptySortable ? "" : this._renderPanels(beforeSpacer)
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
${this._renderSpacer()}
|
||||||
|
${this._renderHiddenPanels()} `;
|
||||||
|
}
|
||||||
|
|
||||||
|
private _renderHiddenPanels() {
|
||||||
|
return html` ${this._hiddenPanels.length
|
||||||
|
? html`${this._hiddenPanels.map((url) => {
|
||||||
|
const panel = this.hass.panels[url];
|
||||||
|
if (!panel) {
|
||||||
|
return "";
|
||||||
|
}
|
||||||
|
return html`<paper-icon-item
|
||||||
|
@click=${this._unhidePanel}
|
||||||
|
class="hidden-panel"
|
||||||
|
.panel=${url}
|
||||||
|
>
|
||||||
|
<ha-icon
|
||||||
|
slot="item-icon"
|
||||||
|
.icon=${panel.url_path === this.hass.defaultPanel
|
||||||
|
? "mdi:view-dashboard"
|
||||||
|
: panel.icon}
|
||||||
|
></ha-icon>
|
||||||
|
<span class="item-text"
|
||||||
|
>${panel.url_path === this.hass.defaultPanel
|
||||||
|
? this.hass.localize("panel.states")
|
||||||
|
: this.hass.localize(`panel.${panel.title}`) ||
|
||||||
|
panel.title}</span
|
||||||
|
>
|
||||||
|
<mwc-icon-button class="show-panel">
|
||||||
|
<ha-svg-icon .path=${mdiPlus}></ha-svg-icon>
|
||||||
|
</mwc-icon-button>
|
||||||
|
</paper-icon-item>`;
|
||||||
|
})}
|
||||||
|
${this._renderSpacer()}`
|
||||||
|
: ""}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
private _renderDivider() {
|
||||||
|
return html`<div class="divider"></div>`;
|
||||||
|
}
|
||||||
|
|
||||||
|
private _renderSpacer() {
|
||||||
|
return html`<div class="spacer" disabled></div>`;
|
||||||
|
}
|
||||||
|
|
||||||
|
private _renderNotifications() {
|
||||||
|
let notificationCount = this._notifications
|
||||||
|
? this._notifications.length
|
||||||
|
: 0;
|
||||||
|
for (const entityId in this.hass.states) {
|
||||||
|
if (computeDomain(entityId) === "configurator") {
|
||||||
|
notificationCount++;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return html` <div
|
||||||
|
class="notifications-container"
|
||||||
|
@mouseenter=${this._itemMouseEnter}
|
||||||
|
@mouseleave=${this._itemMouseLeave}
|
||||||
|
>
|
||||||
|
<paper-icon-item
|
||||||
|
class="notifications"
|
||||||
|
aria-role="option"
|
||||||
|
@click=${this._handleShowNotificationDrawer}
|
||||||
|
>
|
||||||
|
<ha-svg-icon slot="item-icon" .path=${mdiBell}></ha-svg-icon>
|
||||||
|
${!this.expanded && notificationCount > 0
|
||||||
|
? html`
|
||||||
|
<span class="notification-badge" slot="item-icon">
|
||||||
|
${notificationCount}
|
||||||
|
</span>
|
||||||
|
`
|
||||||
|
: ""}
|
||||||
|
<span class="item-text">
|
||||||
|
${this.hass.localize("ui.notification_drawer.title")}
|
||||||
|
</span>
|
||||||
|
${this.expanded && notificationCount > 0
|
||||||
|
? html` <span class="notification-badge">${notificationCount}</span> `
|
||||||
|
: ""}
|
||||||
|
</paper-icon-item>
|
||||||
|
</div>`;
|
||||||
|
}
|
||||||
|
|
||||||
|
private _renderUserItem() {
|
||||||
|
return html`<a
|
||||||
|
class=${classMap({
|
||||||
|
profile: true,
|
||||||
|
// Mimick behavior that paper-listbox provides
|
||||||
|
"iron-selected": this.hass.panelUrl === "profile",
|
||||||
|
})}
|
||||||
|
href="/profile"
|
||||||
|
data-panel="panel"
|
||||||
|
tabindex="-1"
|
||||||
|
aria-role="option"
|
||||||
|
aria-label=${this.hass.localize("panel.profile")}
|
||||||
|
@mouseenter=${this._itemMouseEnter}
|
||||||
|
@mouseleave=${this._itemMouseLeave}
|
||||||
|
>
|
||||||
|
<paper-icon-item>
|
||||||
|
<ha-user-badge
|
||||||
|
slot="item-icon"
|
||||||
|
.user=${this.hass.user}
|
||||||
|
.hass=${this.hass}
|
||||||
|
></ha-user-badge>
|
||||||
|
|
||||||
|
<span class="item-text">
|
||||||
|
${this.hass.user ? this.hass.user.name : ""}
|
||||||
|
</span>
|
||||||
|
</paper-icon-item>
|
||||||
|
</a>`;
|
||||||
|
}
|
||||||
|
|
||||||
|
private _renderExternalConfiguration() {
|
||||||
|
return html`${this._externalConfig && this._externalConfig.hasSettingsScreen
|
||||||
|
? html`
|
||||||
|
<a
|
||||||
|
aria-role="option"
|
||||||
|
aria-label=${this.hass.localize(
|
||||||
|
"ui.sidebar.external_app_configuration"
|
||||||
|
)}
|
||||||
|
href="#external-app-configuration"
|
||||||
|
tabindex="-1"
|
||||||
|
@click=${this._handleExternalAppConfiguration}
|
||||||
|
@mouseenter=${this._itemMouseEnter}
|
||||||
|
@mouseleave=${this._itemMouseLeave}
|
||||||
|
>
|
||||||
|
<paper-icon-item>
|
||||||
|
<ha-svg-icon
|
||||||
|
slot="item-icon"
|
||||||
|
.path=${mdiCellphoneCog}
|
||||||
|
></ha-svg-icon>
|
||||||
|
<span class="item-text">
|
||||||
|
${this.hass.localize("ui.sidebar.external_app_configuration")}
|
||||||
|
</span>
|
||||||
|
</paper-icon-item>
|
||||||
|
</a>
|
||||||
|
`
|
||||||
|
: ""}`;
|
||||||
|
}
|
||||||
|
|
||||||
private get _tooltip() {
|
private get _tooltip() {
|
||||||
return this.shadowRoot!.querySelector(".tooltip")! as HTMLDivElement;
|
return this.shadowRoot!.querySelector(".tooltip")! as HTMLDivElement;
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user