diff --git a/src/panels/lovelace/hui-root.ts b/src/panels/lovelace/hui-root.ts
index 73d6a272c9..8257f0e2cb 100644
--- a/src/panels/lovelace/hui-root.ts
+++ b/src/panels/lovelace/hui-root.ts
@@ -7,7 +7,6 @@ import {
mdiDotsVertical,
mdiFileMultiple,
mdiFormatListBulletedTriangle,
- mdiHelp,
mdiHelpCircle,
mdiMagnify,
mdiPencil,
@@ -75,6 +74,7 @@ import {
} from "../../data/lovelace/config/types";
import { showSaveDialog } from "./editor/show-save-config-dialog";
import { isLegacyStrategyConfig } from "./strategies/legacy-strategy";
+import { LocalizeKeys } from "../../common/translations/localize";
@customElement("hui-root")
class HUIRoot extends LitElement {
@@ -110,6 +110,168 @@ class HUIRoot extends LitElement {
);
}
+ private _renderActionItems(): TemplateResult {
+ const result: TemplateResult[] = [];
+ if (this._editMode) {
+ result.push(
+ html`
+ `
+ );
+ }
+
+ const items: {
+ icon: string;
+ key: LocalizeKeys;
+ overflowAction?: any;
+ buttonAction?: any;
+ visible: boolean | undefined;
+ overflow: boolean;
+ overflow_can_promote?: boolean;
+ }[] = [
+ {
+ icon: mdiFormatListBulletedTriangle,
+ key: "ui.panel.lovelace.unused_entities.title",
+ overflowAction: this._handleUnusedEntities,
+ visible: this._editMode && !__DEMO__,
+ overflow: true,
+ },
+ {
+ icon: mdiCodeBraces,
+ key: "ui.panel.lovelace.editor.menu.raw_editor",
+ overflowAction: this._handleRawEditor,
+ visible: this._editMode,
+ overflow: true,
+ },
+ {
+ icon: mdiViewDashboard,
+ key: "ui.panel.lovelace.editor.menu.manage_dashboards",
+ overflowAction: this._handleManageDashboards,
+ visible: this._editMode && !__DEMO__,
+ overflow: true,
+ },
+ {
+ icon: mdiFileMultiple,
+ key: "ui.panel.lovelace.editor.menu.manage_resources",
+ overflowAction: this._handleManageResources,
+ visible: this._editMode && this.hass.userData?.showAdvanced,
+ overflow: true,
+ },
+ {
+ icon: mdiMagnify,
+ key: "ui.panel.lovelace.menu.search",
+ buttonAction: this._showQuickBar,
+ overflowAction: this._handleShowQuickBar,
+ visible: !this._editMode,
+ overflow: this.narrow,
+ },
+ {
+ icon: mdiCommentProcessingOutline,
+ key: "ui.panel.lovelace.menu.assist",
+ buttonAction: this._showVoiceCommandDialog,
+ overflowAction: this._handleShowVoiceCommandDialog,
+ visible:
+ !this._editMode && this._conversation(this.hass.config.components),
+ overflow: this.narrow,
+ },
+ {
+ icon: mdiRefresh,
+ key: "ui.common.refresh",
+ overflowAction: this._handleRefresh,
+ visible: !this._editMode && this._yamlMode,
+ overflow: true,
+ },
+ {
+ icon: mdiShape,
+ key: "ui.panel.lovelace.unused_entities.title",
+ overflowAction: this._handleUnusedEntities,
+ visible: !this._editMode && this._yamlMode,
+ overflow: true,
+ },
+ {
+ icon: mdiRefresh,
+ key: "ui.panel.lovelace.menu.reload_resources",
+ overflowAction: this._handleReloadResources,
+ visible:
+ !this._editMode &&
+ (this.hass.panels.lovelace?.config as LovelacePanelConfig)?.mode ===
+ "yaml",
+ overflow: true,
+ },
+ {
+ icon: mdiPencil,
+ key: "ui.panel.lovelace.menu.configure_ui",
+ overflowAction: this._handleEnableEditMode,
+ buttonAction: this._enableEditMode,
+ visible:
+ !this._editMode &&
+ this.hass!.user?.is_admin &&
+ !this.hass!.config.recovery_mode,
+ overflow: true,
+ overflow_can_promote: true,
+ },
+ ];
+
+ const overflowItems = items.filter((i) => i.visible && i.overflow);
+ const overflowCanPromote =
+ overflowItems.length === 1 && overflowItems[0].overflow_can_promote;
+ const buttonItems = items.filter(
+ (i) => i.visible && (!i.overflow || overflowCanPromote)
+ );
+
+ buttonItems.forEach((i) => {
+ result.push(
+ html``
+ );
+ });
+ if (overflowItems.length && !overflowCanPromote) {
+ const listItems: TemplateResult[] = [];
+ overflowItems.forEach((i) => {
+ listItems.push(
+ html`
+ ${this.hass!.localize(i.key)}
+
+ `
+ );
+ });
+ result.push(
+ html`
+
+ ${listItems}
+ `
+ );
+ }
+ return html`${result}`;
+ }
+
protected render(): TemplateResult {
const views = this.lovelace?.config.views ?? [];
@@ -139,96 +301,7 @@ class HUIRoot extends LitElement {
@click=${this._editLovelace}
>
-
-
-
-
-
- ${__DEMO__ /* No unused entities available in the demo */
- ? ""
- : html`
-
-
-
- ${this.hass!.localize(
- "ui.panel.lovelace.unused_entities.title"
- )}
-
- `}
-
-
- ${this.hass!.localize(
- "ui.panel.lovelace.editor.menu.raw_editor"
- )}
-
- ${__DEMO__ /* No config available in the demo */
- ? ""
- : html`
-
- ${this.hass!.localize(
- "ui.panel.lovelace.editor.menu.manage_dashboards"
- )}
-
- ${this.hass.userData?.showAdvanced
- ? html`
-
- ${this.hass!.localize(
- "ui.panel.lovelace.editor.menu.manage_resources"
- )}
- `
- : ""} `}
-
-
+ ${this._renderActionItems()}
`
: html`
${curViewConfig?.subview
@@ -289,174 +362,7 @@ class HUIRoot extends LitElement {
: html`
${this.config.title}
`}
-
- ${!this.narrow
- ? html`
-
- `
- : ""}
- ${!this.narrow &&
- this._conversation(this.hass.config.components)
- ? html`
-
- `
- : ""}
- ${this._showButtonMenu
- ? html`
-
-
-
- ${this.narrow
- ? html`
-
- ${this.hass!.localize(
- "ui.panel.lovelace.menu.search"
- )}
-
-
-
- `
- : ""}
- ${this.narrow &&
- this._conversation(this.hass.config.components)
- ? html`
-
- ${this.hass!.localize(
- "ui.panel.lovelace.menu.assist"
- )}
-
-
-
- `
- : ""}
- ${this._yamlMode
- ? html`
-
- ${this.hass!.localize("ui.common.refresh")}
-
-
-
-
- ${this.hass!.localize(
- "ui.panel.lovelace.unused_entities.title"
- )}
-
-
-
- `
- : ""}
- ${(
- this.hass.panels.lovelace
- ?.config as LovelacePanelConfig
- )?.mode === "yaml"
- ? html`
-
- ${this.hass!.localize(
- "ui.panel.lovelace.menu.reload_resources"
- )}
-
-
- `
- : ""}
- ${this.hass!.user?.is_admin &&
- !this.hass!.config.recovery_mode
- ? html`
-
- ${this.hass!.localize(
- "ui.panel.lovelace.menu.configure_ui"
- )}
-
-
- `
- : ""}
- ${this._editMode
- ? html`
-
- `
- : ""}
-
- `
- : ""}
-
+ ${this._renderActionItems()}
`}
${this._editMode
@@ -698,17 +604,6 @@ class HUIRoot extends LitElement {
return this.shadowRoot!.getElementById("view") as HTMLDivElement;
}
- private get _showButtonMenu(): boolean {
- return (
- (this.narrow && this._conversation(this.hass.config.components)) ||
- this._editMode ||
- (this.hass!.user?.is_admin && !this.hass!.config.recovery_mode) ||
- (this.hass.panels.lovelace?.config as LovelacePanelConfig)?.mode ===
- "yaml" ||
- this._yamlMode
- );
- }
-
private _handleRefresh(ev: CustomEvent): void {
if (!shouldHandleRequestSelectedEvent(ev)) {
return;
@@ -811,6 +706,10 @@ class HUIRoot extends LitElement {
if (!shouldHandleRequestSelectedEvent(ev)) {
return;
}
+ this._enableEditMode();
+ }
+
+ private _enableEditMode(): void {
if (this._yamlMode) {
showAlertDialog(this, {
text: this.hass!.localize("ui.panel.lovelace.editor.yaml_unsupported"),