Emoji node (#8871)

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

plugins/document-resources/src/components/CreateDocument.svelte

@@ -18,14 +18,13 @@
   import { Analytics } from '@hcengineering/analytics'
   import { Data, generateId, Ref } from '@hcengineering/core'
   import { Document, DocumentEvents, Teamspace } from '@hcengineering/document'
-  import { Card, getClient, SpaceSelector } from '@hcengineering/presentation'
+  import { IconWithEmoji, Card, getClient, SpaceSelector } from '@hcengineering/presentation'
   import {
     Button,
     createFocusManager,
     EditBox,
     FocusHandler,
     getPlatformColorDef,
-    IconWithEmoji,
     showPopup,
     themeStore
   } from '@hcengineering/ui'
@@ -134,7 +133,9 @@
           ? { icon: object.color, size: 'medium' }
           : {
               fill:
-                object.color !== undefined ? getPlatformColorDef(object.color, $themeStore.dark).icon : 'currentColor'
+                object.color !== undefined && typeof object.color !== 'string'
+                  ? getPlatformColorDef(object.color, $themeStore.dark).icon
+                  : 'currentColor'
             }}
         on:click={chooseIcon}
       />

plugins/document-resources/src/components/DocumentIcon.svelte

@@ -14,7 +14,8 @@
 -->
 <script lang="ts">
   import { Asset } from '@hcengineering/platform'
-  import { AnySvelteComponent, Icon, IconSize, IconWithEmoji, getPlatformColorDef, themeStore } from '@hcengineering/ui'
+  import { AnySvelteComponent, Icon, IconSize, getPlatformColorDef, themeStore } from '@hcengineering/ui'
+  import { IconWithEmoji } from '@hcengineering/presentation'
   import view, { IconProps } from '@hcengineering/view'
   import document from '@hcengineering/document'
 
@@ -32,6 +33,9 @@
   iconProps={value?.icon === iconWithEmoji && iconWithEmoji
     ? { icon: value?.color }
     : {
-        fill: value?.color !== undefined ? getPlatformColorDef(value?.color, $themeStore.dark).icon : 'currentColor'
+        fill:
+          value?.color !== undefined && typeof value?.color !== 'string'
+            ? getPlatformColorDef(value?.color, $themeStore.dark).icon
+            : 'currentColor'
       }}
 />

plugins/document-resources/src/components/EditDoc.svelte

@@ -21,7 +21,7 @@
   import notification from '@hcengineering/notification'
   import { Panel } from '@hcengineering/panel'
   import { getResource, setPlatformStatus, unknownError } from '@hcengineering/platform'
-  import { copyTextToClipboard, createQuery, getClient } from '@hcengineering/presentation'
+  import { IconWithEmoji, copyTextToClipboard, createQuery, getClient } from '@hcengineering/presentation'
   import tags from '@hcengineering/tags'
   import { Heading } from '@hcengineering/text-editor'
   import { TableOfContents } from '@hcengineering/text-editor-resources'
@@ -31,7 +31,6 @@
     Component,
     FocusHandler,
     IconMoreH,
-    IconWithEmoji,
     Label,
     TimeSince,
     createFocusManager,
@@ -332,7 +331,10 @@
               ? { icon: doc.color, size: 'large' }
               : {
                   size: 'large',
-                  fill: doc.color !== undefined ? getPlatformColorDef(doc.color, $themeStore.dark).icon : 'currentColor'
+                  fill:
+                    doc.color !== undefined && typeof doc.color !== 'string'
+                      ? getPlatformColorDef(doc.color, $themeStore.dark).icon
+                      : 'currentColor'
                 }}
             disabled={readonly}
             showTooltip={{ label: document.string.Icon, direction: 'bottom' }}

plugins/document-resources/src/components/navigator/DocHierarchy.svelte

@@ -17,8 +17,8 @@
   import { Ref, generateId } from '@hcengineering/core'
   import { Document } from '@hcengineering/document'
   import { getResource } from '@hcengineering/platform'
