From 100f352e04f6d38db956c6a634af24719a50b561 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Tue, 4 Oct 2022 12:08:29 +0200
Subject: [PATCH] refactor(nc-gui): update smartsheet toolbar button styles

---
 packages/nc-gui/assets/style.scss             |  4 ++++
 .../nc-gui/components/smartsheet/Toolbar.vue  | 10 ++++-----
 .../components/smartsheet/toolbar/AddRow.vue  |  2 +-
 .../components/smartsheet/toolbar/Reload.vue  | 22 +++++++++++++++----
 .../smartsheet/toolbar/ShareView.vue          |  3 ++-
 5 files changed, 30 insertions(+), 11 deletions(-)

diff --git a/packages/nc-gui/assets/style.scss b/packages/nc-gui/assets/style.scss
index 7df65992f7..ed7c8d2df5 100644
--- a/packages/nc-gui/assets/style.scss
+++ b/packages/nc-gui/assets/style.scss
@@ -271,3 +271,7 @@ a {
   transform: scale(75%);
   transform-origin: bottom right;
 }
+
+.nc-toolbar-btn {
+  @apply shadow-sm rounded !border border-slate-300 color-transition;
+}
\ No newline at end of file
diff --git a/packages/nc-gui/components/smartsheet/Toolbar.vue b/packages/nc-gui/components/smartsheet/Toolbar.vue
index b4d142d68a..402a2fa1d5 100644
--- a/packages/nc-gui/components/smartsheet/Toolbar.vue
+++ b/packages/nc-gui/components/smartsheet/Toolbar.vue
@@ -14,7 +14,7 @@ const { allowCSVDownload } = useSharedView()
 
 <template>
   <div
-    class="nc-table-toolbar w-full py-1 flex gap-1 items-center h-[var(--toolbar-height)] px-2 border-b overflow-x-hidden"
+    class="nc-table-toolbar w-full py-1 flex gap-2 items-center h-[var(--toolbar-height)] px-2 border-b overflow-x-hidden"
     style="z-index: 7"
   >
     <LazySmartsheetToolbarViewActions
@@ -25,7 +25,7 @@ const { allowCSVDownload } = useSharedView()
 
     <LazySmartsheetToolbarViewInfo v-if="!isUIAllowed('dataInsert') && !isPublic" />
 
-    <LazySmartsheetToolbarFieldsMenu v-if="isGrid || isGallery" :show-system-fields="false" class="ml-1" />
+    <LazySmartsheetToolbarFieldsMenu v-if="isGrid || isGallery" :show-system-fields="false" />
 
     <LazySmartsheetToolbarColumnFilterMenu v-if="isGrid || isGallery" />
 
@@ -37,11 +37,11 @@ const { allowCSVDownload } = useSharedView()
 
     <div class="flex-1" />
 
-    <LazySmartsheetToolbarReload v-if="!isPublic && !isForm" class="mx-1" />
+    <LazySmartsheetToolbarReload v-if="!isPublic && !isForm" />
 
-    <LazySmartsheetToolbarAddRow v-if="isUIAllowed('dataInsert') && !isPublic && !isForm && !isSqlView" class="mx-1" />
+    <LazySmartsheetToolbarAddRow v-if="isUIAllowed('dataInsert') && !isPublic && !isForm && !isSqlView" />
 
-    <LazySmartsheetToolbarSearchData v-if="(isGrid || isGallery) && !isPublic" class="shrink mr-2 ml-2" />
+    <LazySmartsheetToolbarSearchData v-if="(isGrid || isGallery) && !isPublic" class="shrink mx-2" />
 
     <template v-if="!isOpen && !isPublic">
       <div class="border-l-1 pl-3">
diff --git a/packages/nc-gui/components/smartsheet/toolbar/AddRow.vue b/packages/nc-gui/components/smartsheet/toolbar/AddRow.vue
index e55c2deadc..33f6279dba 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/AddRow.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/AddRow.vue
@@ -16,7 +16,7 @@ const onClick = () => {
     <div
       v-e="['c:row:add:grid-top']"
       :class="{ 'group': !isLocked, 'disabled-ring': isLocked }"
-      class="nc-add-new-row-btn flex align-center"
+      class="nc-add-new-row-btn nc-toolbar-btn flex min-w-32px w-32px h-32px items-center"
     >
       <MdiPlusOutline
         :class="{ 'cursor-pointer text-gray-500 group-hover:(text-primary)': !isLocked, 'disabled': isLocked }"
diff --git a/packages/nc-gui/components/smartsheet/toolbar/Reload.vue b/packages/nc-gui/components/smartsheet/toolbar/Reload.vue
index 7c48d08111..92ba41f931 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/Reload.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/Reload.vue
@@ -1,13 +1,23 @@
 <script setup lang="ts">
-import { ReloadViewDataHookInj, inject, useNuxtApp } from '#imports'
+import { ReloadViewDataHookInj, inject, ref, useNuxtApp, watch } from '#imports'
 
-const { $e } = useNuxtApp()
+const { $e, $state } = useNuxtApp()
 
 const reloadHook = inject(ReloadViewDataHookInj)!
 
+const isReloading = ref(false)
+
 const onClick = () => {
   $e('a:table:reload:navbar')
+  isReloading.value = true
   reloadHook.trigger()
+
+  const stop = watch($state.isLoading, (isLoading) => {
+    if (!isLoading) {
+      isReloading.value = false
+      stop()
+    }
+  })
 }
 </script>
 
@@ -15,8 +25,12 @@ const onClick = () => {
   <a-tooltip placement="bottom">
     <template #title> {{ $t('general.reload') }} </template>
 
-    <div class="group flex align-center">
-      <MdiReload class="cursor-pointer text-gray-500 group-hover:(text-primary) nc-toolbar-reload-btn" @click="onClick" />
+    <div class="nc-toolbar-btn flex min-w-32px w-32px h-32px items-center">
+      <MdiReload
+        class="w-full h-full cursor-pointer text-gray-500 group-hover:(text-primary) nc-toolbar-reload-btn"
+        :class="isReloading ? 'animate-spin' : ''"
+        @click="onClick"
+      />
     </div>
   </a-tooltip>
 </template>
diff --git a/packages/nc-gui/components/smartsheet/toolbar/ShareView.vue b/packages/nc-gui/components/smartsheet/toolbar/ShareView.vue
index d17d03ca80..3c3fb6caf5 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/ShareView.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/ShareView.vue
@@ -153,8 +153,9 @@ watch(passwordProtected, (value) => {
       v-e="['c:view:share']"
       outlined
       class="nc-btn-share-view nc-toolbar-btn"
+      @click="genShareLink"
     >
-      <div class="flex items-center gap-1" @click="genShareLink">
+      <div class="flex items-center gap-1">
         <MdiOpenInNew />
         <!-- Share View -->
         <span class="!text-sm font-weight-normal"> {{ $t('activity.shareView') }}</span>