Initial split of menu mode.

src/card.ts

@@ -1203,6 +1203,9 @@ export class FrigateCard extends LitElement {
     };
 
     const actions = this._getMergedActions();
+    const renderMenuAbove =
+      this._getConfig().menu.style === 'outside' &&
+      this._getConfig().menu.position === 'top';
 
     return html` <ha-card
       .actionHandler=${actionHandler({
@@ -1216,7 +1219,7 @@ export class FrigateCard extends LitElement {
       @frigate-card:media-show=${this._mediaShowHandler}
       @frigate-card:render=${() => this.requestUpdate()}
     >
-      ${this._getConfig().menu.mode == 'above' ? this._renderMenu() : ''}
+      ${renderMenuAbove ? this._renderMenu() : ''}
       <div class="container outer" style="${styleMap(outerStyle)}">
         <div class="${classMap(contentClasses)}">
           ${this._cameras === undefined
@@ -1261,7 +1264,7 @@ export class FrigateCard extends LitElement {
           }
         </div>
       </div>
-      ${this._getConfig().menu.mode != 'above' ? this._renderMenu() : ''}
+      ${!renderMenuAbove ? this._renderMenu() : ''}
     </ha-card>`;
   }
 

src/components/menu.ts

@@ -64,8 +64,11 @@ export class FrigateCardMenu extends LitElement {
         `${menuConfig.button_size}px`,
       );
     }
-    // Store the menu mode as an attribute (used for CSS attribute selectors).
-    this.setAttribute('data-mode', menuConfig.mode);
+    // Store the menu style, position and alignment as attributes (used for
+    // styling).
+    this.setAttribute('data-style', menuConfig.style);
+    this.setAttribute('data-position', menuConfig.position);
+    this.setAttribute('data-alignment', menuConfig.alignment);
   }
   @state()
   protected _menuConfig?: MenuConfig;
