Merge pull request #5249 from camptocamp/GSGMF-1121

Use same swipe symbol everywhere, fix swipe div color
camptocamp · Oct 25, 2019 · bbd295e · bbd295e
2 parents a6ac2b5 + 5650216
commit bbd295e
Show file tree

Hide file tree

Showing 5 changed files with 88 additions and 17 deletions.
diff --git a/contribs/gmf/src/layertree/common.scss b/contribs/gmf/src/layertree/common.scss
@@ -193,7 +193,4 @@
       margin-bottom: 0.62rem;
     }
   }
-  .gmf-layer-being-swipe {
-    margin-left: 0.25rem;
-  }
 }
diff --git a/contribs/gmf/src/layertree/component.html b/contribs/gmf/src/layertree/component.html
@@ -77,10 +77,9 @@
 
     {{layertreeCtrl.node.name | translate}}
 
-    <span
-      ng-if="gmfLayertreeCtrl.gmfLayerBeingSwipe.layer && gmfLayertreeCtrl.gmfLayerBeingSwipe.layer === layertreeCtrl.layer"
-      class="fas fa-arrows-alt-h gmf-layer-being-swipe"
-    ></span>
+    <i ng-if="gmfLayertreeCtrl.gmfLayerBeingSwipe.layer && gmfLayertreeCtrl.gmfLayerBeingSwipe.layer === layertreeCtrl.layer">
+      <%=require('ngeo/icons/swipe.svg?viewbox&width=1em')%>
+    </i>
 
     <i
       class="gmf-layertree-zoom"
@@ -181,7 +180,7 @@
             </a>
           </li>
           <li ng-if="::gmfLayertreeCtrl.supportsOpacityChange(layertreeCtrl)">
-            <i class="fa fal fa-sort fa-fw fa-rotate-90"></i>
+            <i><%=require('ngeo/icons/swipe.svg?viewbox&height=1em')%></i>
             <a
               ng-click="::gmfLayertreeCtrl.toggleSwipeLayer(layertreeCtrl); popoverCtrl.dismissPopover()"
               href=""

diff --git a/contribs/gmf/src/sass/swipe.scss b/contribs/gmf/src/sass/swipe.scss
@@ -14,22 +14,31 @@ ngeo-mapswipe {
     .ngeo-swipe-line {
       position: absolute;
       left: 50%;
-      width: 4px;
+      width: 6px;
       margin-left: -2px;
       height: 100%;
-      background-color: #f00;
+      background-color: darken($brand-secondary, $standard-variation);
+      border: {
+        left: $border;
+        right: $border;
+      }
     }
 
     .ngeo-swipe-arrow {
       position: absolute;
-      width: 32px;
-      height: 32px;
+      width: 100%;
+      height: 2.5rem;
       left: 0;
-      top: 50%;
-      margin-top: -16px;
-      padding: 5px 4px;
-      background-color: #f00;
+      top: calc(50% - 1.25rem);
+      background-color: $brand-primary;
       color: #fff;
+      border: $border;
+      svg {
+        font-size: 1rem;
+        height: 100%;
+        display: block;
+        margin: auto;
+      }
     }
   }
 }
diff --git a/src/icons/swipe.svg b/src/icons/swipe.svg
diff --git a/src/map/swipe.html b/src/map/swipe.html
@@ -1,4 +1,4 @@
 <div class="ngeo-swipe-line-draggable">
   <div class="ngeo-swipe-line"></div>
-  <div class="ngeo-swipe-arrow"><i class="fas fa-arrows-alt-h fa-2x"></i></div>
+  <div class="ngeo-swipe-arrow"><%=require('ngeo/icons/swipe.svg?viewbox&height=1em')%></div>
 </div>