refactor(gui-v2): column header edit/add menu ui update

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

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

@@ -16,13 +16,12 @@ formState.value.au = !!formState.value.au
 </script>
 
 <template>
-  <div class="p-4 border-[2px] radius-1 border-grey w-full">
+  <div class="p-4 border-[2px] radius-1 border-grey w-full flex flex-col gap-2">
     <div class="flex justify-space-between">
       <a-form-item label="NN">
         <a-checkbox
           v-model:checked="formState.rqd"
           :disabled="formState.pk || !sqlUi.columnEditable(formState)"
-          size="small"
           class="nc-column-checkbox-NN"
           @change="onAlter"
         />
@@ -31,7 +30,6 @@ formState.value.au = !!formState.value.au
         <a-checkbox
           v-model:checked="formState.pk"
           :disabled="!sqlUi.columnEditable(formState)"
-          size="small"
           class="nc-column-checkbox-PK"
           @change="onAlter"
         />
@@ -40,7 +38,6 @@ formState.value.au = !!formState.value.au
         <a-checkbox
           v-model:checked="formState.ai"
           :disabled="sqlUi.colPropUNDisabled(formState) || !sqlUi.columnEditable(formState)"
-          size="small"
           class="nc-column-checkbox-AI"
           @change="onAlter"
         />
@@ -50,18 +47,18 @@ formState.value.au = !!formState.value.au
         :disabled="sqlUi.colPropUNDisabled(formState) || !sqlUi.columnEditable(formState)"
         @change="onAlter"
       >
-        <a-checkbox v-model:checked="formState.un" size="small" class="nc-column-checkbox-UN" />
+        <a-checkbox v-model:checked="formState.un" class="nc-column-checkbox-UN" />
       </a-form-item>
       <a-form-item
         label="AU"
         :disabled="sqlUi.colPropAuDisabled(formState) || !sqlUi.columnEditable(formState)"
         @change="onAlter"
       >
-        <a-checkbox v-model:checked="formState.au" size="small" class="nc-column-checkbox-AU" />
+        <a-checkbox v-model:checked="formState.au" class="nc-column-checkbox-AU" />
       </a-form-item>
     </div>
     <a-form-item :label="$t('labels.databaseType')" v-bind="validateInfos.dt">
-      <a-select v-model:value="formState.dt" size="small" @change="onDataTypeChange">
+      <a-select v-model:value="formState.dt" @change="onDataTypeChange">
         <a-select-option v-for="type in dataTypes" :key="type" :value="type">
           {{ type }}
         </a-select-option>
@@ -71,15 +68,14 @@ formState.value.au = !!formState.value.au
       <a-input
         v-model:value="formState.dtxp"
         :disabled="sqlUi.getDefaultLengthIsDisabled(formState.dt) || !sqlUi.columnEditable(formState)"
-        size="small"
         @input="onAlter"
       />
     </a-form-item>
     <a-form-item v-if="sqlUi.showScale(formState)" label="Scale">
-      <a-input v-model="formState.dtxs" :disabled="!sqlUi.columnEditable(formState)" size="small" @input="onAlter" />
+      <a-input v-model="formState.dtxs" :disabled="!sqlUi.columnEditable(formState)" @input="onAlter" />
     </a-form-item>
     <a-form-item :label="$t('placeholder.defaultValue')">
-      <a-textarea v-model:value="formState.cdf" size="small" auto-size @input="onAlter(2, true)" />
+      <a-textarea v-model:value="formState.cdf" auto-size @input="onAlter(2, true)" />
       <span class="text-gray-400 text-xs">{{ sqlUi.getDefaultValueForDatatype(formState.dt) }}</span>
     </a-form-item>
   </div>

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

