diff --git a/README.md b/README.md index f6053173..0cb0e155 100644 --- a/README.md +++ b/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. | Menu hidden | |`overlay`| Overlay the menu over the card contents. The Frigate button shows the default view. | Menu overlaid | -|`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. | Menu overlaid | +|`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. | Menu overlaid | +|`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. | Menu overlaid | |`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. | Menu above | |`none`| No menu is shown. | No Menu | diff --git a/rollup.config.js b/rollup.config.js index e83af22e..bc530a8f 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -46,6 +46,7 @@ const plugins = [ }), commonjs({ include: 'node_modules/**', + sourceMap: false, }), typescript(), json({ exclude: 'package.json' }), diff --git a/src/editor.ts b/src/editor.ts index ba05793e..4c682108 100644 --- a/src/editor.ts +++ b/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') }, ]; diff --git a/src/localize/languages/en.json b/src/localize/languages/en.json index b8b16753..92491f85 100644 --- a/src/localize/languages/en.json +++ b/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" diff --git a/src/scss/card.scss b/src/scss/card.scss index 85786508..55cf084c 100644 --- a/src/scss/card.scss +++ b/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; diff --git a/src/scss/menu.scss b/src/scss/menu.scss index fc3dc84d..45e5e6ba 100644 --- a/src/scss/menu.scss +++ b/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%; diff --git a/src/types.ts b/src/types.ts index aaf68b98..870f117a 100644 --- a/src/types.ts +++ b/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;