Merge pull request #659 from dermotduffy/controls-to-submenus

Add controls to a submenu in the editor to make it less busy

src/editor.ts

@@ -119,6 +119,10 @@ const MENU_CAMERAS_DEPENDENCIES = 'cameras.dependencies';
 const MENU_CAMERAS_FRIGATE = 'cameras.frigate';
 const MENU_CAMERAS_TRIGGERS = 'cameras.triggers';
 const MENU_CAMERAS_WEBRTC = 'cameras.webrtc';
+const MENU_EVENT_GALLERY_CONTROLS = 'event_gallery.controls';
+const MENU_LIVE_CONTROLS = 'live.controls';
+const MENU_MEDIA_VIEWER_CONTROLS = 'media_viewer.controls';
+const MENU_TIMELINE_CONTROLS = 'timeline.controls';
 const MENU_OPTIONS = 'options';
 const MENU_VIEW_SCAN = 'scan';
 
@@ -730,9 +734,10 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
     },
     template: TemplateResult,
   ): TemplateResult {
+    const selected = this._expandedMenus[domain] === key;
     const submenuClasses = {
       submenu: true,
-      selected: this._expandedMenus[domain] === key,
+      selected: selected,
     };
 
     return html` <div class="${classMap(submenuClasses)}">
@@ -749,9 +754,7 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
           : ``}
         <span>${localize(labelPath)}</span>
       </div>
-      ${this._expandedMenus[domain] === key
+      ${selected ? html`<div class="values">${template}</div>` : ''}
-        ? html`<div class="values">${template}</div>`
-        : ''}
     </div>`;
   }
 
@@ -1192,6 +1195,16 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
                   CONF_LIVE_AUTO_UNMUTE,
                   this._mediaActionPositiveConditions,
                 )}
+                ${this._renderOptionSelector(
+                  CONF_LIVE_TRANSITION_EFFECT,
+                  this._transitionEffects,
+                )}
+                ${this._putInSubmenu(
+                  MENU_LIVE_CONTROLS,
+                  true,
+                  'config.live.controls.options',
+                  { name: 'mdi:gamepad' },
+                  html`
                     ${this._renderOptionSelector(
                       CONF_LIVE_CONTROLS_NEXT_PREVIOUS_STYLE,
                       this._liveNextPreviousControlStyles,
@@ -1223,13 +1236,14 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
                       CONF_LIVE_CONTROLS_THUMBNAILS_SHOW_CONTROLS,
                       defaults.live.controls.thumbnails.show_controls,
                     )}
-                ${this._renderNumberInput(CONF_LIVE_CONTROLS_TITLE_DURATION_SECONDS, {
+                    ${this._renderNumberInput(
+                      CONF_LIVE_CONTROLS_TITLE_DURATION_SECONDS,
+                      {
                         min: 0,
                         max: 60,
-                })}
+                      },
-                ${this._renderOptionSelector(
+                    )}
-                  CONF_LIVE_TRANSITION_EFFECT,
+                  `,
-                  this._transitionEffects,
                 )}
               </div>
             `
@@ -1237,10 +1251,18 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
         ${this._renderOptionSetHeader('event_gallery')}
         ${this._expandedMenus[MENU_OPTIONS] === 'event_gallery'
           ? html` <div class="values">
