fix: remove cycle anim and add message to tooltip to make button inte…

…nt somewhat clearer
origo-map · Mar 13, 2024 · 5a0a602 · 5a0a602
1 parent 4de56c9
commit 5a0a602
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 23 deletions.
diff --git a/scss/ui/_button.scss b/scss/ui/_button.scss
@@ -314,13 +314,8 @@ button.active,
   }
 }
 
-.cycle-even {
+.cycle {
   background: linear-gradient(45deg, #8db2d7, #ddddee);
   width: 37px; 
   height: 37px; 
-}
-.cycle-odd {
-  background: linear-gradient(45deg,  #ddddee, #8db2d7);
-  width: 37px; 
-  height: 37px; 
-}
+}
diff --git a/src/controls/legend.js b/src/controls/legend.js
@@ -95,18 +95,7 @@ const Legend = function Legend(options = {}) {
 
       const styleName = theButton.data.activeLayer[0].get('styleName') || 'default';
       const icon = viewer.getStyle(styleName) ? imageSource(viewer.getStyle(styleName)) : 'img/png/farg.png';
-      theButton.setIcon(icon, theButton.data.activeLayer[0].get('title'));
-      const element = document.getElementById(theButton.getId());
-
-      if (theButton.data.isEven) {
-        element.classList.remove('cycle-even');
-        element.classList.add('cycle-odd');
-        theButton.data.isEven = false;
-      } else {
-        element.classList.add('cycle-even');
-        element.classList.remove('cycle-odd');
-        theButton.data.isEven = true;
-      }
+      theButton.setIcon(icon, `Växla: ${theButton.data.activeLayer[0].get('title')}`);
     };
     Object.values(cycleGroups).forEach((cycleGroup) => {
       let activeLayer = cycleGroup.find((layer) => layer.get('visible') === true);
@@ -118,14 +107,13 @@ const Legend = function Legend(options = {}) {
       const title = activeLayer[0].get('title');
       const cycleButton = Button({
         icon,
-        title,
-        cls: 'round smallest border icon-small icon-bg cycle-even',
+        title: `Växla: ${title}`,
+        cls: 'round smallest border icon-small icon-bg cycle',
         state: activeLayer[0].get('visible') ? 'active' : 'initial',
         data: {
           layers: cycleGroup,
           activeLayer,
-          numberOfLayers: cycleGroup.length,
-          isEven: true
+          numberOfLayers: cycleGroup.length
         },
         methods: {
           active: () => {