[UBER-69] Allow space selector to display project's icon or emoji (#3396)

Signed-off-by: Ruslan Bayandinov <wazsone@ya.ru>

packages/presentation/src/components/SpaceInfo.svelte

@@ -15,7 +15,7 @@
 <script lang="ts">
   import { IconFolder, IconSize, Label } from '@hcengineering/ui'
 
-  import type { Space } from '@hcengineering/core'
+  import { Space } from '@hcengineering/core'
   import presentation from '..'
 
   export let value: Space

packages/presentation/src/components/SpaceSelect.svelte

@@ -13,9 +13,10 @@
 // limitations under the License.
 -->
 <script lang="ts">
-  import type { IntlString } from '@hcengineering/platform'
+  import { createEventDispatcher, ComponentType } from 'svelte'
-  import { getClient } from '../utils'
 
+  import { Asset, IntlString } from '@hcengineering/platform'
+  import { getPlatformColorDef, getPlatformColorForTextDef, IconWithEmojii, themeStore } from '@hcengineering/ui'
   import {
     AnySvelteComponent,
     Button,
@@ -29,11 +30,12 @@
     showPopup,
     TooltipAlignment
   } from '@hcengineering/ui'
-  import SpacesPopup from './SpacesPopup.svelte'
+  import { Class, DocumentQuery, FindOptions, Ref, Space } from '@hcengineering/core'
+  import { IconProps } from '@hcengineering/view'
 
-  import type { Class, DocumentQuery, FindOptions, Ref, Space } from '@hcengineering/core'
+  import SpacesPopup from './SpacesPopup.svelte'
-  import { createEventDispatcher } from 'svelte'
   import { ObjectCreate } from '../types'
+  import { getClient } from '../utils'
 
   export let _class: Ref<Class<Space>>
   export let spaceQuery: DocumentQuery<Space> | undefined = { archived: false }
@@ -54,8 +56,10 @@
   export let componentProps: any | undefined = undefined
   export let autoSelect = true
   export let readonly = false
+  export let iconWithEmojii: AnySvelteComponent | Asset | ComponentType | undefined = undefined
+  export let defaultIcon: AnySvelteComponent | Asset | ComponentType = IconFolder
 
-  let selected: Space | undefined
+  let selected: (Space & IconProps) | undefined
 
   const client = getClient()
   const dispatch = createEventDispatcher()
@@ -117,7 +121,15 @@
     {focus}
     disabled={readonly}
     {focusIndex}
-    icon={IconFolder}
+    icon={selected?.icon === iconWithEmojii ? IconWithEmojii : selected?.icon ?? defaultIcon}
+    iconProps={selected?.icon === iconWithEmojii
+      ? { icon: selected?.color }
+      : {
+          fill:
+            selected?.color !== undefined
+              ? getPlatformColorDef(selected?.color, $themeStore.dark).icon
+              : getPlatformColorForTextDef(selected?.name ?? '', $themeStore.dark).icon
+        }}
     {size}
     {kind}
     {justify}

packages/presentation/src/components/SpaceSelector.svelte

@@ -13,12 +13,13 @@
 // limitations under the License.
 -->
 <script lang="ts">
-  import type { Class, DocumentQuery, FindOptions, Ref, Space } from '@hcengineering/core'
+  import { Class, DocumentQuery, FindOptions, Ref, Space } from '@hcengineering/core'
-  import type { IntlString } from '@hcengineering/platform'
+  import { Asset, IntlString } from '@hcengineering/platform'
   import { AnySvelteComponent, ButtonKind, ButtonSize } from '@hcengineering/ui'
   import { ObjectCreate } from '../types'
   import SpaceSelect from './SpaceSelect.svelte'
   import { createEventDispatcher } from 'svelte'
+  import { ComponentType } from 'svelte'
 
   export let space: Ref<Space> | undefined = undefined
   export let _class: Ref<Class<Space>>
@@ -34,6 +35,8 @@
   export let component: AnySvelteComponent | undefined = undefined
   export let componentProps: any | undefined = undefined
   export let autoSelect = true
+  export let iconWithEmojii: AnySvelteComponent | Asset | ComponentType | undefined = undefined
+  export let defaultIcon: AnySvelteComponent | Asset | ComponentType | undefined = undefined
 
   const dispatch = createEventDispatcher()
 
@@ -56,6 +59,8 @@
   {component}
   {componentProps}
   {autoSelect}
