jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-18 23:06:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

Migrate icon overflow menu to ha-md-button-menu (#24973)

Browse Source 
Migrate icon overflow menu to `ha-md-button-menut`
This commit is contained in:
Jan-Philipp Benecke 2025-04-09 08:24:58 +02:00 committed by GitHub
parent a2b3ea2ac6
commit 828bf977b2
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 18 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
src/components/ha-icon-overflow-menu.ts
View File

@ -5,11 +5,13 @@ import { customElement, property } from "lit/decorators";
import { classMap } from "lit/directives/class-map"; import { classMap } from "lit/directives/class-map";
import { haStyle } from "../resources/styles"; import { haStyle } from "../resources/styles";
import type { HomeAssistant } from "../types"; import type { HomeAssistant } from "../types";
import "./ha-button-menu"; import "./ha-md-button-menu";
import "./ha-icon-button"; import "./ha-icon-button";
import "./ha-list-item"; import "./ha-list-item";
import "./ha-svg-icon"; import "./ha-svg-icon";
import "./ha-tooltip"; import "./ha-tooltip";
import "./ha-md-menu-item";
import "./ha-md-divider";
export interface IconOverflowMenuItem { export interface IconOverflowMenuItem {
[key: string]: any; [key: string]: any;
@ -35,11 +37,9 @@ export class HaIconOverflowMenu extends LitElement {
return html` return html`
${this.narrow ${this.narrow
? html` <!-- Collapsed representation for small screens --> ? html` <!-- Collapsed representation for small screens -->
<ha-button-menu <ha-md-button-menu
@click=${this._handleIconOverflowMenuOpened} @click=${this._handleIconOverflowMenuOpened}
@closed=${this._handleIconOverflowMenuClosed} positioning="popover"
class="ha-icon-overflow-menu-overflow"
absolute
> >
<ha-icon-button <ha-icon-button
.label=${this.hass.localize("ui.common.overflow_menu")} .label=${this.hass.localize("ui.common.overflow_menu")}
@ -49,23 +49,24 @@ export class HaIconOverflowMenu extends LitElement {
${this.items.map((item) => ${this.items.map((item) =>
item.divider item.divider
? html`<li divider role="separator"></li>` ? html`<ha-md-divider
: html`<ha-list-item role="separator"
graphic="icon" tabindex="-1"
></ha-md-divider>`
: html`<ha-md-menu-item
?disabled=${item.disabled} ?disabled=${item.disabled}
@click=${item.action} .clickAction=${item.action}
class=${classMap({ warning: Boolean(item.warning) })} class=${classMap({ warning: Boolean(item.warning) })}
> >
<div slot="graphic">
<ha-svg-icon <ha-svg-icon
slot="start"
class=${classMap({ warning: Boolean(item.warning) })} class=${classMap({ warning: Boolean(item.warning) })}
.path=${item.path} .path=${item.path}
></ha-svg-icon> ></ha-svg-icon>
</div>
${item.label} ${item.label}
</ha-list-item> ` </ha-md-menu-item> `
)} )}
</ha-button-menu>` </ha-md-button-menu>`
: html` : html`
<!-- Icon representation for big screens --> <!-- Icon representation for big screens -->
${this.items.map((item) => ${this.items.map((item) =>
@ -91,20 +92,6 @@ export class HaIconOverflowMenu extends LitElement {
protected _handleIconOverflowMenuOpened(e) { protected _handleIconOverflowMenuOpened(e) {
e.stopPropagation(); e.stopPropagation();
// 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() { static get styles() {
@ -115,16 +102,10 @@ export class HaIconOverflowMenu extends LitElement {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
} }
li[role="separator"] {
border-bottom-color: var(--divider-color);
}
div[role="separator"] { div[role="separator"] {
border-right: 1px solid var(--divider-color); border-right: 1px solid var(--divider-color);
width: 1px; width: 1px;
} }
ha-list-item[disabled] ha-svg-icon {
color: var(--disabled-text-color);
}
`, `,
]; ];
} }