diff client/src/components/map/Search.vue @ 1282:a7dd8a3356fc

fixed contextBox animations
author Markus Kottlaender <markus@intevation.de>
date Thu, 22 Nov 2018 10:20:21 +0100
parents bc55ffaeb639
children ac6edfb83cf1
line wrap: on
line diff
--- 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);
         }