Browse Source

fix(nc-gui): ui updates

pull/6390/head
reenphygeorge 1 year ago
parent
commit
99bd7190d4
  1. 4
      packages/nc-gui/assets/style.scss
  2. 4
      packages/nc-gui/components/cell/Email.vue
  3. 2
      packages/nc-gui/components/dashboard/Sidebar/TopSection.vue
  4. 6
      packages/nc-gui/components/dashboard/Sidebar/UserInfo.vue
  5. 2
      packages/nc-gui/components/general/WorkspaceIcon.vue
  6. 10
      packages/nc-gui/components/project/AccessSettings.vue
  7. 4
      packages/nc-gui/components/smartsheet/header/CellIcon.ts

4
packages/nc-gui/assets/style.scss

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

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

@ -86,9 +86,9 @@ watch(
<span v-else-if="vModel === null && showNull" class="nc-null">NULL</span> <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" /> <LazyCellClampedText :value="vModel" :lines="rowHeight" />
</a> </nuxt-link>
<LazyCellClampedText v-else :value="vModel" :lines="rowHeight" /> <LazyCellClampedText v-else :value="vModel" :lines="rowHeight" />
</template> </template>

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

@ -41,7 +41,7 @@ const navigateToSettings = () => {
</div> </div>
</template> </template>
<template v-else-if="!isSharedBase"> <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 /> <DashboardSidebarTopSectionHeader />
<NcButton <NcButton

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

@ -141,15 +141,15 @@ onMounted(() => {
</NcDropdown> </NcDropdown>
<div v-if="appInfo.ee" class="text-gray-500 text-xs pl-3">© 2023 NocoDB. Inc</div> <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 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-2 gap-2"> <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"> <GithubButton href="https://github.com/nocodb/nocodb" data-icon="octicon-star" data-show-count="true" data-size="large">
Star Star
</GithubButton> </GithubButton>
</div> </div>
<div class="flex items-start flex-row justify-center gap-2"> <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> </div>
</div> </div>

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

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

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

@ -155,8 +155,8 @@ onMounted(async () => {
</div> </div>
<div v-else class="nc-collaborators-list nc-scrollbar-md"> <div v-else class="nc-collaborators-list nc-scrollbar-md">
<div class="nc-collaborators-list-header"> <div class="nc-collaborators-list-header">
<div class="flex w-1/5">Users</div> <div class="flex w-3/5">Users</div>
<div class="flex w-1/5">Date Joined</div> <div class="flex w-2/5">Date Joined</div>
<div class="flex w-1/5">Access</div> <div class="flex w-1/5">Access</div>
<div class="flex w-1/5"></div> <div class="flex w-1/5"></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 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 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"> <div class="flex items-center gap-2">
<span class="color-band" :style="{ backgroundColor: stringToColour(collab.email) }">{{ <span class="color-band" :style="{ backgroundColor: stringToColour(collab.email) }">{{
collab?.email?.slice(0, 2) collab?.email?.slice(0, 2)
}}</span> }}</span>
<!-- <GeneralTruncateText> --> <!-- <GeneralTruncateText> -->
<span class="truncate">
{{ collab.email }} {{ collab.email }}
</span>
<!-- </GeneralTruncateText> --> <!-- </GeneralTruncateText> -->
</div> </div>
</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) }} {{ timeAgo(collab.created_at) }}
</div> </div>
<div class="w-1/5 roles"> <div class="w-1/5 roles">

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

@ -1,4 +1,4 @@
import type { ColumnType } from 'nocodb-sdk' import { UITypes, type ColumnType } from 'nocodb-sdk'
import type { PropType } from '@vue/runtime-core' import type { PropType } from '@vue/runtime-core'
import { import {
ColumnInj, ColumnInj,
@ -81,6 +81,8 @@ const renderIcon = (column: ColumnType, abstractType: any) => {
return iconMap.percent return iconMap.percent
} else if (isInt(column, abstractType) || isFloat(column, abstractType)) { } else if (isInt(column, abstractType) || isFloat(column, abstractType)) {
return iconMap.number return iconMap.number
} else if(column.uidt === UITypes.Geometry) {
return iconMap.calculator
} else if (isString(column, abstractType)) { } else if (isString(column, abstractType)) {
return iconMap.text return iconMap.text
} else { } else {

Loading…
Cancel
Save