Browse Source

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

fix(nc-gui): ui updates
pull/6394/head
Raju Udava 1 year ago committed by GitHub
parent
commit
d94795db4a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 4
      packages/nc-gui/assets/style.scss
  2. 9
      packages/nc-gui/components/cell/Email.vue
  3. 2
      packages/nc-gui/components/dashboard/Sidebar.vue
  4. 2
      packages/nc-gui/components/dashboard/Sidebar/TopSection.vue
  5. 6
      packages/nc-gui/components/dashboard/Sidebar/UserInfo.vue
  6. 4
      packages/nc-gui/components/general/WorkspaceIcon.vue
  7. 12
      packages/nc-gui/components/project/AccessSettings.vue
  8. 2
      packages/nc-gui/components/smartsheet/column/AdvancedOptions.vue
  9. 2
      packages/nc-gui/components/smartsheet/column/SelectOptions.vue
  10. 5
      packages/nc-gui/components/smartsheet/header/CellIcon.ts
  11. 1
      packages/nc-gui/utils/cell.ts
  12. 1
      packages/nc-gui/utils/iconUtils.ts

4
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,

9
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>

2
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)

2
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

6
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>

4
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>

12
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">

2
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"
/>

2
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())

5
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)) {

1
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,

1
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'

Loading…
Cancel
Save