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

2022-06-10 14:27:58 -07:00
parent 2aed9a5d6a
commit e1b5cd3d43
3 changed files with 139 additions and 96 deletions
@@ -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
-        ? html`<div class="values">${template}</div>`
-        : ''}
+      ${selected ? html`<div class="values">${template}</div>` : ''}
    </div>`;
  }

@@ -1192,62 +1195,82 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
                  CONF_LIVE_AUTO_UNMUTE,
                  this._mediaActionPositiveConditions,
                )}
-                ${this._renderOptionSelector(
-                  CONF_LIVE_CONTROLS_NEXT_PREVIOUS_STYLE,
-                  this._liveNextPreviousControlStyles,
-                )}
-                ${this._renderNumberInput(CONF_LIVE_CONTROLS_NEXT_PREVIOUS_SIZE, {
-                  min: BUTTON_SIZE_MIN,
-                })}
-                ${this._renderOptionSelector(
-                  CONF_LIVE_CONTROLS_THUMBNAILS_MODE,
-                  this._thumbnailModes,
-                )}
-                ${this._renderOptionSelector(
-                  CONF_LIVE_CONTROLS_THUMBNAILS_MEDIA,
-                  this._thumbnailMedias,
-                )}
-                ${this._renderNumberInput(CONF_LIVE_CONTROLS_THUMBNAILS_SIZE, {
-                  min: THUMBNAIL_WIDTH_MIN,
-                  max: THUMBNAIL_WIDTH_MAX,
-                })}
-                ${this._renderOptionSelector(
-                  CONF_LIVE_CONTROLS_TITLE_MODE,
-                  this._titleModes,
-                )}
-                ${this._renderSwitch(
-                  CONF_LIVE_CONTROLS_THUMBNAILS_SHOW_DETAILS,
-                  defaults.live.controls.thumbnails.show_details,
-                )}
-                ${this._renderSwitch(
-                  CONF_LIVE_CONTROLS_THUMBNAILS_SHOW_CONTROLS,
-                  defaults.live.controls.thumbnails.show_controls,
-                )}
-                ${this._renderNumberInput(CONF_LIVE_CONTROLS_TITLE_DURATION_SECONDS, {
-                  min: 0,
-                  max: 60,
-                })}
                ${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,
+                    )}
+                    ${this._renderNumberInput(CONF_LIVE_CONTROLS_NEXT_PREVIOUS_SIZE, {
+                      min: BUTTON_SIZE_MIN,
+                    })}
+                    ${this._renderOptionSelector(
+                      CONF_LIVE_CONTROLS_THUMBNAILS_MODE,
+                      this._thumbnailModes,
+                    )}
+                    ${this._renderOptionSelector(
+                      CONF_LIVE_CONTROLS_THUMBNAILS_MEDIA,
+                      this._thumbnailMedias,
+                    )}
+                    ${this._renderNumberInput(CONF_LIVE_CONTROLS_THUMBNAILS_SIZE, {
+                      min: THUMBNAIL_WIDTH_MIN,
+                      max: THUMBNAIL_WIDTH_MAX,
+                    })}
+                    ${this._renderOptionSelector(
+                      CONF_LIVE_CONTROLS_TITLE_MODE,
+                      this._titleModes,
+                    )}
+                    ${this._renderSwitch(
+                      CONF_LIVE_CONTROLS_THUMBNAILS_SHOW_DETAILS,
+                      defaults.live.controls.thumbnails.show_details,
+                    )}
+                    ${this._renderSwitch(
+                      CONF_LIVE_CONTROLS_THUMBNAILS_SHOW_CONTROLS,
+                      defaults.live.controls.thumbnails.show_controls,
+                    )}
+                    ${this._renderNumberInput(
+                      CONF_LIVE_CONTROLS_TITLE_DURATION_SECONDS,
+                      {
+                        min: 0,
+                        max: 60,
+                      },
+                    )}
+                  `,
+                )}
              </div>
            `
          : ''}
        ${this._renderOptionSetHeader('event_gallery')}
        ${this._expandedMenus[MENU_OPTIONS] === 'event_gallery'
          ? html` <div class="values">
-              ${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,
-              )}
-              ${this._renderSwitch(
-                CONF_EVENT_GALLERY_CONTROLS_THUMBNAILS_SHOW_CONTROLS,
-                defaults.media_viewer.controls.thumbnails.show_controls,
+              ${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,
+                )}
+                ${this._renderSwitch(
+                  CONF_EVENT_GALLERY_CONTROLS_THUMBNAILS_SHOW_CONTROLS,
+                  defaults.media_viewer.controls.thumbnails.show_controls,
+                )}`,
              )}
            </div>`
          : ''}
@@ -1278,41 +1301,50 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
                CONF_MEDIA_VIEWER_LAZY_LOAD,
                defaults.media_viewer.lazy_load,
              )}
