Mercurial > gemma

changeset 1282:a7dd8a3356fc

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
fixed contextBox animations
author Markus Kottlaender <markus@intevation.de>
date Thu, 22 Nov 2018 10:20:21 +0100
parents 8f4bf8576acd
children 09dfbead8d70
files client/src/assets/application.sass client/src/components/App.vue client/src/components/Sidebar.vue client/src/components/map/Search.vue client/src/components/map/contextbox/Bottlenecks.vue client/src/components/map/contextbox/Contextbox.vue client/src/store/application.js
diffstat 7 files changed, 58 insertions(+), 47 deletions(-) [+]
line wrap: on
line diff
--- a/client/src/assets/application.sass	Thu Nov 22 08:57:38 2018 +0100
+++ b/client/src/assets/application.sass	Thu Nov 22 10:20:21 2018 +0100
@@ -74,3 +74,12 @@
   max-width: 999px
   margin-left: 0.5rem
   margin-right: 0.5rem
+
+.fade-enter-active, .fade-leave-active
+  transition: opacity 0.1s
+  
+.fade-leave, .fade-enter-to
+  opacity: 1
+
+.fade-enter, .fade-leave-to
+  opacity: 0
--- a/client/src/components/App.vue	Thu Nov 22 08:57:38 2018 +0100
+++ b/client/src/components/App.vue	Thu Nov 22 10:20:21 2018 +0100
@@ -4,7 +4,7 @@
             <div class="topbar d-flex pt-3 mx-3">
                 <div class="mr-auto d-flex">
                     <Sidebar :routeName="routeName"></Sidebar>
-                    <div class="d-flex flex-column" style="max-width: 600px;">
+                    <div class="d-flex flex-column ml-3" style="max-width: 600px">
                         <Search v-if="routeName == 'mainview'"></Search>
                         <Contextbox v-if="routeName == 'mainview'"></Contextbox>
                     </div>
@@ -75,6 +75,7 @@
   name: "app",
   computed: {
     ...mapState("user", ["isAuthenticated"]),
+    ...mapState("application", ["contextBoxContent"]),
     routeName() {
       const routeName = this.$route.name;
       return routeName;
--- a/client/src/components/Sidebar.vue	Thu Nov 22 08:57:38 2018 +0100
+++ b/client/src/components/Sidebar.vue	Thu Nov 22 10:20:21 2018 +0100
@@ -96,7 +96,7 @@
     ...mapState("application", [
       "showSidebar",
       "showSearchbarLastState",
-      "showInContextBox"
+      "contextBoxContent"
     ]),
     menuStyle() {
       return {
@@ -124,21 +124,10 @@
       this.$router.push("/login");
     },
     toggleContextBox(context) {
-      const SHOW = context;
-      const HIDE = null;
-      const isElementAlreadyShown = this.showInContextBox === context;
-      let toggleState =
-        isElementAlreadyShown && this.routeName === "mainview" ? HIDE : SHOW;
       this.$router.push("/");
-      this.$store.commit("application/showInContextBox", toggleState);
-      if (this.showInContextBox === context) {
-        this.$store.commit("application/showSearchbar", true);
-      } else {
-        this.$store.commit(
-          "application/showSearchbar",
-          this.showSearchbarLastState
-        );
-      }
+      this.$store.commit("application/showContextBox", true);
+      this.$store.commit("application/contextBoxContent", context);
+      this.$store.commit("application/showSearchbar", true);
     }
   }
 };
--- a/client/src/components/map/Search.vue	Thu Nov 22 08:57:38 2018 +0100
+++ b/client/src/components/map/Search.vue	Thu Nov 22 10:20:21 2018 +0100
@@ -14,7 +14,7 @@
                 type="text"
                 :class="searchInputStyle"
             >
-            <div v-if="showSearchbar && searchResults !== null && !showInContextBox" class="searchresults border-top ui-element bg-white rounded-bottom d-print-none">
+            <div v-if="showSearchbar && searchResults !== null && !showContextBox" class="searchresults border-top ui-element bg-white rounded-bottom d-print-none">
                 <div v-for="entry of searchResults" :key="entry.name" class="border-top py-2">
                     <a href="#" @click.prevent="moveToSearchResult(entry)">{{ entry.name }}</a>
                 </div>
@@ -99,7 +99,11 @@
     };
   },
   computed: {
-    ...mapState("application", ["showSearchbar", "showInContextBox"]),
+    ...mapState("application", [
+      "showSearchbar",
+      "showContextBox",
+      "contextBoxContent"
+    ]),
     searchQuery: {
       get() {
         return this.$store.state.application.searchQuery;
@@ -119,19 +123,19 @@
     },
     searchbarContainerStyle() {
       return [
-        "input-group searchcontainer ml-3 shadow-xs",
+        "input-group searchcontainer shadow-xs",
         {
           "searchbar-collapsed": !this.showSearchbar,
           "searchbar-expanded": this.showSearchbar,
-          "d-flex": this.showInContextBox !== "imports",
-          "d-none": this.showInContextBox === "imports"
+          "d-flex": this.contextBoxContent !== "imports",
+          "d-none": this.contextBoxContent === "imports"
         }
       ];
     },
     searchInputStyle() {
       return [
         "form-control ui-element search searchbar d-print-none border-0",
-        { "rounded-top-right": this.showInContextBox || this.searchResults }
+        { "rounded-top-right": this.showContextBox || this.searchResults }
       ];
     },
     searchButtonStyle() {
@@ -141,7 +145,7 @@
           rounded: !this.showSearchbar,
           "rounded-left": this.showSearchbar,
           "rounded-top-left":
-            this.showSearchbar && (this.showInContextBox || this.searchResults)
+            this.showSearchbar && (this.showContextBox || this.searchResults)
         }
       ];
     }