@@ -82,7 +85,7 @@ export class FrigateCardMenu extends LitElement {
    * @returns `true` if the menu is hiding, `false` otherwise.
    */
   static isHidingMenu(menuConfig: MenuConfig | undefined): boolean {
-    return menuConfig?.mode.startsWith('hidden-') ?? false;
+    return menuConfig?.style === 'hidden' ?? false;
   }
 
   /**
@@ -265,15 +268,14 @@ export class FrigateCardMenu extends LitElement {
     if (!this._menuConfig) {
       return;
     }
-    const mode = this._menuConfig.mode;
-
-    if (mode == 'none') {
+    const style = this._menuConfig.style;
+    if (style === 'none') {
       return;
     }
 
     // If the hidden menu isn't expanded, only show the Frigate button.
     const buttons =
-      !mode.startsWith('hidden-') || this.expanded
+      style !== 'hidden' || this.expanded
         ? this.buttons
         : this.buttons.filter((button) => button.icon === FRIGATE_BUTTON_MENU_ICON);
     return html` ${buttons.map((button) => this._renderButton(button))} `;

src/config-mgmt.ts

@@ -19,7 +19,6 @@ import {
   CONF_LIVE_WEBRTC_CARD,
   CONF_MENU,
   CONF_MENU_BUTTON_SIZE,
-  CONF_MENU_MODE,
   CONF_OVERRIDES,
   CONF_VIEW_DEFAULT,
   CONF_VIEW_TIMEOUT_SECONDS,
@@ -415,7 +414,7 @@ const UPGRADES = [
   upgradeMoveTo('autoplay_clip', 'event_viewer.autoplay_clip'),
   upgradeMoveTo('controls.nextprev', CONF_EVENT_VIEWER_CONTROLS_NEXT_PREVIOUS_STYLE),
   upgradeMoveTo('controls.nextprev_size', CONF_EVENT_VIEWER_CONTROLS_NEXT_PREVIOUS_SIZE),
-  upgradeMoveTo('menu_mode', CONF_MENU_MODE),
+  upgradeMoveTo('menu_mode', "menu.mode"),
   upgradeMoveTo('menu_buttons', 'menu.buttons'),
   upgradeMoveTo('menu_button_size', CONF_MENU_BUTTON_SIZE),
   upgradeMoveTo('image', 'image.src', isNotObject),

src/const.ts

@@ -108,6 +108,9 @@ export const CONF_TIMELINE_CONTROLS_THUMBNAILS_SHOW_CONTROLS =
 `${CONF_TIMELINE}.controls.thumbnails.show_controls` as const;
 
 export const CONF_MENU = 'menu' as const;
+export const CONF_MENU_ALIGNMENT = `${CONF_MENU}.alignment` as const;
+export const CONF_MENU_POSITION = `${CONF_MENU}.position` as const;
+export const CONF_MENU_STYLE = `${CONF_MENU}.style` as const;
 export const CONF_MENU_BUTTONS_FRIGATE = `${CONF_MENU}.buttons.frigate` as const;
 export const CONF_MENU_BUTTONS_FRIGATE_UI = `${CONF_MENU}.buttons.frigate_ui` as const;
 export const CONF_MENU_BUTTONS_FRIGATE_FULLSCREEN =
@@ -119,7 +122,6 @@ export const CONF_MENU_BUTTONS_CLIPS = `${CONF_MENU}.buttons.clips` as const;
 export const CONF_MENU_BUTTONS_SNAPSHOTS = `${CONF_MENU}.buttons.snapshots` as const;
 export const CONF_MENU_BUTTONS_IMAGE = `${CONF_MENU}.buttons.image` as const;
 export const CONF_MENU_BUTTON_SIZE = `${CONF_MENU}.button_size` as const;
-export const CONF_MENU_MODE = `${CONF_MENU}.mode` as const;
 
 export const CONF_DIMENSIONS = 'dimensions' as const;
 export const CONF_DIMENSIONS_ASPECT_RATIO = `${CONF_DIMENSIONS}.aspect_ratio` as const;

src/editor.ts

@@ -64,6 +64,7 @@ import {
   CONF_LIVE_LAZY_UNLOAD,
   CONF_LIVE_PRELOAD,
   CONF_LIVE_TRANSITION_EFFECT,
+  CONF_MENU_ALIGNMENT,
   CONF_MENU_BUTTONS_CLIPS,
   CONF_MENU_BUTTONS_FRIGATE,
   CONF_MENU_BUTTONS_FRIGATE_DOWNLOAD,
@@ -73,7 +74,8 @@ import {
   CONF_MENU_BUTTONS_LIVE,
   CONF_MENU_BUTTONS_SNAPSHOTS,
   CONF_MENU_BUTTON_SIZE,
-  CONF_MENU_MODE,
+  CONF_MENU_POSITION,
+  CONF_MENU_STYLE,
   CONF_TIMELINE_CLUSTERING_THRESHOLD,
   CONF_TIMELINE_CONTROLS_THUMBNAILS_MODE,
   CONF_TIMELINE_CONTROLS_THUMBNAILS_SHOW_CONTROLS,
@@ -89,11 +91,7 @@ import {
   CONF_VIEW_UPDATE_FORCE,
   CONF_VIEW_UPDATE_SECONDS,
 } from './const.js';
-import {
-  arrayMove,
-  getCameraID,
-  getCameraTitle,
-} from './common.js';
+import { arrayMove, getCameraID, getCameraTitle } from './common.js';
 import {
   copyConfig,
   deleteConfigValue,
@@ -219,23 +217,29 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
     { value: 'current', label: localize('config.view.views.current') },
   ];
 
-  protected _menuModes: EditorSelectOption[] = [
+  protected _menuStyles: EditorSelectOption[] = [
     { value: '', label: '' },
-    { value: 'none', label: localize('config.menu.modes.none') },
-    { value: 'hidden-top', label: localize('config.menu.modes.hidden-top') },
-    { value: 'hidden-left', label: localize('config.menu.modes.hidden-left') },
-    { value: 'hidden-bottom', label: localize('config.menu.modes.hidden-bottom') },
-    { value: 'hidden-right', label: localize('config.menu.modes.hidden-right') },
-    { value: 'overlay-top', label: localize('config.menu.modes.overlay-top') },
-    { value: 'overlay-left', label: localize('config.menu.modes.overlay-left') },
-    { value: 'overlay-bottom', label: localize('config.menu.modes.overlay-bottom') },
-    { value: 'overlay-right', label: localize('config.menu.modes.overlay-right') },
-    { value: 'hover-top', label: localize('config.menu.modes.hover-top') },
-    { value: 'hover-left', label: localize('config.menu.modes.hover-left') },
-    { value: 'hover-bottom', label: localize('config.menu.modes.hover-bottom') },
-    { value: 'hover-right', label: localize('config.menu.modes.hover-right') },
-    { value: 'above', label: localize('config.menu.modes.above') },
-    { value: 'below', label: localize('config.menu.modes.below') },
+    { value: 'none', label: localize('config.menu.styles.none') },
+    { 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: 'outside', label: localize('config.menu.styles.outside') },
+  ];
+
+  protected _menuPositions: EditorSelectOption[] = [
+    { value: '', label: '' },
+    { value: 'left', label: localize('config.menu.positions.left') },
+    { value: 'right', label: localize('config.menu.positions.right') },
+    { value: 'top', label: localize('config.menu.positions.top') },
+    { value: 'bottom', label: localize('config.menu.positions.bottom') },
+  ];
+
+  protected _menuAlignments: EditorSelectOption[] = [
+    { value: '', label: '' },
+    { value: 'left', label: localize('config.menu.alignments.left') },
+    { value: 'right', label: localize('config.menu.alignments.right') },
+    { value: 'top', label: localize('config.menu.alignments.top') },
+    { value: 'bottom', label: localize('config.menu.alignments.bottom') },
   ];
 
   protected _eventViewerNextPreviousControlStyles: EditorSelectOption[] = [
@@ -878,7 +882,9 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
         ${options.menu.show
           ? html`
               <div class="values">
-                ${this._renderOptionSelector(CONF_MENU_MODE, this._menuModes)}
+                ${this._renderOptionSelector(CONF_MENU_STYLE, this._menuStyles)}
+                ${this._renderOptionSelector(CONF_MENU_POSITION, this._menuPositions)}
+                ${this._renderOptionSelector(CONF_MENU_ALIGNMENT, this._menuAlignments)}
                 ${this._renderNumberInput(CONF_MENU_BUTTON_SIZE, BUTTON_SIZE_MIN)}
                 ${this._renderSwitch(
                   CONF_MENU_BUTTONS_FRIGATE,

src/localize/languages/en.json

@@ -164,23 +164,27 @@
         "download": "Download event media",
         "cameras": "Select camera"
       },
-      "mode": "Menu mode",
-      "modes": {
+      "style": "Menu style",
+      "styles": {
         "none": "No menu",
-        "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",
-        "hover-top": "Hover top",
-        "hover-left": "Hover left",
-        "hover-bottom": "Hover bottom",
-        "hover-right": "Hover right",
-        "above": "Above",
-        "below": "Below"
+        "hidden": "Hidden menu",
+        "overlay": "Overlay menu",
+        "hover": "Hover menu",
+        "outside": "Outside menu"
+      },
+      "position": "Menu position",
+      "positions": {
+        "left": "Positioned on the left",
+        "right": "Positioned on the right",
+        "top": "Positioned on the top",
+        "bottom": "Positioned on the bottom"
+      },
+      "alignment": "Menu alignment",
+      "alignments": {
+        "left": "Aligned to the left",
+        "right": "Aligned to the right",
+        "top": "Aligned to the top",
+        "bottom": "Aligned to the bottom"
       },
       "button_size": "Menu button size in pixels"
     },

src/scss/card.scss

@@ -29,11 +29,14 @@
   height: inherit;
   margin: auto;
   overflow: auto;
-  -ms-overflow-style: none; /* Hide scrollbar: IE and Edge */
-  scrollbar-width: none;    /* Hide scrollbar: Firefox */
   display: flex;
   align-items: center;
   justify-content: center;
+
+  // Hide scrollbar: Firefox
+  scrollbar-width: none;
+  // Hide scrollbar: IE and Edge
+  -ms-overflow-style: none;
 }
 
 /* Hide scrollbar for Chrome, Safari and Opera */
