improve show/hide layer text

Author: digitaltom

app/javascript/controllers/map/layers_controller.js

@@ -217,11 +217,16 @@ export default class extends Controller {
     // update UI (both desktop and mobile visibility buttons)
     layerElement.querySelectorAll('button.layer-visibility i, button.layer-visibility-mobile i').forEach(icon => {
       if (layer.show) {
-        icon.classList.replace('bi-eye-slash', 'bi-eye')
-      } else {
         icon.classList.replace('bi-eye', 'bi-eye-slash')
+      } else {
+        icon.classList.replace('bi-eye-slash', 'bi-eye')
       }
     })
+    const visBtn = layerElement.querySelector('button.layer-visibility')
+    const visBtnMobile = layerElement.querySelector('button.layer-visibility-mobile')
+    const newText = layer.show ? 'Hide layer' : 'Show layer'
+    visBtn.setAttribute('title', newText)
+    visBtnMobile.querySelector('.layer-visibility-text').textContent = newText
     // show/hide refresh and edit buttons based on visibility
     const hideAction = layer.show ? 'remove' : 'add'
     if (layer.type !== 'geojson') {

app/javascript/maplibre/controls/shared.js

@@ -206,10 +206,18 @@ export function initLayersModal () {
       const visBtnMobile = layerElement.querySelector('button.layer-visibility-mobile')
       visBtn.classList.remove('hidden')
       visBtnMobile.classList.remove('hidden')
+      // Icon represents the ACTION (what will happen when clicked)
       if (layer.show === false) {
+        visBtn.querySelector('i').classList.replace('bi-eye-slash', 'bi-eye')
+        visBtnMobile.querySelector('i').classList.replace('bi-eye-slash', 'bi-eye')
+        visBtn.setAttribute('title', 'Show layer')
+        visBtnMobile.querySelector('.layer-visibility-text').textContent = 'Show layer'
+        layerElement.classList.add('layer-dimmed')
+      } else {
         visBtn.querySelector('i').classList.replace('bi-eye', 'bi-eye-slash')
         visBtnMobile.querySelector('i').classList.replace('bi-eye', 'bi-eye-slash')
-        layerElement.classList.add('layer-dimmed')
+        visBtn.setAttribute('title', 'Hide layer')
+        visBtnMobile.querySelector('.layer-visibility-text').textContent = 'Hide layer'
       }
       const isFirstGeojsonLayer = layer.type === 'geojson' &&
         layers.filter(l => l.type === 'geojson').indexOf(layer) === 0

app/views/maps/modals/_layers.haml

@@ -78,8 +78,8 @@
               %span.mapforge-font.layer-name.me-2 Layer name
             -# Desktop: inline buttons
             %span.text-nowrap.d-none.d-sm-inline
-              %button.hidden.ms-2.btn.btn-secondary.btn-layer-actions.layer-visibility{ data: { action: "click->map--layers#toggleLayerVisibility", "toggle": 'tooltip' }, title: "Toggle visibility" }
-                %i.bi.bi-eye
+              %button.hidden.ms-2.btn.btn-secondary.btn-layer-actions.layer-visibility{ data: { action: "click->map--layers#toggleLayerVisibility", "toggle": 'tooltip' }, title: "Hide layer" }
+                %i.bi.bi-eye-slash
               %button.hidden.btn.btn-secondary.btn-layer-actions.layer-refresh{ data: { action: "click->map--layers#refreshLayer", "toggle": 'tooltip' }, title: "Refresh layer for current view" }
                 %i.bi.bi-arrow-clockwise.reload-icon
               %button.hidden.btn.btn-secondary.btn-layer-actions.layer-edit{ data: { action: "click->map--layers#toggleEdit", "toggle": 'tooltip' }, title: "Edit query" }
@@ -93,8 +93,8 @@
               %ul.dropdown-menu.dropdown-menu-end
                 %li
                   %button.hidden.dropdown-item.layer-visibility-mobile{ type: "button", data: { action: "click->map--layers#toggleLayerVisibility" } }
-                    %i.bi.bi-eye.me-2
-                    Toggle visibility
+                    %i.bi.bi-eye-slash.me-2
+                    %span.layer-visibility-text Hide layer
                 %li
                   %button.hidden.dropdown-item.layer-refresh-mobile{ type: "button", data: { action: "click->map--layers#refreshLayer" } }
                     %i.bi.bi-arrow-clockwise.me-2