From 0e8e0d38c5470328dfbaf51c0bbb0c3124349ecf Mon Sep 17 00:00:00 2001 From: Dermot Duffy Date: Wed, 8 Sep 2021 20:58:01 -0700 Subject: [PATCH] Add support for a 'hover' menu. --- README.md | 3 ++- src/editor.ts | 4 ++++ src/frigate-hass-card.ts | 22 ++++++++++++++++------ src/localize/languages/en.json | 4 ++++ src/scss/card.scss | 12 ++++++++++++ src/scss/menu.scss | 6 +++--- src/types.ts | 4 ++++ 7 files changed, 45 insertions(+), 10 deletions(-) diff --git a/README.md b/README.md index d73bff9e..20cf00c8 100644 --- a/README.md +++ b/README.md @@ -198,7 +198,8 @@ This card supports several menu configurations. | Key | Description | Screenshot | | ------------- | --------------------------------------------- | - | |`hidden-{top,bottom,right,left}` [default: `hidden-top`]| Hide the menu by default, expandable upon clicking the 'F' button. | Menu hidden | -|`overlay-{top,bottom,right,left}`| Overlay the menu on top of the card contents. The 'F' button shows the default view. | Menu overlaid | +|`overlay-{top,bottom,right,left}`| Overlay the menu over the card contents. The 'F' button shows the default view. | Menu overlaid | +|`hover-{top,bottom,right,left}`| Overlay the menu over the card contents when the mouse is over the card / touch on the card, otherwise it is not shown. The 'F' button shows the default view. | Menu overlaid | |`above`| Render the menu above the card. The 'F' button shows the default view. | Menu above | |`below`| Render the menu below the card. The 'F' button shows the default view. | Menu below | |`none`| No menu is shown. | No Menu | diff --git a/src/editor.ts b/src/editor.ts index 59f28d4b..79a6a0bd 100644 --- a/src/editor.ts +++ b/src/editor.ts @@ -115,6 +115,10 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor 'overlay-left': localize('menu_mode.overlay-left'), 'overlay-bottom': localize('menu_mode.overlay-bottom'), 'overlay-right': localize('menu_mode.overlay-right'), + 'hover-top': localize('menu_mode.hover-top'), + 'hover-left': localize('menu_mode.hover-left'), + 'hover-bottom': localize('menu_mode.hover-bottom'), + 'hover-right': localize('menu_mode.hover-right'), above: localize('menu_mode.above'), below: localize('menu_mode.below'), }; diff --git a/src/frigate-hass-card.ts b/src/frigate-hass-card.ts index 3510c528..806e52b8 100644 --- a/src/frigate-hass-card.ts +++ b/src/frigate-hass-card.ts @@ -169,12 +169,18 @@ export class FrigateCardMenu extends LitElement { const classes = { 'frigate-card-menu': true, 'overlay-hidden': - this.menuMode.startsWith('hidden-') || this.menuMode.startsWith('overlay-'), + this.menuMode.startsWith('hidden-') || + this.menuMode.startsWith('overlay-') || + this.menuMode.startsWith('hover-'), 'expanded-horizontal': - (this.menuMode.startsWith('overlay-') || this.expand) && + (this.menuMode.startsWith('overlay-') || + this.menuMode.startsWith('hover-') || + this.expand) && (this.menuMode.endsWith('-top') || this.menuMode.endsWith('-bottom')), 'expanded-vertical': - (this.menuMode.startsWith('overlay-') || this.expand) && + (this.menuMode.startsWith('overlay-') || + this.menuMode.startsWith('hover-') || + this.expand) && (this.menuMode.endsWith('-left') || this.menuMode.endsWith('-right')), full: ['above', 'below'].includes(this.menuMode), left: this.menuMode.endsWith('-left'), @@ -978,9 +984,13 @@ export class FrigateCard extends LitElement { } protected _renderMenu(): TemplateResult | void { + const classes = { + 'hover-menu': this.config.menu_mode.startsWith('hover-'), + }; return html` - ${this.config.menu_mode != 'below' ? this._renderMenu() : ''} -
+ ${this.config.menu_mode == 'above' ? this._renderMenu() : ''} +
${this._view.is('clips') || this._view.is('snapshots') ? until(this._renderEvents(), this._renderProgressIndicator()) @@ -1009,7 +1019,7 @@ export class FrigateCard extends LitElement { ${this._view.is('live') ? this._renderLiveViewer() : ``}
- ${this.config.menu_mode == 'below' ? this._renderMenu() : ''} + ${this.config.menu_mode != 'above' ? this._renderMenu() : ''} `; } diff --git a/src/localize/languages/en.json b/src/localize/languages/en.json index fba699c3..2ed04b20 100644 --- a/src/localize/languages/en.json +++ b/src/localize/languages/en.json @@ -59,6 +59,10 @@ "overlay-left": "Overlay Left", "overlay-bottom": "Overlay Bottom", "overlay-right": "Overlay Right", + "hover-top": "Hover Top", + "hover-left": "Hover Left", + "hover-bottom": "Hover Bottom", + "hover-right": "Hover Right", "above": "Above", "below": "Below" }, diff --git a/src/scss/card.scss b/src/scss/card.scss index e0ab7c39..c9a42ec0 100644 --- a/src/scss/card.scss +++ b/src/scss/card.scss @@ -22,6 +22,18 @@ scrollbar-width: none; /* Hide scrollbar: Firefox */ } +/* Support the 'hover' menu mode. */ +.hover-menu { + z-index: 1; + transition: all 0.5s ease; +} +.outer + .hover-menu { + opacity: 0.0; +} +.outer:hover + .hover-menu, .hover-menu:hover { + opacity: 1.0; +} + .frigate-card-contents img.media,video.media { width: 100%; } diff --git a/src/scss/menu.scss b/src/scss/menu.scss index a5daf90d..ede9f006 100644 --- a/src/scss/menu.scss +++ b/src/scss/menu.scss @@ -13,16 +13,16 @@ position: absolute; width: 46px; } -.frigate-card-menu.overlay-hidden.left { +.frigate-card-menu.overlay-hidden.left, .frigate-card-menu.overlay-hidden.top { left: 0px; + top: 0px; } .frigate-card-menu.overlay-hidden.right { right: 0px; -} -.frigate-card-menu.overlay-hidden.top { top: 0px; } .frigate-card-menu.overlay-hidden.bottom { + left: 0px; bottom: 0px; } .frigate-card-menu.overlay-hidden.expanded-horizontal { diff --git a/src/types.ts b/src/types.ts index ea1a792e..56bf9e1b 100644 --- a/src/types.ts +++ b/src/types.ts @@ -34,6 +34,10 @@ export const FRIGATE_MENU_MODES = [ 'overlay-left', 'overlay-bottom', 'overlay-right', + 'hover-top', + 'hover-left', + 'hover-bottom', + 'hover-right', 'above', 'below', ] as const;