From 93443a8241e901c98693bf4a7af4a3785474e022 Mon Sep 17 00:00:00 2001
From: Dermot Duffy <dermot.duffy@gmail.com>
Date: Fri, 13 Aug 2021 22:24:31 -0700
Subject: [PATCH] Go with a cleaner menu bar.

---
 src/frigate-card.scss |  29 +++++----
 src/frigate-card.ts   | 140 ++++++++++++++++++++++++------------------
 2 files changed, 95 insertions(+), 74 deletions(-)

diff --git a/src/frigate-card.scss b/src/frigate-card.scss
index 1dd8cb9f..c231d51d 100644
--- a/src/frigate-card.scss
+++ b/src/frigate-card.scss
@@ -11,8 +11,9 @@
   overflow: auto;
   position: absolute;
 
-  left: 55px;
+  left: 0px;
   right: 0px;
+  top: 0px;
   height: 100%;
 
  -ms-overflow-style: none;  // Hide scrollbar: IE and Edge
@@ -32,7 +33,7 @@
 }
 
 .frigate-card-image-list {
-  @include image-list.standard-columns(4);
+  @include image-list.standard-columns(5);
   @include image-list.shape-radius(5px);
 }
 
@@ -54,28 +55,26 @@
   border-color: var(--primary-color);
 }
 
