Mercurial > gemma
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); }