Mercurial > gemma
changeset 1097:874d19f32015
added fontawesome5 and implemented one example icon on login screen
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Thu, 01 Nov 2018 10:19:28 +0100 |
parents | 31b36ef00784 |
children | b0aec3b1e426 |
files | client/package.json client/src/login/Login.vue client/src/main.js |
diffstat | 3 files changed, 11 insertions(+), 8 deletions(-) [+] |
line wrap: on
line diff
--- a/client/package.json Tue Oct 30 12:29:13 2018 +0100 +++ b/client/package.json Thu Nov 01 10:19:28 2018 +0100 @@ -11,6 +11,9 @@ "test:e2e": "vue-cli-service test:e2e" }, "dependencies": { + "@fortawesome/fontawesome-svg-core": "^1.2.7", + "@fortawesome/free-solid-svg-icons": "^5.4.2", + "@fortawesome/vue-fontawesome": "^0.1.2", "@turf/distance": "^6.0.1", "@turf/helpers": "^6.1.4", "@turf/line-intersect": "^6.0.2",
--- a/client/src/login/Login.vue Tue Oct 30 12:29:13 2018 +0100 +++ b/client/src/login/Login.vue Thu Nov 01 10:19:28 2018 +0100 @@ -20,7 +20,8 @@ <input :type="isPasswordVisible" v-model="password" id="inputPassword" class="form-control shadow-sm" :placeholder='passwordLabel' :required='!showPasswordReset' :disabled='showPasswordReset'> <div class="input-group-append"> <span class="input-group-text disabled" id="basic-addon2" @click="showPassword"> - <i :class="eyeIcon"></i> + <font-awesome-icon icon="eye" v-if="!readablePassword" /> + <font-awesome-icon icon="eye-slash" v-if="readablePassword" /> </span> </div> </div> @@ -129,13 +130,6 @@ isPasswordVisible() { return this.readablePassword ? "text" : "password"; }, - eyeIcon() { - return { - fa: true, - "fa-eye": !this.readablePassword, - "fa-eye-slash": this.readablePassword - }; - }, errorMessageStyle() { if (this.loginFailed || this.passwordJustResetted) { return "visibility:visible";
--- a/client/src/main.js Tue Oct 30 12:29:13 2018 +0100 +++ b/client/src/main.js Thu Nov 01 10:19:28 2018 +0100 @@ -28,6 +28,12 @@ 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 { FontAwesomeIcon } from "@fortawesome/vue-fontawesome"; + +library.add(faEye, faEyeSlash); +Vue.component("font-awesome-icon", FontAwesomeIcon); Vue.use(VTooltip);