Merge pull request #3276 from nocodb/fix/improved-welcome-page-ui

vue3: Improved welcome page UI and some other UI fixes

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

@@ -231,8 +231,8 @@ function openTableCreateDialog() {
 
         <div class="flex-1">
           <div
-            class="group flex items-center gap-2 pl-5 pr-3 py-2 text-primary/70 hover:(text-primary/100) cursor-pointer select-none"
             v-if="isUIAllowed('table-create')"
+            class="group flex items-center gap-2 pl-5 pr-3 py-2 text-primary/70 hover:(text-primary/100) cursor-pointer select-none"
             @click="openTableCreateDialog"
           >
             <MdiPlus />
@@ -366,15 +366,9 @@ function openTableCreateDialog() {
             </div>
           </div>
 
-          <a-card v-else class="mt-4 mx-4 !bg-gray-50">
-            <div class="flex flex-col items-center">
-              <a-empty :image="Empty.PRESENTED_IMAGE_SIMPLE" />
-
-              <a-button type="primary" @click.stop="openTableCreateDialog">
-                {{ $t('tooltip.addTable') }}
-              </a-button>
-            </div>
-          </a-card>
+          <div v-else class="mt-0.5 pt-16 mx-3 flex flex-col items-center border-t-1 border-gray-50">
+            <a-empty :image="Empty.PRESENTED_IMAGE_SIMPLE" />
+          </div>
         </div>
       </div>
 

packages/nc-gui-v2/components/dlg/TableCreate.vue

@@ -58,7 +58,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <a-modal v-model:visible="dialogShow" width="max(30vw, 600px)" @keydown.esc="dialogShow = false">
+  <a-modal v-model:visible="dialogShow" width="max(30vw, 600px)" centered @keydown.esc="dialogShow = false">
     <template #footer>
       <a-button key="back" size="large" @click="dialogShow = false">{{ $t('general.cancel') }}</a-button>
 

packages/nc-gui-v2/layouts/shared-view.vue

@@ -25,7 +25,7 @@ export default {
 
                 <MdiReload :class="{ 'animate-infinite animate-spin': isLoading }" />
               </template>
-              <div v-else class="text-xl font-semibold truncate">
+              <div v-else class="text-xl font-semibold truncate text-white">
                 {{ sharedView?.title }}
               </div>
             </div>

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

@@ -3,6 +3,7 @@ import type { UploadChangeParam, UploadFile } from 'ant-design-vue'
 import { message } from 'ant-design-vue'
 import { ref, useDialog, useDropZone, useFileDialog, useNuxtApp, useProject, watch } from '#imports'
 import DlgQuickImport from '~/components/dlg/QuickImport.vue'
+import DlgTableCreate from '~/components/dlg/TableCreate.vue'
 
 const dropZone = ref<HTMLDivElement>()
 
@@ -105,6 +106,36 @@ function openQuickImportDialog(type: QuickImportTypes, file: File) {
     reset()
   }
 }
+
+function openCreateTable() {
+  $e('a:table:open')
+
+  const isOpen = ref(true)
+  const { close } = useDialog(DlgTableCreate, {
+    'modelValue': isOpen,
+    'onUpdate:modelValue': closeDialog,
+  })
+
+  function closeDialog() {
+    isOpen.value = false
+
+    close(1000)
+
+    reset()
+  }
+}
+
+function onDropZoneClick(e: MouseEvent) {
+  const elements = document.elementsFromPoint(e.clientX, e.clientY)
+  const isCreateTableBtnClicked = elements.some((element) => element.classList.contains('create-table-btn'))
+
+  if (isCreateTableBtnClicked) {
+    openCreateTable()
+    return
+  }
+
+  open()
+}
 </script>
 
 <template>
@@ -119,7 +150,7 @@ function openQuickImportDialog(type: QuickImportTypes, file: File) {
         inline
         style="top: 20%; left: 20%; right: 20%; bottom: 20%"
         class="text-3xl flex items-center justify-center gap-2 border-1 border-dashed rounded hover:border-primary"
-        @click="open"
+        @click="onDropZoneClick"
       >
         <template v-if="isOverDropZone"> <MaterialSymbolsFileCopyOutline class="text-accent" /> Drop here </template>
       </general-overlay>
@@ -128,11 +159,13 @@ function openQuickImportDialog(type: QuickImportTypes, file: File) {
         <div class="text-3xl">Welcome to NocoDB!</div>
 
         <div class="flex items-center flex-wrap justify-center gap-2 prose-lg leading-8">
-          To get started, either drop a <span class="flex items-center gap-2"><PhFileCsv /> CSV</span>,
+          To get started, either drop a <span class="flex items-center gap-2"><PhFileCsv /> CSV,</span>
           <span class="flex items-center gap-2"><BiFiletypeJson /> JSON</span> or
-          <span class="flex items-center gap-2"><BiFiletypeXlsx /> Excel</span> file here or click the button in the top-left of
-          this page.
+          <span class="flex items-center gap-2"><BiFiletypeXlsx /> Excel file here or</span>
         </div>
+        <a-button type="primary" ghost class="create-table-btn">
+          <span class="prose text-[1rem] text-primary z-50" @click.stop="openCreateTable">Create new table</span>
+        </a-button>
       </div>
     </div>
   </div>