Merge pull request #68 from dermotduffy/hover-menu

Add support for a 'hover-*' menu

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. | <img src="https://raw.githubusercontent.com/dermotduffy/frigate-hass-card/main/images/menu-mode-hidden.png" alt="Menu hidden" width="400px"> |
-|`overlay-{top,bottom,right,left}`| Overlay the menu on top of the card contents. The 'F' button shows the default view. | <img src="https://raw.githubusercontent.com/dermotduffy/frigate-hass-card/main/images/menu-mode-overlay.png" alt="Menu overlaid" width="400px"> |
+|`overlay-{top,bottom,right,left}`| Overlay the menu over the card contents. The 'F' button shows the default view. | <img src="https://raw.githubusercontent.com/dermotduffy/frigate-hass-card/main/images/menu-mode-overlay.png" alt="Menu overlaid" width="400px"> |
+|`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. | <img src="https://raw.githubusercontent.com/dermotduffy/frigate-hass-card/main/images/menu-mode-overlay.png" alt="Menu overlaid" width="400px"> |
 |`above`| Render the menu above the card. The 'F' button shows the default view. | <img src="https://raw.githubusercontent.com/dermotduffy/frigate-hass-card/main/images/menu-mode-above.png" alt="Menu above" width="400px"> |
 |`below`| Render the menu below the card. The 'F' button shows the default view. | <img src="https://raw.githubusercontent.com/dermotduffy/frigate-hass-card/main/images/menu-mode-below.png" alt="Menu below" width="400px"> |
 |`none`| No menu is shown. | <img src="https://raw.githubusercontent.com/dermotduffy/frigate-hass-card/main/images/menu-mode-none.png" alt="No Menu" width="400px"> |

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'),
     };

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`
       <frigate-card-menu
         id="${FrigateCardMenu.FRIGATE_CARD_MENU_ID}"
+        class="${classMap(classes)}"
         .actionCallback=${this._menuActionHandler.bind(this)}
         .menuMode=${this.config.menu_mode}
         .buttons=${this._getMenuButtons()}
@@ -997,8 +1007,8 @@ export class FrigateCard extends LitElement {
       return this._showError(localize('common.show_error'));
     }
     return html` <ha-card @click=${this._interactionHandler}>
-      ${this.config.menu_mode != 'below' ? this._renderMenu() : ''}
+      ${this.config.menu_mode == 'above' ? this._renderMenu() : ''}
-      <div class="container_16_9">
+      <div class="container_16_9 outer">
         <div class="frigate-card-contents">
           ${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() : ``}
         </div>
       </div>
-      ${this.config.menu_mode == 'below' ? this._renderMenu() : ''}
+      ${this.config.menu_mode != 'above' ? this._renderMenu() : ''}
     </ha-card>`;
   }
 

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"
   },

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%;
 }

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 {

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;