Merge pull request #975 from dermotduffy/submenu-button

Fix menu alignment issue for 'opposing' buttons
This commit is contained in:
Dermot Duffy
2023-02-27 22:10:40 -08:00
committed by GitHub
+8 -10
View File
@@ -5,7 +5,7 @@ import {
LitElement, LitElement,
PropertyValues, PropertyValues,
TemplateResult, TemplateResult,
unsafeCSS unsafeCSS,
} from 'lit'; } from 'lit';
import { customElement, property, state } from 'lit/decorators.js'; import { customElement, property, state } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js'; import { classMap } from 'lit/directives/class-map.js';
@@ -19,13 +19,13 @@ import type {
MenuButton, MenuButton,
MenuConfig, MenuConfig,
MenuItem, MenuItem,
StateParameters StateParameters,
} from '../types.js'; } from '../types.js';
import { import {
convertActionToFrigateCardCustomAction, convertActionToFrigateCardCustomAction,
frigateCardHandleActionConfig, frigateCardHandleActionConfig,
frigateCardHasAction, frigateCardHasAction,
getActionConfigGivenAction getActionConfigGivenAction,
} from '../utils/action.js'; } from '../utils/action.js';
import { FRIGATE_ICON_SVG_PATH } from '../camera-manager/frigate/icon.js'; import { FRIGATE_ICON_SVG_PATH } from '../camera-manager/frigate/icon.js';
import { refreshDynamicStateParameters } from '../utils/ha'; import { refreshDynamicStateParameters } from '../utils/ha';
@@ -226,9 +226,6 @@ export class FrigateCardMenu extends LitElement {
* @returns A rendered template or void. * @returns A rendered template or void.
*/ */
protected _renderButton(button: MenuButton): TemplateResult | void { protected _renderButton(button: MenuButton): TemplateResult | void {
if (button.enabled === false) {
return;
}
if (button.type === 'custom:frigate-card-menu-submenu') { if (button.type === 'custom:frigate-card-menu-submenu') {
return html` <frigate-card-submenu return html` <frigate-card-submenu
.hass=${this.hass} .hass=${this.hass}
@@ -306,16 +303,17 @@ export class FrigateCardMenu extends LitElement {
} }
// If the hidden menu isn't expanded, only show the Frigate button. // If the hidden menu isn't expanded, only show the Frigate button.
const matchingButtons = const matchingButtons = (
style !== 'hidden' || this.expanded style !== 'hidden' || this.expanded
? this.buttons.filter( ? this.buttons.filter(
(button) => !button.alignment || button.alignment === 'matching', (button) => !button.alignment || button.alignment === 'matching',
) )
: this.buttons.filter((button) => button.icon === FRIGATE_BUTTON_MENU_ICON); : this.buttons.filter((button) => button.icon === FRIGATE_BUTTON_MENU_ICON)
).filter((button) => !!button.enabled)
const opposingButtons = const opposingButtons =
style !== 'hidden' || this.expanded style !== 'hidden' || this.expanded
? this.buttons.filter((button) => button.alignment === 'opposing') ? this.buttons.filter((button) => button.alignment === 'opposing' && button.enabled)
: []; : [];
const matchingStyle = { const matchingStyle = {
@@ -343,6 +341,6 @@ export class FrigateCardMenu extends LitElement {
declare global { declare global {
interface HTMLElementTagNameMap { interface HTMLElementTagNameMap {
"frigate-card-menu": FrigateCardMenu 'frigate-card-menu': FrigateCardMenu;
} }
} }