-.frigate-card-navbar {
+.frigate-card-menubar {
   position: absolute;
   top: 0px;
-  width: 50px;
   z-index: 1;
+  height: 56px;
+  width: 50px;
 }
 
-.frigate-card-statusbar {
-  @extend .frigate-card-navbar;
-  right: 3px;
-}
-
-.frigate-card-statusbar-webrtc {
-  @extend .frigate-card-navbar;
-  left: 53px;
+.frigate-card-menubar-full {
+  @extend .frigate-card-menubar;
+  width: 100%;
+  background-color: rgba(0, 0, 0, 0.6);
 }
 
 ha-icon-button.button {
   position: relative;
-  z-index: 2;
-  opacity: 50%;
-  background-color: rgba(0, 0, 0, 0.3);
+  z-index: 10;
+  color: white;
+  opacity: 0.8;
+  background-color: rgba(0, 0, 0, 0.6);
   border-radius: 50%;
   padding: 0px;
   margin: 3px;
diff --git a/src/frigate-card.ts b/src/frigate-card.ts
index ae28af49..dff61311 100644
--- a/src/frigate-card.ts
+++ b/src/frigate-card.ts
@@ -1,6 +1,5 @@
 // TODO Make editor work.
 // TODO Add title to clips / snapshots playing/viewing
-// TODO Try new navbar idea
 // TODO Add gallery item to take to media browser
 // TODO Add documentation & screenshots.
 // TODO Sometimes webrtc component shows up as not found in browser (maybe after fresh build?)
@@ -77,6 +76,7 @@ export class FrigateCard extends LitElement {
     this._interactionTimerID = null;
     this._webrtcElement = null;
     this._hass = null;
+    this._showMenu = false;
   }
 
   // Get the configuration element.
@@ -107,6 +107,9 @@ export class FrigateCard extends LitElement {
   @property({ attribute: false })
   protected _viewEvent: FrigateEvent | null;
 
+  @property({ attribute: false })
+  protected _showMenu: boolean;
+
   protected _interactionTimerID: number | null;
   protected _webrtcElement: any | null;
 
@@ -380,39 +383,83 @@ export class FrigateCard extends LitElement {
     }
   }
 
-  // Render the main navbar (live, clips, snapshots).
-  protected _renderNavigationBar(): TemplateResult {
+  // Render the Frigate menu button.
+  protected _renderFrigateButton(): TemplateResult {
     return html`
-      <div class="frigate-card-navbar" >
-        <ha-icon-button
-          class="button"
-          icon="mdi:cctv"
-          data-toggle="tooltip" title="View live"
-          @click=${() => {
-            this._controlVideos({stop: true, control_clip: true});
-            this._controlVideos({stop: false, control_live: true});
-            this._viewMode = FrigateCardView.LIVE
-          }}
-        ></ha-icon-button>
-        <ha-icon-button
-          class="button"
-          icon = "mdi:filmstrip"
-          data-toggle="tooltip" title="View clips"
-          @click=${() => {
-            this._controlVideos({stop: true, control_live: true});
-            this._viewMode = FrigateCardView.CLIPS
-          }}
-        ></ha-icon-button>
-        <ha-icon-button
-          class="button"
-          icon = "mdi:camera"
-          data-toggle="tooltip" title="View snapshots"
-          @click=${() => {
-            this._controlVideos({stop: true, control_clip: true, control_live: true});
-            this._viewMode = FrigateCardView.SNAPSHOTS
-          }}
-        ></ha-icon-button>
-      </div>`
+      <ha-icon-button
+        class="button"
+        icon="mdi:alpha-f-box"
+        data-toggle="tooltip" title="Frigate menu"
+        @click=${() => {
+          this._showMenu = !this._showMenu;
+        }}
+      ></ha-icon-button>`;
+  }
+
+
+  // Render the menu bar.
+  protected _renderMenuBar(): TemplateResult {
+    if (!this._showMenu) {
+      return html`
+        <div class="frigate-card-menubar">
+          ${this._renderFrigateButton()}
+        </div>`;
+    }
+    
+    let motionIcon: string | null = null;
+    const motionEntity = this.config.motion_entity ? this.config.motion_entity : null;
+    if (motionEntity && this._hass && motionEntity in this._hass.states) {
+      motionIcon = (this._hass.states[motionEntity].state == "on" ?
+          "mdi:motion-sensor" : "mdi:walk");
+    }
+
+    return html`
+        <div class="frigate-card-menubar-full">
+          ${this._renderFrigateButton()}
+          <ha-icon-button
+            class="button"
+            icon="mdi:cctv"
+            data-toggle="tooltip" title="View live"
+            @click=${() => {
+              this._controlVideos({stop: true, control_clip: true});
+              this._controlVideos({stop: false, control_live: true});
+              this._viewMode = FrigateCardView.LIVE;
+              this._showMenu = false;
+            }}
+          ></ha-icon-button>
+          <ha-icon-button
+            class="button"
+            icon = "mdi:filmstrip"
+            data-toggle="tooltip" title="View clips"
+            @click=${() => {
+              this._controlVideos({stop: true, control_live: true});
+              this._viewMode = FrigateCardView.CLIPS;
+              this._showMenu = false;
+            }}
+          ></ha-icon-button>
+          <ha-icon-button
+            class="button"
+            icon = "mdi:camera"
+            data-toggle="tooltip" title="View snapshots"
+            @click=${() => {
+              this._controlVideos({stop: true, control_clip: true, control_live: true});
+              this._viewMode = FrigateCardView.SNAPSHOTS;
+              this._showMenu = false;
+            }}
+          ></ha-icon-button>
+          ${!motionIcon ? html`` : html`
+            <ha-icon-button 
+              data-toggle="tooltip" title="View motion sensor"
+              class="button"
+              icon="${motionIcon}"
+              @click=${() => {
+                fireEvent(this, "hass-more-info", {entityId: motionEntity});
+                this._showMenu = false;
+              }}
+            ></ha-icon-button>`
+          }
+        </div>
+    `;
   }
 
   // Render the player for a saved clip.
@@ -465,30 +512,6 @@ export class FrigateCard extends LitElement {
     return html`<img class="frigate-card-viewer" src="${url}">`
   }
 
-  // Render the status bar (motion icon).
-  protected _renderStatusBar(): TemplateResult {
-    const motionEntity = this.config.motion_entity
-    if (!motionEntity || !this._hass || !(motionEntity in this._hass.states)) {
-      return html``;
-    }
-    const icon = this._hass.states[motionEntity].state == "on" ?
-        "mdi:motion-sensor" : "mdi:walk";
-    return html`
-      <div class="
-        ${this._webrtcElement ? 'frigate-card-statusbar-webrtc' : 'frigate-card-statusbar'}
-        ${this._viewMode == FrigateCardView.LIVE ? 'visible' : 'invisible'}
-      ">
-        <ha-icon-button
-          data-toggle="tooltip" title="View motion sensor"
-          class="button"
-          icon="${icon}"
-          @click=${() => {
-            fireEvent(this, "hass-more-info", {entityId: motionEntity});
-          }}
-        ></ha-icon-button>
-      </div>`
-  }
-
   // Render the live viewer.
   // Note: The live viewer is the main element used to size the overall card. It
   // is always rendered (but sometimes hidden).
@@ -539,7 +562,7 @@ export class FrigateCard extends LitElement {
     }
     return html`
       <ha-card @click=${this._interactionHandler}>
-        ${this._renderNavigationBar()}
+        ${this._renderMenuBar()}
         ${this._viewMode == FrigateCardView.CLIPS ?
           html`<div class="frigate-card-gallery">
             ${until(this._renderEvents(), this._renderProgressIndicator())}
@@ -560,7 +583,6 @@ export class FrigateCard extends LitElement {
             ${until(this._renderSnapshotViewer(), this._renderProgressIndicator())}
           </div>` : ``
         }
-        ${this._renderStatusBar()}
         ${this._renderLiveViewer()}
       </ha-card>`;
   }