-  import { getClient } from '@hcengineering/presentation'
-  import { Action, IconAdd, IconEdit, IconWithEmoji, getPlatformColorDef, themeStore } from '@hcengineering/ui'
+  import { IconWithEmoji, getClient } from '@hcengineering/presentation'
+  import { Action, IconAdd, IconEdit, getPlatformColorDef, themeStore } from '@hcengineering/ui'
   import view from '@hcengineering/view'
   import { getActions as getContributedActions, openDoc } from '@hcengineering/view-resources'
 
@@ -107,7 +107,10 @@
         iconProps={doc.icon === view.ids.IconWithEmoji
           ? { icon: doc.color }
           : {
-              fill: doc.color !== undefined ? getPlatformColorDef(doc.color, $themeStore.dark).icon : 'currentColor'
+              fill:
+                doc.color !== undefined && typeof doc.color !== 'string'
+                  ? getPlatformColorDef(doc.color, $themeStore.dark).icon
+                  : 'currentColor'
             }}
         title={doc.title}
         selected={selected === doc._id && draggedItem === undefined}

plugins/document-resources/src/components/navigator/TeamspaceSpacePresenter.svelte

@@ -16,9 +16,8 @@
   import { Analytics } from '@hcengineering/analytics'
   import { Ref, SortingOrder, Space, generateId } from '@hcengineering/core'
   import { Document, DocumentEvents, Teamspace } from '@hcengineering/document'
-  import { createQuery, getClient } from '@hcengineering/presentation'
+  import { IconWithEmoji, createQuery, getClient } from '@hcengineering/presentation'
   import {
-    IconWithEmoji,
     IconEdit,
     getPlatformColorDef,
     getPlatformColorForTextDef,
@@ -270,7 +269,7 @@
       ? { icon: space.color }
       : {
           fill:
-            space.color !== undefined
+            space.color !== undefined && typeof space.color !== 'string'
               ? getPlatformColorDef(space.color, $themeStore.dark).icon
               : getPlatformColorForTextDef(space.name, $themeStore.dark).icon
         }}
@@ -313,7 +312,10 @@
           iconProps={item.icon === view.ids.IconWithEmoji
             ? { icon: visibleItem.color }
             : {
-                fill: item.color !== undefined ? getPlatformColorDef(item.color, $themeStore.dark).icon : 'currentColor'
+                fill:
+                  item.color !== undefined && typeof item.color !== 'string'
+                    ? getPlatformColorDef(item.color, $themeStore.dark).icon
+                    : 'currentColor'
               }}
           title={item.title}
           selected

plugins/document-resources/src/components/teamspace/CreateTeamspace.svelte

@@ -30,11 +30,10 @@
   } from '@hcengineering/core'
   import document, { Teamspace, DocumentEvents } from '@hcengineering/document'
   import { Asset } from '@hcengineering/platform'
-  import presentation, { Card, getClient, reduceCalls } from '@hcengineering/presentation'
+  import presentation, { IconWithEmoji, Card, getClient, reduceCalls } from '@hcengineering/presentation'
   import {
     Button,
     EditBox,
-    IconWithEmoji,
     Label,
     Toggle,
     getColorNumberByText,
@@ -363,7 +362,7 @@
           ? { icon: color }
           : {
               fill:
-                color !== undefined
+                color !== undefined && typeof color !== 'string'
                   ? getPlatformColorDef(color, $themeStore.dark).icon
                   : getPlatformColorForTextDef(name, $themeStore.dark).icon
             }}

plugins/document-resources/src/components/teamspace/TeamspacePresenter.svelte

@@ -14,7 +14,8 @@
 -->
 <script lang="ts">
   import { Teamspace } from '@hcengineering/document'
-  import { Icon, IconWithEmoji, getPlatformColorDef, getPlatformColorForTextDef, themeStore } from '@hcengineering/ui'
+  import { IconWithEmoji } from '@hcengineering/presentation'
+  import { Icon, getPlatformColorDef, getPlatformColorForTextDef, themeStore } from '@hcengineering/ui'
   import view from '@hcengineering/view'
   import document from '../../plugin'
 
@@ -32,7 +33,7 @@
           ? { icon: value.color }
           : {
               fill:
-                value.color !== undefined
+                value.color !== undefined && typeof value.color !== 'string'
                   ? getPlatformColorDef(value.color, $themeStore.dark).icon
                   : getPlatformColorForTextDef(value.name, $themeStore.dark).icon
             }}