Mercurial > gemma

changeset 428:d7a06b9fffc9

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
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&nbsp;<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"