diff client/src/components/map/fairway/Fairwayprofile.vue @ 1299:2738a6ae9ad8

fontawesome 4 -> 5 An icon was not displayed on a specific system/environment. No clue why... good moment to switch to version 5 of fontawesome
author Markus Kottlaender <markus@intevation.de>
date Fri, 23 Nov 2018 10:24:29 +0100
parents bc55ffaeb639
children 6c0c204f6bce
line wrap: on
line diff
--- a/client/src/components/map/fairway/Fairwayprofile.vue	Thu Nov 22 17:00:26 2018 +0100
+++ b/client/src/components/map/fairway/Fairwayprofile.vue	Fri Nov 23 10:24:29 2018 +0100
@@ -1,16 +1,16 @@
 <template>
     <div :class="['position-relative', {show: showSplitscreen}]" v-if="Object.keys(currentProfile).length">
         <button
-            class="rounded-bottom bg-white border-0 position-absolute splitscreen-toggle shadow-sm"
+            class="rounded-bottom bg-white border-0 position-absolute splitscreen-toggle"
             @click="$store.commit('application/showSplitscreen', false)"
             v-if="showSplitscreen">
-            <i class="fa fa-angle-down"></i>
+            <font-awesome-icon icon="angle-down" />
         </button>
         <button
-            class="rounded-bottom bg-white border-0 position-absolute clear-selection shadow-sm"
+            class="rounded-bottom bg-white border-0 position-absolute clear-selection"
             @click="$store.dispatch('fairwayprofile/clearSelection');"
             v-if="showSplitscreen">
-            <i class="fa fa-times text-danger"></i>
+            <font-awesome-icon icon="times" />
         </button>
         <div class="profile bg-white position-relative d-flex flex-column pr-5">
             <h5 class="mb-0 mt-2">{{ selectedBottleneck }} ({{ selectedSurvey.date_info }})</h5>
@@ -45,12 +45,12 @@
                             </div>
                             <button class="btn btn-outline-secondary btn-sm ml-2 mt-auto"
                                     @click="showLabelInput = !showLabelInput">
-                              <i :class="'fa fa-' + (showLabelInput ? 'times' : 'save')"></i>
+                              <font-awesome-icon :icon="showLabelInput ? 'times' : 'folder-plus'" size="lg" />
                             </button>
                             <button v-clipboard:copy="coordinatesForClipboard"
                                     v-clipboard:success="onCopyCoordinates"
                                     class="btn btn-outline-secondary btn-sm ml-2 mt-auto">
-                              <i class="fa fa-copy"></i>
+                              <font-awesome-icon icon="copy" />
                             </button>
                         </div>
                         <div v-if="showLabelInput">
@@ -61,7 +61,7 @@
                                       @click="saveCut"
                                       v-if="cutLabel"
                                       style="top: 0; right: 0;">
-                                <i class="fa fa-check"></i>
+                                <font-awesome-icon icon="check" />
                               </button>
                           </div>
                         </div>
@@ -79,7 +79,7 @@
                                     @click="applyManualCoordinates"
                                     style="top: 0; right: 0;"
                                     v-if="coordinatesInput">
-                              <i class="fa fa-check"></i>
+                              <font-awesome-icon icon="check" />
                             </button>
                         </div>
                     </small>
@@ -101,9 +101,11 @@
   right: $icon-width + $offset
   width: $icon-width
   height: $icon-height
-  margin-top: 2px
+  margin-top: 8px
   z-index: 3
   outline: none
+  svg path
+    fill: #666
 
 .clear-selection
   right: $offset
@@ -295,7 +297,7 @@
     drawDiagram() {
       this.coordinatesSelect = null;
       const chartDiv = document.querySelector(".fairwayprofile");
-      d3.select("svg").remove();
+      d3.select(".fairwayprofile svg").remove();
       let svg = d3.select(chartDiv).append("svg");
       svg.attr("width", this.width);
       svg.attr("height", this.height);