Introduced ha-icon-overflow-menu component (#10352)

Co-authored-by: Bram Kragten <mail@bramkragten.nl>

src/components/data-table/ha-data-table.ts

@@ -70,7 +70,7 @@ export interface DataTableSortColumnData {
 
 export interface DataTableColumnData extends DataTableSortColumnData {
   title: TemplateResult | string;
-  type?: "numeric" | "icon" | "icon-button";
+  type?: "numeric" | "icon" | "icon-button" | "overflow-menu";
   template?: <T>(data: any, row: T) => TemplateResult | string;
   width?: string;
   maxWidth?: string;
@@ -281,15 +281,13 @@ export class HaDataTable extends LitElement {
               }
               const sorted = key === this._sortColumn;
               const classes = {
-                "mdc-data-table__header-cell--numeric": Boolean(
+                "mdc-data-table__header-cell--numeric":
-                  column.type === "numeric"
+                  column.type === "numeric",
-                ),
+                "mdc-data-table__header-cell--icon": column.type === "icon",
-                "mdc-data-table__header-cell--icon": Boolean(
+                "mdc-data-table__header-cell--icon-button":
-                  column.type === "icon"
+                  column.type === "icon-button",
-                ),
+                "mdc-data-table__header-cell--overflow-menu":
-                "mdc-data-table__header-cell--icon-button": Boolean(
+                  column.type === "overflow-menu",
-                  column.type === "icon-button"
-                ),
                 sortable: Boolean(column.sortable),
                 "not-sorted": Boolean(column.sortable && !sorted),
                 grows: Boolean(column.grows),
@@ -405,14 +403,14 @@ export class HaDataTable extends LitElement {
                                 <div
                                   role="cell"
                                   class="mdc-data-table__cell ${classMap({
-                                    "mdc-data-table__cell--numeric": Boolean(
+                                    "mdc-data-table__cell--numeric":
-                                      column.type === "numeric"
+                                      column.type === "numeric",
-                                    ),
+                                    "mdc-data-table__cell--icon":
-                                    "mdc-data-table__cell--icon": Boolean(
+                                      column.type === "icon",
-                                      column.type === "icon"
-                                    ),
                                     "mdc-data-table__cell--icon-button":
-                                      Boolean(column.type === "icon-button"),
+                                      column.type === "icon-button",
+                                    "mdc-data-table__cell--overflow-menu":
+                                      column.type === "overflow-menu",
                                     grows: Boolean(column.grows),
                                     forceLTR: Boolean(column.forceLTR),
                                   })}"
@@ -769,40 +767,65 @@ export class HaDataTable extends LitElement {
           margin-left: -8px;
         }
 
+        .mdc-data-table__cell--overflow-menu,
+        .mdc-data-table__header-cell--overflow-menu,
         .mdc-data-table__header-cell--icon-button,
         .mdc-data-table__cell--icon-button {
-          width: 56px;
           padding: 8px;
         }
 
+        .mdc-data-table__header-cell--icon-button,
+        .mdc-data-table__cell--icon-button {
+          width: 56px;
+        }
+
+        .mdc-data-table__cell--overflow-menu,
         .mdc-data-table__cell--icon-button {
           color: var(--secondary-text-color);
           text-overflow: clip;
         }
 
         .mdc-data-table__header-cell--icon-button:first-child,
-        .mdc-data-table__cell--icon-button:first-child {
+        .mdc-data-table__cell--icon-button:first-child,
-          width: 64px;
-          padding-left: 16px;
-        }
-        :host([dir="rtl"])
-          .mdc-data-table__header-cell--icon-button:first-child,
-        :host([dir="rtl"]) .mdc-data-table__cell--icon-button:first-child {
-          padding-left: auto;
-          padding-right: 16px;
-        }
-
         .mdc-data-table__header-cell--icon-button:last-child,
         .mdc-data-table__cell--icon-button:last-child {
           width: 64px;
-          padding-right: 16px;
-        }
-        :host([dir="rtl"]) .mdc-data-table__header-cell--icon-button:last-child,
-        :host([dir="rtl"]) .mdc-data-table__cell--icon-button:last-child {
-          padding-right: auto;
-          padding-left: 16px;
         }
 
+        .mdc-data-table__cell--overflow-menu:first-child,
+        .mdc-data-table__header-cell--overflow-menu:first-child,
+        .mdc-data-table__header-cell--icon-button:first-child,
+        .mdc-data-table__cell--icon-button:first-child {
+          padding-left: 16px;
+        }
+        :host([dir="rtl"])
+          .mdc-data-table__header-cell--overflow-menu:first-child,
+        :host([dir="rtl"]) .mdc-data-table__cell--overflow-menu:first-child,
+        :host([dir="rtl"])
+          .mdc-data-table__header-cell--overflow-menu:first-child,
+        :host([dir="rtl"]) .mdc-data-table__cell--overflow-menu:first-child {
+          padding-left: 8px;
+          padding-right: 16px;
+        }
+
+        .mdc-data-table__cell--overflow-menu:last-child,
+        .mdc-data-table__header-cell--overflow-menu:last-child,
+        .mdc-data-table__header-cell--icon-button:last-child,
+        .mdc-data-table__cell--icon-button:last-child {
+          padding-right: 16px;
+        }
+        :host([dir="rtl"])
+          .mdc-data-table__header-cell--overflow-menu:last-child,
+        :host([dir="rtl"]) .mdc-data-table__cell--overflow-menu:last-child,
+        :host([dir="rtl"]) .mdc-data-table__header-cell--icon-button:last-child,
+        :host([dir="rtl"]) .mdc-data-table__cell--icon-button:last-child {
+          padding-right: 8px;
+          padding-left: 16px;
+        }
+        .mdc-data-table__cell--overflow-menu,
+        .mdc-data-table__header-cell--overflow-menu {
+          overflow: initial;
+        }
         .mdc-data-table__cell--icon-button a {
           color: var(--secondary-text-color);
         }

src/components/ha-icon-overflow-menu.ts

@@ -0,0 +1,119 @@
+import { css, html, LitElement, TemplateResult } from "lit";
+import { customElement, property } from "lit/decorators";
+import "./ha-button-menu";
+import "@material/mwc-list/mwc-list-item";
+import "@material/mwc-icon-button";
+import "./ha-svg-icon";
+import { mdiDotsVertical } from "@mdi/js";
+import { HomeAssistant } from "../types";
+import "@polymer/paper-tooltip/paper-tooltip";
+
+export interface IconOverflowMenuItem {
+  [key: string]: any;
+  path: string;
+  label: string;
+  narrowOnly?: boolean;
+  disabled?: boolean;
+  tooltip?: string;
+  onClick: CallableFunction;
+}
+
+@customElement("ha-icon-overflow-menu")
+export class HaIconOverflowMenu extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ type: Array }) public items: IconOverflowMenuItem[] = [];
+
+  @property({ type: Boolean }) public narrow = false;
+
+  protected render(): TemplateResult {
+    return html`
+      ${this.narrow
+        ? html` <!-- Collapsed Representation for Small Screens -->
+            <ha-button-menu
+              @click=${this._handleIconOverflowMenuOpened}
+              @closed=${this._handleIconOverflowMenuClosed}
+              class="ha-icon-overflow-menu-overflow"
+              corner="BOTTOM_START"
+              absolute
+            >
+              <mwc-icon-button
+                .title=${this.hass.localize("ui.common.menu")}
+                .label=${this.hass.localize("ui.common.overflow_menu")}
+                slot="trigger"
+              >
+                <ha-svg-icon .path=${mdiDotsVertical}></ha-svg-icon>
+              </mwc-icon-button>
+
+              ${this.items.map(
+                (item) => html`
+                  <mwc-list-item
+                    graphic="icon"
+                    .disabled=${item.disabled}
+                    @click=${item.action}
+                  >
+                    <div slot="graphic">
+                      <ha-svg-icon .path=${item.path}></ha-svg-icon>
+                    </div>
+                    ${item.label}
+                  </mwc-list-item>
+                `
+              )}
+            </ha-button-menu>`
+        : html`
+            <!-- Icon Representation for Big Screens -->
+
+            ${this.items.map((item) =>
+              item.narrowOnly
+                ? ""
+                : html`<div>
+                    ${item.tooltip
+                      ? html`<paper-tooltip animation-delay="0" position="left">
+                          ${item.tooltip}
+                        </paper-tooltip>`
+                      : ""}
+                    <mwc-icon-button
+                      @click=${item.action}
+                      .label=${item.label}
+                      .disabled=${item.disabled}
+                    >
+                      <ha-svg-icon .path=${item.path}></ha-svg-icon>
+                    </mwc-icon-button>
+                  </div> `
+            )}
+          `}
+    `;
+  }
+
+  protected _handleIconOverflowMenuOpened() {
+    // If this component is used inside a data table, the z-index of the row
+    // needs to be increased. Otherwise the ha-button-menu would be displayed
+    // underneath the next row in the table.
+    const row = this.closest(".mdc-data-table__row") as HTMLDivElement | null;
+    if (row) {
+      row.style.zIndex = "1";
+    }
+  }
+
+  protected _handleIconOverflowMenuClosed() {
+    const row = this.closest(".mdc-data-table__row") as HTMLDivElement | null;
+    if (row) {
+      row.style.zIndex = "";
+    }
+  }
+
+  static get styles() {
+    return css`
+      :host {
+        display: flex;
+        justify-content: flex-end;
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-icon-overflow-menu": HaIconOverflowMenu;
+  }
+}

src/panels/config/automation/ha-automation-picker.ts

@@ -4,12 +4,12 @@ import {
   mdiInformationOutline,
   mdiPencil,
   mdiPencilOff,
+  mdiPlayCircleOutline,
   mdiPlus,
 } from "@mdi/js";
 import "@polymer/paper-tooltip/paper-tooltip";
 import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import { ifDefined } from "lit/directives/if-defined";
 import memoizeOne from "memoize-one";
 import { isComponentLoaded } from "../../../common/config/is_component_loaded";
 import { formatDateTime } from "../../../common/datetime/format_date_time";
@@ -22,6 +22,7 @@ import "../../../components/ha-button-related-filter-menu";
 import "../../../components/ha-fab";
 import "../../../components/ha-icon-button";
 import "../../../components/ha-svg-icon";
+import "../../../components/ha-icon-overflow-menu";
 import {
   AutomationEntity,
   triggerAutomationActions,
@@ -135,7 +136,7 @@ class HaAutomationPicker extends LitElement {
           template: (_info, automation: any) => html`
             <mwc-button
               .automation=${automation}
-              @click=${this._runActions}
+              @click=${this._triggerRunActions}
               .disabled=${UNAVAILABLE_STATES.includes(automation.state)}
             >
               ${this.hass.localize("ui.card.automation.trigger")}
@@ -143,78 +144,73 @@ class HaAutomationPicker extends LitElement {
           `,
         };
       }
-      columns.info = {
+      columns.actions = {
         title: "",
-        type: "icon-button",
+        type: "overflow-menu",
-        template: (_info, automation) => html`
+        template: (_info, automation: any) => html`
-          <ha-icon-button
+          <ha-icon-overflow-menu
-            .automation=${automation}
+            .hass=${this.hass}
-            @click=${this._showInfo}
+            .narrow=${this.narrow}
-            .label=${this.hass.localize(
+            .items=${[
+              // Info Button
+              {
+                path: mdiInformationOutline,
+                label: this.hass.localize(
                   "ui.panel.config.automation.picker.show_info_automation"
-            )}
+                ),
-            .path=${mdiInformationOutline}
+                action: () => this._showInfo(automation),
-          ></ha-icon-button>
+              },
-        `,
+              // Trigger Button
-      };
+              {
-      columns.trace = {
+                path: mdiPlayCircleOutline,
-        title: "",
+                label: this.hass.localize("ui.card.automation.trigger"),
-        type: "icon-button",
+                narrowOnly: true,
-        template: (_info, automation: any) => html`
+                action: () => this._runActions(automation),
-          <a
+              },
-            href=${ifDefined(
+              // Trace Button
-              automation.attributes.id
+              {
-                ? `/config/automation/trace/${automation.attributes.id}`
+                path: mdiHistory,
-                : undefined
+                disabled: !automation.attributes.id,
-            )}
+                label: this.hass.localize(
-          >
-            <ha-icon-button
-              .label=${this.hass.localize(
                   "ui.panel.config.automation.picker.dev_automation"
-              )}
+                ),
-              .path=${mdiHistory}
+                tooltip: !automation.attributes.id
-              .disabled=${!automation.attributes.id}
+                  ? this.hass.localize(
-            ></ha-icon-button>
-          </a>
-          ${!automation.attributes.id
-            ? html`
-                <paper-tooltip animation-delay="0" position="left">
-                  ${this.hass.localize(
                       "ui.panel.config.automation.picker.dev_only_editable"
-                  )}
+                    )
-                </paper-tooltip>
+                  : "",
-              `
+                action: () => {
-            : ""}
+                  if (automation.attributes.id) {
-        `,
+                    navigate(
-      };
+                      `/config/automation/trace/${automation.attributes.id}`
-      columns.edit = {
+                    );
-        title: "",
+                  }
-        type: "icon-button",
+                },
-        template: (_info, automation: any) => html`
+              },
-          <a
+              // Edit Button
-            href=${ifDefined(
+              {
-              automation.attributes.id
+                path: automation.attributes.id ? mdiPencil : mdiPencilOff,
-                ? `/config/automation/edit/${automation.attributes.id}`
+                disabled: !automation.attributes.id,
-                : undefined
+                label: this.hass.localize(
-            )}
-          >
-            <ha-icon-button
-              .disabled=${!automation.attributes.id}
-              .label=${this.hass.localize(
                   "ui.panel.config.automation.picker.edit_automation"
-              )}
+                ),
-              .path=${automation.attributes.id ? mdiPencil : mdiPencilOff}
+                tooltip: !automation.attributes.id
-            ></ha-icon-button>
+                  ? this.hass.localize(
-          </a>
+                      "ui.panel.config.automation.picker.dev_only_editable"
-          ${!automation.attributes.id
+                    )
-            ? html`
+                  : "",
-                <paper-tooltip animation-delay="0" position="left">
+                action: () => {
-                  ${this.hass.localize(
+                  if (automation.attributes.id) {
-                    "ui.panel.config.automation.picker.only_editable"
+                    navigate(
-                  )}
+                      `/config/automation/edit/${automation.attributes.id}`
-                </paper-tooltip>
+                    );
-              `
+                  }
-            : ""}
+                },
+              },
+            ]}
+            style="color: var(--secondary-text-color)"
+          >
+          </ha-icon-overflow-menu>
         `,
       };
       return columns;
@@ -285,9 +281,8 @@ class HaAutomationPicker extends LitElement {
     this._filterValue = undefined;
   }
 
-  private _showInfo(ev) {
+  private _showInfo(automation: AutomationEntity) {
-    ev.stopPropagation();
+    const entityId = automation.entity_id;
-    const entityId = ev.currentTarget.automation.entity_id;
     fireEvent(this, "hass-more-info", { entityId });
   }
 
@@ -311,9 +306,12 @@ class HaAutomationPicker extends LitElement {
     });
   }
 
-  private _runActions = (ev) => {
+  private _triggerRunActions = (ev) => {
-    const entityId = ev.currentTarget.automation.entity_id;
+    this._runActions(ev.currentTarget.automation);
-    triggerAutomationActions(this.hass, entityId);
+  };
+
+  private _runActions = (automation: AutomationEntity) => {
+    triggerAutomationActions(this.hass, automation.entity_id);
   };
 
   private _createNew() {