chore(gui-v2): views sidebar style fixes

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

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

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

@@ -1,7 +1,6 @@
 <script lang="ts" setup>
 import { ViewTypes } from 'nocodb-sdk'
-import { ref } from '#imports'
+import { ref, useUIPermission, viewIcons } from '#imports'
-import { viewIcons } from '~/utils'
 
 interface Emits {
   (event: 'openModal', data: { type: ViewTypes; title?: string }): void
@@ -13,8 +12,6 @@ const { isUIAllowed } = useUIPermission()
 
 const isView = ref(false)
 
-const showWebhookDrawer = ref(false)
-
 function onOpenModal(type: ViewTypes, title = '') {
   emits('openModal', { type, title })
 }
@@ -22,7 +19,6 @@ function onOpenModal(type: ViewTypes, title = '') {
 
 <template>
   <a-menu :selected-keys="[]" class="flex flex-col">
-    <div class="flex-1"></div>
     <div v-if="isUIAllowed('virtualViewsCreateOrEdit')">
       <h3 class="px-3 py-1 text-xs font-semibold flex items-center gap-4 text-gray-500">
         {{ $t('activity.createView') }}
@@ -38,7 +34,7 @@ function onOpenModal(type: ViewTypes, title = '') {
             {{ $t('msg.info.addView.grid') }}
           </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 }" />
 
             <div>{{ $t('objects.viewType.grid') }}</div>
@@ -50,17 +46,13 @@ function onOpenModal(type: ViewTypes, title = '') {
         </a-tooltip>
       </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">
           <template #title>
             {{ $t('msg.info.addView.gallery') }}
           </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 }" />
 
             <div>{{ $t('objects.viewType.gallery') }}</div>
@@ -83,7 +75,7 @@ function onOpenModal(type: ViewTypes, title = '') {
             {{ $t('msg.info.addView.form') }}
           </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 }" />
 
             <div>{{ $t('objects.viewType.form') }}</div>
@@ -95,44 +87,7 @@ function onOpenModal(type: ViewTypes, title = '') {
         </a-tooltip>
       </a-menu-item>
 
-      <div class="w-full h-4"></div>
+      <div class="w-full h-4" />
     </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>
 </template>

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 Sortable from 'sortablejs'
 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 {
   (event: 'openModal', data: { type: ViewTypes; title?: string; copyViewId?: string }): void
@@ -41,11 +52,6 @@ const selected = ref<string[]>([])
 /** dragging renamable view items */
 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>()
 
 let isMarked = $ref<string | false>(false)
@@ -165,18 +171,27 @@ async function onRename(view: ViewType) {
 }
 
 /** 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>
 
@@ -197,12 +212,10 @@ function onDeleted() {
       }"
       @change-view="changeView"
       @open-modal="$emit('openModal', $event)"
-      @delete="onDelete"
+      @delete="openDeleteDialog(view)"
       @rename="onRename"
     />
   </a-menu>
-
-  <dlg-view-delete v-model="deleteModalVisible" :view="toDelete" @deleted="onDeleted" />
 </template>
 
 <style lang="scss">
@@ -225,7 +238,7 @@ function onDeleted() {
   }
 
   .ant-menu-item:not(.sortable-chosen) {
-    @apply color-transition hover:!bg-transparent;
+    @apply color-transition;
   }
 
   .sortable-chosen {

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

@@ -146,14 +146,14 @@ function onStopEdit() {
 
 <template>
   <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()"
     @click.stop="onClick"
   >
     <div v-t="['a:view:open', { view: vModel.type }]" class="text-xs flex items-center w-full gap-2">
       <div class="flex w-auto">
         <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
         />
 

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">
       <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" />
     </div>

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

@@ -144,7 +144,7 @@ const onMenuClose = (visible: boolean) => {
 </script>
 
 <template>
-  <NuxtLayout id="content" class="flex">
+  <NuxtLayout id="content">
     <template #sidebar>
       <a-layout-sider
         ref="sidebar"
@@ -212,7 +212,7 @@ const onMenuClose = (visible: boolean) => {
             </div>
 
             <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>
                   <template #title>
                     <div class="group select-none flex items-center gap-4 py-1">