scinote-eln/scinote-web
1
1
Fork 0
mirror of https://github.com/scinote-eln/scinote-web.git synced 2024-09-20 14:45:56 +08:00
Code Issues Packages Projects Releases Wiki Activity

Add microinteractions to select dropdown [SCI-10328]

Browse source
This commit is contained in:
Anton 2024-03-05 13:29:21 +01:00
parent dc775f217b
commit df08d2f151
2 changed files with 38 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
app/javascript/vue/experiments/card.vue
View file

@ -24,7 +24,7 @@
<span class="text-sn-dark-grey">{{ i18n.t('experiments.card.start_date') }}</span>
<span class="font-bold">{{ params.created_at }}</span>
<template v-if="dtComponent.viewMode == 'archived'">
<template v-if="dtComponent.currentViewMode == 'archived'">
<span class="text-sn-dark-grey">{{ i18n.t('experiments.card.archived_date') }}</span>
<span class="font-bold">{{ params.archived_on }}</span>
</template>

45
app/javascript/vue/shared/select_dropdown.vue
View file

@ -1,11 +1,16 @@
<template>
<div v-click-outside="close" class="w-full">
<div v-click-outside="close"
@focus="open"
@keydown="keySelectOptions($event)"
tabindex="0" class="w-full focus:outline-none "
>
<div
ref="field"
class="px-3 py-1 border border-solid border-sn-light-grey rounded flex items-center cursor-pointer"
class="px-3 py-1 border border-solid rounded flex items-center cursor-pointer"
@click="open"
:class="[sizeClass, {
'border-sn-blue': isOpen,
'!border-sn-blue': isOpen,
'!border-sn-light-grey': !isOpen,
'bg-sn-sleepy-grey': disabled
}]"
>
@ -53,7 +58,7 @@
fixed z-[3000]">
<div v-if="multiple && withCheckboxes" class="p-2.5 pb-0">
<div @click="selectAll" :class="sizeClass"
class="border-x-0 border-transparent border-solid border-b-sn-light-grey
class="border border-x-0 !border-transparent border-solid !border-b-sn-light-grey
py-1.5 px-3 cursor-pointer flex items-center gap-2 shrink-0">
<div class="sn-checkbox-icon"
:class="selectAllState"
@ -62,11 +67,15 @@
</div>
</div>
<perfect-scrollbar class="p-2.5 flex flex-col max-h-80 relative" :class="{ 'pt-0': withCheckboxes }">
<template v-for="option in filteredOptions" :key="option[0]">
<template v-for="(option, i) in filteredOptions" :key="option[0]">
<div
@click.stop="setValue(option[0])"
ref="options"
class="py-1.5 px-3 rounded cursor-pointer flex items-center gap-2 shrink-0"
:class="[sizeClass, {'!bg-sn-super-light-blue': valueSelected(option[0])}]"
:class="[sizeClass, {
'!bg-sn-super-light-blue': valueSelected(option[0]) && focusedOption !== i,
'!bg-sn-super-light-grey': focusedOption === i ,
}]"
>
<div v-if="withCheckboxes"
class="sn-checkbox-icon shrink-0"
@ -117,7 +126,7 @@ export default {
urlParams: { type: Object, default: () => ({}) }
},
directives: {
'click-outside': vOnClickOutside,
'click-outside': vOnClickOutside
},
data() {
return {
@ -127,6 +136,7 @@ export default {
selectAllState: 'unchecked',
query: '',
fixedWidth: true,
focusedOption: null
};
},
mixins: [FixedFlyoutMixin],
@ -331,6 +341,25 @@ export default {
}
return true;
},
},
keySelectOptions(e) {
if (e.key !== 'Tab') {
e.stopPropagation();
e.preventDefault();
} else {
this.close();
}
if (e.key === 'ArrowDown') {
this.focusedOption = this.focusedOption === null ? 0 : this.focusedOption + 1;
if (this.focusedOption > this.$refs.options.length - 1) this.focusedOption = 0;
} else if (e.key === 'ArrowUp') {
this.focusedOption = (this.focusedOption || this.$refs.options.length) - 1;
if (this.focusedOption < 0) this.focusedOption = this.$refs.options.length - 1;
} else if (e.key === 'Enter' && this.focusedOption !== null) {
this.setValue(this.filteredOptions[this.focusedOption][0]);
}
this.$refs.options[this.focusedOption]?.scrollIntoView({ block: 'nearest' });
}
}
};
</script>