Commit 73c986ef authored by Floréal Cabanettes's avatar Floréal Cabanettes

UI improvements for search + disable search of blur

parent 3a11c463
......@@ -42,7 +42,6 @@ init = function(locale, dark=true) {
search: false,
searchText: "",
searchFieldColor: dark ? "white": "black",
searchLaunched: false,
menuItems: [
{title: "Home", icon: "mdi-news"},
{title: "Recipes", icon: "mdi-news"},
......@@ -95,18 +94,17 @@ init = function(locale, dark=true) {
showHideSearch() {
this.searchText = "";
this.search = !this.search;
setTimeout(function() {$("#search").focus();}, 10);
if (this.search) {
setTimeout(function () {
$("#search").focus();
}, 10);
}
else {
$("#btn-search").blur();
}
},
launchSearch() {
console.log("Searching for " + this.searchText + "...");
this.searchLaunched = true;
},
searchBoxBlur() {
if (this.searchText === '' || this.searchText === null) {
this.search = false;
} else if(!this.searchLaunched) {
this.launchSearch()
}
},
onResize () {
this.windowSize = { x: window.innerWidth, y: window.innerHeight }
......
......@@ -24,10 +24,10 @@
<div class="flex-grow-1"></div>
<v-btn icon @click="showHideSearch()">
<v-btn icon @click="showHideSearch()" id="btn-search">
<v-icon>mdi-magnify</v-icon>
</v-btn><v-text-field :color="searchFieldColor" v-show="search" ref="search" id="search" @keydown.esc="showHideSearch()"
@keydown.enter="launchSearch()" v-model="searchText" @blur="searchBoxBlur()" @focus="searchLaunched=false"></v-text-field>
@keydown.enter="launchSearch()" v-model="searchText"></v-text-field>
</v-app-bar>
<v-sheet
id="scrolling-techniques-5"
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment