Add icon tooltips, no layers text, and adjusted spacing for ActiveLay…

…ers component
OpenGeoscience · Oct 3, 2023 · 30bd4c3 · 30bd4c3
1 parent 7f80b24
commit 30bd4c3
Showing 1 changed file with 30 additions and 9 deletions.
diff --git a/web/src/components/map/ActiveLayers.vue b/web/src/components/map/ActiveLayers.vue
@@ -74,25 +74,46 @@ function setCurrentMapDataSource(layerId: string) {
     no-click-animation
     :close-on-content-click="false"
     location="bottom"
+    class="mx-2"
   >
     <template v-slot:activator="{ props }">
-      <v-btn icon v-bind="props">
+      <v-btn icon v-bind="props" class="mx-2">
         <v-icon>mdi-layers</v-icon>
       </v-btn>
     </template>
     <v-card rounded="lg" class="mt-2">
-      <v-card-title>
+      <v-card-title style="min-width: 250px">
         Active Layers
-        <v-icon @click="clearActiveLayers">mdi-playlist-remove</v-icon>
+        <v-tooltip
+          v-if="activeMapLayerIds.length"
+          text="Remove All Layers"
+          location="bottom"
+        >
+          <template v-slot:activator="{ props }">
+            <v-icon
+              v-bind="props"
+              @click="clearActiveLayers"
+              style="float: right"
+              >mdi-playlist-remove</v-icon
+            >
+          </template>
+        </v-tooltip>
       </v-card-title>
-      <draggable
-        v-model="activeMapLayerIds"
-        @change="updateVisibleLayers"
-        :item-key="(e: string) => e"
-      >
+      <div v-if="!activeMapLayerIds.length" class="pa-4">No layers active.</div>
+      <draggable v-model="activeMapLayerIds" @change="updateVisibleLayers">
         <template #item="{ element }">
           <v-card class="px-3 py-1">
-            <v-icon>mdi-drag-horizontal-variant</v-icon>
+            <v-tooltip
+              v-if="activeMapLayerIds.length"
+              text="Reorder Layers"
+              location="bottom"
+            >
+              <template v-slot:activator="{ props }">
+                <v-icon v-bind="props" @click="clearActiveLayers"
+                  >mdi-drag-horizontal-variant</v-icon
+                >
+              </template>
+            </v-tooltip>
 
             {{ getLayerName(element) }}