-              ${this._renderOptionSelector(
-                CONF_MEDIA_VIEWER_CONTROLS_NEXT_PREVIOUS_STYLE,
-                this._eventViewerNextPreviousControlStyles,
-              )}
-              ${this._renderNumberInput(CONF_MEDIA_VIEWER_CONTROLS_NEXT_PREVIOUS_SIZE, {
-                min: BUTTON_SIZE_MIN,
-              })}
-              ${this._renderOptionSelector(
-                CONF_MEDIA_VIEWER_CONTROLS_THUMBNAILS_MODE,
-                this._thumbnailModes,
-              )}
-              ${this._renderNumberInput(CONF_MEDIA_VIEWER_CONTROLS_THUMBNAILS_SIZE, {
-                min: THUMBNAIL_WIDTH_MIN,
-                max: THUMBNAIL_WIDTH_MAX,
-              })}
-              ${this._renderSwitch(
-                CONF_MEDIA_VIEWER_CONTROLS_THUMBNAILS_SHOW_DETAILS,
-                defaults.media_viewer.controls.thumbnails.show_details,
-              )}
-              ${this._renderSwitch(
-                CONF_MEDIA_VIEWER_CONTROLS_THUMBNAILS_SHOW_CONTROLS,
-                defaults.media_viewer.controls.thumbnails.show_controls,
-              )}
-              ${this._renderOptionSelector(
-                CONF_MEDIA_VIEWER_CONTROLS_TITLE_MODE,
-                this._titleModes,
-              )}
-              ${this._renderNumberInput(
-                CONF_MEDIA_VIEWER_CONTROLS_TITLE_DURATION_SECONDS,
-                { min: 0, max: 60 },
-              )}
              ${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,
+                  {
+                    min: BUTTON_SIZE_MIN,
+                  },
+                )}
+                ${this._renderOptionSelector(
+                  CONF_MEDIA_VIEWER_CONTROLS_THUMBNAILS_MODE,
+                  this._thumbnailModes,
+                )}
+                ${this._renderNumberInput(CONF_MEDIA_VIEWER_CONTROLS_THUMBNAILS_SIZE, {
+                  min: THUMBNAIL_WIDTH_MIN,
+                  max: THUMBNAIL_WIDTH_MAX,
+                })}
+                ${this._renderSwitch(
+                  CONF_MEDIA_VIEWER_CONTROLS_THUMBNAILS_SHOW_DETAILS,
+                  defaults.media_viewer.controls.thumbnails.show_details,
+                )}
+                ${this._renderSwitch(
+                  CONF_MEDIA_VIEWER_CONTROLS_THUMBNAILS_SHOW_CONTROLS,
+                  defaults.media_viewer.controls.thumbnails.show_controls,
+                )}
+                ${this._renderOptionSelector(
+                  CONF_MEDIA_VIEWER_CONTROLS_TITLE_MODE,
+                  this._titleModes,
+                )}
+                ${this._renderNumberInput(
+                  CONF_MEDIA_VIEWER_CONTROLS_TITLE_DURATION_SECONDS,
+                  { min: 0, max: 60 },
+                )}`,
+              )}
            </div>`
          : ''}
        ${this._renderOptionSetHeader('image')}
@@ -1336,21 +1368,27 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
                CONF_TIMELINE_SHOW_RECORDINGS,
                defaults.timeline.show_recordings,
              )}
-              ${this._renderOptionSelector(
-                CONF_TIMELINE_CONTROLS_THUMBNAILS_MODE,
-                this._thumbnailModes,
-              )}
-              ${this._renderNumberInput(CONF_TIMELINE_CONTROLS_THUMBNAILS_SIZE, {
-                min: THUMBNAIL_WIDTH_MIN,
-                max: THUMBNAIL_WIDTH_MAX,
-              })}
-              ${this._renderSwitch(
-                CONF_TIMELINE_CONTROLS_THUMBNAILS_SHOW_DETAILS,
-                defaults.timeline.controls.thumbnails.show_details,
-              )}
-              ${this._renderSwitch(
-                CONF_TIMELINE_CONTROLS_THUMBNAILS_SHOW_CONTROLS,
-                defaults.timeline.controls.thumbnails.show_controls,
+              ${this._putInSubmenu(
+                MENU_TIMELINE_CONTROLS,
+                true,
+                'config.timeline.controls.options',
+                { name: 'mdi:gamepad' },
+                html` ${this._renderOptionSelector(
+                  CONF_TIMELINE_CONTROLS_THUMBNAILS_MODE,
+                  this._thumbnailModes,
+                )}
+                ${this._renderNumberInput(CONF_TIMELINE_CONTROLS_THUMBNAILS_SIZE, {
+                  min: THUMBNAIL_WIDTH_MIN,
+                  max: THUMBNAIL_WIDTH_MAX,
+                })}
+                ${this._renderSwitch(
+                  CONF_TIMELINE_CONTROLS_THUMBNAILS_SHOW_DETAILS,
+                  defaults.timeline.controls.thumbnails.show_details,
+                )}
+                ${this._renderSwitch(
+                  CONF_TIMELINE_CONTROLS_THUMBNAILS_SHOW_CONTROLS,
+                  defaults.timeline.controls.thumbnails.show_controls,
+                )}`,
              )}
            </div>`
          : ''}
@@ -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",
@@ -25,6 +25,7 @@
 .values {
  background: var(--secondary-background-color);
  display: grid;
+  margin-bottom: 10px;
 }
 div.upgrade {
  width: auto;