From dd3d4d3a2d1dae3fd64f703c4a305c6549ad26fa Mon Sep 17 00:00:00 2001
From: Pascal Barth <pak.barth@gmail.com>
Date: Fri, 5 Jul 2024 11:50:23 +0200
Subject: [PATCH] PB-775 : show compared layer name when slider is hovered/used

---
 src/modules/map/components/CompareSlider.vue | 32 +++++++++++++++++---
 1 file changed, 27 insertions(+), 5 deletions(-)

diff --git a/src/modules/map/components/CompareSlider.vue b/src/modules/map/components/CompareSlider.vue
index 5d0f143e4..dd0ce16d8 100644
--- a/src/modules/map/components/CompareSlider.vue
+++ b/src/modules/map/components/CompareSlider.vue
@@ -14,6 +14,7 @@ const olMap = inject('olMap')
 const preRenderKey = ref(null)
 const postRenderKey = ref(null)
 const compareSliderOffset = ref(0)
+const showLayerName = ref(false)
 
 const compareRatio = ref(-0.5)
 const store = useStore()
@@ -138,22 +139,28 @@ function releaseSlider() {
         :style="compareSliderPosition"
         @touchstart.passive="grabSlider"
         @mousedown.passive="grabSlider"
+        @mouseenter="showLayerName = true"
+        @mouseleave="showLayerName = false"
     >
         <FontAwesomeIcon
             class="compare-slider-caret-left bg-primary text-white rounded-start"
             :icon="['fas', 'caret-left']"
         />
         <div class="compare-slider-line"></div>
-
         <FontAwesomeIcon
             class="compare-slider-caret-right bg-primary text-white rounded-end"
             :icon="['fas', 'caret-right']"
         />
+        <div v-if="showLayerName" class="compare-slider-layer-name">
+            <FontAwesomeIcon icon="arrow-left" class="me-1" />
+            <strong>{{ visibleLayerOnTop.name }}</strong>
+        </div>
     </div>
 </template>
 
 <style lang="scss" scoped>
 @import '@/scss/webmapviewer-bootstrap-theme';
+@import '@/scss/media-query.mixin';
 
 .compare-slider {
     width: 40px;
@@ -164,10 +171,7 @@ function releaseSlider() {
         position: inherit;
         top: 50%;
         z-index: inherit;
-        padding-left: 6px;
-        padding-right: 6px;
-        padding-top: 2px;
-        padding-bottom: 2px;
+        padding: 2px 6px;
     }
     &-caret-right {
         translate: 20px;
@@ -180,5 +184,23 @@ function releaseSlider() {
         background: $primary;
         z-index: inherit;
     }
+    &-layer-name {
+        position: absolute;
+        width: 120px;
+        z-index: $zindex-compare-slider;
+        bottom: $screen-padding-for-ui-elements;
+        background: $white;
+        right: 30px;
+        padding: 0.2rem 0.4rem;
+        font-size: 0.8rem;
+    }
+}
+
+@include respond-above(phone) {
+    .compare-slider {
+        &-layer-name {
+            bottom: calc($screen-padding-for-ui-elements + $footer-height);
+        }
+    }
 }
 </style>