scinote-eln/scinote-web
1
1
Fork 0
mirror of https://github.com/scinote-eln/scinote-web.git synced 2024-09-21 15:36:22 +08:00
Code Issues Packages Projects Releases Wiki Activity

Fix flyouts in main navigation [SCI-10208]

Browse source
This commit is contained in:
Anton 2024-02-20 10:55:03 +01:00
parent 596582d4fe
commit bcad0145a3
3 changed files with 97 additions and 93 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
app/javascript/vue/shared/general_dropdown.vue
View file

@ -3,6 +3,7 @@
<div ref="field" class="cursor-pointer" @click.stop="isOpen = (!isOpen || fieldOnlyOpen)"> <div ref="field" class="cursor-pointer" @click.stop="isOpen = (!isOpen || fieldOnlyOpen)">
<slot name="field"></slot> <slot name="field"></slot>
</div> </div>
<template v-if="isOpen">
<teleport to="body"> <teleport to="body">
<div ref="flyout" <div ref="flyout"
class="sn-dropdown fixed z-[3000] bg-sn-white inline-block class="sn-dropdown fixed z-[3000] bg-sn-white inline-block
@ -11,11 +12,11 @@
'right-0': position === 'right', 'right-0': position === 'right',
'left-0': position === 'left', 'left-0': position === 'left',
}" }"
v-if="isOpen"
> >
<slot name="flyout"></slot> <slot name="flyout"></slot>
</div> </div>
</teleport> </teleport>
</template>
</div> </div>
</template> </template>

3
app/javascript/vue/shared/menu_dropdown.vue
View file

@ -6,9 +6,9 @@
<i v-if="caret && isOpen" class="sn-icon sn-icon-up"></i> <i v-if="caret && isOpen" class="sn-icon sn-icon-up"></i>
<i v-else-if="caret" class="sn-icon sn-icon-down"></i> <i v-else-if="caret" class="sn-icon sn-icon-down"></i>
</button> </button>
<template v-if="isOpen">
<teleport to="body"> <teleport to="body">
<div ref="flyout" <div ref="flyout"
v-if="isOpen"
class="fixed z-[3000] sn-menu-dropdown bg-sn-white inline-block rounded p-2.5 sn-shadow-menu-sm flex flex-col gap-[1px]" class="fixed z-[3000] sn-menu-dropdown bg-sn-white inline-block rounded p-2.5 sn-shadow-menu-sm flex flex-col gap-[1px]"
:class="{ :class="{
'right-0': position === 'right', 'right-0': position === 'right',
@ -57,6 +57,7 @@
</span> </span>
</div> </div>
</teleport> </teleport>
</template>
</div> </div>
</template> </template>

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

@ -46,8 +46,9 @@
<i v-else class="sn-icon ml-auto" <i v-else class="sn-icon ml-auto"
:class="{ 'sn-icon-down': !isOpen, 'sn-icon-up': isOpen, 'text-sn-grey': disabled}"></i> :class="{ 'sn-icon-down': !isOpen, 'sn-icon-up': isOpen, 'text-sn-grey': disabled}"></i>
</div> </div>
<template v-if="isOpen">
<teleport to="body"> <teleport to="body">
<div v-if="isOpen" ref="flyout" <div ref="flyout"
class="sn-select-dropdown bg-white inline-block sn-shadow-menu-sm rounded w-full class="sn-select-dropdown bg-white inline-block sn-shadow-menu-sm rounded w-full
fixed z-[3000]"> fixed z-[3000]">
<div v-if="multiple && withCheckboxes" class="p-2.5 pb-0"> <div v-if="multiple && withCheckboxes" class="p-2.5 pb-0">
@ -84,6 +85,7 @@
</perfect-scrollbar> </perfect-scrollbar>
</div> </div>
</teleport> </teleport>
</template>
</div> </div>
</template> </template>