Mercurial > gemma
changeset 428:d7a06b9fffc9
feat: Usability for usermanagement improved.
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Fri, 17 Aug 2018 09:23:42 +0200 |
parents | e4b961315e9f |
children | df368413f323 |
files | client/package.json client/src/components/Userdetail.vue client/src/main.js client/src/views/Users.vue client/yarn.lock |
diffstat | 5 files changed, 29 insertions(+), 7 deletions(-) [+] |
line wrap: on
line diff
--- a/client/package.json Thu Aug 16 17:49:24 2018 +0200 +++ b/client/package.json Fri Aug 17 09:23:42 2018 +0200 @@ -12,6 +12,7 @@ "test:e2e": "vue-cli-service test:e2e" }, "dependencies": { + "animate.css": "^3.7.0", "axios": "^0.18.0", "bootstrap": "^4.1.1", "cxlt-vue2-toastr": "^1.1.0",
--- a/client/src/components/Userdetail.vue Thu Aug 16 17:49:24 2018 +0200 +++ b/client/src/components/Userdetail.vue Fri Aug 17 09:23:42 2018 +0200 @@ -1,5 +1,5 @@ <template> - <div class="userdetails shadow"> + <div class="userdetails shadown fadeIn animated"> <div class="card"> <div class="card-header shadow-sm text-white bg-info mb-3"> {{ currentUser.user }}
--- a/client/src/main.js Thu Aug 16 17:49:24 2018 +0200 +++ b/client/src/main.js Fri Aug 17 09:23:42 2018 +0200 @@ -8,6 +8,7 @@ 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";
--- a/client/src/views/Users.vue Thu Aug 16 17:49:24 2018 +0200 +++ b/client/src/views/Users.vue Fri Aug 17 09:23:42 2018 +0200 @@ -9,7 +9,7 @@ Users </div> <div class="card-body"> - <table :class="tableStyle"> + <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> @@ -30,7 +30,7 @@ </tbody> </table> </div> - <div><i @click="prevPage" v-if="this.currentPage!=1" class="fa fa-caret-left"></i> {{this.currentPage}} / {{this.pages}} <i @click="nextPage" class="fa fa-caret-right"></i></div> + <div><i @click="prevPage" v-if="this.currentPage!=1" class="pages fa fa-caret-left"></i> {{this.currentPage}} / {{this.pages}} <i @click="nextPage" class="pages fa fa-caret-right"></i></div> <div class="adduser"> <button @click="addUser" class="btn btn-info pull-right shadow-sm">Add User</button> </div> @@ -78,7 +78,8 @@ margin: auto; } -.table th { +.table th, +.pages { cursor: pointer; } @@ -148,7 +149,9 @@ return { table: true, "table-hover": true, - "table-sm": this.isUserDetailsVisible + "table-sm": this.isUserDetailsVisible, + fadeIn: true, + animated: true }; }, userlistStyle() { @@ -161,12 +164,25 @@ } }, methods: { + tween() {}, nextPage() { - if (this.currentPage < this.pages) this.currentPage += 1; + 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) this.currentPage -= 1; + if (this.currentPage > 0) { + document.querySelector("#datatable").classList.add("fadeOut"); + setTimeout(() => { + document.querySelector("#datatable").classList.remove("fadeOut"); + this.currentPage -= 1; + }, 10); + } return; }, sortBy(criterion) {
--- a/client/yarn.lock Thu Aug 16 17:49:24 2018 +0200 +++ b/client/yarn.lock Fri Aug 17 09:23:42 2018 +0200 @@ -1183,6 +1183,10 @@ version "1.0.1" resolved "https://registry.yarnpkg.com/amdefine/-/amdefine-1.0.1.tgz#4a5282ac164729e93619bcfd3ad151f817ce91f5" +animate.css@^3.7.0: + version "3.7.0" + resolved "https://registry.yarnpkg.com/animate.css/-/animate.css-3.7.0.tgz#5de25d1ee5fba11ba6a1e2c4fa568f512eb7d4da" + ansi-align@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/ansi-align/-/ansi-align-2.0.0.tgz#c36aeccba563b89ceb556f3690f0b1d9e3547f7f"