From 767cbf61d4fc3e82ba9429a72ca1f9259cb80b41 Mon Sep 17 00:00:00 2001
From: DarkPhoenix2704 <anbarasun123@gmail.com>
Date: Sun, 24 Sep 2023 17:39:22 +0530
Subject: [PATCH] fix: icon style

---
 packages/nc-gui/components.d.ts               |   3 +
 .../smartsheet/expanded-form/Comments.vue     |  37 +++-
 .../smartsheet/expanded-form/Header.vue       | 202 ------------------
 .../smartsheet/expanded-form/index.vue        |   4 +-
 4 files changed, 31 insertions(+), 215 deletions(-)
 delete mode 100644 packages/nc-gui/components/smartsheet/expanded-form/Header.vue

diff --git a/packages/nc-gui/components.d.ts b/packages/nc-gui/components.d.ts
index 3c29c8dd67..9eb5adba5b 100644
--- a/packages/nc-gui/components.d.ts
+++ b/packages/nc-gui/components.d.ts
@@ -135,8 +135,10 @@ declare module '@vue/runtime-core' {
     MdiDotsHorizontal: typeof import('~icons/mdi/dots-horizontal')['default']
     MdiEye: typeof import('~icons/mdi/eye')['default']
     MdiFileDocumentMultipleOutline: typeof import('~icons/mdi/file-document-multiple-outline')['default']
+    MdiFileDocumentOutline: typeof import('~icons/mdi/file-document-outline')['default']
     MdiFlag: typeof import('~icons/mdi/flag')['default']
     MdiHeart: typeof import('~icons/mdi/heart')['default']
+    MdiHistory: typeof import('~icons/mdi/history')['default']
     MdiKeyStar: typeof import('~icons/mdi/key-star')['default']
     MdiLinkVariant: typeof import('~icons/mdi/link-variant')['default']
     MdiLoading: typeof import('~icons/mdi/loading')['default']
@@ -145,6 +147,7 @@ declare module '@vue/runtime-core' {
     MdiMagnify: typeof import('~icons/mdi/magnify')['default']
     MdiMapMarkerOutline: typeof import('~icons/mdi/map-marker-outline')['default']
     MdiMenuDown: typeof import('~icons/mdi/menu-down')['default']
+    MdiMessageOutline: typeof import('~icons/mdi/message-outline')['default']
     MdiMicrosoftTeams: typeof import('~icons/mdi/microsoft-teams')['default']
     MdiMoonFull: typeof import('~icons/mdi/moon-full')['default']
     MdiMoreVert: typeof import('~icons/mdi/more-vert')['default']
diff --git a/packages/nc-gui/components/smartsheet/expanded-form/Comments.vue b/packages/nc-gui/components/smartsheet/expanded-form/Comments.vue
index f002ec2141..8dd937cdad 100644
--- a/packages/nc-gui/components/smartsheet/expanded-form/Comments.vue
+++ b/packages/nc-gui/components/smartsheet/expanded-form/Comments.vue
@@ -3,6 +3,7 @@ import type { VNodeRef } from '@vue/runtime-core'
 import type { AuditType } from 'nocodb-sdk'
 import { Icon } from '@iconify/vue'
 import { ref, timeAgo, useExpandedFormStoreOrThrow, useGlobal, useRoles, watch } from '#imports'
+import FileIcon from '~icons/nc-icons/file'
 
 const { loadCommentsAndLogs, commentsAndLogs, isYou, saveComment, comment, updateComment } = useExpandedFormStoreOrThrow()
 
@@ -104,22 +105,28 @@ watch(
     <div class="bg-white rounded-t-lg border-gray-200 border-b-1">
       <div class="flex flex-row m-2 p-1 bg-gray-100 rounded-lg">
         <div
-          class="tab flex-1 transition-all cursor-pointer rounded-lg"
+          class="tab flex-1 transition-all text-gray-600 cursor-pointer rounded-lg"
           :class="{
-            'bg-white shadow text-brand-500 hover:text-brand-500': tab === 'comments',
+            'bg-white shadow !text-brand-500 !hover:text-brand-500': tab === 'comments',
           }"
           @click="tab = 'comments'"
         >
-          <div class="tab-title nc-tab">Comments</div>
+          <div class="tab-title gap-1 nc-tab">
+            <MdiMessageOutline class="h-5 w-5" />
+            Comments
+          </div>
         </div>
         <div
-          class="tab flex-1 transition-all cursor-pointer rounded-lg"
+          class="tab flex-1 transition-all text-gray-600 cursor-pointer rounded-lg"
           :class="{
-            'bg-white shadow text-brand-500 hover:text-brand-500': tab === 'audits',
+            'bg-white shadow !text-brand-500 !hover:text-brand-500': tab === 'audits',
           }"
           @click="tab = 'audits'"
         >
-          <div class="tab-title nc-tab">Audits</div>
+          <div class="tab-title nc-tab">
+            <MdiFileDocumentOutline class="h-5 w-5" />
+            Audits
+          </div>
         </div>
       </div>
     </div>
@@ -129,12 +136,12 @@ watch(
         ref="commentsWrapperEl"
         class="flex flex-col m-1 p-1 !h-[calc(100vh-300px)] overflow-y-scroll nc-scrollbar-md space-y-2"
       >
-        <template v-if="commentsAndLogs.length === 0">
+        <template v-if="comments.length === 0">
           <div class="flex flex-col text-center justify-center h-full">
-            <div class="text-center text-3xl text-gray-300">
+            <div class="text-center text-3xl text-gray-700">
               <MdiChatProcessingOutline />
             </div>
-            <div class="font-bold text-center my-1 text-gray-400">Start a conversation</div>
+            <div class="font-bold text-center my-1 text-gray-700">Start a conversation</div>
           </div>
         </template>
         <template v-else>
@@ -183,11 +190,19 @@ watch(
         </template>
       </div>
       <div v-else class="flex flex-col m-1 p-1 !h-[calc(100vh-239px)] overflow-y-scroll nc-scrollbar-md space-y-2">
+        <template v-if="audits.length === 0">
+          <div class="flex flex-col mb-14 text-center justify-center h-full">
+            <div class="text-center text-3xl text-gray-600">
+              <MdiHistory />
+            </div>
+            <div class="font-bold text-center my-1 text-gray-600">See changes to this record</div>
+          </div>
+        </template>
         <div v-for="(log, idx) of audits" :key="log.id">
           <div class="bg-white rounded-xl border-1 gap-3 border-gray-200">
             <div class="flex flex-col p-4 gap-3">
               <div class="flex justify-between">
-                <div class="flex font-bold items-end gap-2">
+                <div class="flex font-bold items-center gap-2">
                   <GeneralUserIcon v-if="isYou(log.user)" />
                   <MdiAccountCircleOutline v-else class="row-span-2 h-6 w-6" />
                   <span class="truncate max-w-50">
@@ -223,7 +238,7 @@ watch(
 
 <style scoped>
 .tab .tab-title {
-  @apply min-w-0 flex justify-center items-center py-1;
+  @apply min-w-0 flex justify-center gap-1 font-semibold items-center py-1;
   word-break: 'keep-all';
   white-space: 'nowrap';
   display: 'inline';
diff --git a/packages/nc-gui/components/smartsheet/expanded-form/Header.vue b/packages/nc-gui/components/smartsheet/expanded-form/Header.vue
deleted file mode 100644
index adef870edc..0000000000
--- a/packages/nc-gui/components/smartsheet/expanded-form/Header.vue
+++ /dev/null
@@ -1,202 +0,0 @@
-<script lang="ts" setup>
-import { message } from 'ant-design-vue'
-import type { ViewType } from 'nocodb-sdk'
-import {
-  IsPublicInj,
-  ReloadRowDataHookInj,
-  iconMap,
-  isMac,
-  useCopy,
-  useExpandedFormStoreOrThrow,
-  useRoles,
-  useSmartsheetRowStoreOrThrow,
-  useSmartsheetStoreOrThrow,
-} from '#imports'
-
-const props = defineProps<{ view?: ViewType }>()
-
-const emit = defineEmits(['cancel', 'duplicateRow'])
-
-const route = useRoute()
-
-const { meta, isSqlView } = useSmartsheetStoreOrThrow()
-
-const isPublic = inject(IsPublicInj, ref(false))
-
-const { commentsDrawer, displayValue, primaryKey, save: _save, loadRow, deleteRowById } = useExpandedFormStoreOrThrow()
-
-const { isNew, syncLTARRefs, state } = useSmartsheetRowStoreOrThrow()
-
-const { isUIAllowed } = useRoles()
-
-const reloadTrigger = inject(ReloadRowDataHookInj, createEventHook())
-
-const save = async () => {
-  if (isNew.value) {
-    const data = await _save(state.value)
-    await syncLTARRefs(data)
-    reloadTrigger?.trigger()
-  } else {
-    await _save()
-    reloadTrigger?.trigger()
-  }
-}
-
-// todo: accept as a prop / inject
-const iconColor = '#1890ff'
-
-const { dashboardUrl } = useDashboard()
-
-const { copy } = useCopy()
-
-const copyRecordUrl = () => {
-  copy(
-    encodeURI(
-      `${dashboardUrl?.value}#/${route.params.typeOrId}/${route.params.projectId}/${meta.value?.id}${
-        props.view ? `/${props.view.title}` : ''
-      }?rowId=${primaryKey.value}`,
-    ),
-  )
-  message.success('Copied to clipboard')
-}
-
-useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
-  const cmdOrCtrl = isMac() ? e.metaKey : e.ctrlKey
-  if (cmdOrCtrl) {
-    switch (e.key) {
-      case 'Enter': {
-        if (isUIAllowed('dataEdit')) {
-          await save()
-        }
-      }
-    }
-  }
-})
-
-const showDeleteRowModal = ref(false)
-
-const onDeleteRowClick = () => {
-  showDeleteRowModal.value = true
-}
-
-const onConfirmDeleteRowClick = async () => {
-  showDeleteRowModal.value = false
-  await deleteRowById(primaryKey.value)
-  await reloadTrigger.trigger()
-  emit('cancel')
-  message.success('Row deleted')
-}
-</script>
-
-<template>
-  <div class="flex p-2 items-center gap-2 p-4 nc-expanded-form-header">
-    <h5 class="text-lg font-weight-medium flex items-center gap-1 mb-0 min-w-0 overflow-x-hidden truncate">
-      <GeneralTableIcon :style="{ color: iconColor }" :meta="meta" class="mx-2" />
-
-      <template v-if="meta">
-        {{ meta.title }}
-      </template>
-
-      <template v-if="displayValue">: {{ displayValue }}</template>
-    </h5>
-
-    <div class="flex-1" />
-    <a-tooltip v-if="!isPublic" placement="bottom">
-      <template #title>
-        <!-- todo: i18n -->
-        <div class="text-center w-full">Copy record URL</div>
-      </template>
-      <component
-        :is="iconMap.link"
-        v-if="!isNew"
-        class="nc-icon-transition cursor-pointer select-none text-gray-500 mx-1 nc-copy-row-url min-w-4"
-        @click="copyRecordUrl"
-      />
-    </a-tooltip>
-
-    <a-tooltip v-if="!isSqlView" placement="bottom">
-      <!--      Toggle comments draw -->
-      <template #title>
-        <div class="text-center w-full">{{ $t('activity.toggleCommentsDraw') }}</div>
-      </template>
-      <component
-        :is="iconMap.comment"
-        v-if="isUIAllowed('commentList') && !isNew"
-        v-e="['c:row-expand:comment-toggle']"
-        class="nc-icon-transition cursor-pointer select-none nc-toggle-comments text-gray-500 mx-1 min-w-4"
-        @click="commentsDrawer = !commentsDrawer"
-      />
-    </a-tooltip>
-
-    <NcButton
-      class="nc-expand-form-save-btn !w-[60px]"
-      type="primary"
-      size="small"
-      :disabled="!isUIAllowed('dataEdit')"
-      @click="save"
-    >
-      {{ $t('general.save') }}
-    </NcButton>
-
-    <a-dropdown>
-      <component :is="iconMap.threeDotVertical" class="nc-icon-transition nc-expand-form-more-actions hover:cursor-pointer" />
-      <template #overlay>
-        <a-menu>
-          <a-menu-item v-if="!isNew" @click="loadRow()">
-            <div v-e="['c:row-expand:reload']" class="py-2 flex gap-2 items-center">
-              <component
-                :is="iconMap.reload"
-                class="nc-icon-transition cursor-pointer select-none text-gray-500 mx-1 min-w-4 text-primary"
-              />
-              {{ $t('general.reload') }}
-            </div>
-          </a-menu-item>
-          <a-menu-item v-if="isUIAllowed('dataEdit') && !isNew" @click="!isNew && emit('duplicateRow')">
-            <div v-e="['c:row-expand:duplicate']" class="py-2 flex gap-2 a">
-              <component
-                :is="iconMap.copy"
-                class="nc-icon-transition cursor-pointer select-none nc-duplicate-row text-gray-500 mx-1 min-w-4 text-primary"
-              />
-              {{ $t('activity.duplicateRow') }}
-            </div>
-          </a-menu-item>
-          <a-menu-item v-if="isUIAllowed('dataEdit') && !isNew" @click="!isNew && onDeleteRowClick()">
-            <div v-e="['c:row-expand:delete']" class="py-2 flex gap-2 items-center">
-              <component
-                :is="iconMap.delete"
-                class="nc-icon-transition cursor-pointer select-none nc-delete-row text-gray-500 mx-1 min-w-4 text-primary"
-              />
-              {{ $t('activity.deleteRow') }}
-            </div>
-          </a-menu-item>
-          <a-menu-item @click="emit('cancel')">
-            <div v-e="['c:row-expand:delete']" class="py-2 flex gap-2 items-center">
-              <component
-                :is="iconMap.close"
-                class="nc-icon-transition cursor-pointer select-none nc-delete-row text-gray-500 mx-1 min-w-4 text-primary"
-              />
-              {{ $t('general.close') }}
-            </div>
-          </a-menu-item>
-        </a-menu>
-      </template>
-    </a-dropdown>
-    <GeneralModal v-model:visible="showDeleteRowModal" class="!w-[25rem]">
-      <div class="p-4">
-        <div class="prose-xl font-bold self-center">Delete row ?</div>
-
-        <div class="mt-4">Are you sure you want to delete this row?</div>
-      </div>
-      <div class="flex flex-row gap-x-2 mt-1 pt-1.5 justify-end p-4">
-        <NcButton type="secondary" @click="showDeleteRowModal = false">{{ $t('general.cancel') }}</NcButton>
-        <NcButton @click="onConfirmDeleteRowClick">{{ $t('general.confirm') }} </NcButton>
-      </div>
-    </GeneralModal>
-  </div>
-</template>
-
-<style scoped>
-:deep(svg) {
-  @apply outline-none;
-}
-</style>
diff --git a/packages/nc-gui/components/smartsheet/expanded-form/index.vue b/packages/nc-gui/components/smartsheet/expanded-form/index.vue
index 372b847af1..a25803de84 100644
--- a/packages/nc-gui/components/smartsheet/expanded-form/index.vue
+++ b/packages/nc-gui/components/smartsheet/expanded-form/index.vue
@@ -441,14 +441,14 @@ export default {
               </LazySmartsheetDivDataCell>
             </div>
           </div>
-          <div v-if="hiddenFields.length > 0" class="flex items-center py-3">
+          <div v-if="hiddenFields.length > 0" class="flex w-full px-12 items-center py-3">
             <div class="flex-grow h-px mr-1 bg-gray-100"></div>
             <NcButton type="secondary" size="small" class="flex-shrink-1 !text-sm" @click="toggleHiddenFields">
               {{ showHiddenFields ? `Hide ${hiddenFields.length} hidden` : `Show ${hiddenFields.length} hidden` }}
               {{ hiddenFields.length > 1 ? `fields` : `field` }}
               <MdiChevronDown class="ml-1" :class="showHiddenFields ? 'transform rotate-180' : ''" />
             </NcButton>
-            <div class="flex-grow h-px mr-1 bg-gray-100"></div>
+            <div class="flex-grow h-px ml-1 bg-gray-100"></div>
           </div>
           <div v-if="hiddenFields.length > 0 && showHiddenFields" class="mb-3">
             <div