Skip to content

Commit

Permalink
Switch quick action to ha-menu
Browse files Browse the repository at this point in the history
  • Loading branch information
@ludeeus
ludeeus committed Sep 2, 2024
1 parent e217fd5 commit 5e53ba7
Show file tree
Hide file tree
Showing 2 changed files with 172 additions and 113 deletions.
2 changes: 1 addition & 1 deletion src/components/hacs-repository-owerflow-menu.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -143,7 +143,7 @@ export const repositoryMenuItems = memoizeOne(
destructive: true,
});
},
warning: true,
error: true,
},
]
: []),
Expand Down
283 changes: 171 additions & 112 deletions src/dashboards/hacs-dashboard.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,15 +3,16 @@ import "@material/mwc-list/mwc-list";
import "@material/mwc-list/mwc-list-item";
import {
mdiAlertCircleOutline,
mdiDotsVertical,
mdiFileDocument,
mdiGit,
mdiGithub,
mdiInformation,
mdiNewBox,
} from "@mdi/js";
import type { CSSResultGroup, TemplateResult } from "lit";
import { LitElement, html, nothing } from "lit";
import { customElement, property } from "lit/decorators";
import { LitElement, css, html, nothing } from "lit";
import { customElement, property, query, state } from "lit/decorators";
import memoize from "memoize-one";
import { relativeTime } from "../../homeassistant-frontend/src/common/datetime/relative_time";
import { storage } from "../../homeassistant-frontend/src/common/decorators/storage";
Expand All @@ -28,12 +29,16 @@ import "../../homeassistant-frontend/src/components/ha-button-menu";
import "../../homeassistant-frontend/src/components/ha-fab";
import "../../homeassistant-frontend/src/components/ha-form/ha-form";
import "../../homeassistant-frontend/src/components/ha-markdown";
import "../../homeassistant-frontend/src/components/ha-menu";
import "../../homeassistant-frontend/src/components/ha-menu-item";

import { LocalizeFunc } from "../../homeassistant-frontend/src/common/translations/localize";
import { HaFormSchema } from "../../homeassistant-frontend/src/components/ha-form/types";
import "../../homeassistant-frontend/src/components/ha-icon-overflow-menu";
import { IconOverflowMenuItem } from "../../homeassistant-frontend/src/components/ha-icon-overflow-menu";
import { HaMenu } from "../../homeassistant-frontend/src/components/ha-menu";
import "../../homeassistant-frontend/src/components/ha-svg-icon";
import { PageNavigation } from "../../homeassistant-frontend/src/layouts/hass-tabs-subpage";
import { haStyle } from "../../homeassistant-frontend/src/resources/styles";
import type { HomeAssistant, Route } from "../../homeassistant-frontend/src/types";
import { brandsUrl } from "../../homeassistant-frontend/src/util/brands-url";
Expand All @@ -51,7 +56,6 @@ import { repositoriesClearNew } from "../data/websocket";
import { HacsStyles } from "../styles/hacs-common-style";
import { documentationUrl } from "../tools/documentation";
import { typeIcon } from "../tools/type-icon";
import { PageNavigation } from "../../homeassistant-frontend/src/layouts/hass-tabs-subpage";

