Search

package.json

@@ -7,6 +7,7 @@
   "author": "ESPHome maintainers",
   "license": "Apache-2.0",
   "scripts": {
+    "develop": "script/develop",
     "prepublishOnly": "script/build"
   },
   "devDependencies": {
@@ -46,6 +47,7 @@
     "esp-web-flasher": "^5.1.4",
     "improv-wifi-serial-sdk": "^2.2.2",
     "lit": "^2.4.0",
+    "memoize-one": "^6.0.0",
     "tslib": "^2.4.1",
     "yaml": "^2.1.3"
   },

raw_package/static/css/esphome-2.css

@@ -20,6 +20,8 @@
   --mdc-dialog-z-index: 998;
 
   --esphome-background-header: #e0e0e0;
+
+  --mdc-list-item-graphic-margin: 12px;
 }
 
 html {

src/components/esphome-header-menu.ts

@@ -1,6 +1,7 @@
 import { css, html, LitElement, TemplateResult } from "lit";
 import { property, state, customElement } from "lit/decorators.js";
 import "./esphome-button-menu";
+import "./esphome-icon-button";
 import "@material/mwc-list/mwc-list-item";
 import "@material/mwc-icon-button";
 import "@material/mwc-button";
@@ -9,6 +10,8 @@ import { openEditDialog } from "../editor";
 import { SECRETS_FILE } from "../api/secrets";
 import { openUpdateAllDialog } from "../update-all";
 import { showConfirmationDialog } from "../dialogs";
+import { mdiCellphoneArrowDown, mdiLock, mdiMagnify } from "@mdi/js";
+import { fireEvent } from "../util/fire-event";
 
 const isWideListener = window.matchMedia("(min-width: 601px)");
 
@@ -21,16 +24,24 @@ export class ESPHomeHeaderMenu extends LitElement {
   protected render(): TemplateResult {
     if (this._isWide) {
       return html`
-        <mwc-button
-          icon="system_update"
-          label="Update All"
+        <esphome-icon-button
+          .path=${mdiMagnify}
+          .label=${"Toggle Search"}
+          @click=${() => fireEvent(this, "toggle-search")}
+        ></esphome-icon-button>
+
+        <esphome-icon-button
+          .path=${mdiCellphoneArrowDown}
+          .label=${"Update All"}
           @click=${this._handleUpdateAll}
-        ></mwc-button>
-        <mwc-button
-          icon="lock"
-          label="Secrets"
+        ></esphome-icon-button>
+
+        <esphome-icon-button
+          .path=${mdiLock}
+          .label=${"Secrets Editor"}
           @click=${this._handleEditSecrets}
-        ></mwc-button>
+        ></esphome-icon-button>
+
         ${this.logoutUrl
           ? html`
               <a href=${this.logoutUrl}
@@ -47,8 +58,26 @@ export class ESPHomeHeaderMenu extends LitElement {
         @action=${this._handleOverflowAction}
       >
         <mwc-icon-button slot="trigger" icon="more_vert"></mwc-icon-button>
-        <mwc-list-item>Update All</mwc-list-item>
-        <mwc-list-item>Secrets Editor</mwc-list-item>
+
+        <mwc-list-item graphic="icon"
+          >Toggle Search<esphome-svg-icon
+            slot="graphic"
+            .path=${mdiMagnify}
+          ></esphome-svg-icon
+        ></mwc-list-item>
+
+        <mwc-list-item graphic="icon"
+          >Update All<esphome-svg-icon
+            slot="graphic"
+            .path=${mdiCellphoneArrowDown}
+          ></esphome-svg-icon
+        ></mwc-list-item>
+        <mwc-list-item graphic="icon"
+          >Secrets Editor<esphome-svg-icon
+            slot="graphic"
+            .path=${mdiLock}
+          ></esphome-svg-icon
+        ></mwc-list-item>
         ${this.logoutUrl
           ? html`
               <a href=${this.logoutUrl}
@@ -96,9 +125,12 @@ export class ESPHomeHeaderMenu extends LitElement {
   private async _handleOverflowAction(ev: CustomEvent<ActionDetail>) {
     switch (ev.detail.index) {
       case 0:
-        this._handleUpdateAll();
+        fireEvent(this, "toggle-search");
         break;
       case 1:
+        this._handleUpdateAll();
+        break;
+      case 2:
         this._handleEditSecrets();
         break;
     }

src/components/esphome-icon-button.ts

@@ -0,0 +1,72 @@
+import "@material/mwc-icon-button";
+import type { IconButton } from "@material/mwc-icon-button";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, property, query } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import "./esphome-svg-icon";
+
+@customElement("esphome-icon-button")
+export class ESPHomeIconButton extends LitElement {
+  @property({ type: Boolean, reflect: true }) disabled = false;
+
+  // SVG icon path (if you need a non SVG icon instead, use the provided slot to pass an <ha-icon> in)
+  @property({ type: String }) path?: string;
+
+  // Label that is used for ARIA support and as tooltip
+  @property({ type: String }) label?: string;
+
+  // These should always be set as properties, not attributes,
+  // so that only the <button> element gets the attribute
+  @property({ type: String, attribute: "aria-haspopup" })
+  override ariaHasPopup!: IconButton["ariaHasPopup"];
+
+  @property({ type: Boolean }) hideTitle = false;
+
+  @query("mwc-icon-button", true) private _button?: IconButton;
+
+  public override focus() {
+    this._button?.focus();
+  }
+
+  static shadowRootOptions: ShadowRootInit = {
+    mode: "open",
+    delegatesFocus: true,
+  };
+
+  protected render(): TemplateResult {
+    return html`
+      <mwc-icon-button
+        aria-label=${ifDefined(this.label)}
+        title=${ifDefined(this.hideTitle ? undefined : this.label)}
+        aria-haspopup=${ifDefined(this.ariaHasPopup)}
+        .disabled=${this.disabled}
+      >
+        ${this.path
+          ? html`<esphome-svg-icon .path=${this.path}></esphome-svg-icon>`
+          : html`<slot></slot>`}
+      </mwc-icon-button>
+    `;
+  }
+
+  static get styles(): CSSResultGroup {
+    return css`
+      :host {
+        display: inline-block;
+        outline: none;
+      }
+      :host([disabled]) {
+        pointer-events: none;
+      }
+      mwc-icon-button {
+        --mdc-theme-on-primary: currentColor;
+        --mdc-theme-text-disabled-on-light: var(--disabled-text-color);
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "esphome-icon-button": ESPHomeIconButton;
+  }
+}