@@ -211,7 +215,7 @@
       this.toggleSearchbar();
     },
     toggleSearchbar() {
-      if (!this.showInContextBox) {
+      if (!this.showContextBox) {
         if (!this.showSearchbar) {
           setTimeout(setFocus, 300);
         }
--- a/client/src/components/map/contextbox/Bottlenecks.vue	Thu Nov 22 08:57:38 2018 +0100
+++ b/client/src/components/map/contextbox/Bottlenecks.vue	Thu Nov 22 10:20:21 2018 +0100
@@ -14,7 +14,7 @@
                     href="#"
                     @click="sortBy('latestMeasurement')"
                     class="sort-link"
-                >Latest Measurement</a>
+                >Latest<br>Measurement</a>
                 <i :class="sortClass" v-if="sortColumn === 'latestMeasurement'"></i>
             </div>
             <div class="col-3">
--- a/client/src/components/map/contextbox/Contextbox.vue	Thu Nov 22 08:57:38 2018 +0100
+++ b/client/src/components/map/contextbox/Contextbox.vue	Thu Nov 22 10:20:21 2018 +0100
@@ -3,9 +3,11 @@
         <div @click="close" class="ui-element close-contextbox text-muted">
             <i class="fa fa-close"></i>
         </div>
-        <Bottlenecks v-if="showInContextBox === 'bottlenecks'"></Bottlenecks>
-        <Imports v-if="showInContextBox === 'imports'"></Imports>
-        <Staging v-if="showInContextBox === 'staging'"></Staging>
+        <transition name="fade" mode="out-in">
+            <Bottlenecks v-if="contextBoxContent === 'bottlenecks'"></Bottlenecks>
+            <Imports v-if="contextBoxContent === 'imports'"></Imports>
+            <Staging v-if="contextBoxContent === 'staging'"></Staging>
+        </transition>
     </div>
 </template>
 
@@ -34,22 +36,26 @@
     Staging: () => import("./Staging.vue")
   },
   computed: {
-    ...mapState("application", ["showSearchbarLastState", "showInContextBox"]),
+    ...mapState("application", [
+      "showSearchbarLastState",
+      "contextBoxContent",
+      "showContextBox"
+    ]),
     style() {
       return [
-        "ui-element shadow-xs contextbox ml-3",
+        "ui-element shadow-xs contextbox",
         {
-          contextboxcollapsed: !this.showInContextBox,
-          contextboxextended: this.showInContextBox,
-          "rounded-bottom": this.showInContextBox !== "imports",
-          rounded: this.showInContextBox === "imports"
+          contextboxcollapsed: !this.showContextBox,
+          contextboxextended: this.showContextBox,
+          "rounded-bottom": this.contextBoxContent !== "imports",
+          rounded: this.contextBoxContent === "imports"
         }
       ];
     }
   },
   methods: {
     close() {
-      this.$store.commit("application/showInContextBox", null);
+      this.$store.commit("application/showContextBox", false);
       this.$store.commit(
         "application/showSearchbar",
         this.showSearchbarLastState
@@ -64,17 +70,19 @@
   position: relative
   background-color: #ffffff
   opacity: $slight-transparent
-  transition: left 0.3s ease
+  transition: max-width 0.3s, max-height 0.3s
   overflow: hidden
   background: #fff
+  > div:last-child
+    width: 600px
 
 .contextboxcollapsed
-  width: 0
-  height: 0
-  transition: $transition-fast
+  max-width: 0
+  max-height: 0
 
 .contextboxextended
-  min-width: 600px
+  max-width: 600px
+  max-height: 600px
 
 .close-contextbox
   position: absolute
@@ -83,8 +91,4 @@
   top: 7px
   height: $icon-width
   width: $icon-height
-  display: none
-
-.contextboxextended .close-contextbox
-  display: block
 </style>
--- a/client/src/store/application.js	Thu Nov 22 08:57:38 2018 +0100
+++ b/client/src/store/application.js	Thu Nov 22 10:20:21 2018 +0100
@@ -29,7 +29,8 @@
     showIdentify: false,
     showLayers: true,
     showPdfTool: false,
-    showInContextBox: null, // bottlenecks, imports, staging
+    showContextBox: false,
+    contextBoxContent: null, // bottlenecks, imports, staging
     expandToolbar: false,
     countries: ["AT", "SK", "HU", "HR", "RS", "BiH", "BG", "RO", "UA"],
     searchQuery: "",
@@ -74,8 +75,11 @@
     showPdfTool: (state, show) => {
       state.showPdfTool = show;
     },
-    showInContextBox: (state, context) => {
-      state.showInContextBox = context;
+    showContextBox: (state, show) => {
+      state.showContextBox = show;
+    },
+    contextBoxContent: (state, context) => {
+      state.contextBoxContent = context;
       if (context) {
         state.showSearchbarLastState = state.showSearchbar;
       }