Browse Source

chore(gui-v2): views sidebar style fixes

pull/3280/head
braks 2 years ago
parent
commit
870823f199
  1. 4
      packages/nc-gui-v2/assets/style.scss
  2. 57
      packages/nc-gui-v2/components/smartsheet/sidebar/MenuBottom.vue
  3. 59
      packages/nc-gui-v2/components/smartsheet/sidebar/MenuTop.vue
  4. 4
      packages/nc-gui-v2/components/smartsheet/sidebar/RenameableMenuItem.vue
  5. 4
      packages/nc-gui-v2/components/smartsheet/sidebar/index.vue
  6. 4
      packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue

4
packages/nc-gui-v2/assets/style.scss

@ -210,6 +210,10 @@ a {
} }
} }
.ant-dropdown-menu {
@apply !p-0 !rounded;
}
.ant-dropdown-menu-submenu-popup { .ant-dropdown-menu-submenu-popup {
@apply scrollbar-thin-dull min-w-50 max-h-90vh overflow-auto !shadow !rounded; @apply scrollbar-thin-dull min-w-50 max-h-90vh overflow-auto !shadow !rounded;
} }

57
packages/nc-gui-v2/components/smartsheet/sidebar/MenuBottom.vue

@ -1,7 +1,6 @@
<script lang="ts" setup> <script lang="ts" setup>
import { ViewTypes } from 'nocodb-sdk' import { ViewTypes } from 'nocodb-sdk'
import { ref } from '#imports' import { ref, useUIPermission, viewIcons } from '#imports'
import { viewIcons } from '~/utils'
interface Emits { interface Emits {
(event: 'openModal', data: { type: ViewTypes; title?: string }): void (event: 'openModal', data: { type: ViewTypes; title?: string }): void
@ -13,8 +12,6 @@ const { isUIAllowed } = useUIPermission()
const isView = ref(false) const isView = ref(false)
const showWebhookDrawer = ref(false)
function onOpenModal(type: ViewTypes, title = '') { function onOpenModal(type: ViewTypes, title = '') {
emits('openModal', { type, title }) emits('openModal', { type, title })
} }
@ -22,7 +19,6 @@ function onOpenModal(type: ViewTypes, title = '') {
<template> <template>
<a-menu :selected-keys="[]" class="flex flex-col"> <a-menu :selected-keys="[]" class="flex flex-col">
<div class="flex-1"></div>
<div v-if="isUIAllowed('virtualViewsCreateOrEdit')"> <div v-if="isUIAllowed('virtualViewsCreateOrEdit')">
<h3 class="px-3 py-1 text-xs font-semibold flex items-center gap-4 text-gray-500"> <h3 class="px-3 py-1 text-xs font-semibold flex items-center gap-4 text-gray-500">
{{ $t('activity.createView') }} {{ $t('activity.createView') }}
@ -38,7 +34,7 @@ function onOpenModal(type: ViewTypes, title = '') {
{{ $t('msg.info.addView.grid') }} {{ $t('msg.info.addView.grid') }}
</template> </template>
<div class="text-xs flex items-center h-full w-full gap-2"> <div class="nc-project-menu-item text-xs flex items-center h-full w-full gap-2">
<component :is="viewIcons[ViewTypes.GRID].icon" :style="{ color: viewIcons[ViewTypes.GRID].color }" /> <component :is="viewIcons[ViewTypes.GRID].icon" :style="{ color: viewIcons[ViewTypes.GRID].color }" />
<div>{{ $t('objects.viewType.grid') }}</div> <div>{{ $t('objects.viewType.grid') }}</div>
@ -50,17 +46,13 @@ function onOpenModal(type: ViewTypes, title = '') {
</a-tooltip> </a-tooltip>
</a-menu-item> </a-menu-item>
<a-menu-item <a-menu-item key="gallery" class="group !flex !items-center !my-0 nc-create-2-view" @click="onOpenModal(ViewTypes.GALLERY)">
key="gallery"
class="group !flex !items-center !-my0 !h-[30px] nc-create-2-view"
@click="onOpenModal(ViewTypes.GALLERY)"
>
<a-tooltip :mouse-enter-delay="1" placement="left"> <a-tooltip :mouse-enter-delay="1" placement="left">
<template #title> <template #title>
{{ $t('msg.info.addView.gallery') }} {{ $t('msg.info.addView.gallery') }}
</template> </template>
<div class="text-xs flex items-center h-full w-full gap-2"> <div class="nc-project-menu-item text-xs flex items-center h-full w-full gap-2">
<component :is="viewIcons[ViewTypes.GALLERY].icon" :style="{ color: viewIcons[ViewTypes.GALLERY].color }" /> <component :is="viewIcons[ViewTypes.GALLERY].icon" :style="{ color: viewIcons[ViewTypes.GALLERY].color }" />
<div>{{ $t('objects.viewType.gallery') }}</div> <div>{{ $t('objects.viewType.gallery') }}</div>
@ -83,7 +75,7 @@ function onOpenModal(type: ViewTypes, title = '') {
{{ $t('msg.info.addView.form') }} {{ $t('msg.info.addView.form') }}
</template> </template>
<div class="text-xs flex items-center h-full w-full gap-2"> <div class="nc-project-menu-item text-xs flex items-center h-full w-full gap-2">
<component :is="viewIcons[ViewTypes.FORM].icon" :style="{ color: viewIcons[ViewTypes.FORM].color }" /> <component :is="viewIcons[ViewTypes.FORM].icon" :style="{ color: viewIcons[ViewTypes.FORM].color }" />
<div>{{ $t('objects.viewType.form') }}</div> <div>{{ $t('objects.viewType.form') }}</div>
@ -95,44 +87,7 @@ function onOpenModal(type: ViewTypes, title = '') {
</a-tooltip> </a-tooltip>
</a-menu-item> </a-menu-item>
<div class="w-full h-4"></div> <div class="w-full h-4" />
</div> </div>
<!--
todo: bring back later
<general-flipping-card class="my-4 lg:my-6 min-h-[100px]" :triggers="['click', { duration: 15000 }]">
<template #front>
<div class="flex h-full w-full gap-6 flex-col">
<general-social />
<div>
<a
v-t="['e:hiring']"
class="px-4 py-3 rounded border text-xs text-current"
href="https://angel.co/company/nocodb"
target="_blank"
@click.stop
>
🚀 We are Hiring! 🚀
</a>
</div>
</div>
</template>
<template #back>
&lt;!&ndash; todo: add project cost &ndash;&gt;
<a
href="https://github.com/sponsors/nocodb"
target="_blank"
class="group flex items-center gap-2 w-full mx-3 px-4 py-3 rounded-l border transform translate-x-4 hover:(translate-x-0 shadow-lg !opacity-100) transition duration-150 ease !text-xs text-current"
@click.stop
>
<mdi-cards-heart class="text-red-500" />
{{ $t('activity.sponsorUs') }}
</a>
</template>
</general-flipping-card> -->
<WebhookDrawer v-if="showWebhookDrawer" v-model="showWebhookDrawer" />
</a-menu> </a-menu>
</template> </template>

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

@ -7,9 +7,20 @@ import { message } from 'ant-design-vue'
import type { Ref } from 'vue' import type { Ref } from 'vue'
import Sortable from 'sortablejs' import Sortable from 'sortablejs'
import RenameableMenuItem from './RenameableMenuItem.vue' import RenameableMenuItem from './RenameableMenuItem.vue'
import { inject, onMounted, ref, useApi, useRoute, useRouter, watch } from '#imports' import {
import { extractSdkResponseErrorMsg } from '~/utils' ActiveViewInj,
import { ActiveViewInj, ViewListInj } from '~/context' ViewListInj,
extractSdkResponseErrorMsg,
inject,
onMounted,
ref,
useApi,
useDialog,
useRoute,
useRouter,
watch,
} from '#imports'
import DlgViewDelete from '~/components/dlg/ViewDelete.vue'
interface Emits { interface Emits {
(event: 'openModal', data: { type: ViewTypes; title?: string; copyViewId?: string }): void (event: 'openModal', data: { type: ViewTypes; title?: string; copyViewId?: string }): void
@ -41,11 +52,6 @@ const selected = ref<string[]>([])
/** dragging renamable view items */ /** dragging renamable view items */
let dragging = $ref(false) let dragging = $ref(false)
let deleteModalVisible = $ref(false)
/** view to delete for modal */
let toDelete = $ref<Record<string, any> | undefined>()
const menuRef = $ref<typeof AntMenu>() const menuRef = $ref<typeof AntMenu>()
let isMarked = $ref<string | false>(false) let isMarked = $ref<string | false>(false)
@ -165,18 +171,27 @@ async function onRename(view: ViewType) {
} }
/** Open delete modal */ /** Open delete modal */
async function onDelete(view: Record<string, any>) { function openDeleteDialog(view: Record<string, any>) {
toDelete = view const isOpen = ref(true)
deleteModalVisible = true
} const { close } = useDialog(DlgViewDelete, {
'modelValue': isOpen,
'view': view,
'onUpdate:modelValue': closeDialog,
'onDeleted': () => {
closeDialog()
emits('deleted')
// return to the default view
activeView.value = views.value[0]
},
})
/** View was deleted, trigger reload */ function closeDialog() {
function onDeleted() { isOpen.value = false
emits('deleted')
toDelete = undefined close(1000)
deleteModalVisible = false }
// return to the default view
activeView.value = views.value[0]
} }
</script> </script>
@ -197,12 +212,10 @@ function onDeleted() {
}" }"
@change-view="changeView" @change-view="changeView"
@open-modal="$emit('openModal', $event)" @open-modal="$emit('openModal', $event)"
@delete="onDelete" @delete="openDeleteDialog(view)"
@rename="onRename" @rename="onRename"
/> />
</a-menu> </a-menu>
<dlg-view-delete v-model="deleteModalVisible" :view="toDelete" @deleted="onDeleted" />
</template> </template>
<style lang="scss"> <style lang="scss">
@ -225,7 +238,7 @@ function onDeleted() {
} }
.ant-menu-item:not(.sortable-chosen) { .ant-menu-item:not(.sortable-chosen) {
@apply color-transition hover:!bg-transparent; @apply color-transition;
} }
.sortable-chosen { .sortable-chosen {

4
packages/nc-gui-v2/components/smartsheet/sidebar/RenameableMenuItem.vue

@ -146,14 +146,14 @@ function onStopEdit() {
<template> <template>
<a-menu-item <a-menu-item
class="select-none group !flex !items-center !my-0" class="select-none group !flex !items-center !my-0 hover:(bg-primary !bg-opacity-5)"
@dblclick.stop="isUIAllowed('virtualViewsCreateOrEdit') && onDblClick()" @dblclick.stop="isUIAllowed('virtualViewsCreateOrEdit') && onDblClick()"
@click.stop="onClick" @click.stop="onClick"
> >
<div v-t="['a:view:open', { view: vModel.type }]" class="text-xs flex items-center w-full gap-2"> <div v-t="['a:view:open', { view: vModel.type }]" class="text-xs flex items-center w-full gap-2">
<div class="flex w-auto"> <div class="flex w-auto">
<MdiDrag <MdiDrag
class="nc-drag-icon hidden group-hover:block transition-opacity opacity-0 group-hover:opacity-100 text-gray-500 cursor-move" class="nc-drag-icon hidden group-hover:block transition-opacity opacity-0 group-hover:opacity-100 text-gray-500 !cursor-move"
@click.stop.prevent @click.stop.prevent
/> />

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

@ -107,9 +107,7 @@ function onCreate(view: ViewType) {
<div v-if="isOpen" class="flex-1 flex flex-col min-h-0"> <div v-if="isOpen" class="flex-1 flex flex-col min-h-0">
<MenuTop @open-modal="openModal" @deleted="loadViews" @sorted="loadViews" /> <MenuTop @open-modal="openModal" @deleted="loadViews" @sorted="loadViews" />
<div v-if="isUIAllowed('virtualViewsCreateOrEdit')" class="px-3"> <div v-if="isUIAllowed('virtualViewsCreateOrEdit')" class="!my-3 w-full border-b-1" />
<div class="!my-3 w-full border-b-1 border-dashed" />
</div>
<MenuBottom @open-modal="openModal" /> <MenuBottom @open-modal="openModal" />
</div> </div>

4
packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue

@ -144,7 +144,7 @@ const onMenuClose = (visible: boolean) => {
</script> </script>
<template> <template>
<NuxtLayout id="content" class="flex"> <NuxtLayout id="content">
<template #sidebar> <template #sidebar>
<a-layout-sider <a-layout-sider
ref="sidebar" ref="sidebar"
@ -212,7 +212,7 @@ const onMenuClose = (visible: boolean) => {
</div> </div>
<template #overlay> <template #overlay>
<a-menu class="ml-6 !w-[300px] !text-sm !p-0 !rounded"> <a-menu class="!ml-1 !w-[300px] !text-sm">
<a-menu-item-group> <a-menu-item-group>
<template #title> <template #title>
<div class="group select-none flex items-center gap-4 py-1"> <div class="group select-none flex items-center gap-4 py-1">

Loading…
Cancel
Save