-              ${this._renderNumberInput(CONF_EVENT_GALLERY_CONTROLS_THUMBNAILS_SIZE, {
+              ${this._putInSubmenu(
+                MENU_EVENT_GALLERY_CONTROLS,
+                true,
+                'config.event_gallery.controls.options',
+                { name: 'mdi:gamepad' },
+                html` ${this._renderNumberInput(
+                  CONF_EVENT_GALLERY_CONTROLS_THUMBNAILS_SIZE,
+                  {
                     min: THUMBNAIL_WIDTH_MIN,
                     max: THUMBNAIL_WIDTH_MAX,
-              })}
+                  },
+                )}
                 ${this._renderSwitch(
                   CONF_EVENT_GALLERY_CONTROLS_THUMBNAILS_SHOW_DETAILS,
                   defaults.media_viewer.controls.thumbnails.show_details,
@@ -1248,6 +1270,7 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
                 ${this._renderSwitch(
                   CONF_EVENT_GALLERY_CONTROLS_THUMBNAILS_SHOW_CONTROLS,
                   defaults.media_viewer.controls.thumbnails.show_controls,
+                )}`,
               )}
             </div>`
           : ''}
@@ -1279,12 +1302,24 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
                 defaults.media_viewer.lazy_load,
               )}
               ${this._renderOptionSelector(
+                CONF_MEDIA_VIEWER_TRANSITION_EFFECT,
+                this._transitionEffects,
+              )}
+              ${this._putInSubmenu(
+                MENU_MEDIA_VIEWER_CONTROLS,
+                true,
+                'config.media_viewer.controls.options',
+                { name: 'mdi:gamepad' },
+                html` ${this._renderOptionSelector(
                   CONF_MEDIA_VIEWER_CONTROLS_NEXT_PREVIOUS_STYLE,
                   this._eventViewerNextPreviousControlStyles,
                 )}
-              ${this._renderNumberInput(CONF_MEDIA_VIEWER_CONTROLS_NEXT_PREVIOUS_SIZE, {
+                ${this._renderNumberInput(
+                  CONF_MEDIA_VIEWER_CONTROLS_NEXT_PREVIOUS_SIZE,
+                  {
                     min: BUTTON_SIZE_MIN,
-              })}
+                  },
+                )}
                 ${this._renderOptionSelector(
                   CONF_MEDIA_VIEWER_CONTROLS_THUMBNAILS_MODE,
                   this._thumbnailModes,
@@ -1308,10 +1343,7 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
                 ${this._renderNumberInput(
                   CONF_MEDIA_VIEWER_CONTROLS_TITLE_DURATION_SECONDS,
                   { min: 0, max: 60 },
-              )}
+                )}`,
-              ${this._renderOptionSelector(
-                CONF_MEDIA_VIEWER_TRANSITION_EFFECT,
-                this._transitionEffects,
               )}
             </div>`
           : ''}
@@ -1336,7 +1368,12 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
                 CONF_TIMELINE_SHOW_RECORDINGS,
                 defaults.timeline.show_recordings,
               )}
-              ${this._renderOptionSelector(
+              ${this._putInSubmenu(
+                MENU_TIMELINE_CONTROLS,
+                true,
+                'config.timeline.controls.options',
+                { name: 'mdi:gamepad' },
+                html` ${this._renderOptionSelector(
                   CONF_TIMELINE_CONTROLS_THUMBNAILS_MODE,
                   this._thumbnailModes,
                 )}
@@ -1351,6 +1388,7 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
                 ${this._renderSwitch(
                   CONF_TIMELINE_CONTROLS_THUMBNAILS_SHOW_CONTROLS,
                   defaults.timeline.controls.thumbnails.show_controls,
+                )}`,
               )}
             </div>`
           : ''}

src/localize/languages/en.json

@@ -91,6 +91,7 @@
     },
     "event_gallery": {
       "controls": {
+        "options":"Event Gallery Controls",
         "thumbnails": {
           "size": "Event Gallery thumbnails size in pixels",
           "show_details": "Show event details with thumbnails",
@@ -111,6 +112,7 @@
         "slide": "Slide transition"
       },
       "controls": {
+        "options":"Media Viewer Controls",
         "next_previous": {
           "style": "Media Viewer next & previous control style",
           "size": "Media Viewer next & previous control size in pixels",
@@ -157,6 +159,7 @@
       "auto_unmute": "Automatically unmute live cameras",
       "transition_effect": "Live camera transition effect",
       "controls": {
+        "options":"Live Controls",
         "next_previous": {
           "style": "Live view next & previous control style",
           "size": "Live view next & previous control size in pixels",
@@ -250,6 +253,7 @@
         "snapshots": "Snapshots"
       },
       "controls": {
+        "options":"Timeline Controls",
         "thumbnails": {
           "mode": "Timeline thumbnails mode",
           "size": "Timeline thumbnails size in pixels",

src/scss/editor.scss

@@ -25,6 +25,7 @@
 .values {
   background: var(--secondary-background-color);
   display: grid;
+  margin-bottom: 10px;
 }
 div.upgrade {
   width: auto;