Merge pull request #7270 from nocodb/fix/minor-bug-fixes

minor bug fixes
8 months ago · 999c5475d5
11 changed files with 49 additions and 41 deletions
--- a/packages/nc-gui/components/account/UserList.vue
+++ b/packages/nc-gui/components/account/UserList.vue
@ -261,7 +261,7 @@ const openDeleteModal = (user: UserType) => {
              <div
                class="flex items-center gap-2"
                :class="{
-                  'opacity-0': el.roles?.includes('super'),
+                  'opacity-0 pointer-events-none': el.roles?.includes('super'),
                }"
              >
                <NcDropdown :trigger="['click']">
--- a/packages/nc-gui/components/cell/Checkbox.vue
+++ b/packages/nc-gui/components/cell/Checkbox.vue
@ -42,6 +42,8 @@ const readOnly = inject(ReadonlyInj)

 const isExpandedFormOpen = inject(IsExpandedFormOpenInj, ref(false))

+const rowHeight = inject(RowHeightInj, ref())
+
 const checkboxMeta = computed(() => {
  return {
    icon: {
@ -89,13 +91,21 @@ useSelectedCellKeyupListener(active, (e) => {
      'nc-cell-hover-show': !vModel && !readOnly,
      'opacity-0': readOnly && !vModel,
    }"
+    :style="{
+      height:
+        isForm || isExpandedFormOpen || isGallery || isEditColumnMenu ? undefined : `max(${(rowHeight || 1) * 1.8}rem, 41px)`,
+    }"
    tabindex="0"
    @click="onClick(false, $event)"
    @keydown.enter.stop="onClick(false, $event)"
  >
    <div
-      class="items-center"
-      :class="{ 'w-full justify-start': isEditColumnMenu || isGallery || isForm, 'py-2': isEditColumnMenu }"
+      class="flex items-center"
+      :class="{
+        'w-full justify-start': isEditColumnMenu || isGallery || isForm,
+        'justify-center': !isEditColumnMenu && !isGallery && !isForm,
+        'py-2': isEditColumnMenu,
+      }"
      @click="onClick(true)"
    >
      <Transition name="layout" mode="out-in" :duration="100">
--- a/packages/nc-gui/components/cell/SingleSelect.vue
+++ b/packages/nc-gui/components/cell/SingleSelect.vue
@ -277,7 +277,7 @@ const onFocus = () => {
    @keydown.enter.stop.prevent="toggleMenu"
  >
    <div v-if="!(active || isEditable)" class="w-full">
-      <a-tag v-if="selectedOpt" class="rounded-tag  max-w-full" :color="selectedOpt.color">
+      <a-tag v-if="selectedOpt" class="rounded-tag max-w-full" :color="selectedOpt.color">
        <span
          :style="{
            'color': tinycolor.isReadable(selectedOpt.color || '#ccc', '#fff', { level: 'AA', size: 'large' })
--- a/packages/nc-gui/components/cell/TextArea.vue
+++ b/packages/nc-gui/components/cell/TextArea.vue
@ -60,7 +60,7 @@ const focus: VNodeRef = (el) => !isExpandedFormOpen.value && !isEditColumn.value
 const height = computed(() => {
  if (isExpandedFormOpen.value) return 36 * 4

-  if (!rowHeight.value || rowHeight.value === 1) return 36
+  if (!rowHeight.value || rowHeight.value === 1 || isEditColumn.value) return 36

  return rowHeight.value * 36
 })
@ -177,7 +177,7 @@ watch(editEnabled, () => {
    :overlay-class-name="isVisible ? 'nc-textarea-dropdown-active' : undefined"
  >
    <div
-      class="flex flex-row pt-0.5 w-full rich-wrapper long-text-wrapper"
+      class="flex flex-row pt-0.5 w-full long-text-wrapper"
      :class="{
        'min-h-10': rowHeight !== 1 || isExpandedFormOpen,
        'min-h-9': rowHeight === 1 && !isExpandedFormOpen,
@ -307,12 +307,6 @@ textarea:focus {

 <style lang="scss">
 .cell:hover .nc-text-area-expand-btn {
-  @apply !block;
-}
-.rich-wrapper:hover,
-.rich-wrapper:active {
-  :deep(.nc-text-area-expand-btn) {
-    @apply !block cursor-pointer;
-  }
+  @apply !block cursor-pointer;
 }
 </style>
--- a/packages/nc-gui/components/smartsheet/Cell.vue
+++ b/packages/nc-gui/components/smartsheet/Cell.vue
@ -21,7 +21,6 @@ import {
  isDate,
  isDateTime,
  isDecimal,
-  isDrawerExist,
  isDuration,
  isEmail,
  isFloat,
--- a/packages/nc-gui/components/smartsheet/column/DefaultValue.vue
+++ b/packages/nc-gui/components/smartsheet/column/DefaultValue.vue
@ -65,7 +65,7 @@ watch(
        :is="iconMap.close"
        v-if="![UITypes.Year, UITypes.SingleSelect, UITypes.MultiSelect].includes(vModel.uidt)"
        class="w-4 h-4 cursor-pointer rounded-full !text-black-500 text-gray-500 cursor-pointer hover:bg-gray-50"
-        @click="cdfValue = null"
+        @click="updateCdfValue(null)"
      />
    </div>
  </div>
--- a/packages/nc-gui/components/smartsheet/grid/Table.vue
+++ b/packages/nc-gui/components/smartsheet/grid/Table.vue
@ -1759,17 +1759,16 @@ onKeyStroke('ArrowDown', onDown)
                {{ $t('general.clear') }}
              </div>
            </NcMenuItem>
-            <NcDivider />
-            <NcMenuItem
-              v-if="contextMenuTarget && selectedRange.isSingleCell() && isUIAllowed('commentEdit') && !isMobileMode"
-              class="nc-base-menu-item"
-              @click="commentRow(contextMenuTarget.row)"
-            >
-              <div v-e="['a:row:comment']" class="flex gap-2 items-center">
-                <MdiMessageOutline class="h-4 w-4" />
-                {{ $t('general.comment') }}
-              </div>
-            </NcMenuItem>
+
+            <template v-if="contextMenuTarget && selectedRange.isSingleCell() && isUIAllowed('commentEdit') && !isMobileMode">
+              <NcDivider />
+              <NcMenuItem class="nc-base-menu-item" @click="commentRow(contextMenuTarget.row)">
+                <div v-e="['a:row:comment']" class="flex gap-2 items-center">
+                  <MdiMessageOutline class="h-4 w-4" />
+                  {{ $t('general.comment') }}
+                </div>
+              </NcMenuItem>
+            </template>

            <template v-if="hasEditPermission">
              <NcDivider v-if="!(!contextMenuClosing && !contextMenuTarget && data.some((r) => r.rowMeta.selected))" />
--- a/packages/nc-gui/components/virtual-cell/Lookup.vue
+++ b/packages/nc-gui/components/virtual-cell/Lookup.vue
@ -152,7 +152,7 @@ const { showEditNonEditableFieldWarning, showClearNonEditableFieldWarning, activ
              }"
            >
              <div
-                class="flex gap-1.5 w-full h-full py-[3px]"
+                class="flex items-start gap-1.5 w-full h-full py-[3px]"
                :class="{
                  'flex-wrap': rowHeight !== 1 && !isAttachment(lookupColumn),
                  '!overflow-x-auto nc-cell-lookup-scroll nc-scrollbar-x-md !overflow-y-hidden':
@ -179,7 +179,6 @@ const { showEditNonEditableFieldWarning, showClearNonEditableFieldWarning, activ
                    :edit-enabled="false"
                    :virtual="true"
                    :read-only="true"
-                    class=""
                    :class="{
                      'min-h-0 min-w-0': isAttachment(lookupColumn),
                      '!min-w-20 !w-auto pl-2': !isAttachment(lookupColumn),
--- a/packages/nc-gui/components/virtual-cell/QrCode.vue
+++ b/packages/nc-gui/components/virtual-cell/QrCode.vue
@ -77,25 +77,26 @@ const { showEditNonEditableFieldWarning, showClearNonEditableFieldWarning } = us
    </template>
    <img v-if="showQrCode" :src="qrCodeLarge" :alt="$t('title.qrCode')" />
  </a-modal>
-  <div v-if="tooManyCharsForQrCode" class="text-left text-wrap mt-2 text-[#e65100] text-[10px]">
-    {{ $t('labels.qrCodeValueTooLong') }}
-  </div>
  <div
-    class="pl-2 w-full flex"
+    v-if="showQrCode"
+    class="w-full flex"
    :class="{
-      'flex-start': isExpandedFormOpen,
+      'flex-start pl-2': isExpandedFormOpen,
      'justify-center': !isExpandedFormOpen,
    }"
  >
    <img
-      v-if="showQrCode && rowHeight"
-      :style="{ height: rowHeight ? `${rowHeight * 1.4}rem` : `1.4rem` }"
+      v-if="rowHeight"
+      :style="{ height: rowHeight ? `${rowHeight * 1.8}rem` : `1.8rem` }"
      :src="qrCode"
      :alt="$t('title.qrCode')"
      class="min-w-[1.4em]"
      @click="showQrModal"
    />
-    <img v-else-if="showQrCode" class="mx-auto min-w-[1.4em]" :src="qrCode" :alt="$t('title.qrCode')" @click="showQrModal" />
+    <img v-else class="mx-auto min-w-[1.4em]" :src="qrCode" :alt="$t('title.qrCode')" @click="showQrModal" />
+  </div>
+  <div v-if="tooManyCharsForQrCode" class="text-left text-wrap mt-2 text-[#e65100] text-xs">
+    {{ $t('labels.qrCodeValueTooLong') }}
  </div>
  <div v-if="showEditNonEditableFieldWarning" class="text-left text-wrap mt-2 text-[#e65100] text-xs">
    {{ $t('msg.warning.nonEditableFields.computedFieldUnableToClear') }}
--- a/packages/nc-gui/components/virtual-cell/barcode/Barcode.vue
+++ b/packages/nc-gui/components/virtual-cell/barcode/Barcode.vue
@ -55,9 +55,9 @@ const rowHeight = inject(RowHeightInj, ref(undefined))
  </a-modal>
  <div
    v-if="!tooManyCharsForBarcode"
-    class="flex ml-2 w-full items-center"
+    class="flex w-full items-center barcode-wrapper"
    :class="{
-      'justify-start': isExpandedFormOpen,
+      'justify-start ml-2': isExpandedFormOpen,
      'justify-center': !isExpandedFormOpen,
    }"
  >
@ -66,7 +66,7 @@ const rowHeight = inject(RowHeightInj, ref(undefined))
      :barcode-value="barcodeValue"
      tabindex="-1"
      :barcode-format="barcodeMeta.barcodeFormat"
-      :custom-style="{ height: rowHeight ? `${rowHeight * 1.4}rem` : `1.4rem`, width: 40 }"
+      :custom-style="{ height: rowHeight ? `${rowHeight * 1.8}rem` : `1.8rem` }"
      @on-click-barcode="showBarcodeModal"
    >
      <template #barcodeRenderError>
@ -100,3 +100,11 @@ const rowHeight = inject(RowHeightInj, ref(undefined))
    {{ $t('msg.warning.nonEditableFields.barcodeFieldsCannotBeDirectlyChanged') }}
  </div>
 </template>
+
+<style lang="scss" scoped>
+.barcode-wrapper {
+  & > div {
+    @apply max-w-8.2rem;
+  }
+}
+</style>
--- a/packages/nc-gui/composables/useViewData.ts
+++ b/packages/nc-gui/composables/useViewData.ts
@ -319,8 +319,6 @@ export function useViewData(
  }

  const navigateToSiblingRow = async (dir: NavigateDir) => {
-    console.log('test')
-
    const expandedRowIndex = getExpandedRowIndex()

    // calculate next row index based on direction