Merge pull request #6802 from nocodb/nc-fix/create-view-btn-ux-revamp

Create view btn ux revamp

packages/nc-gui/components/dashboard/TreeView/CreateViewBtn.vue

@@ -2,8 +2,15 @@
 import type { ViewType } from 'nocodb-sdk'
 import { ViewTypes } from 'nocodb-sdk'
 
+const props = defineProps<{
+  // Prop used to align the dropdown to the left in sidebar
+  alignLeftLevel: number | undefined
+}>()
+
 const { $e } = useNuxtApp()
 
+const alignLeftLevel = toRef(props, 'alignLeftLevel')
+
 const { refreshCommandPalette } = useCommandPalette()
 const viewsStore = useViewsStore()
 const { loadViews, navigateToView } = viewsStore
@@ -16,6 +23,14 @@ const toBeCreateType = ref<ViewTypes>()
 
 const isOpen = ref(false)
 
+const overlayClassName = computed(() => {
+  if (alignLeftLevel.value === 1) return 'nc-view-create-dropdown nc-view-create-dropdown-left-1'
+
+  if (alignLeftLevel.value === 2) return 'nc-view-create-dropdown nc-view-create-dropdown-left-2'
+
+  return 'nc-view-create-dropdown'
+})
+
 async function onOpenModal({
   title = '',
   type,
@@ -84,7 +99,7 @@ async function onOpenModal({
 </script>
 
 <template>
-  <NcDropdown v-model:visible="isOpen" destroy-popup-on-hide @click.stop="isOpen = true">
+  <NcDropdown v-model:visible="isOpen" destroy-popup-on-hide :overlay-class-name="overlayClassName" @click.stop="isOpen = true">
     <slot />
     <template #overlay>
       <NcMenu class="max-w-48">
@@ -151,3 +166,17 @@ async function onOpenModal({
   @apply text-brand-400;
 }
 </style>
+
+<style lang="scss">
+.nc-view-create-dropdown {
+  @apply !max-w-43 !min-w-43;
+}
+
+.nc-view-create-dropdown-left-1 {
+  @apply !left-18;
+}
+
+.nc-view-create-dropdown-left-2 {
+  @apply !left-23.5;
+}
+</style>

packages/nc-gui/components/dashboard/TreeView/TableNode.vue

@@ -169,7 +169,6 @@ const isTableOpened = computed(() => {
       >
         <div class="flex flex-row h-full items-center">
           <NcButton
-            v-if="(table.meta as any)?.hasNonDefaultViews"
             v-e="['c:table:toggle-expand']"
             type="text"
             size="xxsmall"
@@ -182,7 +181,6 @@ const isTableOpened = computed(() => {
               :class="{ '!rotate-180': isExpanded }"
             />
           </NcButton>
-          <div v-else class="sm:min-w-5.75 xs:min-w-7.5 h-2"></div>
           <div class="flex w-auto" :data-testid="`tree-view-table-draggable-handle-${table.title}`">
             <div
               class="flex items-center nc-table-icon"
@@ -296,19 +294,6 @@ const isTableOpened = computed(() => {
               </NcMenu>
             </template>
           </NcDropdown>
-          <DashboardTreeViewCreateViewBtn v-if="isUIAllowed('viewCreateOrEdit')">
-            <NcButton
-              v-e="['c:view:create']"
-              type="text"
-              size="xxsmall"
-              class="nc-create-view-btn nc-sidebar-node-btn"
-              :class="{
-                '!md:(visible opacity-100)': openedTableId === table.id,
-              }"
-            >
-              <GeneralIcon icon="plus" class="text-xl leading-5" style="-webkit-text-stroke: 0.15px" />
-            </NcButton>
-          </DashboardTreeViewCreateViewBtn>
         </div>
       </div>
       <DlgTableDelete

packages/nc-gui/components/dashboard/TreeView/ViewsList.vue

@@ -6,6 +6,7 @@ import Sortable from 'sortablejs'
 import type { Menu as AntMenu } from 'ant-design-vue'
 import {
   extractSdkResponseErrorMsg,
+  isDefaultBase,
   message,
   onMounted,
   parseProp,
@@ -32,6 +33,10 @@ const table = inject(SidebarTableInj)!
 
 const { isLeftSidebarOpen } = storeToRefs(useSidebarStore())
 
+const { activeTableId } = storeToRefs(useTablesStore())
+
+const { isUIAllowed } = useRoles()
+
 const { isMobileMode } = useGlobal()
 
 const { $e } = useNuxtApp()
@@ -77,6 +82,13 @@ function markItem(id: string) {
   }, 300)
 }
 
+const isDefaultSource = computed(() => {
+  const source = base.value?.sources?.find((b) => b.id === table.value.source_id)
+  if (!source) return false
+
+  return isDefaultBase(source)
+})
+
 /** validate view title */
 function validate(view: ViewType) {
   if (!view.title || view.title.trim().length < 0) {
@@ -367,31 +379,61 @@ function onOpenModal({
 
 <template>
   <a-menu
-    v-if="views.length"
     ref="menuRef"
     :class="{ dragging }"
     class="nc-views-menu flex flex-col w-full !border-r-0 !bg-inherit"
     :selected-keys="selected"
   >
-    <DashboardTreeViewViewsNode
-      v-for="view of views"
-      :id="view.id"
-      :key="view.id"
-      :view="view"
-      :on-validate="validate"
-      class="nc-view-item !rounded-md !px-0.75 !py-0.5 w-full transition-all ease-in duration-100"
+    <DashboardTreeViewCreateViewBtn
+      v-if="isUIAllowed('viewCreateOrEdit')"
       :class="{
-        'bg-gray-200': isMarked === view.id,
-        'active': activeView?.id === view.id,
-        [`nc-${view.type ? viewTypeAlias[view.type] : undefined || view.type}-view-item`]: true,
+        '!pl-18 !xs:(pl-19.75)': isDefaultSource,
+        '!pl-23.5 !xs:(pl-27)': !isDefaultSource,
       }"
-      :data-view-id="view.id"
-      @change-view="changeView"
-      @open-modal="onOpenModal"
-      @delete="openDeleteDialog"
-      @rename="onRename"
-      @select-icon="setIcon($event, view)"
-    />
+      :align-left-level="isDefaultSource ? 1 : 2"
+    >
+      <div
+        role="button"
+        class="nc-create-view-btn flex flex-row items-center cursor-pointer rounded-md w-full"
+        :class="{
+          'text-brand-500 hover:text-brand-600': activeTableId === table.id,
+          'text-gray-500 hover:text-brand-500': activeTableId !== table.id,
+        }"
+      >
+        <div class="flex flex-row items-center pl-1.25 !py-1.5 text-inherit">
+          <GeneralIcon icon="plus" />
+          <div class="pl-1.75">
+            {{
+              $t('general.createEntity', {
+                entity: $t('objects.view'),
+              })
+            }}
+          </div>
+        </div>
+      </div>
+    </DashboardTreeViewCreateViewBtn>
+
+    <template v-if="views.length">
+      <DashboardTreeViewViewsNode
+        v-for="view of views"
+        :id="view.id"
+        :key="view.id"
+        :view="view"
+        :on-validate="validate"
+        class="nc-view-item !rounded-md !px-0.75 !py-0.5 w-full transition-all ease-in duration-100"
+        :class="{
+          'bg-gray-200': isMarked === view.id,
+          'active': activeView?.id === view.id,
+          [`nc-${view.type ? viewTypeAlias[view.type] : undefined || view.type}-view-item`]: true,
+        }"
+        :data-view-id="view.id"
+        @change-view="changeView"
+        @open-modal="onOpenModal"
+        @delete="openDeleteDialog"
+        @rename="onRename"
+        @select-icon="setIcon($event, view)"
+      />
+    </template>
   </a-menu>
 </template>
 

packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue

@@ -316,7 +316,7 @@ useMenuCloseOnEsc(open)
       <div class="p-4 pr-0 bg-white w-90 rounded-2xl nc-table-toolbar-menu" data-testid="nc-fields-menu" @click.stop>
         <div
           v-if="!filterQuery && !isPublic && (activeView?.type === ViewTypes.GALLERY || activeView?.type === ViewTypes.KANBAN)"
-          class="flex flex-col gap-y-2 pr-6 mb-6"
+          class="flex flex-col gap-y-2 pr-4 mb-6"
         >
           <div class="flex text-sm select-none">Select cover image field</div>
           <a-select
@@ -330,17 +330,17 @@ useMenuCloseOnEsc(open)
           </a-select>
         </div>
 
-        <div class="pr-6" @click.stop>
+        <div class="pr-4" @click.stop>
           <a-input v-model:value="filterQuery" :placeholder="$t('placeholder.searchFields')" class="!rounded-lg">
             <template #prefix> <img src="~/assets/nc-icons/search.svg" class="h-3.5 w-3.5 mr-1" /> </template
           ></a-input>
         </div>
 
-        <div v-if="!filterQuery" class="pr-6">
+        <div v-if="!filterQuery" class="pr-4">
           <div class="pt-0.25 w-full bg-gray-50"></div>
         </div>
 
-        <div class="flex flex-col my-1.5 nc-scrollbar-md max-h-[47.5vh] pr-5">
+        <div class="flex flex-col my-1.5 nc-scrollbar-md max-h-[47.5vh] pr-3">
           <div class="nc-fields-list">
             <div
               v-if="!fields?.filter((el) => el.title.toLowerCase().includes(filterQuery.toLowerCase())).length"
@@ -421,7 +421,7 @@ useMenuCloseOnEsc(open)
             </Draggable>
           </div>
         </div>
-        <div class="flex pr-6 mt-1 gap-2">
+        <div class="flex pr-4 mt-1 gap-2">
           <NcButton
             v-if="!filterQuery"
             type="ghost"