Mercurial > gemma
changeset 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
line wrap: on
line diff
--- a/client/package.json Thu Nov 22 17:00:26 2018 +0100 +++ b/client/package.json Fri Nov 23 10:24:29 2018 +0100 @@ -3,8 +3,8 @@ "version": "1.2.0-dev", "license": "AGPL-3.0-or-later", "repository": { - "type": "hg", - "url": "https://hg.intevation.de/gemma" + "type": "hg", + "url": "https://hg.intevation.de/gemma" }, "private": true, "scripts": { @@ -17,6 +17,8 @@ }, "dependencies": { "@fortawesome/fontawesome-svg-core": "^1.2.8", + "@fortawesome/free-brands-svg-icons": "^5.5.0", + "@fortawesome/free-regular-svg-icons": "^5.5.0", "@fortawesome/free-solid-svg-icons": "^5.5.0", "@fortawesome/vue-fontawesome": "^0.1.2", "@turf/distance": "^6.0.1",
--- a/client/src/components/Sidebar.vue Thu Nov 22 17:00:26 2018 +0100 +++ b/client/src/components/Sidebar.vue Fri Nov 23 10:24:29 2018 +0100 @@ -2,58 +2,58 @@ <div :class="sidebarStyle"> <div @click="$store.commit('application/showSidebar', !showSidebar)" - class="menubutton p-2 bg-white rounded position-absolute d-flex justify-content-center" + class="menubutton ui-element d-print-none p-2 bg-white rounded position-absolute d-flex justify-content-center" > - <i class="ui-element d-print-none fa fa-bars"></i> + <font-awesome-icon icon="bars"></font-awesome-icon> </div> <div class="menu text-nowrap text-left"> <router-link to="/"> - <i class="fa fa-map-o"></i> + <font-awesome-icon icon="map-marked-alt" fixed-width></font-awesome-icon> Map </router-link> <a href="#" @click="toggleContextBox('bottlenecks')" :class="['secondary', { active: isActive('bottlenecks') }]"> - <i class="fa fa-ship"></i> + <font-awesome-icon icon="ship" fixed-width></font-awesome-icon> Bottlenecks </a> <div v-if="isWaterwayAdmin"> <a href="#" @click="toggleContextBox('imports')" :class="['secondary', { active: isActive('imports') }]"> - <i class="fa fa-upload align-self-center navicon"></i> + <font-awesome-icon icon="upload" fixed-width></font-awesome-icon> Import soundingresults </a> <a href="#" @click="toggleContextBox('staging')" :class="['secondary', { active: isActive('staging') }]"> - <i class="fa fa-list-ol align-self-center navicon"></i> + <font-awesome-icon icon="clipboard-check" fixed-width></font-awesome-icon> Staging area </a> <small class="text-muted pl-3">Systemadministration</small> <hr class="m-0"> <router-link to="usermanagement"> - <i class="fa fa-address-card-o"></i> + <font-awesome-icon icon="users-cog" fixed-width></font-awesome-icon> Users </router-link> </div> <div v-if="isSysAdmin"> <router-link to="systemconfiguration"> - <i class="fa fa-wrench"></i> + <font-awesome-icon icon="wrench" fixed-width></font-awesome-icon> Systemconfiguration </router-link> <router-link to="logs"> - <i class="fa fa-book"></i> + <font-awesome-icon icon="book" fixed-width></font-awesome-icon> Logs </router-link> <router-link to="importqueue"> - <i class="fa fa-exchange"></i> + <font-awesome-icon icon="tasks" fixed-width></font-awesome-icon> Importqueue </router-link> </div> <hr class="m-0"> <a href="#" @click="logoff"> - <i class="fa fa-power-off"></i> + <font-awesome-icon icon="power-off" fixed-width></font-awesome-icon> Logout {{ user }} </a> </div> @@ -138,23 +138,22 @@ padding: 0.5rem 1rem color: #333 text-decoration: none - i - color: #666 - margin-right: $small-offset + svg path + fill: #666 &:hover background-color: #f8f8f8 &.router-link-exact-active background-color: $color-info color: #fff - i - color: #fff + svg path + fill: #fff &.secondary font-size: 0.9rem &.active background: lighten($color-info, 55) color: darken($color-info, 15) - i - color: darken($color-info, 15) + svg path + fill: darken($color-info, 15) .sidebar background-color: #ffffff @@ -164,8 +163,8 @@ overflow: hidden .sidebarcollapsed - max-height: 30px - max-width: 30px + max-height: $icon-height + max-width: $icon-width .sidebarextended max-height: 35rem
--- a/client/src/components/admin/Importqueue.vue Thu Nov 22 17:00:26 2018 +0100 +++ b/client/src/components/admin/Importqueue.vue Fri Nov 23 10:24:29 2018 +0100 @@ -10,7 +10,7 @@ <div class="searchgroup input-group"> <div class="input-group-prepend"> <span class="input-group-text" id="search"> - <i class="fa fa-search"></i> + <font-awesome-icon icon="search"></font-awesome-icon> </span> </div> <input
--- a/client/src/components/admin/usermanagement/Passwordfield.vue Thu Nov 22 17:00:26 2018 +0100 +++ b/client/src/components/admin/usermanagement/Passwordfield.vue Fri Nov 23 10:24:29 2018 +0100 @@ -3,9 +3,16 @@ <label for="password">{{this.label}}</label> <div class="d-flex d-row"> <input :type="isPasswordVisible" @change="fieldChanged" class="form-control" :placeholder='placeholder' :required="required"> - <span class="input-group-text" @click="showPassword"><i :class="eyeIcon"></i></span> + <span class="input-group-text" @click="showPassword"> + <font-awesome-icon :icon="readablePassword ? 'eye-slash' : 'eye'"></font-awesome-icon> + </span> </div> - <div v-show="passworderrors" class="text-danger"><small><i class="fa fa-warning"></i> {{ this.passworderrors}}</small></div> + <div v-show="passworderrors" class="text-danger"> + <small> + <font-awesome-icon icon="exclamation-triangle"></font-awesome-icon> + {{ this.passworderrors}} + </small> + </div> </div> </template> @@ -51,13 +58,6 @@ computed: { isPasswordVisible() { return this.readablePassword ? "text" : "password"; - }, - eyeIcon() { - return { - fa: true, - "fa-eye": !this.readablePassword, - "fa-eye-slash": this.readablePassword - }; } } };
--- a/client/src/components/admin/usermanagement/Userdetail.vue Thu Nov 22 17:00:26 2018 +0100 +++ b/client/src/components/admin/usermanagement/Userdetail.vue Fri Nov 23 10:24:29 2018 +0100 @@ -4,7 +4,7 @@ <div class="card-header shadow-sm text-white bg-info mb-3"> {{ this.cardHeader }} <span @click="closeDetailview" class="pull-right"> - <i class="fa fa-close"></i> + <font-awesome-icon icon="times"></font-awesome-icon> </span> </div> <div class="card-body"> @@ -15,7 +15,9 @@ <input type="user" :placeholder="userNamePlaceholder" class="form-control form-control-sm" id="user" aria-describedby="userHelp" v-model="currentUser.user"> <div v-show="errors.user" class="text-danger"> <small> - <i class="fa fa-warning"></i> {{ errors.user }}</small> + <font-awesome-icon icon="exclamation-triangle"></font-awesome-icon> + {{ errors.user }} + </small> </div> </div> <div class="form-group row"> @@ -26,7 +28,9 @@ </select> <div v-show="errors.country" class="text-danger"> <small> - <i class="fa fa-warning"></i> {{ errors.country }}</small> + <font-awesome-icon icon="exclamation-triangle"></font-awesome-icon> + {{ errors.country }} + </small> </div> </div> <div class="form-group row"> @@ -34,7 +38,9 @@ <input type="email" v-on:change="validateEmailaddress" class="form-control form-control-sm" id="email" aria-describedby="emailHelp" v-model="currentUser.email"> <div v-show="errors.email" class="text-danger"> <small> - <i class="fa fa-warning"></i> {{ errors.email }}</small> + <font-awesome-icon icon="exclamation-triangle"></font-awesome-icon> + {{ errors.email }} + </small> </div> </div> <div class="form-group row"> @@ -47,7 +53,9 @@ </select> <div v-show="errors.role" class="text-danger"> <small> - <i class="fa fa-warning"></i> {{ errors.role }}</small> + <font-awesome-icon icon="exclamation-triangle"></font-awesome-icon> + {{ errors.role }} + </small> </div> </div> <div class="form-group row"> @@ -61,7 +69,10 @@ <button type="submit" :disabled="submitted" class="shadow-sm btn btn-info pull-right">Submit</button> </div> <div v-if="currentUser.role !='waterway_user' " class="form-group row d-flex flex-row justify-content-start mailbutton"> - <a @click="sendTestMail" class="btn btn-light"><i class="fa fa-telegram"> Send testmail</i></a> + <a @click="sendTestMail" class="btn btn-light"> + <font-awesome-icon icon="paper-plane"></font-awesome-icon> + Send testmail + </a> <div v-if="mailsent">Mail was sent</div> </div> </form>
--- a/client/src/components/admin/usermanagement/Usermanagement.vue Thu Nov 22 17:00:26 2018 +0100 +++ b/client/src/components/admin/usermanagement/Usermanagement.vue Fri Nov 23 10:24:29 2018 +0100 @@ -14,22 +14,22 @@ <tr> <th scope="col" @click="sortBy('user')"> <span>Username - <i v-if="sortCriterion=='user'" class="fa fa-angle-down"></i> + <font-awesome-icon v-if="sortCriterion=='user'" icon="angle-down"></font-awesome-icon> </span> </th> <th scope="col" @click="sortBy('country')"> <span>Country - <i v-if="sortCriterion=='country'" class="fa fa-angle-down"></i> + <font-awesome-icon v-if="sortCriterion=='country'" icon="angle-down"></font-awesome-icon> </span> </th> <th scope="col" @click="sortBy('email')"> <span>Email - <i v-if="sortCriterion=='email'" class="fa fa-angle-down"></i> + <font-awesome-icon v-if="sortCriterion=='email'" icon="angle-down"></font-awesome-icon> </span> </th> <th scope="col" @click="sortBy('role')"> <span>Role - <i v-if="sortCriterion=='role'" class="fa fa-angle-down"></i> + <font-awesome-icon v-if="sortCriterion=='role'" icon="angle-down"></font-awesome-icon> </span> </th> <th scope="col"></th> @@ -41,23 +41,34 @@ <td>{{ user.country }}</td> <td>{{ user.email}}</td> <td> - <i v-tooltip="user.roleLabel" :class="{ - fa:true, - icon:true, - 'fa-user':user.role==='waterway_user', - 'fa-star':user.role=='sys_admin', - 'fa-adn':user.role==='waterway_admin'}"></i> + <font-awesome-icon + :icon="roleIcon(user.role)" + @click="deleteUser(user.user)" + ></font-awesome-icon> </td> <td> - <i @click="deleteUser(user.user)" class="icon fa fa-trash-o"></i> + <font-awesome-icon icon="trash" @click="deleteUser(user.user)"></font-awesome-icon> </td> </tr> </tbody> </table> </div> - <div class="d-flex flex-row pagination"> - <i @click=" prevPage " v-if="this.currentPage!=1 " class="mr-2 btn btn-sm btn-light align-self-center pages fa fa-caret-left "></i> {{this.currentPage}} / {{this.pages}} - <i @click="nextPage " class="ml-2 btn btn-sm btn-light align-self-center pages fa fa-caret-right "></i> + <div class="d-flex mx-auto align-items-center"> + <button + @click="prevPage" + v-if="this.currentPage !== 1" + class="mr-2 btn btn-sm btn-light align-self-center" + > + <font-awesome-icon icon="angle-left"></font-awesome-icon> + </button> + {{this.currentPage}} / {{this.pages}} + <button + @click="nextPage" + v-if="this.currentPage !== this.pages" + class="ml-2 btn btn-sm btn-light align-self-center" + > + <font-awesome-icon icon="angle-right"></font-awesome-icon> + </button> </div> <div class="mr-3 pb-3"> <button @click="addUser " class="btn btn-info pull-right shadow-sm ">Add User</button> @@ -108,10 +119,6 @@ min-width: 520px height: 100% -.pagination - margin-left: auto - margin-right: auto - .userlistsmall width: 30vw @@ -122,8 +129,7 @@ width: 90% !important margin: auto -.table th, -.pages +.table th cursor: pointer .table th, @@ -279,6 +285,11 @@ selectUser(name) { const user = this.$store.getters["usermanagement/getUserByName"](name); this.$store.commit("usermanagement/setCurrentUser", user); + }, + roleIcon(role) { + if (role === "sys_admin") return "star"; + if (role === "waterway_admin") return ["fab", "adn"]; + return "user"; } }, beforeRouteEnter(to, from, next) {
--- a/client/src/components/admin/usermanagement/Users.vue Thu Nov 22 17:00:26 2018 +0100 +++ /dev/null Thu Jan 01 00:00:00 1970 +0000 @@ -1,279 +0,0 @@ -<template> - <div class="main d-flex flex-column"> - <div class="d-flex content flex-column"> - <div class="d-flex flex-row"> - <div :class="userlistStyle"> - <div class="card"> - <div class="card-header shadow-sm text-white bg-info mb-3"> - Users - </div> - <div class="card-body"> - <table id="datatable" :class="tableStyle"> - <thead> - <tr> - <th scope="col" @click="sortBy('user')"> - <span>Username - <i v-if="sortCriterion=='user'" class="fa fa-angle-down"></i> - </span> - </th> - <th scope="col" @click="sortBy('country')"> - <span>Country - <i v-if="sortCriterion=='country'" class="fa fa-angle-down"></i> - </span> - </th> - <th scope="col" @click="sortBy('email')"> - <span>Email - <i v-if="sortCriterion=='email'" class="fa fa-angle-down"></i> - </span> - </th> - <th scope="col" @click="sortBy('role')"> - <span>Role - <i v-if="sortCriterion=='role'" class="fa fa-angle-down"></i> - </span> - </th> - <th scope="col"></th> - </tr> - </thead> - <tbody> - <tr v-for="user in users" :key="user.user" @click="selectUser(user.user)"> - <td>{{ user.user }}</td> - <td>{{ user.country }}</td> - <td>{{ user.email}}</td> - <td> - <i v-tooltip="user.roleLabel" :class="{ - fa:true, - icon:true, - 'fa-user':user.role==='waterway_user', - 'fa-star':user.role=='sys_admin', - 'fa-adn':user.role==='waterway_admin'}"></i> - </td> - <td> - <i @click="deleteUser(user.user)" class="icon fa fa-trash-o"></i> - </td> - </tr> - </tbody> - </table> - </div> - <div class="d-flex flex-row pagination"> - <i @click=" prevPage " v-if="this.currentPage!=1 " class="backwards btn btn-sm btn-light align-self-center pages fa fa-caret-left "></i> {{this.currentPage}} / {{this.pages}} - <i @click="nextPage " class="forwards btn btn-sm btn-light align-self-center pages fa fa-caret-right "></i> - </div> - <div class="mr-3 pb-3 "> - <button @click="addUser " class="btn btn-info pull-right shadow-sm ">Add User</button> - </div> - </div> - </div> - <Userdetail v-if="isUserDetailsVisible "></Userdetail> - </div> - </div> - </div> -</template> - -<style lang="sass" scoped> -@import "../../../assets/tooltip.sass" - -.main - height: 100vh - -.backwards - margin-right: 0.5rem - -.forwards - margin-left: 0.5rem - -.content - margin-top: $large-offset - margin-left: auto - margin-right: auto - -.icon - font-size: large - -.userlist - margin-top: $topbarheight - min-width: 520px - height: 100% - -.pagination - margin-left: auto - margin-right: auto - -.userlistsmall - width: 30vw - -.userlistextended - width: 70vw - -.table - width: 90% !important - margin: auto - -.table th, -.pages - cursor: pointer - -.table th, -td - font-size: 0.9rem - border-top: 0px !important - text-align: left - padding: 0.5rem !important - -.table td - font-size: 0.9rem - cursor: pointer - -tr span - display: flex -</style> - -<script> -/* - * This is Free Software under GNU Affero General Public License v >= 3.0 - * without warranty, see README.md and license for details. - * - * SPDX-License-Identifier: AGPL-3.0-or-later - * License-Filename: LICENSES/AGPL-3.0.txt - * - * Copyright (C) 2018 by via donau - * – Österreichische Wasserstraßen-Gesellschaft mbH - * Software engineering by Intevation GmbH - * - * Author(s): - * Thomas Junk <thomas.junk@intevation.de> - */ -import Userdetail from "./Userdetail"; -import store from "../store"; -import { mapGetters } from "vuex"; -import { displayError } from "../../../lib/errors.js"; - -export default { - name: "userview", - data() { - return { - sortCriterion: "user", - pageSize: 10, - currentPage: 1 - }; - }, - components: { - Userdetail - }, - computed: { - ...mapGetters("usermanagement", ["isUserDetailsVisible"]), - ...mapGetters("application", ["sidebarCollapsed"]), - users() { - let users = [...this.$store.getters["usermanagement/users"]]; - users.sort((a, b) => { - if ( - a[this.sortCriterion].toLowerCase() < - b[this.sortCriterion].toLowerCase() - ) - return -1; - if ( - a[this.sortCriterion].toLowerCase() > - b[this.sortCriterion].toLowerCase() - ) - return 1; - return 0; - }); - const start = (this.currentPage - 1) * this.pageSize; - return users.slice(start, start + this.pageSize); - }, - pages() { - let users = [...this.$store.getters["usermanagement/users"]]; - return Math.ceil(users.length / this.pageSize); - }, - tableStyle() { - return { - table: true, - "table-hover": true, - "table-sm": this.isUserDetailsVisible, - fadeIn: true, - animated: true - }; - }, - userlistStyle() { - return [ - "userlist mr-3 shadow", - { - userlistsmall: this.isUserDetailsVisible, - userlistextended: !this.isUserDetailsVisible - } - ]; - } - }, - methods: { - tween() {}, - nextPage() { - if (this.currentPage < this.pages) { - document.querySelector("#datatable").classList.add("fadeOut"); - setTimeout(() => { - document.querySelector("#datatable").classList.remove("fadeOut"); - this.currentPage += 1; - }, 10); - } - return; - }, - prevPage() { - if (this.currentPage > 0) { - document.querySelector("#datatable").classList.add("fadeOut"); - setTimeout(() => { - document.querySelector("#datatable").classList.remove("fadeOut"); - this.currentPage -= 1; - }, 10); - } - return; - }, - sortBy(criterion) { - this.sortCriterion = criterion; - }, - deleteUser(name) { - this.$store - .dispatch("usermanagement/deleteUser", { name: name }) - .then(() => { - this.submitted = false; - this.$store.dispatch("usermanagement/loadUsers").catch(error => { - const { status, data } = error.response; - displayError({ - title: "Backend Error", - message: `${status}: ${data.message || data}` - }); - }); - }) - .catch(error => { - const { status, data } = error.response; - displayError({ - title: "Backend Error", - message: `${status}: ${data.message || data}` - }); - }); - }, - addUser() { - this.$store.commit("usermanagement/clearCurrentUser"); - this.$store.commit("usermanagement/setUserDetailsVisible"); - }, - selectUser(name) { - const user = this.$store.getters["usermanagement/getUserByName"](name); - this.$store.commit("usermanagement/setCurrentUser", user); - } - }, - beforeRouteEnter(to, from, next) { - store - .dispatch("usermanagement/loadUsers") - .then(next) - .catch(error => { - const { status, data } = error.response; - displayError({ - title: "Backend Error", - message: `${status}: ${data}` - }); - }); - }, - beforeRouteLeave(to, from, next) { - store.commit("usermanagement/clearCurrentUser"); - store.commit("usermanagement/setUserDetailsInvisible"); - next(); - } -}; -</script>
--- a/client/src/components/map/Identify.vue Thu Nov 22 17:00:26 2018 +0100 +++ b/client/src/components/map/Identify.vue Fri Nov 23 10:24:29 2018 +0100 @@ -2,9 +2,13 @@ <div :class="['box ui-element rounded bg-white text-nowrap', { expanded: showIdentify }]"> <div style="width: 20rem"> <h6 class="mb-0 py-2 px-3 border-bottom d-flex align-items-center"> - <i class="fa fa-info mr-2"></i> + <font-awesome-icon icon="info" class="mr-2"></font-awesome-icon> Identified - <i class="fa fa-times ml-auto text-muted" @click="$store.commit('application/showIdentify', false)"></i> + <font-awesome-icon + icon="times" + class="ml-auto text-muted" + @click="$store.commit('application/showIdentify', false)" + ></font-awesome-icon> </h6> <div class="d-flex flex-column features p-3 flex-grow-1 text-left"> <div v-if="currentMeasurement">
--- a/client/src/components/map/Pdftool.vue Thu Nov 22 17:00:26 2018 +0100 +++ b/client/src/components/map/Pdftool.vue Fri Nov 23 10:24:29 2018 +0100 @@ -2,9 +2,13 @@ <div :class="['box ui-element rounded bg-white text-nowrap', { expanded: showPdfTool }]"> <div style="width: 20rem"> <h6 class="mb-0 py-2 px-3 border-bottom d-flex align-items-center"> - <i class="fa fa-file-pdf-o mr-2"></i> + <font-awesome-icon icon="file-pdf" class="mr-2"></font-awesome-icon> Generate PDF - <i class="fa fa-times ml-auto text-muted" @click="$store.commit('application/showPdfTool', false)"></i> + <font-awesome-icon + icon="times" + class="ml-auto text-muted" + @click="$store.commit('application/showPdfTool', false)" + ></font-awesome-icon> </h6> <div class="p-3"> <b>Chose format:</b>
--- a/client/src/components/map/Search.vue Thu Nov 22 17:00:26 2018 +0100 +++ b/client/src/components/map/Search.vue Fri Nov 23 10:24:29 2018 +0100 @@ -1,8 +1,8 @@ <template> <div :class="searchbarContainerStyle"> - <div class="input-group-prepend m-0"> + <div class="input-group-prepend m-0 d-print-none"> <span @click="toggleSearchbar" :class="searchButtonStyle" for="search"> - <i class="fa fa-search d-print-none"></i> + <font-awesome-icon icon="search"></font-awesome-icon> </span> </div> <div :class="['searchgroup', {'searchgroup-collapsed': !showSearchbar}]"> @@ -56,8 +56,8 @@ width: $icon-width .input-group-prepend - .fa-search - color: #666 + svg path + fill: #666 .searchresults top: $icon-height
--- a/client/src/components/map/Zoom.vue Thu Nov 22 17:00:26 2018 +0100 +++ b/client/src/components/map/Zoom.vue Fri Nov 23 10:24:29 2018 +0100 @@ -4,13 +4,16 @@ :style="showSplitscreen ? 'margin-bottom: 51vh !important' : ''" > <button - class="zoomButton border-0 bg-white rounded-left ui-element border-right" + class="zoomButton border-0 bg-white rounded-left ui-element" + @click="zoomOut" + > + <font-awesome-icon icon="minus"></font-awesome-icon> + </button> + <button + class="zoomButton border-0 bg-white rounded-right ui-element border-right" @click="zoomIn" > - <i class="fa fa-plus"></i> - </button> - <button class="zoomButton border-0 bg-white rounded-right ui-element" @click="zoomOut"> - <i class="fa fa-minus"></i> + <font-awesome-icon icon="plus"></font-awesome-icon> </button> </div> </template>
--- 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: {
--- a/client/src/components/map/contextbox/Contextbox.vue Thu Nov 22 17:00:26 2018 +0100 +++ b/client/src/components/map/contextbox/Contextbox.vue Fri Nov 23 10:24:29 2018 +0100 @@ -1,7 +1,7 @@ <template> <div :class="style"> <div @click="close" class="ui-element close-contextbox text-muted"> - <i class="fa fa-close"></i> + <font-awesome-icon icon="times"></font-awesome-icon> </div> <Bottlenecks v-if="contextBoxContent === 'bottlenecks'"></Bottlenecks> <Importsounding v-if="contextBoxContent === 'imports'"></Importsounding>
--- a/client/src/components/map/contextbox/ImportSoundingresults.vue Thu Nov 22 17:00:26 2018 +0100 +++ b/client/src/components/map/contextbox/ImportSoundingresults.vue Fri Nov 23 10:24:29 2018 +0100 @@ -1,7 +1,7 @@ <template> <div> <h6 class="mb-0 py-2 px-3 border-bottom d-flex align-items-center"> - <i class="fa fa-upload mr-2"></i> + <font-awesome-icon icon="upload" class="mr-2"></font-awesome-icon> Import Soundingresults </h6> <div v-if="editState" class="ml-auto mr-auto mt-4 w-95">
--- a/client/src/components/map/contextbox/Staging.vue Thu Nov 22 17:00:26 2018 +0100 +++ b/client/src/components/map/contextbox/Staging.vue Fri Nov 23 10:24:29 2018 +0100 @@ -1,7 +1,7 @@ <template> <div class="w-90"> <h6 class="mb-0 py-2 px-3 border-bottom d-flex align-items-center"> - <i class="fa fa-list-ol mr-2"></i> + <font-awesome-icon icon="clipboard-check" class="mr-2"></font-awesome-icon> Staging Area </h6> <table class="table mb-0"> @@ -28,7 +28,7 @@ @click="toggleApproval(data.id, $options.STATES.APPROVED)" :class="{btn:true, 'btn-sm':true, 'btn-outline-success':needsApproval(data) || isRejected(data), 'btn-success':isApproved(data)}" > - <i class="fa fa-check"></i> + <font-awesome-icon icon="check"></font-awesome-icon> </button> </td> <td> @@ -36,7 +36,7 @@ @click="toggleApproval(data.id, $options.STATES.REJECTED)" :class="{btn:true, 'btn-sm':true, 'btn-outline-danger':needsApproval(data) || isApproved(data), 'btn-danger':isRejected(data)}" > - <i class="fa fa-close"></i> + <font-awesome-icon icon="times"></font-awesome-icon> </button> </td> </tr>
--- 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);
--- a/client/src/components/map/fairway/Infobar.vue Thu Nov 22 17:00:26 2018 +0100 +++ b/client/src/components/map/fairway/Infobar.vue Fri Nov 23 10:24:29 2018 +0100 @@ -5,16 +5,29 @@ {{ selectedBottleneck }} ({{ selectedSurvey.date_info }}) </h6> - <i class="fa fa-angle-up py-2 px-2 border-left" @click="$store.commit('application/showSplitscreen', true)" v-if="Object.keys(currentProfile).length"></i> - <i class="fa fa-close text-danger py-2 px-2 border-left" @click="$store.dispatch('fairwayprofile/clearSelection');"></i> + <span + class="p-2 border-left d-flex align-items-center" + @click="$store.commit('application/showSplitscreen', true)" + v-if="Object.keys(currentProfile).length" + > + <font-awesome-icon icon="angle-up"></font-awesome-icon> + </span> + <span + class="p-2 border-left d-flex align-items-center" + @click="$store.dispatch('fairwayprofile/clearSelection')" + > + <font-awesome-icon icon="times"></font-awesome-icon> + </span> </div> </div> </template> <style lang="sass" scoped> .infobar - height: $icon-width + height: $icon-height z-index: 2 + svg path + fill: #666 </style> <script>
--- a/client/src/components/map/fairway/Surveys.vue Thu Nov 22 17:00:26 2018 +0100 +++ b/client/src/components/map/fairway/Surveys.vue Fri Nov 23 10:24:29 2018 +0100 @@ -3,7 +3,11 @@ <div style="width: 15rem"> <h6 class="mb-0 py-2 px-3 border-bottom d-flex align-items-center"> {{ selectedBottleneck }} - <i class="fa fa-times ml-auto text-muted" @click="$store.dispatch('fairwayprofile/clearSelection');"></i> + <font-awesome-icon + icon="times" + class="ml-auto text-muted" + @click="$store.dispatch('fairwayprofile/clearSelection')" + ></font-awesome-icon> </h6> <div class="p-3"> <div
--- a/client/src/components/map/layers/Layers.vue Thu Nov 22 17:00:26 2018 +0100 +++ b/client/src/components/map/layers/Layers.vue Fri Nov 23 10:24:29 2018 +0100 @@ -2,9 +2,13 @@ <div :class="['box ui-element rounded bg-white text-nowrap', { expanded: showLayers }]"> <div style="width: 20rem"> <h6 class="mb-0 py-2 px-3 border-bottom d-flex align-items-center"> - <i class="fa fa-th-list mr-2"></i> + <font-awesome-icon icon="layer-group" class="mr-2"></font-awesome-icon> Layers - <i class="fa fa-times ml-auto text-muted" @click="$store.commit('application/showLayers', false)"></i> + <font-awesome-icon + icon="times" + class="ml-auto text-muted" + @click="$store.commit('application/showLayers', false)" + ></font-awesome-icon> </h6> <div class="d-flex flex-column p-3 small"> <Layerselect
--- a/client/src/components/map/toolbar/Cuttool.vue Thu Nov 22 17:00:26 2018 +0100 +++ b/client/src/components/map/toolbar/Cuttool.vue Fri Nov 23 10:24:29 2018 +0100 @@ -1,7 +1,7 @@ <template> - <div @click="toggleCutTool" class="toolbar-button"> - <i :class="['fa fa-area-chart', { inverted: cutTool && cutTool.getActive(), grey: !selectedSurvey }]"></i> - </div> + <div @click="toggleCutTool" class="toolbar-button"> + <font-awesome-icon icon="chart-area" :class="{ 'text-info': cutTool && cutTool.getActive(), grey: !selectedSurvey }"></font-awesome-icon> + </div> </template> <script>
--- a/client/src/components/map/toolbar/Identify.vue Thu Nov 22 17:00:26 2018 +0100 +++ b/client/src/components/map/toolbar/Identify.vue Fri Nov 23 10:24:29 2018 +0100 @@ -1,6 +1,6 @@ <template> <div @click="$store.commit('application/showIdentify', !showIdentify)" class="toolbar-button"> - <i :class="['fa fa-info', {inverted: showIdentify}]"></i> + <font-awesome-icon icon="info" :class="{'text-info': showIdentify}"></font-awesome-icon> </div> </template>
--- a/client/src/components/map/toolbar/Layers.vue Thu Nov 22 17:00:26 2018 +0100 +++ b/client/src/components/map/toolbar/Layers.vue Fri Nov 23 10:24:29 2018 +0100 @@ -1,6 +1,6 @@ <template> <div @click="$store.commit('application/showLayers', !showLayers)" class="toolbar-button"> - <i :class="['fa fa-th-list', {inverted: showLayers}]"></i> + <font-awesome-icon icon="layer-group" :class="{'text-info': showLayers}"></font-awesome-icon> </div> </template>
--- a/client/src/components/map/toolbar/Linetool.vue Thu Nov 22 17:00:26 2018 +0100 +++ b/client/src/components/map/toolbar/Linetool.vue Fri Nov 23 10:24:29 2018 +0100 @@ -1,6 +1,6 @@ <template> <div @click="toggleLineTool" class="toolbar-button"> - <i :class="['fa fa-pencil', {inverted: lineTool && lineTool.getActive()}]"></i> + <font-awesome-icon icon="ruler" :class="{'text-info': lineTool && lineTool.getActive()}"></font-awesome-icon> </div> </template>
--- a/client/src/components/map/toolbar/Pdftool.vue Thu Nov 22 17:00:26 2018 +0100 +++ b/client/src/components/map/toolbar/Pdftool.vue Fri Nov 23 10:24:29 2018 +0100 @@ -1,6 +1,6 @@ <template> <div @click="$store.commit('application/showPdfTool', !showPdfTool)" class="toolbar-button"> - <i :class="['fa fa-file-pdf-o', {inverted: showPdfTool}]"></i> + <font-awesome-icon icon="file-pdf" :class="{'text-info': showPdfTool}"></font-awesome-icon> </div> </template>
--- a/client/src/components/map/toolbar/Polygontool.vue Thu Nov 22 17:00:26 2018 +0100 +++ b/client/src/components/map/toolbar/Polygontool.vue Fri Nov 23 10:24:29 2018 +0100 @@ -1,6 +1,6 @@ <template> <div @click="togglePolygonTool" class="toolbar-button"> - <i :class="['fa fa-edit', {inverted: polygonTool && polygonTool.getActive()}]"></i> + <font-awesome-icon icon="draw-polygon" :class="{'text-info': polygonTool && polygonTool.getActive()}"></font-awesome-icon> </div> </template>
--- a/client/src/components/map/toolbar/Toolbar.vue Thu Nov 22 17:00:26 2018 +0100 +++ b/client/src/components/map/toolbar/Toolbar.vue Fri Nov 23 10:24:29 2018 +0100 @@ -9,7 +9,7 @@ <Pdftool></Pdftool> </div> <div @click="$store.commit('application/expandToolbar', !expandToolbar)" class="toolbar-button bg-info text-white"> - <i :class="'fa fa-angle-' + (expandToolbar ? 'up' : 'down')"></i> + <font-awesome-icon icon="angle-down"></font-awesome-icon> </div> </div> </template>
--- a/client/src/main.js Thu Nov 22 17:00:26 2018 +0100 +++ b/client/src/main.js Fri Nov 23 10:24:29 2018 +0100 @@ -21,18 +21,93 @@ import locale2 from "locale2"; import CxltToastr from "cxlt-vue2-toastr"; import "../node_modules/bootstrap/dist/css/bootstrap.min.css"; -import "../node_modules/font-awesome/css/font-awesome.min.css"; import "../node_modules/animate.css/animate.min.css"; import "../node_modules/ol/ol.css"; import "../node_modules/cxlt-vue2-toastr/dist/css/cxlt-vue2-toastr.css"; import "../node_modules/highlight.js/styles/paraiso-dark.css"; import VTooltip from "v-tooltip"; import { library } from "@fortawesome/fontawesome-svg-core"; -import { faEye, faEyeSlash } from "@fortawesome/free-solid-svg-icons"; +import { + faEye, + faEyeSlash, + faCopy, + faCheck, + faTimes, + faInfo, + faLayerGroup, + faChartArea, + faRuler, + faDrawPolygon, + faAngleDown, + faAngleUp, + faAngleLeft, + faAngleRight, + faFolderPlus, + faFilePdf, + faBars, + faSearch, + faShip, + faUpload, + faTasks, + faUsersCog, + faMapMarkedAlt, + faClipboardCheck, + faWrench, + faBook, + faPowerOff, + faTrash, + faStar, + faUser, + faExclamationTriangle, + faPaperPlane, + faPlus, + faMinus, + faSortAmountUp, + faSortAmountDown +} from "@fortawesome/free-solid-svg-icons"; +import { faAdn } from "@fortawesome/free-brands-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome"; import VueClipboard from "vue-clipboard2"; -library.add(faEye, faEyeSlash); +library.add( + faEye, + faEyeSlash, + faCopy, + faCheck, + faTimes, + faInfo, + faLayerGroup, + faChartArea, + faRuler, + faDrawPolygon, + faAngleDown, + faAngleUp, + faAngleLeft, + faAngleRight, + faFolderPlus, + faFilePdf, + faBars, + faSearch, + faShip, + faUpload, + faTasks, + faUsersCog, + faMapMarkedAlt, + faClipboardCheck, + faWrench, + faBook, + faPowerOff, + faTrash, + faStar, + faAdn, + faUser, + faExclamationTriangle, + faPaperPlane, + faPlus, + faMinus, + faSortAmountUp, + faSortAmountDown +); Vue.component("font-awesome-icon", FontAwesomeIcon); Vue.use(VTooltip);
--- a/client/yarn.lock Thu Nov 22 17:00:26 2018 +0100 +++ b/client/yarn.lock Fri Nov 23 10:24:29 2018 +0100 @@ -662,6 +662,20 @@ dependencies: "@fortawesome/fontawesome-common-types" "^0.2.8" +"@fortawesome/free-brands-svg-icons@^5.5.0": + version "5.5.0" + resolved "https://registry.yarnpkg.com/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-5.5.0.tgz#50e020aced5b9652db1d2d9d7909c73561ff1f4a" + integrity sha512-R2I2eARMVofGTtfxe5+VaMRXiQYQQFoDkHj2Q1qZVn37eRFszDySvSlJuKTsqFRsOxoP4Iq+xIGFy/ppoSo3Wg== + dependencies: + "@fortawesome/fontawesome-common-types" "^0.2.8" + +"@fortawesome/free-regular-svg-icons@^5.5.0": + version "5.5.0" + resolved "https://registry.yarnpkg.com/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-5.5.0.tgz#15f59e2727f863acde11b34957d485657638b322" + integrity sha512-qXOglmsMJR3a//AtfTHYaAITODuTDV73IDtU95diP//wSU+md8umWryB6B38S9b5ECvH8eMN1zLa+np2Pw564g== + dependencies: + "@fortawesome/fontawesome-common-types" "^0.2.8" + "@fortawesome/free-solid-svg-icons@^5.5.0": version "5.5.0" resolved "https://registry.yarnpkg.com/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.5.0.tgz#4d815df4bba076f209eb409bc56d9d830367a7c0"