Browse Source

fix(nc-gui): user logo bg color is not same in all the places

pull/9933/head
Ramesh Mane 4 days ago
parent
commit
5d9b829345
  1. 9
      packages/nc-gui/components/cell/User.vue
  2. 7
      packages/nc-gui/components/dlg/ReAssign/UserItem.vue
  3. 8
      packages/nc-gui/components/general/UserIcon.vue
  4. 2
      packages/nc-gui/components/project/AccessSettings.vue
  5. 6
      packages/nc-gui/components/smartsheet/expanded-form/Sidebar/Audits.vue
  6. 7
      packages/nc-gui/components/smartsheet/form/LimitOptions.vue
  7. 14
      packages/nc-gui/components/workspace/AuditLogs.vue
  8. 2
      packages/nc-gui/components/workspace/CollaboratorsList.vue
  9. 2
      packages/nc-gui/components/workspace/integrations/ConnectionsTab.vue

9
packages/nc-gui/components/cell/User.vue

@ -353,7 +353,7 @@ const isCollaborator = (userIdOrEmail) => {
<div>
<GeneralUserIcon
size="auto"
:name="op.display_name?.trim() ? op.display_name?.trim() : ''"
:name="op.display_name"
:email="op.email"
class="!text-[0.65rem]"
:disabled="!isCollaborator(op.id)"
@ -498,12 +498,7 @@ const isCollaborator = (userIdOrEmail) => {
:class="{ 'text-sm': isKanban, 'text-small': !isKanban }"
>
<div>
<GeneralUserIcon
size="auto"
:name="op.display_name?.trim() ? op.display_name?.trim() : ''"
:email="op.email"
class="!text-[0.65rem]"
/>
<GeneralUserIcon size="auto" :name="op.display_name" :email="op.email" class="!text-[0.65rem]" />
</div>
<NcTooltip class="truncate max-w-full" show-on-truncate-only>
<template #title>

7
packages/nc-gui/components/dlg/ReAssign/UserItem.vue

@ -12,12 +12,7 @@ const displayName = computed(() => {
<template>
<div class="flex flex-row items-center gap-x-2 h-12.5 p-2">
<GeneralUserIcon
size="auto"
:name="user.display_name?.trim() ? user.display_name?.trim() : ''"
:email="user.email"
class="!text-[0.65rem]"
/>
<GeneralUserIcon size="auto" :name="user.display_name" :email="user.email" class="!text-[0.65rem]" />
<div class="flex flex-col justify-center flex-grow">
<div class="flex flex-col">
<span class="capitalize font-weight-medium">{{ displayName }}</span>

8
packages/nc-gui/components/general/UserIcon.vue

@ -4,7 +4,7 @@ import { isColorDark, stringToColor } from '#imports'
const props = withDefaults(
defineProps<{
size?: 'small' | 'medium' | 'base' | 'large' | 'xlarge' | 'auto'
name?: string
name?: string | null
email?: string
disabled?: boolean
}>(),
@ -26,7 +26,11 @@ const backgroundColor = computed(() => {
}
// in comments we need to generate user icon from email
return displayName.value ? stringToColor(displayName.value) : email.value ? stringToColor(email.value) : '#FFFFFF'
return displayName.value?.trim()
? stringToColor(displayName.value.trim())
: email.value?.trim()
? stringToColor(email.value.trim())
: '#FFFFFF'
})
const usernameInitials = computed(() => {

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

@ -349,7 +349,7 @@ const isDeleteOrUpdateAllowed = (user) => {
</template>
<div v-if="column.key === 'email'" class="w-full flex gap-3 items-center users-email-grid">
<GeneralUserIcon size="base" :email="record.email" class="flex-none" />
<GeneralUserIcon size="base" :email="record.email" :name="record.display_name" class="flex-none" />
<div class="flex flex-col flex-1 max-w-[calc(100%_-_44px)]">
<div class="flex gap-3">
<NcTooltip class="truncate max-w-full text-gray-800 capitalize font-semibold" show-on-truncate-only>

6
packages/nc-gui/components/smartsheet/expanded-form/Sidebar/Audits.vue

@ -83,7 +83,7 @@ watch(
<div class="group gap-3 overflow-hidden px-3 py-2 hover:bg-gray-100">
<div class="flex items-start justify-between">
<div class="flex items-start gap-3 flex-1 w-full">
<GeneralUserIcon :email="audit.created_by_email" :name="audit.created_display_name" class="mt-0.5" size="medium" />
<GeneralUserIcon :email="audit?.created_by_email" :name="audit?.created_display_name" class="mt-0.5" size="medium" />
<div class="flex h-[28px] items-center gap-3 w-[calc(100%_-_40px)]">
<NcDropdown placement="topLeft" :trigger="['hover']" class="flex-none max-w-[calc(100%_-_72px)]">
<div class="truncate text-gray-800 font-medium !text-small !leading-[18px] overflow-hidden">
@ -95,8 +95,8 @@ watch(
<div class="flex items-center gap-4 py-3 px-2">
<GeneralUserIcon
class="!w-8 !h-8 border-1 border-gray-200 rounded-full"
:name="audit.created_display_name"
:email="audit.created_by_email"
:name="audit?.created_display_name"
:email="audit?.created_by_email"
/>
<div class="flex flex-col">
<div class="font-semibold text-gray-800">

7
packages/nc-gui/components/smartsheet/form/LimitOptions.vue

@ -262,12 +262,7 @@ const showOrHideAll = (showAll: boolean) => {
class="flex items-stretch gap-2"
>
<div>
<GeneralUserIcon
size="auto"
:name="element.display_name?.trim() ? element.display_name?.trim() : ''"
:email="element.email"
class="!text-[0.65rem]"
/>
<GeneralUserIcon size="auto" :name="element.display_name" :email="element.email" class="!text-[0.65rem]" />
</div>
<NcTooltip class="truncate max-w-full" show-on-truncate-only>
<template #title>

14
packages/nc-gui/components/workspace/AuditLogs.vue

@ -350,7 +350,12 @@ onKeyStroke('ArrowDown', onDown)
<td class="cell-user">
<div>
<div v-if="audit.user && collaboratorsMap.get(audit.user)?.email" class="w-full flex gap-3 items-center">
<GeneralUserIcon :email="collaboratorsMap.get(audit.user)?.email" size="base" class="flex-none" />
<GeneralUserIcon
:email="collaboratorsMap.get(audit.user)?.email"
:name="collaboratorsMap.get(audit.user)?.display_name"
size="base"
class="flex-none"
/>
<div class="flex-1 flex flex-col max-w-[calc(100%_-_44px)]">
<div class="w-full flex gap-3">
<NcTooltip
@ -521,7 +526,12 @@ onKeyStroke('ArrowDown', onDown)
v-if="selectedAudit?.user && collaboratorsMap.get(selectedAudit.user)?.email"
class="w-full flex gap-3 items-center"
>
<GeneralUserIcon :email="collaboratorsMap.get(selectedAudit.user)?.email" size="base" class="flex-none" />
<GeneralUserIcon
:email="collaboratorsMap.get(selectedAudit.user)?.email"
:name="collaboratorsMap.get(selectedAudit.user)?.display_name"
size="base"
class="flex-none"
/>
<div class="flex-1 flex flex-col">
<div class="w-full flex gap-3">
<span class="text-sm text-gray-800 capitalize font-semibold">

2
packages/nc-gui/components/workspace/CollaboratorsList.vue

@ -229,7 +229,7 @@ const isDeleteOrUpdateAllowed = (user) => {
</template>
<div v-if="column.key === 'email'" class="w-full flex gap-3 items-center">
<GeneralUserIcon size="base" :email="record.email" class="flex-none" />
<GeneralUserIcon size="base" :email="record.email" :name="record.display_name" class="flex-none" />
<div class="flex flex-col flex-1 max-w-[calc(100%_-_44px)]">
<div class="flex gap-3">
<NcTooltip class="truncate max-w-full text-gray-800 capitalize font-semibold" show-on-truncate-only>

2
packages/nc-gui/components/workspace/integrations/ConnectionsTab.vue

@ -463,6 +463,8 @@ onKeyStroke('ArrowDown', onDown)
>
<GeneralUserIcon
:email="collaboratorsMap.get(integration.created_by)?.email"
:name="collaboratorsMap.get(integration.created_by)?.display_name"
size="base"
class="flex-none"
:class="{

Loading…
Cancel
Save