Nc fix: UI/UX minor fixes (#8648)

* fix(nc-gui): update field modal radio input disable state bg

* fix(nc-gui): new record dropdown btn icon alignment issue

* fix(nc-gui): duplicate expanded record comment update & query param update issue

* fix(nc-gui): udpate expanded form width if comment section is enabled

* fix(nc-gui): show single line text in hover gray state when we open the add modal

* fix(nc-gui): add divider in comment more option dropdown

* fix(nc-gui): show tooltip on hover over comment username

* fix(nc-gui): oo relation link dropdown count update issue

packages/nc-gui/components/smartsheet/Gallery.vue

@@ -357,6 +357,7 @@ watch(
       :row-id="route.query.rowId"
       :view="view"
       show-next-prev-icons
+      :expand-form="expandForm"
       @next="navigateToSiblingRow(NavigateDir.NEXT)"
       @prev="navigateToSiblingRow(NavigateDir.PREV)"
     />

packages/nc-gui/components/smartsheet/Kanban.vue

@@ -740,6 +740,7 @@ const getRowId = (row: RowType) => {
       :load-row="!isPublic"
       :row="expandedFormRow ?? { row: {}, oldRow: {}, rowMeta: {} }"
       :meta="meta"
+      :expand-form="expandForm"
       :row-id="route.query.rowId"
       :view="view"
     />

packages/nc-gui/components/smartsheet/Map.vue

@@ -251,6 +251,7 @@ const count = computed(() => paginationData.value.totalRows)
       :meta="meta"
       :load-row="!isPublic"
       :row-id="route.query.rowId"
+      :expand-form="expandForm"
       :view="view"
     />
   </Suspense>

packages/nc-gui/components/smartsheet/calendar/index.vue

@@ -193,6 +193,7 @@ reloadViewDataHook?.on(async (params: void | { shouldShowLoading?: boolean }) =>
       rowMeta: {},
     }"
     :row-id="route.query.rowId"
+    :expand-form="expandRecord"
     :view="view"
   />
 </template>

packages/nc-gui/components/smartsheet/column/DateTimeOptions.vue

@@ -77,7 +77,7 @@ if (vModel.value.meta?.is12hrFormat === undefined) {
 
 <style lang="scss" scoped>
 :deep(.nc-time-form-layout) {
-  @apply flex justify-between gap-2 children:(flex-1 m-0 px-2 py-1 border-1 border-gray-200 rounded-lg);
+  @apply flex justify-between gap-2 children:(flex-1 m-0 px-2 py-1 border-1 border-gray-300 rounded-lg);
 
   .ant-radio-wrapper {
     @apply transition-all;

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

@@ -574,8 +574,8 @@ const submitBtnLabel = computed(() => {
     @apply shadow-selected;
   }
 
-  .ant-radio-wrapper-disabled {
-    @apply pointer-events-none;
+  &.ant-radio-wrapper-disabled {
+    @apply pointer-events-none !bg-[#f5f5f5];
     box-shadow: none;
 
     &:hover {

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

@@ -363,7 +363,7 @@ const linkType = computed({
 }
 
 :deep(.nc-ltar-relation-type .ant-radio-group) {
-  @apply flex justify-between gap-2 children:(flex-1 m-0 px-2 py-1 border-1 border-gray-200 rounded-lg);
+  @apply flex justify-between gap-2 children:(flex-1 m-0 px-2 py-1 border-1 border-gray-300 rounded-lg);
 
   .ant-radio-wrapper {
     @apply transition-all flex-row-reverse justify-between items-center py-1 pl-1 pr-3;

packages/nc-gui/components/smartsheet/column/TimeOptions.vue

@@ -29,7 +29,7 @@ vModel.value.meta = {
 
 <style lang="scss" scoped>
 :deep(.nc-time-form-layout) {
-  @apply flex justify-between gap-2 children:(flex-1 m-0 px-2 py-1 border-1 border-gray-200 rounded-lg);
+  @apply flex justify-between gap-2 children:(flex-1 m-0 px-2 py-1 border-1 border-gray-300 rounded-lg);
 
   .ant-radio-wrapper {
     @apply transition-all;

packages/nc-gui/components/smartsheet/column/UITypesOptionsWithSearch.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import type { UITypes } from 'nocodb-sdk'
+import { UITypes } from 'nocodb-sdk'
 import { UITypesName } from 'nocodb-sdk'
 
 const props = defineProps<{
@@ -56,7 +56,7 @@ const handleKeydownEnter = () => {
 
 onMounted(() => {
   searchQuery.value = ''
-  activeFieldIndex.value = -1
+  activeFieldIndex.value = options.value.findIndex((o) => o.name === UITypes.SingleLineText)
 })
 </script>
 

packages/nc-gui/components/smartsheet/expanded-form/Comments.vue

@@ -189,11 +189,18 @@ watch(commentsWrapperEl, () => {
                       <div class="flex items-center max-w-[calc(100%_-_40px)]">
                         <div class="w-full flex flex-wrap gap-3 items-center">
                           <NcTooltip
+                            placement="bottomLeft"
+                            :arrow-point-at-center="false"
                             class="truncate capitalize text-gray-800 font-weight-700 !text-[13px] max-w-42"
-                            show-on-truncate-only
                           >
                             <template #title>
-                              {{ comment.created_display_name?.trim() || comment.created_by_email || 'Shared source' }}
+                              {{
+                                (comment.created_by === user?.id
+                                  ? comment.created_display_name?.trim() || comment.created_by_email
+                                  : comment.created_display_name?.trim()
+                                  ? comment.created_by_email
+                                  : comment.created_display_name?.trim()) || 'Shared source'
+                              }}
                             </template>
                             <span
                               class="text-ellipsis capitalize overflow-hidden"
@@ -228,7 +235,7 @@ watch(commentsWrapperEl, () => {
                           placement="bottomRight"
                         >
                           <NcButton class="nc-expand-form-more-actions !w-7 !h-7 !bg-transparent" size="xsmall" type="text">
-                            <GeneralIcon class="text-md" icon="threeDotVertical" />
+                            <GeneralIcon class="text-md !hover:text-brand-500" icon="threeDotVertical" />
                           </NcButton>
                           <template #overlay>
                             <NcMenu>
@@ -242,6 +249,7 @@ watch(commentsWrapperEl, () => {
                                   {{ $t('general.edit') }}
                                 </div>
                               </NcMenuItem>
+                              <NcDivider />
                               <NcMenuItem
                                 v-e="['c:row-expand:comment:delete']"
                                 class="!text-red-500 !hover:bg-red-50"

packages/nc-gui/components/smartsheet/expanded-form/index.vue

@@ -29,6 +29,7 @@ interface Props {
   newRecordHeader?: string
   skipReload?: boolean
   newRecordSubmitBtnText?: string
+  expandForm?: (row: Row) => void
 }
 
 const props = defineProps<Props>()
@@ -68,6 +69,8 @@ const isPublic = inject(IsPublicInj, ref(false))
 // to check if a expanded form which is not yet saved exist or not
 const isUnsavedFormExist = ref(false)
 
+const isUnsavedDuplicatedRecordExist = ref(false)
+
 const isRecordLinkCopied = ref(false)
 
 const { isUIAllowed } = useRoles()
@@ -176,6 +179,7 @@ const onClose = () => {
 const onDuplicateRow = () => {
   duplicatingRowInProgress.value = true
   isUnsavedFormExist.value = true
+  isUnsavedDuplicatedRecordExist.value = true
   const oldRow = { ..._row.value.row }
   delete oldRow.ncRecordId
   const newRow = Object.assign(
@@ -224,6 +228,17 @@ const save = async () => {
 
     if (props.closeAfterSave) {
       isExpanded.value = false
+    } else {
+      if (isUnsavedDuplicatedRecordExist.value) {
+        const newRowId = extractPkFromRow(_row.value.row, meta.value.columns as ColumnType[])
+        if (newRowId !== rowId.value) {
+          props?.expandForm?.(_row.value)
+        }
+
+        setTimeout(() => {
+          isUnsavedDuplicatedRecordExist.value = false
+        }, 500)
+      }
     }
 
     emits('createdRecord', _row.value.row)
@@ -549,7 +564,7 @@ export default {
     :closable="false"
     :footer="null"
     :visible="isExpanded"
-    :width="showRightSections ? 'min(80vw,1280px)' : 'min(70vw,768px)'"
+    :width="commentsDrawer && isUIAllowed('commentList') ? 'min(80vw,1280px)' : 'min(70vw,768px)'"
     class="nc-drawer-expanded-form"
     :size="isMobileMode ? 'medium' : 'small'"
     v-bind="modalProps"
@@ -928,7 +943,7 @@ export default {
           <div v-else class="p-2"></div>
         </div>
         <div
-          v-if="showRightSections"
+          v-if="showRightSections && !isUnsavedDuplicatedRecordExist"
           :class="{ active: commentsDrawer && isUIAllowed('commentList') }"
           class="nc-comments-drawer border-l-1 relative border-gray-200 bg-gray-50 w-1/3 max-w-[340px] min-w-0 h-full xs:hidden rounded-br-2xl"
         >

packages/nc-gui/components/smartsheet/grid/Table.vue

@@ -2770,6 +2770,10 @@ onKeyStroke('ArrowDown', onDown)
   @apply rounded text-gray-100 !bg-gray-100 !bg-opacity-65;
   animation: slow-show-1 5s ease 5s forwards;
 }
-</style>
 
-<style lang="scss"></style>
+.nc-grid-add-new-row {
+  :deep(.ant-btn.ant-dropdown-trigger.ant-btn-icon-only){
+    @apply !flex items-center justify-center;
+  }
+}
+</style>

packages/nc-gui/components/smartsheet/grid/index.vue

@@ -257,6 +257,7 @@ const goToPreviousRow = () => {
       show-next-prev-icons
       :first-row="isFirstRow"
       :last-row="islastRow"
+      :expand-form="expandForm"
       @next="goToNextRow()"
       @prev="goToPreviousRow()"
     />

packages/nc-gui/components/virtual-cell/components/Header.vue

@@ -1,6 +1,4 @@
 <script lang="ts" setup>
-import OnetoOneIcon from '~icons/nc-icons/onetoone'
-
 const {
   relation,
   relatedTableTitle,
@@ -43,7 +41,7 @@ const relationMeta = computed(() => {
   } else {
     return {
       title: t('msg.oo.title'),
-      icon: OnetoOneIcon,
+      icon: iconMap.oneToOneSolid,
       tooltip_desc: t('msg.oo.tooltip_desc'),
       tooltip_desc2: t('msg.oo.tooltip_desc2'),
     }
@@ -80,10 +78,11 @@ const relationMeta = computed(() => {
       </template>
       <component
         :is="relationMeta.icon"
-        class="flex-none w-5 h-5 p-1 rounded-md"
+        class="nc-relation-icon flex-none w-5 h-5 p-1 rounded-md"
         :class="{
           '!bg-orange-500': relation === 'hm',
           '!bg-pink-500': relation === 'mm',
+          '!bg-purple-500 one-to-one': relation === 'oo',
           '!bg-blue-500': relation === 'bt',
         }"
       />
@@ -95,3 +94,9 @@ const relationMeta = computed(() => {
     </div>
   </div>
 </template>
+
+<style lang="scss" scoped>
+:deep(.nc-relation-icon.one-to-one path) {
+  @apply stroke-purple-50;
+}
+</style>

packages/nc-gui/components/virtual-cell/components/UnLinkedItems.vue

@@ -171,6 +171,10 @@ const totalItemsToShow = computed(() => {
     return row.value?.row[relatedTableMeta.value?.title] ? 1 : 0
   }
 
+  if (relation.value === 'oo') {
+    return row.value?.row[injectedColumn!.value?.title] ? 1 : 0
+  }
+
   return childrenListCount.value ?? 0
 })