From 64de1c53ed70de9a4bfe162309594944cb76d961 Mon Sep 17 00:00:00 2001 From: Dermot Duffy Date: Thu, 2 Sep 2021 20:24:19 -0700 Subject: [PATCH] Add support for top, left, bottom, right menus. --- src/editor.ts | 10 +++++-- src/frigate-hass-card-menu.scss | 38 +++++++++++++++------------ src/frigate-hass-card.scss | 8 +++--- src/frigate-hass-card.ts | 46 +++++++++++++++++++++------------ src/types.ts | 12 ++++++--- 5 files changed, 73 insertions(+), 41 deletions(-) diff --git a/src/editor.ts b/src/editor.ts index d7a6b410..b7e41e6f 100644 --- a/src/editor.ts +++ b/src/editor.ts @@ -105,8 +105,14 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor const menuModes = { '': '', - hidden: 'Hidden', - overlay: 'Overlay', + 'hidden-top': 'Hidden Top', + 'hidden-left': 'Hidden Left', + 'hidden-bottom': 'Hidden Bottom', + 'hidden-right': 'Hidden Right', + 'overlay-top': 'Overlay Top', + 'overlay-left': 'Overlay Left', + 'overlay-bottom': 'Overlay Bottom', + 'overlay-right': 'Overlay Right', above: 'Above', below: 'Below', }; diff --git a/src/frigate-hass-card-menu.scss b/src/frigate-hass-card-menu.scss index efbbff40..e35c5a45 100644 --- a/src/frigate-hass-card-menu.scss +++ b/src/frigate-hass-card-menu.scss @@ -1,5 +1,4 @@ -/* Base: Not used directly */ -.frigate-card-menu-base { +.frigate-card-menu { z-index: 1; height: 56px; overflow: hidden; @@ -8,24 +7,32 @@ */ pointer-events: none; } - -/* Small 'F' button for hidden menu */ -.frigate-card-menu-hidden { - @extend .frigate-card-menu-base; +.frigate-card-menu.overlay-hidden { position: absolute; width: 56px; } - -/* Expanded overlay menu */ -.frigate-card-menu-overlay { - @extend .frigate-card-menu-hidden; +.frigate-card-menu.overlay-hidden.left { + left: 0px; +} +.frigate-card-menu.overlay-hidden.right { + right: 0px; +} +.frigate-card-menu.overlay-hidden.top { + top: 0px; +} +.frigate-card-menu.overlay-hidden.bottom { + bottom: 0px; +} +.frigate-card-menu.overlay-hidden.expanded-horizontal { width: 100%; - background: linear-gradient(90deg, rgba(0,0,0,0.3), rgba(0,0,0,0)) + background: linear-gradient(90deg, rgba(0,0,0,0.3), rgba(0,0,0,0)); +} +.frigate-card-menu.overlay-hidden.expanded-vertical { + height: 100%; + background: linear-gradient(180deg, rgba(0,0,0,0.3), rgba(0,0,0,0)); } - /* Full above/below menu */ -.frigate-card-menu-full { - @extend .frigate-card-menu-base; +.frigate-card-menu.full { width: 100%; background: var(--secondary-background-color); } @@ -44,7 +51,6 @@ ha-icon-button.button { pointer-events: auto; } -ha-icon-button.emphasized-button { - @extend ha-icon-button, .button; +ha-icon-button.button.emphasize { color: var(--primary-color, white); } \ No newline at end of file diff --git a/src/frigate-hass-card.scss b/src/frigate-hass-card.scss index 91773576..ae445225 100644 --- a/src/frigate-hass-card.scss +++ b/src/frigate-hass-card.scss @@ -102,15 +102,15 @@ webrtc-camera ha-card { } .frigate-media-controls.previous { - left: 20px; + left: 50px; } .frigate-media-controls.previous:hover { - left: 8px; + left: 38px; } .frigate-media-controls.next { - right: 20px; + right: 50px; } .frigate-media-controls.next:hover { - right: 8px; + right: 38px; } \ No newline at end of file diff --git a/src/frigate-hass-card.ts b/src/frigate-hass-card.ts index 6c08c272..658c9389 100644 --- a/src/frigate-hass-card.ts +++ b/src/frigate-hass-card.ts @@ -14,6 +14,7 @@ import { import { NodePart } from 'lit-html'; import { until } from 'lit-html/directives/until.js'; +import { classMap } from 'lit-html/directives/class-map.js'; import { HomeAssistant, @@ -107,7 +108,7 @@ export class FrigateCardMenu extends LitElement { static FRIGATE_CARD_MENU_ID: string = 'frigate-card-menu-id' as const; @property({ attribute: false }) - protected menuMode: FrigateMenuMode = 'hidden'; + protected menuMode: FrigateMenuMode = 'hidden-top'; @property({ attribute: false }) protected expand = false; @@ -120,7 +121,7 @@ export class FrigateCardMenu extends LitElement { // Call the callback. protected _callAction(name: string): void { - if (this.menuMode == 'hidden') { + if (this.menuMode.startsWith('hidden-')) { if (name == 'frigate') { this.expand = !this.expand; return; @@ -136,8 +137,13 @@ export class FrigateCardMenu extends LitElement { // Render a menu button. protected _renderButton(name: string, button: MenuButton): TemplateResult { + const classes = { + button: true, + emphasize: button.emphasize ?? false, + }; + return html` Promise) { - let menuClass = 'frigate-card-menu-full'; - if (['hidden', 'overlay'].includes(this.menuMode)) { - if (this.menuMode == 'overlay' || this.expand) { - menuClass = 'frigate-card-menu-overlay'; - } else { - menuClass = 'frigate-card-menu-hidden'; - } - } + const classes = { + 'frigate-card-menu': true, + 'overlay-hidden': + this.menuMode.startsWith('hidden-') || this.menuMode.startsWith('overlay-'), + 'expanded-horizontal': + (this.menuMode.startsWith('overlay-') || this.expand) && + (this.menuMode.endsWith('-top') || this.menuMode.endsWith('-bottom')), + 'expanded-vertical': + (this.menuMode.startsWith('overlay-') || this.expand) && + (this.menuMode.endsWith('-left') || this.menuMode.endsWith('-right')), + full: ['above', 'below'].includes(this.menuMode), + left: this.menuMode.endsWith('-left'), + right: this.menuMode.endsWith('-right'), + top: this.menuMode.endsWith('-top'), + bottom: this.menuMode.endsWith('-bottom'), + }; return html` -
+
${Array.from(this.buttons.keys()).map((name) => { const button = this.buttons.get(name); if (button) { @@ -523,7 +537,7 @@ export class FrigateCard extends LitElement { outlined="" class="frigate-card-image-list-folder" > - +
diff --git a/src/types.ts b/src/types.ts index 00cd76e2..ae90a074 100644 --- a/src/types.ts +++ b/src/types.ts @@ -25,8 +25,14 @@ export const FRIGATE_CARD_VIEWS = [ export type FrigateCardView = typeof FRIGATE_CARD_VIEWS[number]; export const FRIGATE_MENU_MODES = [ - 'hidden', - 'overlay', + 'hidden-top', + 'hidden-left', + 'hidden-bottom', + 'hidden-right', + 'overlay-top', + 'overlay-left', + 'overlay-bottom', + 'overlay-right', 'above', 'below', ] as const; @@ -55,7 +61,7 @@ export const frigateCardConfigSchema = z.object({ label: z.string().optional(), zone: z.string().optional(), autoplay_clip: z.boolean().default(false), - menu_mode: z.enum(FRIGATE_MENU_MODES).optional().default('hidden'), + menu_mode: z.enum(FRIGATE_MENU_MODES).optional().default('hidden-top'), // Stock lovelace card config. type: z.string(),