UBER-486: replaced avatar colors (#3724)

Signed-off-by: Alexander Platov <sas_lord@mail.ru>

packages/ui/src/colors.ts

@@ -50,11 +50,13 @@ const defineAvatarColor = (
   dark: boolean = false
 ): ColorDefinition => {
   const background = rgbToHex(hslToRgb(h / 360, s / 100, l / 100))
+  const icon = rgbToHex(hslToRgb(h / 360, 0.5, 0.6))
+  const title = rgbToHex(hslToRgb(h / 360, 0.9, 0.9))
   return {
     name,
     color: background,
-    icon: undefined,
-    title: undefined,
+    icon,
+    title,
     number: undefined,
     background:
       gradient.length === 1
@@ -264,6 +266,21 @@ export function getPlatformAvatarColorForTextDef (text: string, darkTheme: boole
   return getPlatformAvatarColorDef(hashCode(text), darkTheme)
 }
 
+/**
+ * @public
+ */
+export function getPlatformAvatarColorByName (name: string, darkTheme: boolean): ColorDefinition {
+  const palette = darkTheme ? avatarDarkColors : avatarWhiteColors
+  return palette.find((col) => col.name === name) ?? palette[0]
+}
+
+/**
+ * @public
+ */
+export function getPlatformAvatarColors (darkTheme: boolean): readonly ColorDefinition[] {
+  return darkTheme ? avatarDarkColors : avatarWhiteColors
+}
+
 /**
  * @public
  */

plugins/contact-resources/src/components/Avatar.svelte

@@ -27,17 +27,19 @@
 </script>
 
 <script lang="ts">
-  import contact, {
-    AvatarProvider,
-    AvatarType,
-    getAvatarColorForId,
-    getFirstName,
-    getLastName
-  } from '@hcengineering/contact'
+  import contact, { AvatarProvider, AvatarType, getFirstName, getLastName } from '@hcengineering/contact'
   import { Client, Ref } from '@hcengineering/core'
   import { Asset, getResource } from '@hcengineering/platform'
   import { getBlobURL, getClient } from '@hcengineering/presentation'
-  import { AnySvelteComponent, Icon, IconSize } from '@hcengineering/ui'
+  import {
+    AnySvelteComponent,
+    Icon,
+    IconSize,
+    getPlatformAvatarColorForTextDef,
+    getPlatformAvatarColorByName,
+    themeStore,
+    ColorDefinition
+  } from '@hcengineering/ui'
   import { getAvatarProviderId } from '../utils'
   import AvatarIcon from './icons/Avatar.svelte'
 
@@ -49,7 +51,7 @@
 
   let url: string[] | undefined
   let avatarProvider: AvatarProvider | undefined
-  let color: string | undefined = undefined
+  let color: ColorDefinition | undefined = undefined
 
   $: fname = getFirstName(name ?? '')
   $: lname = getLastName(name ?? '')
@@ -68,7 +70,7 @@
 
       if (!avatarProvider || avatarProvider.type === AvatarType.COLOR) {
         url = undefined
-        color = avatar.split('://')[1]
+        color = getPlatformAvatarColorByName(avatar.split('://')[1], $themeStore.dark)
       } else if (avatarProvider?.type === AvatarType.IMAGE) {
         url = (await getResource(avatarProvider.getUrl))(avatar, size)
       } else {
@@ -76,7 +78,7 @@
         url = (await getResource(avatarProvider.getUrl))(uri, size)
       }
     } else if (name != null) {
-      color = getAvatarColorForId(name)
+      color = getPlatformAvatarColorForTextDef(name, $themeStore.dark)
       url = undefined
       avatarProvider = undefined
     } else {
@@ -95,7 +97,7 @@
   class="ava-{size} flex-center avatar-container"
   class:no-img={!url && color}
   class:bordered={!url && color === undefined}
-  style:background-color={url ? 'var(--theme-button-default)' : color}
+  style:background-color={color && !url ? color.icon : 'var(--theme-button-default)'}
 >
   {#if url}
     {#if size === 'large' || size === 'x-large' || size === '2x-large'}
@@ -103,7 +105,11 @@
     {/if}
     <img class="ava-{size} ava-mask" src={url[0]} {srcset} alt={''} bind:this={imageElement} />
   {:else if name && displayName && displayName !== ''}
-    <div class="ava-text" data-name={displayName.toLocaleUpperCase()} />
+    <div
+      class="ava-text"
+      style:color={color ? color.title : 'var(--accented-button-color)'}
+      data-name={displayName.toLocaleUpperCase()}
+    />
   {:else}
     <div class="icon">
       <Icon icon={icon ?? AvatarIcon} size={'full'} />

plugins/contact-resources/src/components/EditableAvatar.svelte

@@ -15,8 +15,14 @@
 <script lang="ts">
   import { createEventDispatcher } from 'svelte'
   import attachment from '@hcengineering/attachment'
-  import { AnySvelteComponent, IconSize, showPopup } from '@hcengineering/ui'
-  import { AvatarType, getAvatarColorForId } from '@hcengineering/contact'
+  import {
+    AnySvelteComponent,
+    IconSize,
+    showPopup,
+    getPlatformAvatarColorForTextDef,
+    themeStore
+  } from '@hcengineering/ui'
+  import { AvatarType } from '@hcengineering/contact'
   import { Asset, getResource } from '@hcengineering/platform'
 
   import AvatarComponent from './Avatar.svelte'
@@ -41,7 +47,7 @@
       : AvatarType.IMAGE
   $: selectedAvatar = selectedAvatarType === AvatarType.IMAGE ? avatar : uri
   $: if (selectedAvatar === undefined && selectedAvatarType === AvatarType.COLOR) {
-    selectedAvatar = getAvatarColorForId(name)
+    selectedAvatar = getPlatformAvatarColorForTextDef(name ?? '', $themeStore.dark).name
   }
 
   export async function createAvatar (): Promise<string | undefined> {

plugins/contact-resources/src/components/SelectAvatarPopup.svelte

@@ -15,16 +15,20 @@
 <script lang="ts">
   import { createEventDispatcher } from 'svelte'
 
-  import {
-    AvatarType,
-    buildGravatarId,
-    checkHasGravatar,
-    getAvatarColorForId,
-    getAvatarColors,
-    getAvatarColorName
-  } from '@hcengineering/contact'
+  import { AvatarType, buildGravatarId, checkHasGravatar } from '@hcengineering/contact'
   import { Asset } from '@hcengineering/platform'
-  import { AnySvelteComponent, Label, showPopup, TabList, eventToHTMLElement } from '@hcengineering/ui'
+  import {
+    AnySvelteComponent,
+    Label,
+    showPopup,
+    TabList,
+    eventToHTMLElement,
+    getPlatformAvatarColorForTextDef,
+    getPlatformAvatarColorByName,
+    getPlatformAvatarColors,
+    ColorDefinition,
+    themeStore
+  } from '@hcengineering/ui'
   import { ColorsPopup } from '@hcengineering/view-resources'
   import presentation, { Card, getFileUrl } from '@hcengineering/presentation'
   import contact from '../plugin'
@@ -40,8 +44,9 @@
   export let onSubmit: (avatarType?: AvatarType, avatar?: string, file?: Blob) => void
 
   const [schema, uri] = avatar?.split('://') || []
-  const colors = getAvatarColors()
-  let color: string | undefined = (schema as AvatarType) === AvatarType.COLOR ? uri : undefined
+  const colors = getPlatformAvatarColors($themeStore.dark)
+  let color: ColorDefinition | undefined =
+    (schema as AvatarType) === AvatarType.COLOR ? getPlatformAvatarColorByName(uri, $themeStore.dark) : undefined
 
   const initialSelectedType = (() => {
     if (file) {
@@ -56,7 +61,7 @@
 
   const initialSelectedAvatar = (() => {
     if (!avatar) {
-      return getAvatarColorForId(name)
+      return getPlatformAvatarColorForTextDef(name ?? '', $themeStore.dark).name
     }
 
     return avatar.includes('://') ? uri : avatar
@@ -96,7 +101,7 @@
         inputRef.click()
       }
     } else {
-      selectedAvatar = color ?? getAvatarColorForId(name)
+      selectedAvatar = color ? color.name : getPlatformAvatarColorForTextDef(name ?? '', $themeStore.dark).name
     }
   }
 
@@ -119,13 +124,13 @@
       if (blob === undefined) {
         if (!selectedFile && (!avatar || avatar.includes('://'))) {
           selectedAvatarType = AvatarType.COLOR
-          selectedAvatar = getAvatarColorForId(name)
+          selectedAvatar = getPlatformAvatarColorForTextDef(name ?? '', $themeStore.dark).name
         }
         return
       }
       if (blob === null) {
         selectedAvatarType = AvatarType.COLOR
-        selectedAvatar = getAvatarColorForId(name)
+        selectedAvatar = getPlatformAvatarColorForTextDef(name ?? '', $themeStore.dark).name
         selectedFile = undefined
       } else {
         selectedFile = blob
@@ -151,7 +156,7 @@
     if (!inputRef.value.length) {
       if (!selectedFile) {
         selectedAvatarType = AvatarType.COLOR
-        selectedAvatar = getAvatarColorForId(name)
+        selectedAvatar = getPlatformAvatarColorForTextDef(name ?? '', $themeStore.dark).name
       }
     }
   }
@@ -159,11 +164,17 @@
   const showColorPopup = (event: MouseEvent) => {
     showPopup(
       ColorsPopup,
-      { colors, columns: 6, selected: getAvatarColorName(selectedAvatar) },
+      {
+        colors,
+        columns: 6,
+        selected: getPlatformAvatarColorByName(selectedAvatar, $themeStore.dark),
+        key: 'icon'
+      },
       eventToHTMLElement(event),
       (col) => {
         if (col != null) {
-          color = selectedAvatar = colors[col].color
+          color = colors[col]
+          selectedAvatar = color.name
         }
       }
     )

plugins/view-resources/src/components/ColorsPopup.svelte

@@ -22,6 +22,7 @@
   export let colors: readonly ColorDefinition[] = getPlatformColors($themeStore.dark)
   export let columns: number = 8
   export let selected: string | undefined = undefined
+  export let key: 'color' | 'icon' = 'color'
 
   const dispatch = createEventDispatcher()
 </script>
@@ -29,11 +30,12 @@
 <PopupDialog label={view.string.ChooseAColor}>
   <div class="color-grid" style="grid-template-columns: repeat({columns}, 1.5rem)">
     {#each colors as color, i}
+      {@const col = key === 'color' ? color.color : color.icon}
       <!-- svelte-ignore a11y-click-events-have-key-events -->
       <div
         class="color"
         class:selected={selected === color.name}
-        style="background-color: {color.color}"
+        style="background-color: {col}"
         on:click={() => {
           dispatch('close', i)
         }}