2861042485
* Disabled Quick Note * Note crunches over when menu is open * Added a cool loader * Remomoved locked notes * Added full note encryption * Added encrypted search index * Added encrypted shared notes * Made search bar have a clear and search button * Tags only loade when clicking on the tags menu * Tweaked home page to be a little more sane * built out some gigantic test cases * simplified a lot of things to make entire app easier to maintain
110 lines
2.5 KiB
Vue
110 lines
2.5 KiB
Vue
<style type="text/css" scoped>
|
|
.fixed-search {
|
|
position: fixed;
|
|
top: 50%;
|
|
left: 0;
|
|
right: 0;
|
|
padding: 10px;
|
|
}
|
|
.floating-button {
|
|
position: absolute;
|
|
right: 0;
|
|
top: 4px;
|
|
z-index: 2;
|
|
}
|
|
</style>
|
|
<template>
|
|
<span>
|
|
|
|
<div class="ui form" v-if="!$store.getters.getIsUserOnMobile">
|
|
<!-- normal search menu -->
|
|
<div class="ui left icon fluid input">
|
|
<input ref="desktopSearch" v-model="searchTerm" @keyup.enter="search" placeholder="Search Notes and Files" />
|
|
<i class="search icon"></i>
|
|
</div>
|
|
<div class="floating-button" v-if="searchTerm.length > 0 && !searched">
|
|
<div class="ui green compact button" v-on:click="search()">Search</div>
|
|
</div>
|
|
<div class="floating-button" v-if="searchTerm.length > 0 && searched">
|
|
<div class="ui grey compact button" v-on:click="clear()">Clear</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Only show button on mobile -->
|
|
<span class="ui basic icon button" v-on:click="openFloatingSearch" v-if="$store.getters.getIsUserOnMobile">
|
|
<i class="green search icon"></i>
|
|
</span>
|
|
|
|
<div class="fixed-search" v-if="showFixedSearch">
|
|
<div class="ui raised segment">
|
|
<h2 class="ui center aligned header">Search!</h2>
|
|
<div class="ui form">
|
|
<div class="ui left icon fluid input">
|
|
<input
|
|
ref="fixedSearch"
|
|
v-model="searchTerm"
|
|
@keyup.enter="search"
|
|
v-on:blur="showFixedSearch = false"
|
|
placeholder="Press Enter to Search" />
|
|
<i class="search icon"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</span>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
export default {
|
|
|
|
data: function(){
|
|
return {
|
|
searchTerm: '',
|
|
showFixedSearch: false,
|
|
searched: false,
|
|
}
|
|
},
|
|
beforeCreate: function(){
|
|
},
|
|
mounted: function(){
|
|
|
|
//search clear
|
|
this.$bus.$on('reset_fast_filters', () => {
|
|
this.searchTerm = ''
|
|
})
|
|
|
|
},
|
|
methods: {
|
|
openFloatingSearch(){
|
|
this.showFixedSearch = !this.showFixedSearch
|
|
|
|
if(this.showFixedSearch){
|
|
this.$nextTick( () => {
|
|
this.searchTerm = ''
|
|
this.$refs.fixedSearch.focus()
|
|
})
|
|
}
|
|
},
|
|
clear(){
|
|
this.searched = false
|
|
this.searchTerm = ''
|
|
if(!this.$store.getters.getIsUserOnMobile){
|
|
this.$refs.desktopSearch.focus()
|
|
}
|
|
this.$bus.$emit('note_reload')
|
|
},
|
|
search(){
|
|
this.searched = true
|
|
if(this.$store.getters.getIsUserOnMobile){
|
|
this.$refs.fixedSearch.blur()
|
|
}
|
|
if(!this.$store.getters.getIsUserOnMobile){
|
|
this.$refs.desktopSearch.focus()
|
|
}
|
|
this.$bus.$emit('update_search_term', this.searchTerm)
|
|
},
|
|
}
|
|
}
|
|
</script> |