From 623d1a5d745d2683960560b89804ebeee650337b Mon Sep 17 00:00:00 2001
From: DarkPhoenix2704 <anbarasun123@gmail.com>
Date: Tue, 16 May 2023 14:49:01 +0530
Subject: [PATCH] feat: updated some dialogs

---
 .../nc-gui/components/dlg/TableCreate.vue     | 13 +++----
 .../nc-gui/components/dlg/TableDuplicate.vue  | 19 ++++------
 .../nc-gui/components/dlg/TableRename.vue     | 38 ++++++++++---------
 packages/nc-gui/components/dlg/ViewCreate.vue | 10 +++--
 packages/nc-gui/components/dlg/ViewDelete.vue |  6 +--
 packages/nc-gui/lang/en.json                  |  6 +--
 6 files changed, 44 insertions(+), 48 deletions(-)

diff --git a/packages/nc-gui/components/dlg/TableCreate.vue b/packages/nc-gui/components/dlg/TableCreate.vue
index 47d10f81fc..3478159dc0 100644
--- a/packages/nc-gui/components/dlg/TableCreate.vue
+++ b/packages/nc-gui/components/dlg/TableCreate.vue
@@ -118,24 +118,21 @@ onMounted(() => {
   <a-modal
     v-model:visible="dialogShow"
     :class="{ active: dialogShow }"
-    width="max(30vw, 600px)"
+    :title="$t('activity.createTable')"
     centered
     wrap-class-name="nc-modal-table-create"
     @keydown.esc="dialogShow = false"
   >
     <template #footer>
-      <a-button key="back" size="large" @click="dialogShow = false">{{ $t('general.cancel') }}</a-button>
+      <a-button key="back" size="middle" class="!rounded-md" @click="dialogShow = false">{{ $t('general.cancel') }}</a-button>
 
-      <a-button key="submit" size="large" type="primary" :loading="creating" @click="_createTable"
+      <a-button key="submit" size="middle" class="!rounded-md" type="primary" :loading="creating" @click="_createTable"
         >{{ $t('general.submit') }}
       </a-button>
     </template>
 
-    <div class="pl-10 pr-10 pt-5">
+    <div>
       <a-form :model="table" name="create-new-table-form" @keydown.enter="_createTable">
-        <!-- Create A New Table -->
-        <div class="prose-xl font-bold self-center my-4">{{ $t('activity.createTable') }}</div>
-
         <!-- hint="Enter table name" -->
         <!--        Table name -->
         <div class="mb-2">{{ $t('labels.tableName') }}</div>
@@ -206,7 +203,7 @@ onMounted(() => {
   overflow: hidden;
 
   &.active {
-    max-height: 200px;
+    max-height: 100px;
   }
 }
 </style>
diff --git a/packages/nc-gui/components/dlg/TableDuplicate.vue b/packages/nc-gui/components/dlg/TableDuplicate.vue
index ca3c6fc2fe..dc4ca1b407 100644
--- a/packages/nc-gui/components/dlg/TableDuplicate.vue
+++ b/packages/nc-gui/components/dlg/TableDuplicate.vue
@@ -50,29 +50,24 @@ const isEaster = ref(false)
   <a-modal
     v-model:visible="dialogShow"
     :class="{ active: dialogShow }"
-    width="max(30vw, 600px)"
     centered
     wrap-class-name="nc-modal-table-duplicate"
     @keydown.esc="dialogShow = false"
   >
     <template #footer>
-      <a-button key="back" size="large" @click="dialogShow = false">{{ $t('general.cancel') }}</a-button>
+      <a-button key="back" size="middle" class="!rounded-md" @click="dialogShow = false">{{ $t('general.cancel') }}</a-button>
 
-      <a-button key="submit" size="large" type="primary" :loading="isLoading" @click="_duplicate"
+      <a-button key="submit" size="middle" type="primary" class="!rounded-md" :loading="isLoading" @click="_duplicate"
         >{{ $t('general.confirm') }}
       </a-button>
     </template>
 
-    <div class="pl-10 pr-10 pt-5">
-      <div class="prose-xl font-bold self-center my-4" @dblclick="isEaster = !isEaster">{{ $t('general.duplicate') }}</div>
-
-      <div class="mb-2">Are you sure you want to duplicate the `{{ table.title }}` table?</div>
-
-      <div class="prose-md self-center text-gray-500 mt-4">{{ $t('title.advancedSettings') }}</div>
-
-      <a-divider class="!m-0 !p-0 !my-2" />
+    <div>
+      <div class="prose-xl font-bold self-center my-4" @dblclick="isEaster = !isEaster">
+        {{ $t('general.duplicate') }} {{ table.title }}
+      </div>
 
-      <div class="text-xs p-2">
+      <div class="text-xs">
         <a-checkbox v-model:checked="options.includeData">Include data</a-checkbox>
         <a-checkbox v-model:checked="options.includeViews">Include views</a-checkbox>
         <a-checkbox v-show="isEaster" v-model:checked="options.includeHooks">Include hooks</a-checkbox>
diff --git a/packages/nc-gui/components/dlg/TableRename.vue b/packages/nc-gui/components/dlg/TableRename.vue
index 4aa78d6760..83994b6400 100644
--- a/packages/nc-gui/components/dlg/TableRename.vue
+++ b/packages/nc-gui/components/dlg/TableRename.vue
@@ -177,31 +177,33 @@ const renameTable = async (undo = false) => {
     :class="{ active: dialogShow }"
     :title="$t('activity.renameTable')"
     :mask-closable="false"
+    centered
     wrap-class-name="nc-modal-table-rename"
     @keydown.esc="dialogShow = false"
     @finish="renameTable"
   >
     <template #footer>
-      <a-button key="back" @click="dialogShow = false">{{ $t('general.cancel') }}</a-button>
+      <a-button key="back" class="!rounded-md" @click="dialogShow = false">{{ $t('general.cancel') }}</a-button>
 
-      <a-button key="submit" type="primary" :loading="loading" @click="renameTable()">{{ $t('general.submit') }}</a-button>
+      <a-button key="submit" class="!rounded-md" type="primary" :loading="loading" @click="renameTable()">{{
+        $t('general.submit')
+      }}</a-button>
     </template>
 
-    <div class="pl-10 pr-10 pt-5">
-      <a-form :model="formState" name="create-new-table-form">
-        <!-- hint="Enter table name" -->
-        <div class="mb-2">{{ $t('msg.info.enterTableName') }}</div>
-
-        <a-form-item v-bind="validateInfos.title">
-          <a-input
-            ref="inputEl"
-            v-model:value="formState.title"
-            hide-details
-            :placeholder="$t('msg.info.enterTableName')"
-            @keydown.enter="renameTable()"
-          />
-        </a-form-item>
-      </a-form>
-    </div>
+    <a-form :model="formState" name="create-new-table-form">
+      <!-- hint="Enter table name" -->
+      <div class="mb-2">{{ $t('msg.info.enterTableName') }}</div>
+
+      <a-form-item v-bind="validateInfos.title">
+        <a-input
+          ref="inputEl"
+          v-model:value="formState.title"
+          hide-details
+          size="large"
+          :placeholder="$t('msg.info.enterTableName')"
+          @keydown.enter="renameTable()"
+        />
+      </a-form-item>
+    </a-form>
   </a-modal>
 </template>
diff --git a/packages/nc-gui/components/dlg/ViewCreate.vue b/packages/nc-gui/components/dlg/ViewCreate.vue
index 5525be1a0b..ed1f557c86 100644
--- a/packages/nc-gui/components/dlg/ViewCreate.vue
+++ b/packages/nc-gui/components/dlg/ViewCreate.vue
@@ -207,7 +207,7 @@ async function onSubmit() {
 <template>
   <a-modal
     v-model:visible="vModel"
-    class="!top-[35%]"
+    centered
     :class="{ active: vModel }"
     :confirm-loading="loading"
     wrap-class-name="nc-modal-view-create"
@@ -219,7 +219,7 @@ async function onSubmit() {
 
     <a-form ref="formValidator" layout="vertical" :model="form">
       <a-form-item :label="$t('labels.viewName')" name="title" :rules="viewNameRules">
-        <a-input ref="inputEl" v-model:value="form.title" autofocus @keydown.enter="onSubmit" />
+        <a-input ref="inputEl" size="large" v-model:value="form.title" autofocus @keydown.enter="onSubmit" />
       </a-form-item>
       <a-form-item
         v-if="form.type === ViewTypes.KANBAN"
@@ -254,8 +254,10 @@ async function onSubmit() {
     </a-form>
 
     <template #footer>
-      <a-button key="back" @click="vModel = false">{{ $t('general.cancel') }}</a-button>
-      <a-button key="submit" type="primary" :loading="loading" @click="onSubmit">{{ $t('general.submit') }}</a-button>
+      <a-button key="back" class="!rounded-md" @click="vModel = false">{{ $t('general.cancel') }}</a-button>
+      <a-button key="submit" class="!rounded-md" type="primary" :loading="loading" @click="onSubmit">{{
+        $t('general.submit')
+      }}</a-button>
     </template>
   </a-modal>
 </template>
diff --git a/packages/nc-gui/components/dlg/ViewDelete.vue b/packages/nc-gui/components/dlg/ViewDelete.vue
index 905c975ffd..b97d6e5dae 100644
--- a/packages/nc-gui/components/dlg/ViewDelete.vue
+++ b/packages/nc-gui/components/dlg/ViewDelete.vue
@@ -50,7 +50,7 @@ async function onDelete() {
 <template>
   <a-modal
     v-model:visible="vModel"
-    class="!top-[35%]"
+    centered
     :class="{ active: vModel }"
     :confirm-loading="isLoading"
     wrap-class-name="nc-modal-view-delete"
@@ -60,9 +60,9 @@ async function onDelete() {
     {{ $t('msg.info.deleteViewConfirmation') }}
 
     <template #footer>
-      <a-button key="back" @click="vModel = false">{{ $t('general.cancel') }}</a-button>
+      <a-button key="back" class="!rounded-md" @click="vModel = false">{{ $t('general.cancel') }}</a-button>
 
-      <a-button key="submit" danger html-type="submit" :loading="isLoading" @click="onDelete">
+      <a-button key="submit" class="!rounded-md" danger html-type="submit" :loading="isLoading" @click="onDelete">
         {{ $t('general.submit') }}
       </a-button>
     </template>
diff --git a/packages/nc-gui/lang/en.json b/packages/nc-gui/lang/en.json
index 227c9050f7..7e2154a59d 100644
--- a/packages/nc-gui/lang/en.json
+++ b/packages/nc-gui/lang/en.json
@@ -385,10 +385,10 @@
     "nextRecord": "Next record",
     "previousRecord": "Previous record",
     "copyApiURL": "Copy API URL",
-    "createTable": "Table Create",
+    "createTable": "Create New Table",
     "refreshTable": "Tables Refresh",
-    "renameTable": "Table Rename",
-    "deleteTable": "Table Delete",
+    "renameTable": "Rename Table",
+    "deleteTable": "Delete Table",
     "addField": "Add new field to this table",
     "setDisplay": "Set as Display value",
     "addRow": "Add new row",