@@ -73,8 +73,9 @@ watch(
   <a-row>
     <a-col :span="24">
       <a-form-item label="Icon">
-        <a-select v-model:value="formState.meta.iconIdx" size="small" class="w-52">
+        <a-select v-model:value="formState.meta.iconIdx" class="w-52">
           <a-select-option v-for="(icon, i) of iconList" :key="i" :value="i">
+            <div class="flex items-center">
               <component
                 :is="getMdiIcon(icon.checked)"
                 class="mx-1"
@@ -88,6 +89,7 @@ watch(
                   color: formState.meta.color,
                 }"
               />
+            </div>
           </a-select-option>
         </a-select>
       </a-form-item>

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

@@ -67,12 +67,11 @@ formState.value.meta = {
 </script>
 
 <template>
-  <a-row>
+  <a-row gutter="8">
     <a-col :span="12">
       <a-form-item v-bind="validateInfos['meta.currency_locale']" label="Currency Locale">
         <a-select
           v-model:value="formState.meta.currency_locale"
-          size="small"
           class="w-52"
           show-search
           :filter-option="filterOption"
@@ -91,7 +90,6 @@ formState.value.meta = {
           class="w-52"
           show-search
           :filter-option="filterOption"
-          size="small"
           :disabled="isMoney && isPg"
         >
           <a-select-option v-for="(currencyCode, i) of currencyList" :key="i" :value="currencyCode">

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

@@ -12,7 +12,7 @@ if (!formState.meta?.date_format) {
 
 <template>
   <a-form-item label="Date Format">
-    <a-select v-model:value="formState.meta.date_format" size="small">
+    <a-select v-model:value="formState.meta.date_format">
       <a-select-option v-for="(format, i) of dateFormats" :key="i" :value="format">
         <div class="flex flex-row items-center">
           <div class="text-xs">

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

@@ -25,7 +25,7 @@ formState.value.meta = {
     </a-col>
     <a-col :span="24">
       <a-form-item label="Duration Format">
-        <a-select v-model:value="formState.meta.duration" size="small" class="w-52">
+        <a-select v-model:value="formState.meta.duration" class="w-52">
           <a-select-option v-for="(duration, i) of durationOptionList" :key="i" :value="duration.id">
             {{ duration.title }}
           </a-select-option>

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

@@ -105,32 +105,26 @@ if (!formState.value?.column_name) {
 </script>
 
 <template>
-  <div class="min-w-[350px] w-max max-h-[95vh] bg-white shadow p-4 overflow-auto" @click.stop>
+  <div class="min-w-[400px] w-max 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">
-        <a-input ref="antInput" v-model:value="formState.title" size="small" class="nc-column-name-input" @input="onAlter(8)" />
+          <a-input ref="antInput" v-model:value="formState.title" class="nc-column-name-input" @input="onAlter(8)" />
         </a-form-item>
 
         <a-form-item
           v-if="!(editColumnDropdown && !!onlyNameUpdateOnEditColumns.find((col) => col === formState.uidt))"
           :label="$t('labels.columnType')"
         >
-        <a-select
-          v-model:value="formState.uidt"
-          show-search
-          size="small"
-          class="nc-column-type-input"
-          @change="onUidtOrIdTypeChange"
-        >
+          <a-select v-model:value="formState.uidt" show-search class="nc-column-type-input" @change="onUidtOrIdTypeChange">
             <a-select-option v-for="opt of uiTypesOptions" :key="opt.name" :value="opt.name" v-bind="validateInfos.uidt">
-            <div class="flex gap-1 align-center text-xs">
+              <div class="flex gap-1 align-center">
                 <component :is="opt.icon" class="text-grey" />
                 {{ opt.name }}
               </div>
             </a-select-option>
           </a-select>
         </a-form-item>
-
         <SmartsheetColumnFormulaOptions v-if="formState.uidt === UITypes.Formula" ref="formulaOptionsRef" />
         <SmartsheetColumnCurrencyOptions v-if="formState.uidt === UITypes.Currency" />
         <SmartsheetColumnDurationOptions v-if="formState.uidt === UITypes.Duration" />
@@ -145,17 +139,17 @@ if (!formState.value?.column_name) {
         <SmartsheetColumnSpecificDBTypeOptions v-if="formState.uidt === UITypes.SpecificDBType" />
         <SmartsheetColumnPercentOptions v-if="formState.uidt === UITypes.Percent" />
         <SmartsheetColumnSelectOptions v-if="formState.uidt === UITypes.SingleSelect || formState.uidt === UITypes.MultiSelect" />
-
+      </div>
       <div
         v-if="!isVirtualCol(formState.uidt)"
-        class="text-xs cursor-pointer text-grey nc-more-options my-2 flex align-center gap-1 justify-end"
+        class="text-xs cursor-pointer text-grey nc-more-options mb-1 mt-4 flex align-center gap-1 justify-end"
         @click="advancedOptions = !advancedOptions"
       >
         {{ advancedOptions ? $t('general.hideAll') : $t('general.showMore') }}
         <component :is="advancedOptions ? MdiMinusIcon : MdiPlusIcon" />
       </div>
 
-      <div class="overflow-hidden" :class="advancedOptions ? 'h-min' : 'h-0'">
+      <div class="overflow-hidden" :class="advancedOptions ? 'h-min mb-2' : 'h-0'">
         <a-checkbox
           v-if="formState.meta && columnToValidate.includes(formState.uidt)"
           v-model:checked="formState.meta.validate"
@@ -169,11 +163,11 @@ if (!formState.value?.column_name) {
       </div>
       <a-form-item>
         <div class="flex justify-end gap-1 mt-4">
-          <a-button html-type="button" size="small" @click="onCancel">
+          <a-button html-type="button" @click="onCancel">
             <!-- Cancel -->
             {{ $t('general.cancel') }}
           </a-button>
-          <a-button html-type="submit" type="primary" size="small" @click="onSubmit">
+          <a-button html-type="submit" type="primary" @click="onSubmit">
             <!-- Save -->
             {{ $t('general.save') }}
           </a-button>

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

@@ -41,7 +41,7 @@ const refTables = $computed(() => {
 
 <template>
   <div class="w-full flex flex-col mb-2 mt-4">
-    <div class="border-2 p-4">
+    <div class="border-2 p-6">
       <a-form-item v-bind="validateInfos.type">
         <a-radio-group v-model:value="formState.type" name="type" v-bind="validateInfos.type">
           <a-radio value="hm">Has Many</a-radio>
@@ -49,7 +49,7 @@ const refTables = $computed(() => {
         </a-radio-group>
       </a-form-item>
       <a-form-item class="flex w-full pb-2 mt-4" :label="$t('labels.childTable')" v-bind="validateInfos.childId">
-        <a-select v-model:value="formState.childId" size="small" @change="onDataTypeChange">
+        <a-select v-model:value="formState.childId" @change="onDataTypeChange">
           <a-select-option v-for="(table, index) in refTables" :key="index" :value="table.id">
             {{ table.title }}
           </a-select-option>
@@ -65,29 +65,17 @@ const refTables = $computed(() => {
       <component :is="advancedOptions ? MdiMinusIcon : MdiPlusIcon" />
     </div>
 
-    <div v-if="advancedOptions" class="flex flex-col p-4 border-2 mt-2">
+    <div v-if="advancedOptions" class="flex flex-col p-6 gap-4 border-2 mt-2">
       <div class="flex flex-row space-x-2">
         <a-form-item class="flex w-1/2" :label="$t('labels.onUpdate')">
-          <a-select
-            v-model:value="formState.onUpdate"
-            :disabled="formState.virtual"
-            name="onUpdate"
-            size="small"
-            @change="onDataTypeChange"
-          >
+          <a-select v-model:value="formState.onUpdate" :disabled="formState.virtual" name="onUpdate" @change="onDataTypeChange">
             <a-select-option v-for="(option, index) in onUpdateDeleteOptions" :key="index" :value="option">
               {{ option }}
             </a-select-option>
           </a-select>
         </a-form-item>
         <a-form-item class="flex w-1/2" :label="$t('labels.onDelete')">
-          <a-select
-            v-model:value="formState.onDelete"
-            :disabled="formState.virtual"
-            name="onDelete"
-            size="small"
-            @change="onDataTypeChange"
-          >
+          <a-select v-model:value="formState.onDelete" :disabled="formState.virtual" name="onDelete" @change="onDataTypeChange">
             <a-select-option v-for="(option, index) in onUpdateDeleteOptions" :key="index" :value="option">
               {{ option }}
             </a-select-option>

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

@@ -52,15 +52,10 @@ const columns = $computed(() => {
 </script>
 
 <template>
-  <div class="p-4 w-full flex flex-col border-2 mb-2 mt-4">
+  <div class="p-6 w-full flex flex-col border-2 mb-2 mt-4">
     <div class="w-full flex flex-row space-x-2">
       <a-form-item class="flex w-1/2 pb-2" :label="$t('labels.childTable')" v-bind="validateInfos.fk_relation_column_id">
-        <a-select
-          v-model:value="formState.fk_relation_column_id"
-          size="small"
-          dropdown-class-name="!w-64"
-          @change="onDataTypeChange"
-        >
+        <a-select v-model:value="formState.fk_relation_column_id" dropdown-class-name="!w-64" @change="onDataTypeChange">
           <a-select-option v-for="(table, index) in refTables" :key="index" :value="table.col.fk_column_id">
             <div class="flex flex-row space-x-0.5 h-full pb-0.5 items-center justify-between">
               <div class="font-semibold text-xs">{{ table.column.title }}</div>
@@ -72,12 +67,7 @@ const columns = $computed(() => {
         </a-select>
       </a-form-item>
       <a-form-item class="flex w-1/2" :label="$t('labels.childColumn')" v-bind="validateInfos.fk_lookup_column_id">
-        <a-select
-          v-model:value="formState.fk_lookup_column_id"
-          name="fk_lookup_column_id"
-          size="small"
-          @change="onDataTypeChange"
-        >
+        <a-select v-model:value="formState.fk_lookup_column_id" name="fk_lookup_column_id" @change="onDataTypeChange">
           <a-select-option v-for="(column, index) of columns" :key="index" :value="column.id">
             {{ column.title }}
           </a-select-option>

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

@@ -11,10 +11,10 @@ if (!formState.meta?.default) formState.meta.default = null
 </script>
 
 <template>
-  <div class="flex flex-col mt-2">
+  <div class="flex flex-col mt-2 gap-2">
     <div class="flex flex-row space-x-2">
       <a-form-item class="flex w-1/2" label="Precision">
-        <a-select v-model:value="formState.meta.precision" size="small">
+        <a-select v-model:value="formState.meta.precision">
           <a-select-option v-for="(precision, i) of precisions" :key="i" :value="precision.id">
             <div class="flex flex-row items-center">
               <div class="text-xs">
@@ -25,7 +25,7 @@ if (!formState.meta?.default) formState.meta.default = null
         </a-select>
       </a-form-item>
       <a-form-item label="Default Number (%)">
-        <a-input v-model:value="formState.meta.default" size="small" name="default" type="number" />
+        <a-input v-model:value="formState.meta.default" name="default" type="number" />
       </a-form-item>
     </div>
     <div class="flex flex-row mt-2">

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

@@ -64,11 +64,12 @@ watch(
 </script>
 
 <template>
-  <a-row>
+  <a-row :gutter="8">
     <a-col :span="12">
       <a-form-item label="Icon">
-        <a-select v-model:value="formState.meta.iconIdx" size="small" class="w-52">
+        <a-select v-model:value="formState.meta.iconIdx" class="w-52">
           <a-select-option v-for="(icon, i) of iconList" :key="i" :value="i">
+            <div class="flex items-center">
               <component
                 :is="getMdiIcon(icon.full)"
                 class="mx-1"
@@ -82,13 +83,14 @@ watch(
                   color: formState.meta.color,
                 }"
               />
+            </div>
           </a-select-option>
         </a-select>
       </a-form-item>
     </a-col>
     <a-col :span="12">
       <a-form-item label="Max">
-        <a-select v-model:value="formState.meta.max" class="w-52" size="small">
+        <a-select v-model:value="formState.meta.max" class="w-52">
           <a-select-option v-for="(v, i) in [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]" :key="i" :value="v">
             {{ v }}
           </a-select-option>

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

@@ -65,15 +65,10 @@ const columns = $computed(() => {
 </script>
 
 <template>
-  <div class="p-4 w-full flex flex-col border-2 mb-2 mt-4">
+  <div class="p-6 w-full flex flex-col border-2 mb-2 mt-4">
     <div class="w-full flex flex-row space-x-2">
       <a-form-item class="flex w-1/2 pb-2" :label="$t('labels.childTable')" v-bind="validateInfos.fk_relation_column_id">
-        <a-select
-          v-model:value="formState.fk_relation_column_id"
-          size="small"
-          dropdown-class-name="!w-64"
-          @change="onDataTypeChange"
-        >
+        <a-select v-model:value="formState.fk_relation_column_id" dropdown-class-name="!w-64" @change="onDataTypeChange">
           <a-select-option v-for="(table, index) in refTables" :key="index" :value="table.col.fk_column_id">
             <div class="flex flex-row space-x-0.5 h-full pb-0.5 items-center justify-between">
               <div class="font-semibold text-xs">{{ table.column.title }}</div>
@@ -85,12 +80,7 @@ const columns = $computed(() => {
         </a-select>
       </a-form-item>
       <a-form-item class="flex w-1/2" :label="$t('labels.childColumn')" v-bind="validateInfos.fk_rollup_column_id">
-        <a-select
-          v-model:value="formState.fk_rollup_column_id"
-          name="fk_rollup_column_id"
-          size="small"
-          @change="onDataTypeChange"
-        >
+        <a-select v-model:value="formState.fk_rollup_column_id" name="fk_rollup_column_id" @change="onDataTypeChange">
           <a-select-option v-for="(column, index) of columns" :key="index" :value="column.id">
             {{ column.title }}
           </a-select-option>
@@ -98,7 +88,7 @@ const columns = $computed(() => {
       </a-form-item>
     </div>
     <a-form-item label="Aggregate function" v-bind="validateInfos.rollup_function">
-      <a-select v-model:value="formState.rollup_function" size="small" @change="onDataTypeChange">
+      <a-select v-model:value="formState.rollup_function" @change="onDataTypeChange">
         <a-select-option v-for="(func, index) of aggrFunctionsList" :key="index" :value="func.value">
           {{ func.text }}
         </a-select-option>

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

@@ -1,3 +1,3 @@
 <template>
-  <SmartsheetColumnAdvancedOptions class="mt-4" />
+  <SmartsheetColumnAdvancedOptions class="mt-4 mb-2" />
 </template>

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

@@ -65,7 +65,7 @@ function onVisibleChange() {
 </script>
 
 <template>
-  <a-dropdown v-model:visible="editColumnDropdown" :trigger="['click']" @visible-change="onVisibleChange">
+  <a-dropdown v-model:visible="editColumnDropdown" :trigger="['click']" placement="bottomRight" @visible-change="onVisibleChange">
     <span />
     <template #overlay>
       <SmartsheetColumnEditOrAdd
@@ -76,7 +76,7 @@ function onVisibleChange() {
       />
     </template>
   </a-dropdown>
-  <a-dropdown :trigger="['hover']">
+  <a-dropdown placement="bottomRight" :trigger="['hover']">
     <MdiMenuDownIcon class="text-grey nc-ui-dt-dropdown" />
     <template #overlay>
       <a-menu class="shadow bg-white">

packages/nc-gui-v2/components/smartsheet/Grid.vue

@@ -482,10 +482,10 @@ const expandForm = (row: Row, state: Record<string, any>) => {
   table,
   td,
   th {
-    border-right: 1px solid #7f828b33 !important;
-    border-left: 1px solid #7f828b33 !important;
-    border-bottom: 1px solid #7f828b33 !important;
-    border-top: 1px solid #7f828b33 !important;
+    border-right: 1px solid #f0f0f0 !important;
+    border-left: 1px solid #f0f0f0 !important;
+    border-bottom: 1px solid #f0f0f0 !important;
+    border-top: 1px solid #f0f0f0 !important;
     border-collapse: collapse;
   }
 

packages/nc-gui-v2/components/smartsheet/Toolbar.vue

@@ -5,7 +5,7 @@ const { isGrid, isForm } = useSmartsheetStoreOrThrow()
 </script>
 
 <template>
-  <div class="nc-table-toolbar w-full py-1 flex gap-1 items-center h-[48px] px-2" style="z-index: 7">
+  <div class="nc-table-toolbar w-full py-1 flex gap-1 items-center h-[48px] px-2 border-b" style="z-index: 7">
     <SmartsheetToolbarFieldsMenu v-if="isGrid" :show-system-fields="false" class="ml-1" />
 
     <SmartsheetToolbarColumnFilterMenu v-if="isGrid" />
@@ -26,4 +26,8 @@ const { isGrid, isForm } = useSmartsheetStoreOrThrow()
 :deep(.nc-toolbar-btn) {
   @apply border-0 !text-xs font-semibold px-2;
 }
+
+.nc-table-toolbar {
+  border-color: #f0f0f0 !important;
+}
 </style>