jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-18 14:56:37 +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

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