refactor(gui-v2): edit column and treeview ui updates

Signed-off-by: Pranav C <pranavxc@gmail.com>

packages/nc-gui-v2/components.d.ts

@@ -110,6 +110,8 @@ declare module '@vue/runtime-core' {
     MdiInformation: typeof import('~icons/mdi/information')['default']
     MdiKeyboardReturn: typeof import('~icons/mdi/keyboard-return')['default']
     MdiKeyStar: typeof import('~icons/mdi/key-star')['default']
+    MdiLens: typeof import('~icons/mdi/lens')['default']
+    MdiLense: typeof import('~icons/mdi/lense')['default']
     MdiLink: typeof import('~icons/mdi/link')['default']
     MdiLinkVariantRemove: typeof import('~icons/mdi/link-variant-remove')['default']
     MdiLogout: typeof import('~icons/mdi/logout')['default']
@@ -136,6 +138,9 @@ declare module '@vue/runtime-core' {
     MdiTrashCan: typeof import('~icons/mdi/trash-can')['default']
     MdiWhatsapp: typeof import('~icons/mdi/whatsapp')['default']
     MdiXml: typeof import('~icons/mdi/xml')['default']
+    MdiZomm: typeof import('~icons/mdi/zomm')['default']
+    MdiZoom: typeof import('~icons/mdi/zoom')['default']
+    MdiZoomIn: typeof import('~icons/mdi/zoom-in')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
   }

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

@@ -133,13 +133,15 @@ const activeTable = computed(() => {
 
 <template>
   <div class="nc-treeview-container flex flex-col">
-    <div class="px-6 py-[11.75px] border-b-1">
+    <div class="px-6 py-[8.75px] border-b-1 nc-filter-input">
-      <a-input-search
+      <div class="flex items-center bg-gray-50 rounded relative">
-        v-model:value="filterQuery"
+        <a-input
-        size="small"
+          v-model:value="filterQuery"
-        class="nc-filter-input"
+          class="nc-filter-input !bg-transparent"
-        :placeholder="$t('placeholder.searchProjectTree')"
+          :placeholder="$t('placeholder.searchProjectTree')"
-      />
+        />
+        <MdiSearch class="nc-filter-input-icon text-gray-400 mx-3 absolute right-[-4px] top-[7px]" />
+      </div>
     </div>
 
     <a-dropdown :trigger="['contextmenu']">
@@ -156,10 +158,7 @@ const activeTable = computed(() => {
           </span>
         </div>
         <div style="direction: ltr" class="flex-1">
-          <div
+          <div v-if="tables.length" class="transition-height duration-200 overflow-hidden">
-            v-if="tables.length"
-            class="transition-height duration-200 overflow-hidden"
-          >
             <div :key="key" ref="menuRef" class="border-none sortable-list">
               <div
                 v-for="table of tables"
@@ -239,7 +238,7 @@ const activeTable = computed(() => {
   </div>
 </template>
 
-<style scoped>
+<style scoped lang="scss">
 .nc-treeview-container {
   @apply h-[calc(100vh_-_var(--header-height))];
 }
@@ -304,4 +303,10 @@ const activeTable = computed(() => {
 .nc-tree-item:hover {
   @apply !text-grey after:(!opacity-5);
 }
+
+:deep(.nc-filter-input) {
+  .ant-input {
+    @apply pr-6 !border-0;
+  }
+}
 </style>

packages/nc-gui-v2/components/dashboard/settings/AppStore.vue

@@ -116,7 +116,7 @@ onMounted(async () => {
             <div class="flex ml-0.5">Reset</div>
           </div>
         </a-button>
-        <a-button v-else size="small" outlined @click="showInstallPluginModal(app)">
+        <a-button v-else size="small" outlined type="primary" ghost @click="showInstallPluginModal(app)">
           <div class="flex flex-row justify-center items-center caption capitalize nc-app-store-card-install">
             <MdiPlusIcon />
             Install

packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue

@@ -105,7 +105,7 @@ if (!formState.value?.column_name) {
 </script>
 
 <template>
-  <div class="min-w-[400px] w-max max-h-[95vh] bg-white shadow p-6 overflow-auto" @click.stop>
+  <div class="min-w-[400px] max-h-[95vh] bg-white shadow p-6 overflow-auto" @click.stop>
     <a-form v-model="formState" name="column-create-or-edit" layout="vertical">
       <div class="flex flex-col gap-2">
         <a-form-item :label="$t('labels.columnName')" v-bind="validateInfos.title">

packages/nc-gui-v2/components/smartsheet-header/Cell.vue

@@ -16,6 +16,14 @@ const column = toRef(props, 'column')
 
 provide(ColumnInj, column)
 
+const editColumnDropdown = ref(false)
+
+function onVisibleChange() {
+  // only allow to close the EditOrAdd component
+  // by clicking cancel button
+  editColumnDropdown.value = true
+}
+
 // instantiate column update store
 useProvideColumnCreateStore(meta as Ref<TableType>, column)
 </script>
@@ -28,8 +36,26 @@ useProvideColumnCreateStore(meta as Ref<TableType>, column)
 
     <template v-if="!hideMenu">
       <div class="flex-1" />
-      <SmartsheetHeaderMenu v-if="!isForm" />
+      <SmartsheetHeaderMenu v-if="!isForm" @edit="editColumnDropdown = true" />
     </template>
+
+    <a-dropdown
+      v-model:visible="editColumnDropdown"
+      :trigger="['click']"
+      placement="bottomRight"
+      @visible-change="onVisibleChange"
+    >
+      <div />
+      <template #overlay>
+        <SmartsheetColumnEditOrAdd
+          class="w-full"
+          :edit-column-dropdown="editColumnDropdown"
+          @click.stop
+          @keydown.stop
+          @cancel="editColumnDropdown = false"
+        />
+      </template>
+    </a-dropdown>
   </div>
 </template>
 

packages/nc-gui-v2/components/smartsheet-header/Menu.vue

@@ -12,8 +12,7 @@ import MdiDeleteIcon from '~icons/mdi/delete-outline'
 import MdiMenuDownIcon from '~icons/mdi/menu-down'
 
 const { virtual = false } = defineProps<{ virtual?: boolean }>()
-
+const emit = defineEmits(['edit'])
-const editColumnDropdown = ref(false)
 
 const column = inject(ColumnInj)
 
@@ -56,31 +55,14 @@ const setAsPrimaryValue = async () => {
     })
   }
 }
-
-function onVisibleChange() {
-  // only allow to close the EditOrAdd component
-  // by clicking cancel button
-  editColumnDropdown.value = true
-}
 </script>
 
 <template>
-  <a-dropdown v-model:visible="editColumnDropdown" :trigger="['click']" placement="bottomRight" @visible-change="onVisibleChange">
-    <span />
-    <template #overlay>
-      <SmartsheetColumnEditOrAdd
-        :edit-column-dropdown="editColumnDropdown"
-        @click.stop
-        @keydown.stop
-        @cancel="editColumnDropdown = false"
-      />
-    </template>
-  </a-dropdown>
   <a-dropdown placement="bottomRight" :trigger="['hover']">
     <MdiMenuDownIcon class="text-grey nc-ui-dt-dropdown" />
     <template #overlay>
       <a-menu class="shadow bg-white">
-        <a-menu-item @click="editColumnDropdown = true">
+        <a-menu-item @click="emit('edit')">
           <div class="nc-column-edit nc-header-menu-item">
             <MdiEditIcon class="text-primary" />
             <!-- Edit -->

packages/nc-gui-v2/components/smartsheet-header/VirtualCell.vue

@@ -9,6 +9,8 @@ const props = defineProps<{ column: ColumnType & { meta: any }; hideMenu?: boole
 const column = toRef(props, 'column')
 const hideMenu = toRef(props, 'hideMenu')
 
+const editColumnDropdown = ref(false)
+
 provide(ColumnInj, column)
 
 const { metas } = useMetas()
@@ -76,6 +78,12 @@ const tooltipMsg = computed(() => {
   return ''
 })
 
+function onVisibleChange() {
+  // only allow to close the EditOrAdd component
+  // by clicking cancel button
+  editColumnDropdown.value = true
+}
+
 useProvideColumnCreateStore(meta as Ref<TableType>, column)
 </script>
 
@@ -101,8 +109,26 @@ useProvideColumnCreateStore(meta as Ref<TableType>, column)
     <template v-if="!hideMenu">
       <v-spacer />
 
-      <SmartsheetHeaderMenu v-if="!isForm" :virtual="true" />
+      <SmartsheetHeaderMenu v-if="!isForm" :virtual="true" @edit="editColumnDropdown = true" />
     </template>
+
+    <a-dropdown
+      v-model:visible="editColumnDropdown"
+      :trigger="['click']"
+      placement="bottomRight"
+      @visible-change="onVisibleChange"
+    >
+      <div />
+      <template #overlay>
+        <SmartsheetColumnEditOrAdd
+          class="w-full"
+          :edit-column-dropdown="editColumnDropdown"
+          @click.stop
+          @keydown.stop
+          @cancel="editColumnDropdown = false"
+        />
+      </template>
+    </a-dropdown>
   </div>
 </template>
 

packages/nc-gui-v2/components/tabs/Auth.vue

@@ -26,10 +26,10 @@ const selectedTab = $computed(() => tabsInfo[selectedTabKey])
 
 <template>
   <div>
-    <a-tabs v-model:active-key="selectedTabKey" class="" :open-keys="[]" mode="horizontal">
+    <a-tabs v-model:active-key="selectedTabKey" :open-keys="[]" mode="horizontal" class="nc-auth-tabs mx-6">
       <a-tabs-tab-pane v-for="(tab, key) of tabsInfo" :key="key" class="select-none">
         <template #tab>
-          <span class="mx-3">
+          <span>
             {{ tab.title }}
           </span>
         </template>
@@ -41,3 +41,9 @@ const selectedTab = $computed(() => tabsInfo[selectedTabKey])
     </div>
   </div>
 </template>
+
+<style scoped>
+:deep(.nc-auth-tabs .ant-tabs-nav::before) {
+  @apply !border-none;
+}
+</style>

packages/nc-gui-v2/components/tabs/auth/ApiTokenManagement.vue

@@ -134,7 +134,7 @@ onMounted(() => {
             <div class="text-gray-500">Reload</div>
           </div>
         </a-button>
-        <a-button size="middle" @click="openNewTokenModal">
+        <a-button size="middle" type="primary" ghost @click="openNewTokenModal">
           <div class="flex flex-row justify-center items-center caption capitalize space-x-1">
             <MdiPlusIcon />
             <div>Add New Token</div>

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

@@ -65,7 +65,7 @@ await loadTables()
             <img alt="NocoDB" src="~/assets/img/icons/512x512-trans.png" />
           </div>
 
-          <a-dropdown v-model:visible="dropdownOpen" :trigger="['click']">
+          <a-dropdown v-model:visible="dropdownOpen" :trigger="['click']" placement="bottom">
             <div
               :style="{ width: isOpen ? 'calc(100% - 40px) pr-2' : '100%' }"
               :class="[isOpen ? '' : 'justify-center']"