Merge pull request #7148 from nocodb/fix/minor-design-changes

Fix: Misc minor design changes

packages/nc-gui/assets/style.scss

@@ -225,6 +225,10 @@ a {
     @apply !rounded-md;
   }
 }
+// select dropdown border style
+.ant-select-dropdown {
+  @apply border-1 border-gray-200
+}
 
 // menu item styling
 .nc-menu-item {
@@ -427,6 +431,9 @@ a {
 .ant-dropdown-menu-submenu {
   @apply !py-0;
   
+  &.ant-dropdown-menu-submenu-popup{
+    @apply border-1 border-gray-200
+  }
   .ant-dropdown-menu,
   .ant-menu {
     @apply m-0 p-0;

packages/nc-gui/components/api-client/Headers.vue

@@ -91,6 +91,7 @@ const filterOption = (input: string, option: Option) => option.value.toUpperCase
                 :options="headerList"
                 :placeholder="$t('placeholder.key')"
                 :filter-option="filterOption"
+                dropdown-class-name="border-1 border-gray-200"
               />
             </a-form-item>
           </td>

packages/nc-gui/components/cell/DatePicker.vue

@@ -226,7 +226,7 @@ const clickHandler = () => {
     :placeholder="placeholder"
     :allow-clear="!readOnly && !localState && !isPk"
     :input-read-only="true"
-    :dropdown-class-name="`${randomClass} nc-picker-date ${open ? 'active' : ''}`"
+    :dropdown-class-name="`${randomClass} nc-picker-date  children:border-1 children:border-gray-200  ${open ? 'active' : ''} `"
     :open="isOpen"
     @click="clickHandler"
     @update:open="updateOpen"

packages/nc-gui/components/cell/DateTimePicker.vue

@@ -273,7 +273,7 @@ const isColDisabled = computed(() => {
     :placeholder="placeholder"
     :allow-clear="!readOnly && !localState && !isPk"
     :input-read-only="true"
-    :dropdown-class-name="`${randomClass} nc-picker-datetime ${open ? 'active' : ''}`"
+    :dropdown-class-name="`${randomClass} nc-picker-datetime children:border-1 children:border-gray-200 ${open ? 'active' : ''}`"
     :open="isOpen"
     @click="clickHandler"
     @ok="open = !open"

packages/nc-gui/components/cell/GeoData.vue

@@ -100,7 +100,7 @@ const openInOSM = () => {
     </div>
     <div v-else data-testid="nc-geo-data-lat-long-set">{{ latLongStr }}</div>
     <template #overlay>
-      <a-form :model="formState" class="flex flex-col w-max-64" @finish="handleFinish">
+      <a-form :model="formState" class="flex flex-col w-max-64 border-1 border-gray-200" @finish="handleFinish">
         <a-form-item>
           <div class="flex mt-4 items-center mx-2">
             <div class="mr-2">{{ $t('labels.lat') }}:</div>

packages/nc-gui/components/cell/Json.vue

@@ -150,7 +150,14 @@ watch(isExpanded, () => {
 </script>
 
 <template>
-  <component :is="isExpanded ? NcModal : 'div'" v-model:visible="isExpanded" :closable="false" centered :footer="null">
+  <component
+    :is="isExpanded ? NcModal : 'div'"
+    v-model:visible="isExpanded"
+    :closable="false"
+    centered
+    :footer="null"
+    v-bind:wrap-class-name="isExpanded ? '!z-1051' : null"
+  >
     <div v-if="editEnabled && !readonly" class="flex flex-col w-full" @mousedown.stop @mouseup.stop @click.stop>
       <div class="flex flex-row justify-between pt-1 pb-2 nc-json-action" @mousedown.stop>
         <a-button type="text" size="small" @click="isExpanded = !isExpanded">

packages/nc-gui/components/cell/TextArea.vue

@@ -175,7 +175,7 @@ watch(editEnabled, () => {
     :overlay-class-name="isVisible ? 'nc-textarea-dropdown-active' : undefined"
   >
     <div
-      class="flex flex-row pt-0.5 w-full"
+      class="flex flex-row pt-0.5 w-full rich-wrapper"
       :class="{
         'min-h-10': rowHeight !== 1,
         'min-h-6.5': rowHeight === 1,
@@ -239,7 +239,7 @@ watch(editEnabled, () => {
       <NcTooltip
         v-if="!isVisible"
         placement="bottom"
-        class="!absolute right-0 bottom-1 !hidden nc-text-area-expand-btn"
+        class="!absolute right-0 bottom-1 nc-text-area-expand-btn"
         :class="{ 'right-0 bottom-1': editEnabled, '!bottom-0': !isRichMode }"
       >
         <template #title>{{ $t('title.expand') }}</template>
@@ -296,8 +296,13 @@ watch(editEnabled, () => {
 textarea:focus {
   box-shadow: none;
 }
-
 :deep(.nc-text-area-expand-btn) {
-  @apply !block;
+  @apply !hidden;
+}
+.rich-wrapper:hover,
+.rich-wrapper:active {
+  :deep(.nc-text-area-expand-btn) {
+    @apply !block cursor-pointer;
+  }
 }
 </style>

packages/nc-gui/components/cell/TimePicker.vue

@@ -136,7 +136,7 @@ useSelectedCellKeyupListener(active, (e: KeyboardEvent) => {
     :allow-clear="!readOnly && !localState && !isPk"
     :input-read-only="true"
     :open="isOpen"
-    :popup-class-name="`${randomClass} nc-picker-time ${open ? 'active' : ''}`"
+    :popup-class-name="`${randomClass} nc-picker-time children:border-1 children:border-gray-200 ${open ? 'active' : ''}`"
     @click="open = (active || editable) && !open"
     @ok="open = !open"
   >

packages/nc-gui/components/cell/YearPicker.vue

@@ -121,7 +121,7 @@ useSelectedCellKeyupListener(active, (e: KeyboardEvent) => {
     :allow-clear="(!readOnly && !localState && !isPk) || isEditColumn"
     :input-read-only="true"
     :open="isOpen"
-    :dropdown-class-name="`${randomClass} nc-picker-year ${open ? 'active' : ''}`"
+    :dropdown-class-name="`${randomClass} nc-picker-year children:border-1 children:border-gray-200 ${open ? 'active' : ''}`"
     @click="open = (active || editable) && !open"
     @change="open = (active || editable) && !open"
     @ok="open = !open"

packages/nc-gui/components/dashboard/TreeView/ViewsNode.vue

@@ -128,6 +128,16 @@ onKeyStroke('Enter', (event) => {
   }
 })
 
+const onRenameMenuClick = () => {
+  if (isMobileMode.value || !isUIAllowed('viewCreateOrEdit')) return
+
+  if (!isEditing.value) {
+    isEditing.value = true
+    _title.value = vModel.value.title
+    $e('c:view:rename', { view: vModel.value?.type })
+  }
+}
+
 const focusInput: VNodeRef = (el) => (el as HTMLInputElement)?.focus()
 
 /** Rename a view */
@@ -268,7 +278,7 @@ watch(isDropdownOpen, async () => {
               :table="table"
               in-sidebar
               @close-modal="isDropdownOpen = false"
-              @rename="onRename"
+              @rename="onRenameMenuClick"
               @delete="onDelete"
             />
           </template>

packages/nc-gui/components/dashboard/settings/BaseAudit.vue

@@ -136,12 +136,13 @@ const columns = [
         :total="+totalRows"
         show-less-items
         @change="loadAudits"
+        class="pagination"
       />
     </div>
   </div>
 </template>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .nc-audit-table pre {
   display: table;
   table-layout: fixed;
@@ -150,4 +151,9 @@ const columns = [
   font-size: unset;
   font-family: unset;
 }
+.pagination {
+  .ant-select-dropdown {
+    @apply !border-1 !border-gray-200;
+  }
+}
 </style>

packages/nc-gui/components/dlg/share-and-collaborate/ShareBase.vue

@@ -148,7 +148,7 @@ const onRoleToggle = async () => {
   <div class="flex flex-col py-2 px-3 gap-2 w-full" data-testid="nc-share-base-sub-modal">
     <div class="flex flex-col w-full p-3 border-1 border-gray-100 rounded-md">
       <div class="flex flex-row w-full justify-between">
-        <div class="text-black font-medium">{{ $t('activity.enablePublicAccess') }}</div>
+        <div class="text-gray-900 font-medium">{{ $t('activity.enablePublicAccess') }}</div>
         <a-switch
           v-e="['c:share:base:enable:toggle']"
           :checked="isSharedBaseEnabled"

packages/nc-gui/components/dlg/share-and-collaborate/SharePage.vue

@@ -277,7 +277,7 @@ const isPublicShared = computed(() => {
   <div class="flex flex-col py-2 px-3 mb-1">
     <div class="flex flex-col w-full mt-2.5 px-3 py-2.5 border-gray-200 border-1 rounded-md gap-y-2">
       <div class="flex flex-row w-full justify-between py-0.5">
-        <div class="flex" :style="{ fontWeight: 500 }">{{ $t('activity.enabledPublicViewing') }}</div>
+        <div class="text-gray-900 font-medium" >{{ $t('activity.enabledPublicViewing') }}</div>
         <a-switch
           v-e="['c:share:view:enable:toggle']"
           data-testid="share-view-toggle"

packages/nc-gui/components/general/language/index.vue

@@ -9,7 +9,7 @@
     </div>
 
     <template #overlay>
-      <a-menu class="nc-scrollbar-dark-md min-w-50 max-h-90vh overflow-auto !p-1 m-1 rounded-md">
+      <a-menu class="nc-scrollbar-dark-md min-w-50 max-h-90vh overflow-auto !p-1 m-1 rounded-md border-1 border-gray-200">
         <GeneralLanguageMenu />
       </a-menu>
     </template>

packages/nc-gui/components/nc/Dropdown.vue

@@ -25,7 +25,7 @@ const overlayClassName = toRef(props, 'overlayClassName')
 const autoClose = computed(() => props.autoClose)
 
 const overlayClassNameComputed = computed(() => {
-  let className = 'nc-dropdown bg-white rounded-lg border-1 border-gray-100 shadow-lg'
+  let className = 'nc-dropdown bg-white rounded-lg border-1 border-gray-200 shadow-lg'
   if (overlayClassName.value) {
     className += ` ${overlayClassName.value}`
   }

packages/nc-gui/components/nc/Modal.vue

@@ -6,17 +6,19 @@ const props = withDefaults(
     size?: 'small' | 'medium' | 'large'
     destroyOnClose?: boolean
     maskClosable?: boolean
+    wrapClassName?: string
   }>(),
   {
     size: 'medium',
     destroyOnClose: true,
     maskClosable: true,
+    wrapClassName: '',
   },
 )
 
 const emits = defineEmits(['update:visible'])
 
-const { width: propWidth, destroyOnClose, maskClosable } = props
+const { width: propWidth, destroyOnClose, maskClosable, wrapClassName: _wrapClassName } = props
 
 const { isMobileMode } = useGlobal()
 
@@ -64,6 +66,14 @@ const height = computed(() => {
   return 'auto'
 })
 
+const wrapClassName = computed(() => {
+  let className = 'nc-modal-wrapper'
+  if (_wrapClassName) {
+    className += ` ${_wrapClassName}`
+  }
+  return className
+})
+
 const visible = useVModel(props, 'visible', emits)
 
 const slots = useSlots()
@@ -76,7 +86,7 @@ const slots = useSlots()
     :width="width"
     :centered="true"
     :closable="false"
-    wrap-class-name="nc-modal-wrapper"
+    :wrap-class-name="wrapClassName"
     :footer="null"
     :mask-closable="maskClosable"
     :destroy-on-close="destroyOnClose"

packages/nc-gui/components/nc/Pagination.vue

@@ -90,7 +90,11 @@ const pagesList = computed(() => {
     </component>
 
     <div v-if="!isMobileMode" class="text-gray-600">
-      <a-select v-model:value="current" class="!mr-[2px]" :options="pagesList">
+      <a-select
+        v-model:value="current"
+        class="!mr-[2px]"
+        :options="pagesList"
+      >
         <template #suffixIcon>
           <GeneralIcon icon="arrowDown" class="text-gray-500 nc-select-expand-btn" />
         </template>

packages/nc-gui/components/nc/Select.vue

@@ -15,7 +15,13 @@ const emits = defineEmits(['update:value', 'change'])
 
 const placeholder = computed(() => props.placeholder)
 
-const dropdownClassName = computed(() => props.dropdownClassName)
+const dropdownClassName = computed(() => {
+  let className = 'nc-select-dropdown'
+  if (props.dropdownClassName) {
+    className += ` ${props.dropdownClassName}`
+  }
+  return className
+})
 
 const showSearch = computed(() => props.showSearch)
 
@@ -37,7 +43,7 @@ const onChange = (value: string) => {
     v-model:value="vModel"
     :placeholder="placeholder"
     class="nc-select"
-    :dropdown-class-name="dropdownClassName ? `nc-select-dropdown  ${dropdownClassName}` : 'nc-select-dropdown'"
+    :dropdown-class-name="dropdownClassName"
     :show-search="showSearch"
     :filter-option="filterOption"
     :dropdown-match-select-width="dropdownMatchSelectWidth"

packages/nc-gui/components/project/AccessSettings.vue

@@ -177,7 +177,7 @@ onMounted(async () => {
       </div>
       <div v-else class="nc-collaborators-list mt-6 h-full">
         <div class="flex flex-col rounded-lg overflow-hidden border-1 max-w-350 max-h-[calc(100%-8rem)]">
-          <div class="flex flex-row bg-gray-50 min-h-12 items-center">
+          <div class="flex flex-row bg-gray-50 min-h-12 items-center border-b-1">
             <div class="text-gray-700 users-email-grid">{{ $t('objects.users') }}</div>
             <div class="text-gray-700 date-joined-grid">{{ $t('title.dateJoined') }}</div>
             <div class="text-gray-700 user-access-grid">{{ $t('general.access') }}</div>

packages/nc-gui/components/project/View.vue

@@ -1,7 +1,13 @@
 <script lang="ts" setup>
 import { useTitle } from '@vueuse/core'
 import NcLayout from '~icons/nc-icons/layout'
-const { openedProject } = storeToRefs(useBases())
+import { isEeUI } from '#imports'
+
+const basesStore = useBases()
+
+const { getProjectUsers } = basesStore
+
+const { openedProject, activeProjectId, baseUserCount } = storeToRefs(basesStore)
 const { activeTables } = storeToRefs(useTablesStore())
 const { activeWorkspace, workspaceUserCount } = storeToRefs(useWorkspace())
 
@@ -26,6 +32,23 @@ const { isMobileMode } = useGlobal()
 
 const baseSettingsState = ref('')
 
+const userCount = isEeUI ? workspaceUserCount : baseUserCount
+
+const updateBaseUserCount = async () => {
+  try {
+    const { totalRows } = await getProjectUsers({
+      baseId: activeProjectId.value!,
+      page: 1,
+      searchText: undefined,
+      limit: 20,
+    })
+
+    baseUserCount.value = totalRows
+  } catch (e: any) {
+    message.error(await extractSdkResponseErrorMsg(e))
+  }
+}
+
 watch(
   () => route.value.query?.page,
   (newVal, oldVal) => {
@@ -57,6 +80,17 @@ watch(projectPageTab, () => {
   }
 })
 
+watch(
+  () => route.value.params.baseId,
+  (newVal, oldVal) => {
+    if (newVal && oldVal === undefined) {
+      updateBaseUserCount()
+    }
+    return
+  },
+  { immediate: true },
+)
+
 watch(
   () => openedProject.value?.title,
   () => {
@@ -119,14 +153,14 @@ watch(
               <GeneralIcon icon="users" class="!h-3.5 !w-3.5" />
               <div>{{ $t('labels.members') }}</div>
               <div
-                v-if="workspaceUserCount"
+                v-if="userCount"
                 class="tab-info"
                 :class="{
-                  'bg-primary-selected': projectPageTab === 'data-source',
+                  'bg-primary-selected': projectPageTab === 'collaborator',
-                  'bg-gray-50': projectPageTab !== 'data-source',
+                  'bg-gray-50': projectPageTab !== 'collaborator',
                 }"
               >
-                {{ workspaceUserCount }}
+                {{ userCount }}
               </div>
             </div>
           </template>

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

@@ -73,7 +73,7 @@ vModel.value.au = !!vModel.value.au */
       </div>
 
       <a-form-item :label="$t('labels.databaseType')" v-bind="validateInfos.dt">
-        <a-select v-model:value="vModel.dt" dropdown-class-name="nc-dropdown-db-type" @change="onDataTypeChange">
+        <a-select v-model:value="vModel.dt" dropdown-class-name="nc-dropdown-db-type " @change="onDataTypeChange">
           <a-select-option v-for="type in dataTypes" :key="type" :value="type">
             {{ type }}
           </a-select-option>

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

@@ -223,7 +223,7 @@ if (props.fromTableExplorer) {
       '!w-146': isTextArea(formState) && formState.meta.richMode,
       '!w-[600px]': formState.uidt === UITypes.Formula && !props.embedMode,
       '!w-[500px]': formState.uidt === UITypes.Attachment && !props.embedMode && !appInfo.ee,
-      'shadow-lg border-1 border-gray-100 shadow-gray-300 rounded-xl p-6': !embedMode,
+      'shadow-lg border-1 border-gray-200 shadow-gray-300 rounded-xl p-6': !embedMode,
     }"
     @keydown="handleEscape"
     @click.stop
@@ -271,7 +271,7 @@ if (props.fromTableExplorer) {
               show-search
               class="nc-column-type-input !rounded"
               :disabled="isKanban || readOnly"
-              dropdown-class-name="nc-dropdown-column-type "
+              dropdown-class-name="nc-dropdown-column-type border-1 border-gray-200"
               @change="onUidtOrIdTypeChange"
               @dblclick="showDeprecated = !showDeprecated"
             >

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

@@ -339,7 +339,7 @@ const loadListData = async ($state: any) => {
               <a-dropdown
                 v-model:visible="colorMenus[index]"
                 :trigger="['click']"
-                overlay-class-name="nc-dropdown-select-color-options"
+                overlay-class-name="nc-dropdown-select-color-options rounded-md overflow-hidden border-1 border-gray-200 "
               >
                 <template #overlay>
                   <LazyGeneralColorPicker

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

@@ -1804,7 +1804,7 @@ onKeyStroke('ArrowDown', onDown)
             <template #overlay>
               <div class="relative overflow-visible min-h-17 w-10">
                 <div
-                  class="absolute -top-19 flex flex-col h-34.5 w-70 bg-white rounded-lg justify-start overflow-hidden"
+                  class="absolute -top-19 flex flex-col h-34.5 w-70 bg-white rounded-lg border-1 border-gray-200 justify-start overflow-hidden"
                   style="box-shadow: 0px 4px 6px -2px rgba(0, 0, 0, 0.06), 0px -12px 16px -4px rgba(0, 0, 0, 0.1)"
                   :class="{
                     '-left-44': !isAddNewRecordGridMode,
@@ -1847,7 +1847,7 @@ onKeyStroke('ArrowDown', onDown)
               </div>
             </template>
             <template #icon>
-              <component :is="iconMap.arrowUp" class="text-gray-600 h-4" />
+              <component :is="iconMap.arrowUp" class="text-gray-600 h-4 w-4" />
             </template>
           </a-dropdown-button>
         </div>

packages/nc-gui/components/smartsheet/header/Menu.vue

@@ -291,7 +291,7 @@ const onInsertAfter = () => {
       <GeneralIcon icon="arrowDown" class="text-grey h-full text-grey nc-ui-dt-dropdown cursor-pointer outline-0 mr-2" />
     </div>
     <template #overlay>
-      <a-menu class="shadow bg-white nc-column-options">
+      <a-menu class="shadow bg-white border-1 border-gray-200 nc-column-options">
         <a-menu-item @click="onEditPress">
           <div class="nc-column-edit nc-header-menu-item">
             <component :is="iconMap.edit" class="text-gray-700 mx-0.65 my-0.75" />

packages/nc-gui/components/smartsheet/toolbar/RowHeight.vue

@@ -65,7 +65,7 @@ useMenuCloseOnEsc(open)
     </div>
     <template #overlay>
       <div
-        class="w-full bg-white shadow-lg menu-filter-dropdown border-1 border-gray-50 rounded-md overflow-hidden"
+        class="w-full bg-white shadow-lg menu-filter-dropdown border-1 border-gray-200 rounded-md overflow-hidden"
         data-testid="nc-height-menu"
       >
         <div class="flex flex-col w-full text-sm" @click.stop>

packages/nc-gui/lang/en.json

@@ -666,7 +666,7 @@
     "enablePublicAccess": "Enable Public Access",
     "doYouWantToSaveTheChanges": "Do you want to save the changes ?",
     "editingAccess": "Editing access",
-    "enabledPublicViewing": "Enable public viewing",
+    "enabledPublicViewing": "Enable Public Viewing",
     "restrictAccessWithPassword": "Restrict access with password",
     "manageProjectAccess": "Manage Base Access",
     "allowDownload": "Allow Download",
@@ -719,7 +719,7 @@
     "groupBy": "Group By",
     "addSubGroup": "Add subgroup",
     "shareBase": {
-      "label": "Share base",
+      "label": "Share Base",
       "disable": "Disable shared base",
       "enable": "Anyone with the link",
       "link": "Shared base link"

packages/nc-gui/store/bases.ts

@@ -12,6 +12,7 @@ export const useBases = defineStore('basesStore', () => {
   const bases = ref<Map<string, NcProject>>(new Map())
 
   const basesList = computed<NcProject[]>(() => Array.from(bases.value.values()).sort((a, b) => a.updated_at - b.updated_at))
+  const baseUserCount = ref<number | undefined>(undefined)
   
   const router = useRouter()
   const route = router.currentRoute
@@ -294,6 +295,7 @@ export const useBases = defineStore('basesStore', () => {
   return {
     bases,
     basesList,
+    baseUserCount,
     loadProjects,
     loadProject,
     getSqlUi,