jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-14 12:56:37 +00:00
Code Issues Packages Projects Releases Wiki Activity

Clean menu implementation (#20294)

Browse Source 
* Clean menu

* Clean up imports

* Fix imports
This commit is contained in:
Simon Lamon 2024-03-31 12:28:28 +02:00 committed by GitHub
parent 7e3e224746
commit b202a36feb
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 74 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
src/components/ha-menu-item.ts Normal file
View File

@ -0,0 +1,37 @@
import { customElement } from "lit/decorators";
import "element-internals-polyfill";
import { CSSResult, css } from "lit";
import { MdMenuItem } from "@material/web/menu/menu-item";
@customElement("ha-menu-item")
export class HaMenuItem extends MdMenuItem {
static override styles: CSSResult[] = [
...MdMenuItem.styles,
css`
:host {
--ha-icon-display: block;
--md-sys-color-primary: var(--primary-text-color);
--md-sys-color-on-primary: var(--primary-text-color);
--md-sys-color-secondary: var(--secondary-text-color);
--md-sys-color-surface: var(--card-background-color);
--md-sys-color-on-surface: var(--primary-text-color);
--md-sys-color-on-surface-variant: var(--secondary-text-color);
--md-sys-color-secondary-container: rgba(
var(--rgb-primary-color),
0.15
);
--md-sys-color-on-secondary-container: var(--text-primary-color);
--mdc-icon-size: 16px;
--md-sys-color-on-primary-container: var(--primary-text-color);
--md-sys-color-on-secondary-container: var(--primary-text-color);
}
`,
];
}
declare global {
interface HTMLElementTagNameMap {
"ha-menu-item": HaMenuItem;
}
}

22
src/components/ha-menu.ts Normal file
View File

@ -0,0 +1,22 @@
import { customElement } from "lit/decorators";
import "element-internals-polyfill";
import { CSSResult, css } from "lit";
import { MdMenu } from "@material/web/menu/menu";
@customElement("ha-menu")
export class HaMenu extends MdMenu {
static override styles: CSSResult[] = [
...MdMenu.styles,
css`
:host {
--md-sys-color-surface-container: var(--card-background-color);
}
`,
];
}
declare global {
interface HTMLElementTagNameMap {
"ha-menu": HaMenu;
}
}

45
src/layouts/hass-tabs-subpage-data-table.ts
View File

@ -1,9 +1,6 @@
import { ResizeController } from "@lit-labs/observers/resize-controller";
import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
import "@material/mwc-button/mwc-button";
import "@material/web/menu/menu";
import type { MdMenu } from "@material/web/menu/menu";
import "@material/web/menu/menu-item";
import {
mdiArrowDown,
mdiArrowUp,
@ -36,9 +33,12 @@ import type {
} from "../components/data-table/ha-data-table";
import "../components/ha-dialog";
import "../components/search-input-outlined";
import "../components/ha-menu";
import "../components/ha-menu-item";
import type { HomeAssistant, Route } from "../types";
import "./hass-tabs-subpage";
import type { PageNavigation } from "./hass-tabs-subpage";
import type { HaMenu } from "../components/ha-menu";
declare global {
// for fire event
@ -177,9 +177,9 @@ export class HaTabsSubpageDataTable extends LitElement {
@query("ha-data-table", true) private _dataTable!: HaDataTable;
@query("#group-by-menu") private _groupByMenu!: MdMenu;
@query("#group-by-menu") private _groupByMenu!: HaMenu;
@query("#sort-by-menu") private _sortByMenu!: MdMenu;
@query("#sort-by-menu") private _sortByMenu!: HaMenu;
private _showPaneController = new ResizeController(this, {
callback: (entries) => entries[0]?.contentRect.width > 750,
@ -425,37 +425,37 @@ export class HaTabsSubpageDataTable extends LitElement {
</ha-data-table>`}
<div slot="fab"><slot name="fab"></slot></div>
</hass-tabs-subpage>
<md-menu anchor="group-by-anchor" id="group-by-menu" positioning="fixed">
<ha-menu anchor="group-by-anchor" id="group-by-menu" positioning="fixed">
${Object.entries(this.columns).map(([id, column]) =>
column.groupable
? html`
<md-menu-item
<ha-menu-item
.value=${id}
@click=${this._handleGroupBy}
.selected=${id === this._groupColumn}
class=${classMap({ selected: id === this._groupColumn })}
>
${column.title || column.label}
</md-menu-item>
</ha-menu-item>
`
: nothing
)}
<li divider role="separator"></li>
<md-menu-item
<ha-menu-item
.value=${undefined}
@click=${this._handleGroupBy}
.selected=${this._groupColumn === undefined}
class=${classMap({ selected: this._groupColumn === undefined })}
>${localize(
"ui.components.subpage-data-table.dont_group_by"
)}</md-menu-item
)}</ha-menu-item
>
</md-menu>
<md-menu anchor="sort-by-anchor" id="sort-by-menu" positioning="fixed">
</ha-menu>
<ha-menu anchor="sort-by-anchor" id="sort-by-menu" positioning="fixed">
${Object.entries(this.columns).map(([id, column]) =>
column.sortable
? html`
<md-menu-item
<ha-menu-item
.value=${id}
@click=${this._handleSortBy}
.selected=${id === this._sortColumn}
@ -472,11 +472,11 @@ export class HaTabsSubpageDataTable extends LitElement {
`
: nothing}
${column.title || column.label}
</md-menu-item>
</ha-menu-item>
`
: nothing
)}
</md-menu>
</ha-menu>
`;
}
@ -732,21 +732,6 @@ export class HaTabsSubpageDataTable extends LitElement {
display: flex;
flex-direction: column;
}
/* TODO: Migrate to ha-menu and ha-menu-item */
md-menu {
--md-menu-container-color: var(--card-background-color);
}
md-menu-item {
--md-menu-item-label-text-color: var(--primary-text-color);
--mdc-icon-size: 16px;
--md-menu-item-selected-container-color: rgba(
var(--rgb-primary-color),
0.15
);
}
md-menu-item.selected {
--md-menu-item-label-text-color: var(--primary-color);
}
#sort-by-anchor,
#group-by-anchor {
--md-assist-chip-trailing-space: 8px;