Add a hover-card menu style.

README.md

@@ -262,7 +262,7 @@ See the [fully expanded menu configuration example](#config-expanded-menu) for h
 
 | Option | Default | Overridable | Description |
 | - | - | - | - |
-| `style` | `hidden` | :white_check_mark: | The menu style to show by default, one of `none`, `hidden`, `hover`, `overlay`, or `outside`. See [menu styles](#menu-styles) below.|
+| `style` | `hidden` | :white_check_mark: | The menu style to show by default, one of `none`, `hidden`, `hover`, `hover-card`, `overlay`, or `outside`. See [menu styles](#menu-styles) below.|
 | `position` | `top` | :white_check_mark: | Whether to show the menu on the `left`, `right`, `top` or `bottom` side of the card. Note that for the `outside` style only the `top` and `bottom` positions have an effect.|
 | `alignment` | `left` | :white_check_mark: | Whether to align the menu buttons to the `left`, `right`, `top` or `bottom` of the menu. Some selections may have no effect depending on the value of `position` (e.g. it doesn't make sense to `left` align icons on a menu with `position` to the `left`).|
 | `button_size` | 40 | :white_check_mark: | The size of the menu buttons in pixels. Must be >= `20`.|
@@ -1133,7 +1133,8 @@ This card supports several menu styles.
 | ------------- | --------------------------------------------- | - |
 |`hidden`| Hide the menu by default, expandable upon clicking the Frigate button. | <img src="https://raw.githubusercontent.com/dermotduffy/frigate-hass-card/release-4.0.0/images/menu-mode-hidden.png" alt="Menu hidden" width="400px"> |
 |`overlay`| Overlay the menu over the card contents. The Frigate button shows the default view. | <img src="https://raw.githubusercontent.com/dermotduffy/frigate-hass-card/release-4.0.0/images/menu-mode-overlay.png" alt="Menu overlaid" width="400px"> |
-|`hover`| Overlay the menu over the card contents when the mouse is over the menu, otherwise it is not shown. The Frigate button shows the default view. | <img src="https://raw.githubusercontent.com/dermotduffy/frigate-hass-card/release-4.0.0/images/menu-mode-overlay.png" alt="Menu overlaid" width="400px"> |
+|`hover`| Overlay the menu over the card contents when the mouse is over the **menu**, otherwise it is not shown. The Frigate button shows the default view. | <img src="https://raw.githubusercontent.com/dermotduffy/frigate-hass-card/release-4.0.0/images/menu-mode-overlay.png" alt="Menu overlaid" width="400px"> |
+|`hover-card`| Overlay the menu over the card contents when the mouse is over the **card**, otherwise it is not shown. The Frigate button shows the default view. | <img src="https://raw.githubusercontent.com/dermotduffy/frigate-hass-card/release-4.0.0/images/menu-mode-overlay.png" alt="Menu overlaid" width="400px"> |
 |`outside`| Render the menu outside the card (i.e. above it if `position` is `top`, or below it if `position` is `bottom`). The Frigate button shows the default view. | <img src="https://raw.githubusercontent.com/dermotduffy/frigate-hass-card/release-4.0.0/images/menu-mode-above.png" alt="Menu above" width="400px"> |
 |`none`| No menu is shown. | <img src="https://raw.githubusercontent.com/dermotduffy/frigate-hass-card/release-4.0.0/images/menu-mode-none.png" alt="No Menu" width="400px"> |
 

rollup.config.js

@@ -46,6 +46,7 @@ const plugins = [
   }),
   commonjs({
     include: 'node_modules/**',
+    sourceMap: false,
   }),
   typescript(),
   json({ exclude: 'package.json' }),

src/editor.ts

@@ -284,6 +284,7 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
     { value: 'hidden', label: localize('config.menu.styles.hidden') },
     { value: 'overlay', label: localize('config.menu.styles.overlay') },
     { value: 'hover', label: localize('config.menu.styles.hover') },
+    { value: 'hover-card', label: localize('config.menu.styles.hover-card') },
     { value: 'outside', label: localize('config.menu.styles.outside') },
   ];
 

src/localize/languages/en.json

@@ -236,6 +236,7 @@
       "styles": {
         "hidden": "Hidden menu",
         "hover": "Hover menu",
+        "hover-card": "Hover menu (card-wide)",
         "none": "No menu",
         "outside": "Outside menu",
         "overlay": "Overlay menu"

src/scss/card.scss

@@ -58,18 +58,22 @@ div.main.curve-bottom {
   border-bottom-right-radius: var(--ha-card-border-radius, 4px);
 }
 
-/* The 'hover' menu mode is styling applied outside of the menu itself */
-frigate-card-menu[data-style='hover'] {
+/* The 'hover' menu mode is styled applied outside of the menu itself */
+frigate-card-menu[data-style*='hover'] {
   z-index: 1;
   transition: opacity 0.5s ease;
 }
 
-.main + frigate-card-menu[data-style='hover'] {
+.main + frigate-card-menu[data-style*='hover'] {
   opacity: 0;
 }
 frigate-card-menu[data-style='hover']:hover {
   opacity: 1;
 }
+.main:hover + frigate-card-menu[data-style='hover-card'],
+frigate-card-menu[data-style='hover-card']:hover {
+  opacity: 1;
+}
 
 ha-card {
   display: flex;
@@ -98,7 +102,6 @@ ha-card.triggered {
   animation: warning-pulse 5s infinite;
 }
 
-
 frigate-card-live.hidden {
   // Live view will be rendered but hidden for live preloading.
   display: none;

src/scss/menu.scss

@@ -114,8 +114,8 @@ div.opposing {
 }
 :host(:not([data-style='outside'])[data-style='overlay'][data-position='left']) div > *,
 :host(:not([data-style='outside'])[data-style='overlay'][data-position='right']) div > *,
-:host(:not([data-style='outside'])[data-style='hover'][data-position='left']) div > *,
-:host(:not([data-style='outside'])[data-style='hover'][data-position='right']) div > *,
+:host(:not([data-style='outside'])[data-style*='hover'][data-position='left']) div > *,
+:host(:not([data-style='outside'])[data-style*='hover'][data-position='right']) div > *,
 :host(:not([data-style='outside'])[data-style='hidden'][data-position='left']) div > *,
 :host(:not([data-style='outside'])[data-style='hidden'][data-position='right']) div > * {
   // See "Awful hack" above. Note that this "cancelation" of writing mode only
@@ -154,7 +154,7 @@ div.opposing {
  ********************************************/
 
 :host([data-style='overlay']),
-:host([data-style='hover']),
+:host([data-style*=hover]),
 :host([data-style='hidden']) {
   position: absolute;
   overflow: hidden;
@@ -164,8 +164,8 @@ div.opposing {
 
 :host([data-style='overlay'][data-position='top']),
 :host([data-style='overlay'][data-position='bottom']),
-:host([data-style='hover'][data-position='top']),
-:host([data-style='hover'][data-position='bottom']),
+:host([data-style*='hover'][data-position='top']),
+:host([data-style*='hover'][data-position='bottom']),
 :host([data-style='hidden'][data-position='top'][expanded]),
 :host([data-style='hidden'][data-position='bottom'][expanded]) {
   width: 100%;
@@ -176,8 +176,8 @@ div.opposing {
 
 :host([data-style='overlay'][data-position='left']),
 :host([data-style='overlay'][data-position='right']),
-:host([data-style='hover'][data-position='left']),
-:host([data-style='hover'][data-position='right']),
+:host([data-style*='hover'][data-position='left']),
+:host([data-style*='hover'][data-position='right']),
 :host([data-style='hidden'][data-position='left'][expanded]),
 :host([data-style='hidden'][data-position='right'][expanded]) {
   height: 100%;

src/types.ts

@@ -52,7 +52,7 @@ export type FrigateCardUserSpecifiedView =
   typeof FRIGATE_CARD_VIEWS_USER_SPECIFIED[number];
 export const FRIGATE_CARD_VIEW_DEFAULT = 'live' as const;
 
-const FRIGATE_MENU_STYLES = ['none', 'hidden', 'overlay', 'hover', 'outside'] as const;
+const FRIGATE_MENU_STYLES = ['none', 'hidden', 'overlay', 'hover', 'hover-card', 'outside'] as const;
 const FRIGATE_MENU_POSITIONS = ['left', 'right', 'top', 'bottom'] as const;
 const FRIGATE_MENU_ALIGNMENTS = FRIGATE_MENU_POSITIONS;