const defaultKeyData = {
title: "",
Expand Down Expand Up @@ -102,6 +106,12 @@ export class HacsDashboard extends LitElement {
@storage({ key: "hacs-dashboard-table-columns-ordering", state: true, subscribe: false })
private _orderTableColumns?: string[];

@query("#overflow-menu")
private _repositoryOverflowMenu!: HaMenu;

@state()
private _overflowMenuRepository?: RepositoryBase;

protected render = (): TemplateResult | void => {
const repositories = this._filterRepositories(
this.hacs.repositories,
Expand All @@ -111,111 +121,130 @@ export class HacsDashboard extends LitElement {
const repositoriesContainsNew = repositories.some((repository) => repository.new);

return html`<hass-tabs-subpage-data-table
.tabs=${TABS}
.columns=${this._columns(this.hacs.localize, this.narrow)}
.data=${repositories}
.hass=${this.hass}
?iswide=${this.isWide}
.localizeFunc=${this.hacs.localize as LocalizeFunc}
main-page
.narrow=${this.narrow}
.route=${this.route}
clickable
.filter=${this._activeSearch || ""}
hasFilters
hasFab
.filters=${this._activeFilters?.length}
.noDataText=${this.hacs.localize("dashboard.no_data")}
.initialGroupColumn=${this._activeGrouping || "translated_status"}
.initialCollapsedGroups=${this._activeCollapsed || []}
.groupOrder=${this._groupOrder(this.hacs.localize, this._activeGrouping)}
.initialSorting=${this._activeSorting}
.columnOrder=${this._orderTableColumns}
.hiddenColumns=${this._hiddenTableColumns}
@columns-changed=${this._handleColumnsChanged}
@row-click=${this._handleRowClicked}
@clear-filter=${this._handleClearFilter}
@value-changed=${this._handleSearchFilterChanged}
@sorting-changed=${this._handleSortingChanged}
@grouping-changed=${this._handleGroupingChanged}
@collapsed-changed=${this._handleCollapseChanged}
>
<ha-icon-overflow-menu
narrow
slot="toolbar-icon"
.tabs=${TABS}
.columns=${this._columns(this.hacs.localize, this.narrow)}
.data=${repositories}
.hass=${this.hass}
.items=${[
{
path: mdiFileDocument,
label: this.hacs.localize("menu.documentation"),
action: () => mainWindow.open(documentationUrl({}), "_blank", "noreferrer=true"),
},
{
path: mdiGithub,
label: "GitHub",
action: () => mainWindow.open(`https://github.com/hacs`, "_blank", "noreferrer=true"),
},
{
path: mdiAlertCircleOutline,
label: this.hacs.localize("menu.open_issue"),
action: () =>
mainWindow.open(
documentationUrl({
path: "/docs/help/issues",
}),
"_blank",
"noreferrer=true",
),
},
{
path: mdiGit,
disabled: Boolean(this.hacs.info.disabled_reason),
label: this.hacs.localize("menu.custom_repositories"),
action: () => {
showHacsCustomRepositoriesDialog(this, {
hacs: this.hacs,
});
?iswide=${this.isWide}
.localizeFunc=${this.hacs.localize as LocalizeFunc}
main-page
.narrow=${this.narrow}
.route=${this.route}
clickable
.filter=${this._activeSearch || ""}
hasFilters
hasFab
.filters=${this._activeFilters?.length}
.noDataText=${this.hacs.localize("dashboard.no_data")}
.initialGroupColumn=${this._activeGrouping || "translated_status"}
.initialCollapsedGroups=${this._activeCollapsed || []}
.groupOrder=${this._groupOrder(this.hacs.localize, this._activeGrouping)}
.initialSorting=${this._activeSorting}
.columnOrder=${this._orderTableColumns}
.hiddenColumns=${this._hiddenTableColumns}
@columns-changed=${this._handleColumnsChanged}
@row-click=${this._handleRowClicked}
@clear-filter=${this._handleClearFilter}
@value-changed=${this._handleSearchFilterChanged}
@sorting-changed=${this._handleSortingChanged}
@grouping-changed=${this._handleGroupingChanged}
@collapsed-changed=${this._handleCollapseChanged}
>
<ha-icon-overflow-menu
narrow
slot="toolbar-icon"
.hass=${this.hass}
.items=${[
{
path: mdiFileDocument,
label: this.hacs.localize("menu.documentation"),
action: () => mainWindow.open(documentationUrl({}), "_blank", "noreferrer=true"),
},
},
repositoriesContainsNew
? {
path: mdiNewBox,
label: this.hacs.localize("menu.dismiss"),
action: () => {
repositoriesClearNew(this.hass, this.hacs);
},
}
: undefined,
{
path: mdiInformation,
label: this.hacs.localize("menu.about"),
action: () => {
showHacsFormDialog(this, {
hacs: this.hacs,
title: APP_FULL_NAME,
description: html`<ha-markdown
.content=${aboutHacsmarkdownContent(this.hacs)}
></ha-markdown>`,
});
{
path: mdiGithub,
label: "GitHub",
action: () => mainWindow.open(`https://github.com/hacs`, "_blank", "noreferrer=true"),
},
},
].filter((item) => item !== undefined) as IconOverflowMenuItem[]}
>
</ha-icon-overflow-menu>
<ha-form
slot="filter-pane"
class="filters"
.hass=${this.hass}
.data=${{
status: this._activeFilters?.find((filter) => filter.startsWith("status_")) || "",
type: this._activeFilters?.find((filter) => filter.startsWith("type_")) || "",
}}
.schema=${this._filterSchema(this.hacs.localize, this.hacs.info.categories)}
.computeLabel=${this._computeFilterFormLabel}
@value-changed=${this._handleFilterChanged}
></ha-form>
</hass-tabs-subpage-data-table>`;
{
path: mdiAlertCircleOutline,
label: this.hacs.localize("menu.open_issue"),
action: () =>
mainWindow.open(
documentationUrl({
path: "/docs/help/issues",
}),
"_blank",
"noreferrer=true",
),
},
{
path: mdiGit,
disabled: Boolean(this.hacs.info.disabled_reason),
label: this.hacs.localize("menu.custom_repositories"),
action: () => {
showHacsCustomRepositoriesDialog(this, {
hacs: this.hacs,
});
},
},
repositoriesContainsNew
? {
path: mdiNewBox,
label: this.hacs.localize("menu.dismiss"),
action: () => {
repositoriesClearNew(this.hass, this.hacs);
},
}
: undefined,
{
path: mdiInformation,
label: this.hacs.localize("menu.about"),
action: () => {
showHacsFormDialog(this, {
hacs: this.hacs,
title: APP_FULL_NAME,
description: html`<ha-markdown
.content=${aboutHacsmarkdownContent(this.hacs)}
></ha-markdown>`,
});
},
},
].filter((item) => item !== undefined) as IconOverflowMenuItem[]}
>
</ha-icon-overflow-menu>
<ha-form
slot="filter-pane"
class="filters"
.hass=${this.hass}
.data=${{
status: this._activeFilters?.find((filter) => filter.startsWith("status_")) || "",
type: this._activeFilters?.find((filter) => filter.startsWith("type_")) || "",
}}
.schema=${this._filterSchema(this.hacs.localize, this.hacs.info.categories)}
.computeLabel=${this._computeFilterFormLabel}
@value-changed=${this._handleFilterChanged}
></ha-form>
</hass-tabs-subpage-data-table>
<ha-menu id="overflow-menu" positioning="fixed">
${this._overflowMenuRepository
? repositoryMenuItems(this, this._overflowMenuRepository).map((entry) =>
entry.divider
? html`<li divider role="separator"></li>`
: html`
<ha-menu-item
class="${entry.error ? "error" : entry.warning ? "warning" : ""}"
.clickAction=${() => {
entry?.action && entry.action();
}}
>
<ha-svg-icon .path=${entry.path} slot="start"></ha-svg-icon>
<div slot="headline">${entry.label}</div>
</ha-menu-item>
`,
)
: nothing}
</ha-menu> `;
};

private _filterRepositories = memoize(
Expand Down Expand Up @@ -381,17 +410,30 @@ export class HacsDashboard extends LitElement {
showNarrow: true,
type: "overflow-menu",
template: (repository: RepositoryBase) => html`
<ha-icon-overflow-menu
.hass=${this.hass}
.items=${repositoryMenuItems(this, repository) as IconOverflowMenuItem[]}
narrow
>
</ha-icon-overflow-menu>
<ha-icon-button
.repository=${repository}
.label=${this.hass.localize("ui.common.overflow_menu") || "overflow_menu"}
.path=${mdiDotsVertical}
@click=${this._showOverflowRepositoryMenu}
></ha-icon-button>
`,
},
}),
);

private _showOverflowRepositoryMenu = (ev: any) => {
if (
this._repositoryOverflowMenu.open &&
ev.target === this._repositoryOverflowMenu.anchorElement
) {
this._repositoryOverflowMenu.close();
return;
}
this._repositoryOverflowMenu.anchorElement = ev.target;
this._overflowMenuRepository = ev.target.repository;
this._repositoryOverflowMenu.show();
};

private _groupOrder = memoize(
(localize: LocalizeFunc<HacsLocalizeKeys>, activeGrouping: string | undefined) =>
activeGrouping === "translated_status"
Expand Down Expand Up @@ -511,7 +553,24 @@ export class HacsDashboard extends LitElement {
}

static get styles(): CSSResultGroup {
return [haStyle, HacsStyles];
return [
haStyle,
HacsStyles,
css`
ha-menu-item.error {
--md-menu-item-label-text-color: var(--error-color);
--hcv-color-icon: var(--error-color);
}
ha-menu-item.warning {
--md-menu-item-label-text-color: var(--warning-color);
--hcv-color-icon: var(--warning-color);
}
li[role="separator"] {
border-bottom: 1px solid var(--divider-color);
}
`,
];
}
}

Expand Down

0 comments on commit 5e53ba7

Please sign in to comment.