scinote-eln/scinote-web
1
1
Fork 0
mirror of https://github.com/scinote-eln/scinote-web.git synced 2025-03-06 12:43:06 +08:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #7566 from aignatov-bio/ai-sci-10706-improved-microinteractions-on-quick-search

Browse source 
Improve quick search interactions [SCI-10706]
This commit is contained in:
aignatov-bio 2024-05-17 10:13:13 +02:00 committed by GitHub
commit 1ed938c8df
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 29 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
app/javascript/vue/global_search/filters.vue
View file

@ -5,6 +5,7 @@
<div class="flex items-center gap-2 flex-wrap mb-6">
<template v-for="group in searchGroups" :key="group.value">
<button class="btn btn-secondary btn-xs"
ref="groupButtons"
:class="{'active': activeGroup === group.value}"
@click="setActiveGroup(group.value)">
{{ group.label }}

38
app/javascript/vue/navigation/quick_search.vue
View file

@ -6,23 +6,26 @@
>
<input ref="searchField" type="text" class="!pr-20" v-model="searchQuery" @keydown="focusHistoryItem"
:class="{'active': flyoutOpened}"
@keydown="focusHistoryItem"
@keydown.down="focusQuickSearchResults"
@keydown.escape="closeFlyout"
@focus="openHistory" :placeholder="i18n.t('nav.search')" @keydown.enter="saveQuery"/>
<i class="sn-icon sn-icon-search"></i>
<div v-if="this.searchQuery.length > 1" class="flex items-center gap-1 absolute right-2 top-1.5">
<div class="btn btn-light icon-btn btn-xs" @click="this.searchQuery = ''; $refs.searchField.focus()">
<button class="btn btn-light icon-btn btn-xs" @click="this.searchQuery = ''; $refs.searchField.focus()">
<i class="sn-icon sn-icon-close !m-0" :title="i18n.t('nav.clear')"></i>
</div>
<div class="btn btn-light icon-btn btn-xs" :title="i18n.t('search.quick_search.search_options')"
</button>
<button class="btn btn-light icon-btn btn-xs" :title="i18n.t('search.quick_search.search_options')"
:class="{'active': filtersOpened}" @click="filtersOpened = !filtersOpened">
<i class="sn-icon sn-icon-search-options !m-0"></i>
</div>
</button>
</div>
</div>
</template>
<template v-slot:flyout >
<SearchFilters
class="px-3.5"
ref="filters"
v-if="filtersOpened"
:teamsUrl="teamsUrl"
:usersUrl="usersUrl"
@ -45,6 +48,7 @@
<div v-else class="w-[600px]">
<div class="flex items-center gap-2">
<button class="btn btn-secondary btn-xs"
ref="experimentGroup"
:class="{'active': quickFilter === 'experiments'}"
@click="setQuickFilter('experiments')">
{{ i18n.t('search.quick_search.experiments') }}
@ -63,7 +67,7 @@
<hr class="my-2">
<a v-if="!loading" v-for="(result, i) in results" :key="i"
:href="getUrl(result.attributes)"
class="px-3 py-2 hover:bg-sn-super-light-grey cursor-pointer
class="px-3 py-2 hover:bg-sn-super-light-grey cursor-pointer focus:no-underline
text-sn-black hover:no-underline active:no-underline hover:text-black block"
>
<div class="flex items-center gap-2">
@ -106,9 +110,9 @@
</div>
</div>
<hr class="my-2">
<div class="btn btn-light truncate !block leading-10" @click="searchValue">
<button class="btn btn-light truncate !block leading-10" @click="searchValue">
{{ i18n.t('search.quick_search.all_results', {query: searchQuery}) }}
</div>
</button>
</div>
</template>
</GeneralDropdown>
@ -174,6 +178,9 @@ export default {
if (this.searchQuery.length > 1) {
this.fetchQuickSearchResults();
}
},
filtersOpened() {
if (this.filtersOpened) this.$nextTick(() => { this.focusFilters() });
}
},
data() {
@ -323,21 +330,32 @@ export default {
focusHistoryItem(event) {
if (this.focusedHistoryItem === null && (event.key === 'ArrowDown' || event.key === 'ArrowUp')) {
this.focusedHistoryItem = 0;
this.$refs.historyItems[this.focusedHistoryItem].focus();
this.$refs.historyItems[this.focusedHistoryItem]?.focus();
} else if (event.key === 'ArrowDown') {
event.preventDefault();
this.focusedHistoryItem += 1;
if (this.focusedHistoryItem >= this.$refs.historyItems.length) {
this.focusedHistoryItem = 0;
}
this.$refs.historyItems[this.focusedHistoryItem].focus();
this.$refs.historyItems[this.focusedHistoryItem]?.focus();
} else if (event.key === 'ArrowUp') {
event.preventDefault();
this.focusedHistoryItem -= 1;
if (this.focusedHistoryItem < 0) {
this.focusedHistoryItem = this.$refs.historyItems.length - 1;
}
this.$refs.historyItems[this.focusedHistoryItem].focus();
this.$refs.historyItems[this.focusedHistoryItem]?.focus();
}
},
focusQuickSearchResults(e) {
this.$refs.experimentGroup?.focus();
e.preventDefault();
},
focusFilters() {
const { filters } = this.$refs;
if (filters) {
filters.$refs.groupButtons[0].focus();
}
},
closeFlyout() {