Browse Source

refactor(gui-v2): make view list scrollable

Signed-off-by: Pranav C <pranavxc@gmail.com>
pull/3262/head
Pranav C 2 years ago
parent
commit
f1fbf6eb14
  1. 1
      packages/nc-gui-v2/components/smartsheet-toolbar/LockType.vue
  2. 2
      packages/nc-gui-v2/components/smartsheet-toolbar/ViewActions.vue
  3. 2
      packages/nc-gui-v2/components/smartsheet/sidebar/MenuTop.vue
  4. 30
      packages/nc-gui-v2/components/smartsheet/sidebar/index.vue

1
packages/nc-gui-v2/components/smartsheet-toolbar/LockType.vue

@ -60,5 +60,4 @@ const selectedView = inject(ActiveViewInj)
@apply text-xs text-gray-500 font-weight-light; @apply text-xs text-gray-500 font-weight-light;
} }
} }
</style> </style>

2
packages/nc-gui-v2/components/smartsheet-toolbar/ViewActions.vue

@ -153,6 +153,7 @@ async function changeLockType(type: LockType) {
> >
<template #title> <template #title>
<div v-t="['c:navdraw:preview-as']" class="nc-project-menu-item group px-0"> <div v-t="['c:navdraw:preview-as']" class="nc-project-menu-item group px-0">
<SmartsheetToolbarLockType hide-tick :type="selectedView?.lock_type || LockType.Collaborative" /> <SmartsheetToolbarLockType hide-tick :type="selectedView?.lock_type || LockType.Collaborative" />
<MaterialSymbolsChevronRightRounded <MaterialSymbolsChevronRightRounded
@ -279,6 +280,7 @@ async function changeLockType(type: LockType) {
<a-modal v-model:visible="sharedViewListDlg" title="Shared view list" width="max(900px,60vw)" :footer="null"> <a-modal v-model:visible="sharedViewListDlg" title="Shared view list" width="max(900px,60vw)" :footer="null">
<SmartsheetToolbarSharedViewList v-if="sharedViewListDlg" /> <SmartsheetToolbarSharedViewList v-if="sharedViewListDlg" />
</a-modal> </a-modal>
</div> </div>
</template> </template>

2
packages/nc-gui-v2/components/smartsheet/sidebar/MenuTop.vue

@ -197,7 +197,7 @@ function onDeleted() {
<style lang="scss"> <style lang="scss">
.nc-views-menu { .nc-views-menu {
@apply flex-1 overflow-y-scroll scrollbar-thin-dull; @apply flex-1 min-h-[100px] overflow-y-scroll scrollbar-thin-dull;
.ghost, .ghost,
.ghost > * { .ghost > * {

30
packages/nc-gui-v2/components/smartsheet/sidebar/index.vue

@ -104,36 +104,10 @@ function onCreate(view: GridType | FormType | KanbanType | GalleryType) {
class="min-h-[var(--toolbar-height)] max-h-[var(--toolbar-height)]" class="min-h-[var(--toolbar-height)] max-h-[var(--toolbar-height)]"
:class="{ 'flex items-center py-3 px-3 justify-between border-b-1': !isForm }" :class="{ 'flex items-center py-3 px-3 justify-between border-b-1': !isForm }"
/> />
<div v-if="isOpen" class="flex-1 flex flex-col min-h-0">
<!--
<Toolbar v-else class="py-3 px-2 max-w-[50px] flex !flex-col-reverse gap-4 items-center mt-[-1px]">
<template #start>
<a-tooltip v-if="isUIAllowed('virtualViewsCreateOrEdit')" placement="left">
<template #title> {{ $t('objects.webhooks') }}</template>
<div class="nc-sidebar-right-item hover:after:bg-gray-300 nc-webhook-icon">
<MdiHook @click.stop />
</div>
</a-tooltip>
<div v-if="isUIAllowed('virtualViewsCreateOrEdit')" class="dot" />
<a-tooltip placement="left">
<template #title> Get API Snippet</template>
<div class="nc-sidebar-right-item group hover:after:bg-yellow-500">
<MdiXml class="group-hover:(!text-white)" @click.stop />
</div>
</a-tooltip>
<div v-if="!isForm" class="dot" />
</template>
</Toolbar>
-->
<div v-if="isOpen" class="flex-1 flex flex-col">
<MenuTop class="flex-1" @open-modal="openModal" @deleted="loadViews" @sorted="loadViews" /> <MenuTop class="flex-1" @open-modal="openModal" @deleted="loadViews" @sorted="loadViews" />
<a-divider v-if="isUIAllowed('virtualViewsCreateOrEdit')" class="my-2" /> <a-divider v-if="isUIAllowed('virtualViewsCreateOrEdit')" class="!my-3" />
<MenuBottom @open-modal="openModal" /> <MenuBottom @open-modal="openModal" />
</div> </div>

Loading…
Cancel
Save