Fixed hovering shade in BgLayerList and ToggleButtons

wegue-oss · Nov 25, 2021 · b1e7684 · b1e7684
1 parent 6881bdc
commit b1e7684
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 24 deletions.
diff --git a/src/components/bglayerswitcher/BgLayerList.vue b/src/components/bglayerswitcher/BgLayerList.vue
@@ -13,29 +13,38 @@
         :value="layer"
         v-slot:default="{ active, toggle }"
       >
-        <v-card
-          hover
-          :width="imageWidth"
-          :class="{
-            'ma-1': true,
-            'secondary': active,
-            'onsecondary--text': active
-          }"
-          @click="toggle"
-        >
-          <wgu-layerpreviewimage
-            :layer="layer"
-            :mapView="map.getView()"
+        <v-hover v-slot="{ hover }">
+          <v-card
+            hover
             :width="imageWidth"
-            :height="imageHeight"
-            :previewIcon="previewIcon"
-          />
-          <v-card-title class="caption">
-            <span class="d-inline-block text-truncate">
-              {{ layer.get('name') }}
-            </span>
-          </v-card-title>
-        </v-card> 
+            :class="{
+              'ma-1': true,
+              'secondary': active,
+              'onsecondary--text': active
+            }"
+            @click="toggle"
+          >
+            <wgu-layerpreviewimage
+              :layer="layer"
+              :mapView="map.getView()"
+              :width="imageWidth"
+              :height="imageHeight"
+              :previewIcon="previewIcon"
+            />
+            <v-card-title class="caption">
+              <span class="d-inline-block text-truncate">
+                {{ layer.get('name') }}
+              </span>
+            </v-card-title>
+
+            <v-overlay
+              absolute
+              opacity="0.2"
+              color="grey"
+              :value="hover"
+            />
+          </v-card> 
+        </v-hover>
       </v-slide-item>
     </v-slide-group>
   </v-sheet>

diff --git a/src/components/modulecore/ToggleButton.vue b/src/components/modulecore/ToggleButton.vue
@@ -1,6 +1,9 @@
 <template>
-  <v-btn-toggle borderless dense 
-   :color="color"
+  <v-btn-toggle
+    class="wgu-toggle-button"
+    borderless
+    dense 
+    :color="color"
     background-color="transparent" 
     :title="$t(moduleName + '.title')"
     v-model="show">
@@ -38,3 +41,13 @@ export default {
   }
 };
 </script>
+<style>
+/**
+  Required to fix the hover button color.
+  Also fixes the color of any possible text
+  inside the button.
+ */
+.wgu-toggle-button .v-btn {
+  color: inherit !important;
+}
+</style>