Mercurial > gemma

comparison client/src/components/map/Search.vue @ 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 bc55ffaeb639
children ac6edfb83cf1
comparison
equal deleted inserted replaced
1278:8f4bf8576acd 1282:a7dd8a3356fc
12 id="search" 12 id="search"
13 v-model="searchQuery" 13 v-model="searchQuery"
14 type="text" 14 type="text"
15 :class="searchInputStyle" 15 :class="searchInputStyle"
16 > 16 >
17 <div v-if="showSearchbar && searchResults !== null && !showInContextBox" class="searchresults border-top ui-element bg-white rounded-bottom d-print-none"> 17 <div v-if="showSearchbar && searchResults !== null && !showContextBox" class="searchresults border-top ui-element bg-white rounded-bottom d-print-none">
18 <div v-for="entry of searchResults" :key="entry.name" class="border-top py-2"> 18 <div v-for="entry of searchResults" :key="entry.name" class="border-top py-2">
19 <a href="#" @click.prevent="moveToSearchResult(entry)">{{ entry.name }}</a> 19 <a href="#" @click.prevent="moveToSearchResult(entry)">{{ entry.name }}</a>
20 </div> 20 </div>
21 </div> 21 </div>
22 </div> 22 </div>
97 searchResults: null, 97 searchResults: null,
98 isSearching: false 98 isSearching: false
99 }; 99 };
100 }, 100 },
101 computed: { 101 computed: {
102 ...mapState("application", ["showSearchbar", "showInContextBox"]), 102 ...mapState("application", [
103 "showSearchbar",
104 "showContextBox",
105 "contextBoxContent"
106 ]),
103 searchQuery: { 107 searchQuery: {
104 get() { 108 get() {
105 return this.$store.state.application.searchQuery; 109 return this.$store.state.application.searchQuery;
106 }, 110 },
107 set(value) { 111 set(value) {
117 return "✓"; 121 return "✓";
118 } 122 }
119 }, 123 },
120 searchbarContainerStyle() { 124 searchbarContainerStyle() {
121 return [ 125 return [
122 "input-group searchcontainer ml-3 shadow-xs", 126 "input-group searchcontainer shadow-xs",
123 { 127 {
124 "searchbar-collapsed": !this.showSearchbar, 128 "searchbar-collapsed": !this.showSearchbar,
125 "searchbar-expanded": this.showSearchbar, 129 "searchbar-expanded": this.showSearchbar,
126 "d-flex": this.showInContextBox !== "imports", 130 "d-flex": this.contextBoxContent !== "imports",
127 "d-none": this.showInContextBox === "imports" 131 "d-none": this.contextBoxContent === "imports"
128 } 132 }
129 ]; 133 ];
130 }, 134 },
131 searchInputStyle() { 135 searchInputStyle() {
132 return [ 136 return [
133 "form-control ui-element search searchbar d-print-none border-0", 137 "form-control ui-element search searchbar d-print-none border-0",
134 { "rounded-top-right": this.showInContextBox || this.searchResults } 138 { "rounded-top-right": this.showContextBox || this.searchResults }
135 ]; 139 ];
136 }, 140 },
137 searchButtonStyle() { 141 searchButtonStyle() {
138 return [ 142 return [
139 "ui-element input-group-text p-0 d-flex border-0 justify-content-center searchlabel bg-white d-print-none", 143 "ui-element input-group-text p-0 d-flex border-0 justify-content-center searchlabel bg-white d-print-none",
140 { 144 {
141 rounded: !this.showSearchbar, 145 rounded: !this.showSearchbar,
142 "rounded-left": this.showSearchbar, 146 "rounded-left": this.showSearchbar,
143 "rounded-top-left": 147 "rounded-top-left":
144 this.showSearchbar && (this.showInContextBox || this.searchResults) 148 this.showSearchbar && (this.showContextBox || this.searchResults)
145 } 149 }
146 ]; 150 ];
147 } 151 }
148 }, 152 },
149 watch: { 153 watch: {
209 } 213 }
210 // this.searchQuery = ""; // clear search query again 214 // this.searchQuery = ""; // clear search query again
211 this.toggleSearchbar(); 215 this.toggleSearchbar();
212 }, 216 },
213 toggleSearchbar() { 217 toggleSearchbar() {
214 if (!this.showInContextBox) { 218 if (!this.showContextBox) {
215 if (!this.showSearchbar) { 219 if (!this.showSearchbar) {
216 setTimeout(setFocus, 300); 220 setTimeout(setFocus, 300);
217 } 221 }
218 this.$store.commit("application/showSearchbar", !this.showSearchbar); 222 this.$store.commit("application/showSearchbar", !this.showSearchbar);
219 } 223 }