Improve editor submenu formatting.

src/editor.ts

@@ -1,6 +1,7 @@
 import { fireEvent, HomeAssistant, LovelaceCardEditor } from 'custom-card-helpers';
 import { CSSResultGroup, html, LitElement, TemplateResult, unsafeCSS } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
 import {
   copyConfig,
   deleteConfigValue,
@@ -8,7 +9,7 @@ import {
   getConfigValue,
   isConfigUpgradeable,
   setConfigValue,
-  upgradeConfig
+  upgradeConfig,
 } from './config-mgmt.js';
 import {
   CONF_CAMERAS,
@@ -93,7 +94,7 @@ import {
   CONF_VIEW_TIMEOUT_SECONDS,
   CONF_VIEW_UPDATE_CYCLE_CAMERA,
   CONF_VIEW_UPDATE_FORCE,
-  CONF_VIEW_UPDATE_SECONDS
+  CONF_VIEW_UPDATE_SECONDS,
 } from './const.js';
 import { localize } from './localize/localize.js';
 import frigate_card_editor_style from './scss/editor.scss';
@@ -104,7 +105,7 @@ import {
   RawFrigateCardConfig,
   RawFrigateCardConfigArray,
   THUMBNAIL_WIDTH_MAX,
-  THUMBNAIL_WIDTH_MIN
+  THUMBNAIL_WIDTH_MIN,
 } from './types.js';
 import { arrayMove } from './utils/basic.js';
 import { getCameraID, getCameraTitle } from './utils/camera.js';
@@ -598,9 +599,19 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
   }
 
   protected _renderViewScanMenu(): TemplateResult {
+    const selected = !!this._expandedMenus[MENU_VIEW_SCAN];
+    const submenuClasses = {
+      submenu: true,
+      selected: selected,
+    };
+    const headerClasses = {
+      'submenu-header': true,
+      selected: selected,
+    };
     return html`
+      <div class="${classMap(submenuClasses)}">
         <div
-        class="submenu-header"
+          class="${classMap(headerClasses)}"
           @click=${this._toggleMenu}
           .domain=${MENU_VIEW_SCAN}
           .key=${true}
@@ -633,6 +644,7 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
               })}
             </div>`
           : ''}
+      </div>
     `;
   }
 
@@ -647,10 +659,20 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
       { value: 'matching', label: localize('config.menu.buttons.alignments.matching') },
       { value: 'opposing', label: localize('config.menu.buttons.alignments.opposing') },
     ];
+    const selected = this._expandedMenus[MENU_BUTTONS] === button;
+    const submenuClasses = {
+      submenu: true,
+      selected: selected,
+    };
+    const headerClasses = {
+      'submenu-header': true,
+      selected: selected,
+    };
 
     return html`
+      <div class="${classMap(submenuClasses)}">
         <div
-        class="submenu-header"
+          class="${classMap(headerClasses)}"
           @click=${this._toggleMenu}
           .domain=${MENU_BUTTONS}
           .key=${button}
@@ -689,38 +711,6 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
               })}
             </div>`
           : ''}
-    `;
-  }
-
-  /**
-   * Render a camera header.
-   * @param cameraIndex The index of the camera to edit/add.
-   * @param cameraConfig The configuration of the camera in question.
-   * @param addNewCamera Whether or not this is a header to add a new camera.
-   * @returns A rendered template.
-   */
-  protected _renderCameraHeader(
-    cameraIndex: number,
-    cameraConfig?: RawFrigateCardConfig,
-    addNewCamera?: boolean,
-  ): TemplateResult {
-    return html`
-      <div
-        class="submenu-header"
-        @click=${this._toggleMenu}
-        .domain=${MENU_CAMERAS}
-        .key=${cameraIndex}
-      >
-        <ha-icon .icon=${addNewCamera ? 'mdi:video-plus' : 'mdi:video'}></ha-icon>
-        <span>
-          ${addNewCamera
-            ? html` <span class="new-camera">
-                [${localize('editor.add_new_camera')}...]
-              </span>`
-            : html`<span
-                >${this._getEditorCameraTitle(cameraIndex, cameraConfig || {})}</span
-              >`}
-        </span>
       </div>
     `;
   }
