From ba94f31a32602c925a7708164f011b26494b3009 Mon Sep 17 00:00:00 2001
From: Dermot Duffy <dermot.duffy@gmail.com>
Date: Sat, 8 Jan 2022 22:29:35 -0800
Subject: [PATCH] Support selecting menu items

---
 src/card.ts               | 1 +
 src/components/submenu.ts | 2 ++
 src/scss/card.scss        | 2 +-
 src/scss/menu.scss        | 5 -----
 src/types.ts              | 1 +
 5 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/src/card.ts b/src/card.ts
index e0dd4084..84a02e38 100644
--- a/src/card.ts
+++ b/src/card.ts
@@ -301,6 +301,7 @@ export class FrigateCard extends LitElement {
           entity: config.camera_entity,
           state_color: true,
           title: getCameraTitle(this._hass, config),
+          selected: this._view?.camera === camera,
           tap_action: createFrigateCardCustomAction('camera_select', camera),
         };
       });
diff --git a/src/components/submenu.ts b/src/components/submenu.ts
index 5aba1a12..fc45cbb9 100644
--- a/src/components/submenu.ts
+++ b/src/components/submenu.ts
@@ -31,6 +31,8 @@ export class FrigateCardSubmenu extends LitElement {
       <mwc-list-item
         style="${styleMap(stateParameters.style || {})}"
         graphic="icon"
+        ?selected=${item.selected}
+        ?activated=${item.selected}
         aria-label="${stateParameters.title || ''}"
         @action=${(ev) => {
           // Attach the action config so ascendants have access to it.
diff --git a/src/scss/card.scss b/src/scss/card.scss
index 4ef20feb..db125ce5 100644
--- a/src/scss/card.scss
+++ b/src/scss/card.scss
@@ -42,7 +42,7 @@
   opacity: 0.0;
 }
 .outer:hover + .hover-menu, .hover-menu:hover {
-  opacity: 1.0;
+  opacity: 0.9;
 }
 /* A relative div to place absolute picture elements onto */
 .picture-elements {
diff --git a/src/scss/menu.scss b/src/scss/menu.scss
index 2699a245..975cb75a 100644
--- a/src/scss/menu.scss
+++ b/src/scss/menu.scss
@@ -4,12 +4,7 @@
   --frigate-card-menu-button-size: 40px;
   --mdc-icon-button-size: var(--frigate-card-menu-button-size);
   --mdc-icon-size: calc(var(--mdc-icon-button-size) / 2);
-  z-index: 10;
   opacity: 0.9;
-
-  // Necessary to mitigate an apparent Chrome opacity flickering bug caused by
-  // button ripples.
-  will-change: opacity;
  }
 
 .frigate-card-menu {
diff --git a/src/types.ts b/src/types.ts
index 34b6395a..842017e8 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -334,6 +334,7 @@ const menuSubmenuItemSchema = elementsBaseSchema.merge(
     entity: z.string().optional(),
     icon: z.string().optional(),
     state_color: z.boolean().default(true),
+    selected: z.boolean().default(false),
   }),
 );
 export type MenuSubmenuItem = z.infer<typeof menuSubmenuItemSchema>;