Mercurial > gemma

diff client/src/components/map/contextbox/Bottlenecks.vue @ 1299:2738a6ae9ad8

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
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 a7dd8a3356fc
children 58d41573e530 ca33ad696594
line wrap: on
line diff
--- a/client/src/components/map/contextbox/Bottlenecks.vue	Thu Nov 22 17:00:26 2018 +0100
+++ b/client/src/components/map/contextbox/Bottlenecks.vue	Fri Nov 23 10:24:29 2018 +0100
@@ -1,13 +1,17 @@
 <template>
     <div>
         <h6 class="mb-0 py-2 px-3 border-bottom d-flex align-items-center">
-          <i class="fa fa-ship mr-2"></i>
+          <font-awesome-icon icon="ship" class="mr-2"></font-awesome-icon>
           Bottlenecks
         </h6>
         <div class="row p-2 text-left small">
             <div class="col-5">
                 <a href="#" @click="sortBy('name')" class="sort-link">Name</a>
-                <i :class="sortClass" v-if="sortColumn === 'name'"></i>
+                <font-awesome-icon
+                    :icon="sortIcon"
+                    class="ml-1"
+                    v-if="sortColumn === 'name'"
+                ></font-awesome-icon>
             </div>
             <div class="col-2">
                 <a
@@ -15,11 +19,19 @@
                     @click="sortBy('latestMeasurement')"
                     class="sort-link"
                 >Latest<br>Measurement</a>
-                <i :class="sortClass" v-if="sortColumn === 'latestMeasurement'"></i>
+                <font-awesome-icon
+                    :icon="sortIcon"
+                    class="ml-1"
+                    v-if="sortColumn === 'latestMeasurement'"
+                ></font-awesome-icon>
             </div>
             <div class="col-3">
                 <a href="#" @click="sortBy('chainage')" class="sort-link">Chainage</a>
-                <i :class="sortClass" v-if="sortColumn === 'chainage'"></i>
+                <font-awesome-icon
+                    :icon="sortIcon"
+                    class="ml-1"
+                    v-if="sortColumn === 'chainage'"
+                ></font-awesome-icon>
             </div>
             <div class="col-2"></div>
         </div>
@@ -46,7 +58,7 @@
                         class="btn btn-sm btn-outline-secondary"
                         @click="toggleBottleneck(bottleneck.properties.name)"
                     >
-                        <i class="fa fa-angle-down"></i>
+                        <font-awesome-icon icon="angle-down"></font-awesome-icon>
                     </button>
                 </div>
                 <div
@@ -100,14 +112,10 @@
   computed: {
     ...mapState("application", ["searchQuery", "showSearchbarLastState"]),
     ...mapState("bottlenecks", ["bottlenecks"]),
-    sortClass() {
-      return [
-        "fa ml-1",
-        {
-          "fa-sort-amount-asc": this.sortDirection === "ASC",
-          "fa-sort-amount-desc": this.sortDirection === "DESC"
-        }
-      ];
+    sortIcon() {
+      return this.sortDirection === "ASC"
+        ? "sort-amount-down"
+        : "sort-amount-up";
     }
   },
   methods: {