Emoji node (#8871)

Signed-off-by: Anton Alexeyev <alexeyev.anton@gmail.com>

plugins/task-resources/src/components/state/CreateStatePopup.svelte

@@ -15,17 +15,16 @@
 <script lang="ts">
   import core, { Attribute, Class, Ref, Status, StatusCategory } from '@hcengineering/core'
   import { Asset, getEmbeddedLabel } from '@hcengineering/platform'
-  import presentation, { createQuery, getClient } from '@hcengineering/presentation'
+  import presentation, { IconWithEmoji, createQuery, getClient } from '@hcengineering/presentation'
   import { clearSettingsStore, settingsStore } from '@hcengineering/setting-resources'
   import { ProjectType, TaskType, calculateStatuses, createState } from '@hcengineering/task'
   import {
+    Component,
     ButtonIcon,
     ButtonMenu,
-    EmojiPopup,
     IconCopy,
     IconDelete,
     IconSettings,
-    IconWithEmoji,
     Label,
     Modal,
     ModernEditbox,
@@ -38,6 +37,7 @@
   } from '@hcengineering/ui'
   import { ColorsPopup, statusStore } from '@hcengineering/view-resources'
   import view from '@hcengineering/view-resources/src/plugin'
+  import emojiPlugin from '@hcengineering/emoji'
   import { taskTypeStore, typeStore } from '../..'
   import task from '../../plugin'
   import ApproveStatusRenamePopup from './ApproveStatusRenamePopup.svelte'
@@ -432,11 +432,13 @@
             }}
           />
         {:else}
-          <EmojiPopup
-            embedded
-            selected={Array.isArray(color) ? fromCodePoint(...color) : color ? fromCodePoint(color) : undefined}
-            disabled={readonly}
-            kind={'default'}
+          <Component
+            is={emojiPlugin.component.EmojiPopup}
+            props={{
+              selected: Array.isArray(color) ? fromCodePoint(...color) : color ? fromCodePoint(color) : undefined,
+              disabled: readonly,
+              kind: 'default'
+            }}
             on:close={(evt) => {
               if (readonly) return
               color = evt.detail.codes

plugins/task-resources/src/components/state/StateIconPresenter.svelte

@@ -56,7 +56,9 @@
   function getViewState (type: ProjectType | undefined, state: Status | undefined): Status | undefined {
     if (state === undefined) return
     if (type === undefined) return state
-    const targetColor = type.statuses.find((p) => p._id === state._id)?.color
+    const statusColor = type?.statuses?.find((p) => p._id === state._id)?.color
+    const targetColor =
+      statusColor === undefined || typeof statusColor !== 'string' ? statusColor : state.color ?? category?.color
     if (targetColor === undefined) return state
     return {
       ...state,

plugins/task-resources/src/components/state/StatePresenter.svelte

@@ -16,13 +16,12 @@
 <script lang="ts">
   import core, { IdMap, Ref, Status, StatusCategory } from '@hcengineering/core'
   import { Asset } from '@hcengineering/platform'
-  import { getClient, reduceCalls } from '@hcengineering/presentation'
+  import { IconWithEmoji, getClient, reduceCalls } from '@hcengineering/presentation'
   import task, { Project, ProjectType, TaskType } from '@hcengineering/task'
   import {
     ColorDefinition,
     Icon,
     IconSize,
-    IconWithEmoji,
     getColorNumberByText,
     getPlatformColorDef,
     themeStore
@@ -86,7 +85,9 @@
   $: projectState = type?.statuses.find((p) => p._id === value?._id)
 
   $: color = getPlatformColorDef(
-    projectState?.color ?? category?.color ?? getColorNumberByText(value?.name ?? ''),
+    projectState?.color !== undefined && typeof projectState?.color !== 'string'
+      ? projectState?.color
+      : category?.color ?? getColorNumberByText(value?.name ?? ''),
     $themeStore.dark
   )
   $: void updateCategory(value)

plugins/task-resources/src/components/state/StatesBar.svelte

@@ -84,7 +84,9 @@
   ): string {
     const type = _space ? typeStore.get(_space.type) : undefined
     const category = state.category ? categories.get(state.category) : undefined
-    const targetColor = type?.statuses?.find((p) => p._id === state._id)?.color ?? state.color ?? category?.color
+    const statusColor = type?.statuses?.find((p) => p._id === state._id)?.color
+    const targetColor =
+      statusColor === undefined || typeof statusColor !== 'string' ? statusColor : state.color ?? category?.color
     return getPlatformColor(targetColor ?? getColorNumberByText(state.name), $themeStore.dark)
   }
 </script>

plugins/task-resources/src/components/state/TypeStatesPopup.svelte

@@ -50,7 +50,9 @@
 
   function getColor (state: Status, type: ProjectType | undefined, categories: IdMap<StatusCategory>): ColorDefinition {
     const category = state.category ? categories.get(state.category) : undefined
-    const targetColor = type?.statuses?.find((p) => p._id === state._id)?.color ?? state.color ?? category?.color
+    const statusColor = type?.statuses?.find((p) => p._id === state._id)?.color
+    const targetColor =
+      statusColor === undefined || typeof statusColor !== 'string' ? statusColor : state.color ?? category?.color
     return getPlatformColorDef(targetColor ?? getColorNumberByText(state.name), $themeStore.dark)
   }
 

plugins/task-resources/src/components/taskTypes/TaskTypeEditor.svelte

@@ -63,7 +63,7 @@
   $: taskType = taskTypes.find((tt) => tt._id === objectId)
   $: name = taskType?.name
   $: icon = taskType?.icon
-  $: color = taskType?.color
+  $: color = taskType?.color !== undefined && typeof taskType?.color !== 'string' ? taskType?.color : undefined
   $: descriptor = client.getModel().findAllSync(task.class.TaskTypeDescriptor, { _id: taskType?.descriptor })
   $: states = (taskType?.statuses.map((p) => $statusStore.byId.get(p)).filter((p) => p !== undefined) as Status[]) ?? []
 

plugins/task-resources/src/components/taskTypes/TaskTypeIcon.svelte

@@ -15,11 +15,11 @@
 -->
 <script lang="ts">
   import { TaskType } from '@hcengineering/task'
+  import { IconWithEmoji } from '@hcengineering/presentation'
   import {
     ColorDefinition,
     Icon,
     IconSize,
-    IconWithEmoji,
     getColorNumberByText,
     getPlatformColorDef,
     themeStore
@@ -37,7 +37,12 @@
     dispatch('accent-color', color)
   }
 
-  $: color = getPlatformColorDef(value?.color ?? getColorNumberByText(value?.name ?? ''), $themeStore.dark)
+  $: color = getPlatformColorDef(
+    value?.color !== undefined && typeof value?.color !== 'string'
+      ? value?.color
+      : getColorNumberByText(value?.name ?? ''),
+    $themeStore.dark
+  )
   $: dispatchAccentColor(color)
 
   onMount(() => {