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
6 months ago · 5d21d179d4
15 changed files with 59 additions and 18 deletions
--- a/packages/nc-gui/components/smartsheet/Gallery.vue
+++ b/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)"
    />
--- a/packages/nc-gui/components/smartsheet/Kanban.vue
+++ b/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"
    />
--- a/packages/nc-gui/components/smartsheet/Map.vue
+++ b/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>
--- a/packages/nc-gui/components/smartsheet/calendar/index.vue
+++ b/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>
--- a/packages/nc-gui/components/smartsheet/column/DateTimeOptions.vue
+++ b/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;
--- a/packages/nc-gui/components/smartsheet/column/EditOrAdd.vue
+++ b/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 {
--- a/packages/nc-gui/components/smartsheet/column/LinkedToAnotherRecordOptions.vue
+++ b/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;
--- a/packages/nc-gui/components/smartsheet/column/TimeOptions.vue
+++ b/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;
--- a/packages/nc-gui/components/smartsheet/column/UITypesOptionsWithSearch.vue
+++ b/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>

--- a/packages/nc-gui/components/smartsheet/expanded-form/Comments.vue
+++ b/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"
--- a/packages/nc-gui/components/smartsheet/expanded-form/index.vue
+++ b/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"
        >
--- a/packages/nc-gui/components/smartsheet/grid/Table.vue
+++ b/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>
--- a/packages/nc-gui/components/smartsheet/grid/index.vue
+++ b/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()"
    />
--- a/packages/nc-gui/components/virtual-cell/components/Header.vue
+++ b/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>
--- a/packages/nc-gui/components/virtual-cell/components/UnLinkedItems.vue
+++ b/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
 })