@@ -51,16 +54,17 @@
 }
 
 /* The 'hover' menu mode is styling applied outside of the menu itself */
-frigate-card-menu[data-mode^=hover-] {
+frigate-card-menu[data-style='hover'] {
   z-index: 1;
   transition: opacity 0.5s ease;
 }
 
-.outer + frigate-card-menu[data-mode^=hover-] {
-  opacity: 0.0;
+.outer + frigate-card-menu[data-style='hover'] {
+  opacity: 0;
 }
-.outer:hover + frigate-card-menu[data-mode^=hover-], frigate-card-menu[data-mode^=hover-]:hover {
-  opacity: 1.0;
+.outer:hover + frigate-card-menu[data-style='hover'],
+frigate-card-menu[data-mode='hover']:hover {
+  opacity: 1;
 }
 
 ha-card {
@@ -78,7 +82,7 @@ ha-card {
   border-radius: var(--ha-card-border-radius, 4px);
 }
 
-frigate-card-live.hidden  {
+frigate-card-live.hidden {
   // Live view will be rendered but hidden for live preloading.
   display: none;
 }

src/scss/menu.scss

@@ -14,23 +14,37 @@
   flex-wrap: wrap;
 }
 
-:host([data-mode="above"]),:host([data-mode="below"]) {
+:host([data-style='outside']) {
   width: 100%;
   background: var(--secondary-background-color);
 }
-:host([data-mode="above"]) {
+:host([data-mode='outside'][data-position='top']) {
   border-top-left-radius: var(--ha-card-border-radius, 4px);
   border-top-right-radius: var(--ha-card-border-radius, 4px);
 }
-:host([data-mode="below"]) {
+:host([data-mode='outside'][data-position='below']) {
   border-bottom-left-radius: var(--ha-card-border-radius, 4px);
   border-bottom-right-radius: var(--ha-card-border-radius, 4px);
 }
 
-:host([data-mode$="-left"]) {
-  left: 0px;
+:host([data-position='top']),
+:host([data-alignment='top']) {
   top: 0px;
+}
+:host([data-position='bottom']),
+:host([data-alignment='bottom']) {
+  bottom: 0px;
+}
+:host([data-position='left']),
+:host([data-alignment='left']) {
+  left: 0px;
+}
+:host([data-position='right']),
+:host([data-alignment='right']) {
+  right: 0px;
+}
 
+:host([data-position='left']) {
   // Awful hack: Flexbox column wrapping doesn't work properly in most major
   // browsers -- the element boundary does not expand to cover the full wrapped
   // content as it should. This results in the wrapped 'content' appearing
@@ -43,66 +57,63 @@
   // - https://bugs.chromium.org/p/chromium/issues/detail?id=507397
   writing-mode: vertical-lr;
 }
-
-:host([data-mode$="-right"]) {
-  right: 0px;
-  top: 0px;
-
+:host([data-position='right']) {
   // See "Awful hack" above.
   writing-mode: vertical-rl;
 }
 
-:host([data-mode$="-top"]) {
-  left: 0px;
-  top: 0px;
+:host([data-position='left'][data-alignment='bottom']),
+:host([data-position='right'][data-alignment='bottom']),
+:host([data-position='top'][data-alignment='right']),
+:host([data-position='bottom'][data-alignment='right']) {
+  flex-direction: row-reverse;
 }
 
-:host([data-mode$="-bottom"]) {
-  left: 0px;
-  bottom: 0px;
-
+:host([data-position='bottom']) {
   // If the menu has more content that allows, "wrap upwards" to keep the
   // Frigate button in the same place.
   flex-wrap: wrap-reverse;
 }
 
-:host([data-mode^="overlay-"]),:host([data-mode^="hover-"]),:host([data-mode^="hidden-"]) {
+:host([data-style='overlay']),
+:host([data-style='hover']),
+:host([data-style='hidden']) {
   position: absolute;
   overflow: hidden;
   width: calc(var(--frigate-card-menu-button-size) + 6px);
   height: calc(var(--frigate-card-menu-button-size) + 6px);
 }
 
-:host([data-mode="overlay-top"]),
-:host([data-mode="overlay-bottom"]),
-:host([data-mode="hover-top"]),
-:host([data-mode="hover-bottom"]),
-:host([data-mode="hidden-top"][expanded]),
-:host([data-mode="hidden-bottom"][expanded]) {
+: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='hidden'][data-position='top'][expanded]),
+:host([data-style='hidden'][data-position='bottom'][expanded]) {
   width: 100%;
   height: auto;
   overflow: visible;
-  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));
 }
 
-:host([data-mode="overlay-left"]),
-:host([data-mode="overlay-right"]),
-:host([data-mode="hover-left"]),
-:host([data-mode="hover-right"]),
-:host([data-mode="hidden-left"][expanded]),
-:host([data-mode="hidden-right"][expanded]) {
+: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='hidden'][data-position='left'][expanded]),
+:host([data-style='hidden'][data-position='right'][expanded]) {
   height: 100%;
   width: auto;
   overflow: visible;
-  background: linear-gradient(180deg, rgba(0,0,0,0.3), rgba(0,0,0,0));
+  background: linear-gradient(180deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0));
 }
 
-:host([data-mode="overlay-left"]) > *,
-:host([data-mode="hover-left"]) > *,
-:host([data-mode="hidden-left"]) > *,
-:host([data-mode="overlay-right"]) > *,
-:host([data-mode="hover-right"]) > *,
-:host([data-mode="hidden-right"]) > * {
+: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='hidden'][data-position='left']) > *,
+:host([data-style='hidden'][data-position='right']) > * {
   // See "Awful hack" above.
   writing-mode: horizontal-tb;
 }

src/types.ts

@@ -53,23 +53,21 @@ const FRIGATE_CARD_VIEWS = [
 
 export type FrigateCardView = typeof FRIGATE_CARD_VIEWS[number];
 
-const FRIGATE_MENU_MODES = [
+const FRIGATE_MENU_STYLES = [
   'none',
-  'hidden-top',
-  'hidden-left',
-  'hidden-bottom',
-  'hidden-right',
-  'overlay-top',
-  'overlay-left',
-  'overlay-bottom',
-  'overlay-right',
-  'hover-top',
-  'hover-left',
-  'hover-bottom',
-  'hover-right',
-  'above',
-  'below',
+  'hidden',
+  'overlay',
+  'hover',
+  'outside',
 ] as const;
+const FRIGATE_MENU_POSITIONS = [
+  'left',
+  'right',
+  'top',
+  'bottom',
+] as const;
+const FRIGATE_MENU_ALIGNMENTS = FRIGATE_MENU_POSITIONS;
+
 const LIVE_PROVIDERS = ['auto', 'ha', 'frigate-jsmpeg', 'webrtc-card'] as const;
 export type LiveProvider = typeof LIVE_PROVIDERS[number];
 
@@ -615,7 +613,9 @@ export type LiveConfig = z.infer<typeof liveConfigSchema>;
  * Menu configuration section.
  */
 const menuConfigDefault = {
-  mode: 'hidden-top' as const,
+  style: 'hidden' as const,
+  position: 'top' as const,
+  alignment: 'left' as const,
   buttons: {
     frigate: true,
     cameras: true,
@@ -633,7 +633,9 @@ const menuConfigDefault = {
 
 const menuConfigSchema = z
   .object({
-    mode: z.enum(FRIGATE_MENU_MODES).default(menuConfigDefault.mode),
+    style: z.enum(FRIGATE_MENU_STYLES).default(menuConfigDefault.style),
+    position: z.enum(FRIGATE_MENU_POSITIONS).default(menuConfigDefault.position),
+    alignment: z.enum(FRIGATE_MENU_ALIGNMENTS).default(menuConfigDefault.alignment),
     buttons: z
       .object({
         frigate: z.boolean().default(menuConfigDefault.buttons.frigate),