From 083e5fca2117143629890993cb7a5ec5df65cba0 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Sat, 30 Jul 2022 16:50:24 +0530
Subject: [PATCH] refactor(gui-v2): font size

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../smartsheet-toolbar/ColumnFilter.vue       | 30 +++++++++++++------
 .../FieldListAutoCompleteDropdown.vue         | 19 ++++++++++--
 .../smartsheet-toolbar/ShareView.vue          | 13 ++++----
 .../smartsheet-toolbar/SharedViewList.vue     |  6 ++--
 4 files changed, 49 insertions(+), 19 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilter.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilter.vue
index fbe3e75672..cb7ef32895 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilter.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilter.vue
@@ -131,13 +131,16 @@ defineExpose({
             <div :key="`${i}nested`" class="d-flex">
               <a-select
                 v-model:value="filter.logical_op"
+                :dropdown-match-select-width="false"
                 size="small"
-                class="flex-shrink-1 flex-grow-0 elevation-0 caption"
-                :options="logicalOps"
+                class="flex-shrink-1 flex-grow-0 elevation-0 caption !text-xs"
                 placeholder="Group op"
                 @click.stop
                 @change="saveOrUpdate(filter, i)"
               >
+                <a-select-option v-for="op in logicalOps" :key="op.value" :value="op.value" class="!text-xs">
+                  {{ op.text }}
+                </a-select-option>
               </a-select>
             </div>
             <span class="col-span-3" />
@@ -174,14 +177,18 @@ defineExpose({
             <a-select
               v-else
               v-model:value="filter.logical_op"
+              :dropdown-match-select-width="false"
               size="small"
-              class="h-full"
-              :options="logicalOps"
+              class="h-full !text-xs"
               hide-details
               :disabled="filter.readOnly"
               @click.stop
               @change="filterUpdateCondition(filter, i)"
-            />
+            >
+              <a-select-option v-for="op in logicalOps" :key="op.value" :value="op.value" class="!text-xs">
+                {{ op.text }}
+              </a-select-option>
+            </a-select>
 
             <FieldListAutoCompleteDropdown
               :key="`${i}_6`"
@@ -195,16 +202,21 @@ defineExpose({
 
             <a-select
               v-model:value="filter.comparison_op"
+              :dropdown-match-select-width="false"
               size="small"
-              class="caption nc-filter-operation-select"
-              :options="comparisonOpList"
+              class="caption nc-filter-operation-select !text-xs"
               :placeholder="$t('labels.operation')"
               density="compact"
               variant="solo"
               :disabled="filter.readOnly"
               hide-details
               @change="filterUpdateCondition(filter, i)"
-            /><!--
+            >
+              <a-select-option v-for="compOp in comparisonOpList" :key="compOp.value" :value="compOp.value" class="!text-xs">
+                {{ compOp.text }}
+              </a-select-option>
+            </a-select>
+            <!--
             todo: filter based on column type
 
             item-value="value"
@@ -264,7 +276,7 @@ defineExpose({
 <style scoped>
 .nc-filter-grid {
   display: grid;
-  grid-template-columns: 18px 70px auto 90px auto;
+  grid-template-columns: 18px 70px auto auto auto;
   column-gap: 6px;
   row-gap: 6px;
   align-items: center;
diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/FieldListAutoCompleteDropdown.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/FieldListAutoCompleteDropdown.vue
index e9565e2a24..c9256f3256 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/FieldListAutoCompleteDropdown.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/FieldListAutoCompleteDropdown.vue
@@ -64,9 +64,24 @@ const filterOption = (input: string, option: any) => {
 </script>
 
 <template>
-  <a-select v-model:value="localValue" size="small" show-search placeholder="Select a field" :filter-option="filterOption">
+  <a-select
+    v-model:value="localValue"
+    :dropdown-match-select-width="false"
+    size="small"
+    show-search
+    placeholder="Select a field"
+    :filter-option="filterOption"
+  >
     <a-select-option v-for="option in options" :key="option.value" :value="option.value">
-      <div class="flex gap-2 align-center"><component :is="option.icon" class="!text-xs !mx-0" /> {{ option.label }}</div>
+      <div class="flex gap-2 text-xs items-center align-center h-full">
+        <component :is="option.icon" class="min-w-5 !mx-0" /> <span class="min-w-0"> {{ option.label }}</span>
+      </div>
     </a-select-option>
   </a-select>
 </template>
+
+<style scoped>
+:deep(::placeholder) {
+  @apply !text-xs;
+}
+</style>
diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/ShareView.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/ShareView.vue
index 75081e55fe..2cc67821f3 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/ShareView.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/ShareView.vue
@@ -112,10 +112,10 @@ const copyLink = () => {
     <!-- This view is shared via a private link -->
     <a-modal v-model:visible="showShareModel" size="small" :title="$t('msg.info.privateLink')" :footer="null">
       <div class="share-link-box nc-share-link-box bg-primary-50">
-        <div class="flex-1 h-min">{{ sharedViewUrl }}</div>
+        <div class="flex-1 h-min text-xs">{{ sharedViewUrl }}</div>
         <!--        <v-spacer /> -->
         <a v-t="['c:view:share:open-url']" :href="sharedViewUrl" target="_blank">
-          <MdiOpenInNewIcon class="text-sm text-gray-500 mt-1" />
+          <MdiOpenInNewIcon class="text-sm text-gray-500 mt-2" />
         </a>
         <MdiCopyIcon class="text-gray-500 text-sm cursor-pointer" @click="copyLink" />
       </div>
@@ -123,13 +123,13 @@ const copyLink = () => {
       <a-collapse ghost>
         <a-collapse-panel key="1" header="More Options">
           <div class="mb-2">
-            <a-checkbox v-model:checked="passwordProtected" class="text-xs">{{ $t('msg.info.beforeEnablePwd') }} </a-checkbox>
+            <a-checkbox v-model:checked="passwordProtected" class="!text-xs">{{ $t('msg.info.beforeEnablePwd') }} </a-checkbox>
             <!--           todo: add password toggle -->
             <div v-if="passwordProtected" class="flex gap-2 mt-2 mb-4">
               <a-input
                 v-model:value="shared.password"
                 size="small"
-                class="max-w-[250px]"
+                class="!text-xs max-w-[250px]"
                 type="password"
                 :placeholder="$t('placeholder.password.enter')"
               />
@@ -139,7 +139,7 @@ const copyLink = () => {
             </div>
           </div>
           <div>
-            <a-checkbox v-if="shared && shared.type === ViewTypes.GRID" v-model:checked="allowCSVDownload" class="text-xs"
+            <a-checkbox v-if="shared && shared.type === ViewTypes.GRID" v-model:checked="allowCSVDownload" class="!text-xs"
               >Allow Download
             </a-checkbox>
           </div>
@@ -153,4 +153,7 @@ const copyLink = () => {
 .share-link-box {
   @apply flex p-2 w-full items-center align-center gap-1 bg-gray-100 rounded;
 }
+:deep(.ant-collapse-header) {
+  @apply !text-xs;
+}
 </style>
diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/SharedViewList.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/SharedViewList.vue
index 103a3703b3..55fad5646d 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/SharedViewList.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/SharedViewList.vue
@@ -141,7 +141,7 @@ const deleteLink = async (id: string) => {
         <template #default="{ record }">
           <div class="text-sm flex gap-2" :title="text">
             <MdiCopyIcon class="cursor-pointer" @click="copyLink(record)" />
-            <MdiDeleteIcon  class="cursor-pointer" @click="deleteLink(record.id)" />
+            <MdiDeleteIcon class="cursor-pointer" @click="deleteLink(record.id)" />
           </div>
         </template>
       </a-table-column>
@@ -150,7 +150,7 @@ const deleteLink = async (id: string) => {
 </template>
 
 <style scoped>
-:deep(.ant-pagination-item > a){
-@apply leading-normal
+:deep(.ant-pagination-item > a) {
+  @apply leading-normal;
 }
 </style>