+  {iconWithEmojii}
+  {defaultIcon}
   bind:value={space}
   on:change={(evt) => {
     space = evt.detail

plugins/tracker-resources/src/components/CreateIssue.svelte

@@ -70,6 +70,7 @@
   import SetParentIssueActionPopup from './SetParentIssueActionPopup.svelte'
   import SubIssues from './SubIssues.svelte'
   import { createBacklinks } from '@hcengineering/chunter-resources'
+  import ProjectPresenter from './projects/ProjectPresenter.svelte'
 
   export let space: Ref<Project>
   export let status: Ref<IssueStatus> | undefined = undefined
@@ -543,6 +544,9 @@
       bind:space={_space}
       kind={'secondary'}
       size={'small'}
+      component={ProjectPresenter}
+      iconWithEmojii={tracker.component.IconWithEmojii}
+      defaultIcon={tracker.icon.Home}
     />
     <ObjectBox
       _class={tracker.class.IssueTemplate}

plugins/tracker-resources/src/components/components/NewComponent.svelte

@@ -22,6 +22,7 @@
   import { createEventDispatcher } from 'svelte'
   import tracker from '../../plugin'
   import { StyledTextArea } from '@hcengineering/text-editor'
+  import ProjectPresenter from '../projects/ProjectPresenter.svelte'
 
   export let space: Ref<Project>
   const dispatch = createEventDispatcher()
@@ -56,6 +57,9 @@
       bind:space
       kind={'secondary'}
       size={'large'}
+      component={ProjectPresenter}
+      iconWithEmojii={tracker.component.IconWithEmojii}
+      defaultIcon={tracker.icon.Home}
     />
   </svelte:fragment>
   <EditBox

plugins/tracker-resources/src/components/milestones/NewMilestone.svelte

@@ -23,6 +23,7 @@
   import tracker from '../../plugin'
   import MilestoneStatusEditor from './MilestoneStatusEditor.svelte'
   import { createBacklinks } from '@hcengineering/chunter-resources'
+  import ProjectPresenter from '../projects/ProjectPresenter.svelte'
 
   export let space: Ref<Project>
   const dispatch = createEventDispatcher()
@@ -60,6 +61,9 @@
       kind={'secondary'}
       size={'large'}
       bind:space
+      component={ProjectPresenter}
+      iconWithEmojii={tracker.component.IconWithEmojii}
+      defaultIcon={tracker.icon.Home}
     />
   </svelte:fragment>
   <EditBox

plugins/tracker-resources/src/components/scrums/NewScrum.svelte

@@ -22,6 +22,7 @@
   import { createEventDispatcher } from 'svelte'
   import tracker from '../../plugin'
   import { StyledTextArea } from '@hcengineering/text-editor'
+  import ProjectPresenter from '../projects/ProjectPresenter.svelte'
 
   export let space: Ref<Project>
 
@@ -69,7 +70,14 @@
   on:changeContent
 >
   <svelte:fragment slot="header">
-    <SpaceSelector _class={tracker.class.Project} label={tracker.string.Project} bind:space />
+    <SpaceSelector
+      _class={tracker.class.Project}
+      label={tracker.string.Project}
+      bind:space
+      component={ProjectPresenter}
+      iconWithEmojii={tracker.component.IconWithEmojii}
+      defaultIcon={tracker.icon.Home}
+    />
   </svelte:fragment>
   <EditBox
     bind:value={object.title}

plugins/tracker-resources/src/components/templates/CreateIssueTemplate.svelte

@@ -29,6 +29,7 @@
   import MilestoneSelector from '../milestones/MilestoneSelector.svelte'
   import EstimationEditor from './EstimationEditor.svelte'
   import SubIssueTemplates from './IssueTemplateChilds.svelte'
+  import ProjectPresenter from '../projects/ProjectPresenter.svelte'
 
   export let space: Ref<Project>
   export let priority: IssuePriority = IssuePriority.NoPriority
@@ -138,6 +139,9 @@
       bind:space={_space}
       kind={'secondary'}
       size={'large'}
+      component={ProjectPresenter}
+      iconWithEmojii={tracker.component.IconWithEmojii}
+      defaultIcon={tracker.icon.Home}
     />
   </svelte:fragment>
   <svelte:fragment slot="title" let:label>

plugins/tracker/src/index.ts

@@ -31,12 +31,10 @@ import {
   Type,
   WithLookup
 } from '@hcengineering/core'
-import type { Asset, IntlString, Plugin, Resource } from '@hcengineering/platform'
+import { Asset, IntlString, Plugin, Resource, plugin } from '@hcengineering/platform'
-import { plugin } from '@hcengineering/platform'
+import { TagCategory, TagElement, TagReference } from '@hcengineering/tags'
-import type { TagCategory, TagElement } from '@hcengineering/tags'
-import { TagReference } from '@hcengineering/tags'
 import { AnyComponent, Location, ResolvedLocation } from '@hcengineering/ui'
-import { Action, ActionCategory } from '@hcengineering/view'
+import { Action, ActionCategory, IconProps } from '@hcengineering/view'
 
 /**
  * @public
@@ -46,14 +44,12 @@ export interface IssueStatus extends Status {}
 /**
  * @public
  */
-export interface Project extends Space {
+export interface Project extends Space, IconProps {
   identifier: string // Project identifier
   sequence: number
   issueStatuses: number
   defaultIssueStatus: Ref<IssueStatus>
   defaultAssignee?: Ref<Employee>
-  icon?: Asset
-  color?: number
   defaultTimeReportDay: TimeReportDayType
 }
 

plugins/view/src/index.ts

@@ -719,6 +719,14 @@ export interface ViewOptionsModel {
   groupDepth?: number
 }
 
+/**
+ * @public
+ */
+export interface IconProps {
+  icon?: Asset
+  color?: number
+}
+
 /**
  * @public
  */