Merge pull request #6390 from nocodb/fix/uiux-misc

fix(nc-gui): ui updates

packages/nc-gui/assets/style.scss

@@ -32,6 +32,10 @@
   height: var(--topbar-height) !important;
 }
 
+.anticon-check-circle {
+  @apply !relative top-[-1px] left-0;  
+}
+
 html,
 body,
 #__nuxt,

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

@@ -86,9 +86,14 @@ watch(
 
   <span v-else-if="vModel === null && showNull" class="nc-null">NULL</span>
 
-  <a v-else-if="validEmail" class="text-sm underline hover:opacity-75" :href="`mailto:${vModel}`" target="_blank">
+  <nuxt-link
+    v-else-if="validEmail"
+    class="text-sm underline hover:opacity-75 inline-block"
+    :href="`mailto:${vModel}`"
+    target="_blank"
+  >
     <LazyCellClampedText :value="vModel" :lines="rowHeight" />
-  </a>
+  </nuxt-link>
 
   <LazyCellClampedText v-else :value="vModel" :lines="rowHeight" />
 </template>

packages/nc-gui/components/dashboard/Sidebar.vue

@@ -5,8 +5,6 @@ const { isWorkspaceLoading } = storeToRefs(workspaceStore)
 
 const { isSharedBase } = storeToRefs(useProject())
 
-const isCreateProjectOpen = ref(false)
-
 const treeViewDom = ref<HTMLElement>()
 
 const isTreeViewOnScrollTop = ref(false)

packages/nc-gui/components/dashboard/Sidebar/TopSection.vue

@@ -41,7 +41,7 @@ const navigateToSettings = () => {
     </div>
   </template>
   <template v-else-if="!isSharedBase">
-    <div class="flex flex-col p-1 gap-y-0.5 mt-0.25 mb-0.5">
+    <div class="flex flex-col p-1 gap-y-0.5 mt-0.25 mb-0.5 truncate">
       <DashboardSidebarTopSectionHeader />
 
       <NcButton

packages/nc-gui/components/dashboard/Sidebar/UserInfo.vue

@@ -141,15 +141,15 @@ onMounted(() => {
     </NcDropdown>
 
     <div v-if="appInfo.ee" class="text-gray-500 text-xs pl-3">© 2023 NocoDB. Inc</div>
-    <div v-else-if="isMounted" class="flex flex-col gap-y-1 pt-1">
-      <div class="flex items-start flex-row justify-center px-2 gap-2">
+    <div v-else-if="isMounted" class="flex flex-row justify-between flex-wrap pt-1 truncate">
+      <div class="flex items-start flex-row justify-center px-3 gap-2">
         <GithubButton href="https://github.com/nocodb/nocodb" data-icon="octicon-star" data-show-count="true" data-size="large">
           Star
         </GithubButton>
       </div>
 
       <div class="flex items-start flex-row justify-center gap-2">
-        <GeneralJoinCloud class="color-transition px-2 text-gray-500 cursor-pointer select-none hover:text-accent" />
+        <GeneralJoinCloud class="color-transition px-3 text-gray-500 cursor-pointer select-none hover:text-accent" />
       </div>
     </div>
   </div>

packages/nc-gui/components/general/WorkspaceIcon.vue

@@ -25,7 +25,9 @@ const size = computed(() => props.size || 'medium')
     :style="{ backgroundColor: workspaceColor }"
   >
     <template v-if="!props.hideLabel">
-      {{ props.workspace?.title?.slice(0, 2) }}
+      <div class="font-black">
+        {{ props.workspace?.title?.slice(0, 2) }}
+      </div>
     </template>
   </div>
 </template>

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

@@ -155,8 +155,8 @@ onMounted(async () => {
       </div>
       <div v-else class="nc-collaborators-list nc-scrollbar-md">
         <div class="nc-collaborators-list-header">
-          <div class="flex w-1/5">Users</div>
-          <div class="flex w-1/5">Date Joined</div>
+          <div class="flex w-3/5">Users</div>
+          <div class="flex w-2/5">Date Joined</div>
           <div class="flex w-1/5">Access</div>
           <div class="flex w-1/5"></div>
           <div class="flex w-1/5"></div>
@@ -164,17 +164,19 @@ onMounted(async () => {
 
         <div class="flex flex-col nc-scrollbar-md">
           <div v-for="(collab, i) of collaborators" :key="i" class="relative w-full nc-collaborators nc-collaborators-list-row">
-            <div class="!py-0 w-1/5 email">
+            <div class="!py-0 w-3/5 email truncate">
               <div class="flex items-center gap-2">
                 <span class="color-band" :style="{ backgroundColor: stringToColour(collab.email) }">{{
                   collab?.email?.slice(0, 2)
                 }}</span>
                 <!--                <GeneralTruncateText> -->
-                {{ collab.email }}
+                <span class="truncate">
+                  {{ collab.email }}
+                </span>
                 <!--                </GeneralTruncateText> -->
               </div>
             </div>
-            <div class="text-gray-500 text-xs w-1/5 created-at">
+            <div class="text-gray-500 text-xs w-2/5 created-at truncate">
               {{ timeAgo(collab.created_at) }}
             </div>
             <div class="w-1/5 roles">

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

@@ -82,8 +82,8 @@ vModel.value.au = !!vModel.value.au */
 
       <a-form-item v-if="!hideLength" :label="$t('labels.lengthValue')">
         <a-input
-          class="!rounded-md"
           v-model:value="vModel.dtxp"
+          class="!rounded-md"
           :disabled="sqlUi.getDefaultLengthIsDisabled(vModel.dt) || !sqlUi.columnEditable(vModel)"
           @input="onAlter"
         />

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

@@ -29,7 +29,7 @@ const emit = defineEmits(['update:value'])
 
 const vModel = useVModel(props, 'value', emit)
 
-const { formState, setAdditionalValidations, validateInfos, isPg, isMysql } = useColumnCreateStoreOrThrow()
+const { formState, setAdditionalValidations, validateInfos, isMysql } = useColumnCreateStoreOrThrow()
 
 const { project } = storeToRefs(useProject())
 

packages/nc-gui/components/smartsheet/header/CellIcon.ts

@@ -1,4 +1,4 @@
-import type { ColumnType } from 'nocodb-sdk'
+import { type ColumnType } from 'nocodb-sdk'
 import type { PropType } from '@vue/runtime-core'
 import {
   ColumnInj,
@@ -17,6 +17,7 @@ import {
   isEmail,
   isFloat,
   isGeoData,
+  isGeometry,
   isInt,
   isJSON,
   isPercent,
@@ -79,6 +80,8 @@ const renderIcon = (column: ColumnType, abstractType: any) => {
     return iconMap.duration
   } else if (isPercent(column)) {
     return iconMap.percent
+  } else if (isGeometry(column)) {
+    return iconMap.calculator
   } else if (isInt(column, abstractType) || isFloat(column, abstractType)) {
     return iconMap.number
   } else if (isString(column, abstractType)) {

packages/nc-gui/utils/cell.ts

@@ -31,6 +31,7 @@ export const isDuration = (column: ColumnType) => column.uidt === UITypes.Durati
 export const isGeoData = (column: ColumnType) => column.uidt === UITypes.GeoData
 export const isPercent = (column: ColumnType) => column.uidt === UITypes.Percent
 export const isSpecificDBType = (column: ColumnType) => column.uidt === UITypes.SpecificDBType
+export const isGeometry = (column: ColumnType) => column.uidt === UITypes.Geometry
 export const isAutoSaved = (column: ColumnType) =>
   [
     UITypes.SingleLineText,

packages/nc-gui/utils/iconUtils.ts

@@ -24,7 +24,6 @@ import MsGroup from '~icons/material-symbols/groups-outline-rounded'
 import MsAddBoxOutline from '~icons/nc-icons/add-box'
 import MsDownloadRounded from '~icons/nc-icons/download'
 import LogosAirtable from '~icons/logos/airtable'
-import MsStar from '~icons/material-symbols/star-outline-rounded'
 import NcStar from '~icons/nc-icons/star'
 import NcUnStar from '~icons/nc-icons/star-remove'
 import MsSort from '~icons/material-symbols/sort'