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

Fix microinteractions global search [SCI-10693]

Browse source
This commit is contained in:
Anton 2024-05-17 12:43:56 +02:00
parent 21cf50853d
commit 41b8f490e3
2 changed files with 31 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
app/assets/stylesheets/shared_styles/elements/checkboxes.scss
View file

@ -78,10 +78,14 @@ input[type="checkbox"].sci-checkbox {
}
&:focus {
outline: none;
outline: 0;
outline-offset: 0;
}
&:focus + .sci-checkbox-label {
outline: 4px solid var(--sn-science-blue-hover);
}
&:disabled {
cursor: default;

27
app/javascript/vue/global_search/container.vue
View file

@ -17,6 +17,7 @@
class="!pr-9"
:value="localQuery"
@change="changeQuery"
@keydown="focusHistoryItem"
@keydown.enter="changeQuery"
@blur="changeQuery"
:placeholder="i18n.t('nav.search')"
@ -30,9 +31,10 @@
<template v-slot:flyout >
<div v-for="(query, i) in reversedPreviousQueries" @click="setQuery(query)" :key="i"
ref="historyItems"
@keydown="focusHistoryItem"
tabindex="1"
@keydown.enter="setQuery(query)"
class="flex px-3 h-11 items-center gap-2 hover:bg-sn-super-light-grey cursor-pointer">
class="flex px-3 min-h-11 items-center gap-2 hover:bg-sn-super-light-grey cursor-pointer">
<i class="sn-icon sn-icon-history-search"></i>
{{ query }}
</div>
@ -169,6 +171,7 @@ export default {
previousQueries: [],
invalidQuery: false,
activeGroup: null,
focusedHistoryItem: null,
totalElements: 0,
searchGroups: [
'FoldersComponent',
@ -304,6 +307,28 @@ export default {
this.activeGroup = null;
this.filters.group = null;
},
focusHistoryItem(event) {
if (this.focusedHistoryItem === null && (event.key === 'ArrowDown' || event.key === 'ArrowUp')) {
this.focusedHistoryItem = 0;
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();
} 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();
} else if (event.key === 'Escape') {
this.$refs.historyContainer.isOpen = false;
}
},
resetFilters() {
this.filters = {
created_at: {