@@ -772,8 +762,38 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
       }
     };
 
+    const selected = this._expandedMenus[MENU_CAMERAS] === cameraIndex;
+    const submenuClasses = {
+      submenu: true,
+      selected: selected,
+    };
+    const headerClasses = {
+      'submenu-header': true,
+      selected: selected,
+    };
+
     return html`
-      ${this._renderCameraHeader(cameraIndex, cameras[cameraIndex], addNewCamera)}
+      <div class="${classMap(submenuClasses)}">
+        <div
+          class="${classMap(headerClasses)}"
+          @click=${this._toggleMenu}
+          .domain=${MENU_CAMERAS}
+          .key=${cameraIndex}
+        >
+          <ha-icon .icon=${addNewCamera ? 'mdi:video-plus' : 'mdi:video'}></ha-icon>
+          <span>
+            ${addNewCamera
+              ? html` <span class="new-camera">
+                  [${localize('editor.add_new_camera')}...]
+                </span>`
+              : html`<span
+                  >${this._getEditorCameraTitle(
+                    cameraIndex,
+                    cameras[cameraIndex] || {},
+                  )}</span
+                >`}
+          </span>
+        </div>
         ${this._expandedMenus[MENU_CAMERAS] === cameraIndex
           ? html` <div class="values">
               <div class="controls">
@@ -901,6 +921,7 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
               )}
             </div>`
           : ``}
+      </div>
     `;
   }
 
@@ -1014,10 +1035,10 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
       <div class="card-config">
         ${this._renderOptionSetHeader('cameras')}
         ${this._expandedMenus[MENU_OPTIONS] === 'cameras'
-          ? html` <div class="submenu">
+          ? html`
               ${cameras.map((_, index) => this._renderCamera(cameras, index, entities))}
               ${this._renderCamera(cameras, cameras.length, entities, true)}
-            </div>`
+            `
           : ''}
         ${this._renderOptionSetHeader('view')}
         ${this._expandedMenus[MENU_OPTIONS] === 'view'
@@ -1051,7 +1072,6 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
                   min: BUTTON_SIZE_MIN,
                 })}
               </div>
-              <div class="submenu">
               ${this._renderMenuButton('frigate') /* */}
               ${this._renderMenuButton('cameras') /* */}
               ${this._renderMenuButton('live') /* */}
@@ -1063,7 +1083,6 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
               ${this._renderMenuButton('fullscreen')}
               ${this._renderMenuButton('timeline')}
               ${this._renderMenuButton('media_player')}
-              </div>
             `
           : ''}
         ${this._renderOptionSetHeader('live')}
@@ -1305,7 +1324,7 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
       const domain = ev.target.domain;
       const key = ev.target.key;
 
-      if (this._expandedMenus[domain] == key) {
+      if (this._expandedMenus[domain] === key) {
         this._closeMenu(domain);
       } else {
         this._openMenu(domain, key);

src/scss/editor.scss

@@ -23,10 +23,8 @@
   pointer-events: none;
 }
 .values {
-  padding: 10px;
   background: var(--secondary-background-color);
   display: grid;
-  margin-bottom: 10px;
 }
 div.upgrade {
   width: auto;
@@ -42,26 +40,39 @@ div.upgrade span {
 
 .submenu-header {
   display: flex;
-  margin-top: 10px;
+  padding: 10px;
 
   cursor: pointer;
 }
+.submenu-header.selected {
+  background-color: var(--primary-color);
+  color: var(--primary-text-color);
+}
+
 .submenu-header * {
   flex-basis: auto;
 
   // Only allow clicks on the header.
   pointer-events: none;
 }
-.submenu-header ha-icon {
-  padding-right: 10px;
-}
 .submenu-header .new-camera {
   font-style: italic;
+}
+.submenu-header:not(.selected) .new-camera {
   color: var(--secondary-text-color, 'black');
 }
-.submenu {
-  margin: 5px 5px 10px 20px;
+
+.submenu-header ha-icon {
+  padding-right: 15px;
 }
+
+.submenu {
+  border: 1px solid var(--divider-color);
+}
+.submenu.selected {
+  border: 1px solid var(--primary-color);
+}
+
 .submenu .controls {
   display: inline-block;
   margin-left: auto;