Tracker: fix issue status colors in the kanban view (#2231)

Signed-off-by: Sergei Ogorelkov <sergei.ogorelkov@xored.com>
hcengineering · Jul 8, 2022 · 1a90f99 · 1a90f99
1 parent 6def1db
commit 1a90f99
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 232 deletions.
diff --git a/plugins/tracker-resources/src/components/issues/Board.svelte b/plugins/tracker-resources/src/components/issues/Board.svelte
diff --git a/plugins/tracker-resources/src/components/issues/IssueStatusIcon.svelte b/plugins/tracker-resources/src/components/issues/IssueStatusIcon.svelte
@@ -41,9 +41,10 @@
   $: color =
     fill ??
     (value.color !== undefined ? getPlatformColor(value.color) : undefined) ??
-    (category !== undefined ? getPlatformColor(category.color) : undefined)
+    (category !== undefined ? getPlatformColor(category.color) : undefined) ??
+    'currentColor'
 </script>
 
-{#if icon !== undefined && color !== undefined}
+{#if icon !== undefined}
   <Icon {icon} fill={color} {size} />
 {/if}
diff --git a/plugins/tracker-resources/src/components/issues/KanbanView.svelte b/plugins/tracker-resources/src/components/issues/KanbanView.svelte
@@ -26,9 +26,9 @@
     IconAdd,
     showPanel,
     showPopup,
-    getPlatformColor,
     Loading,
-    tooltip
+    tooltip,
+    getPlatformColor
   } from '@anticrm/ui'
   import { focusStore, ListSelectionProvider, SelectDirection, selectionStore } from '@anticrm/view-resources'
   import ActionContext from '@anticrm/view-resources/src/components/ActionContext.svelte'
@@ -40,7 +40,8 @@
     getKanbanStatuses,
     getPriorityStates,
     issuesGroupBySorting,
-    issuesSortOrderMap
+    issuesSortOrderMap,
+    UNSET_COLOR
   } from '../../utils'
   import CreateIssue from '../CreateIssue.svelte'
   import ProjectEditor from '../projects/ProjectEditor.svelte'
@@ -195,7 +196,13 @@
       <div class="header flex-col">
         <div class="flex-between label font-medium w-full h-full">
           <div class="flex-row-center gap-2">
-            <Icon icon={state.icon} fill={getPlatformColor(state.color)} size={'small'} />
+            {#if state.icon}
+              <Icon
+                icon={state.icon}
+                fill={state.color === UNSET_COLOR ? 'currentColor' : getPlatformColor(state.color)}
+                size="small"
+              />
+            {/if}
             <span class="lines-limit-2 ml-2">{state.title}</span>
             <span class="counter ml-2 text-md">{count}</span>
           </div>

diff --git a/plugins/tracker-resources/src/utils.ts b/plugins/tracker-resources/src/utils.ts
@@ -32,6 +32,8 @@ import { defaultPriorities, defaultProjectStatuses, issuePriorities } from './ty
 
 export * from './types'
 
+export const UNSET_COLOR = -1
+
 export interface NavigationItem {
   id: string
   label: IntlString
@@ -344,7 +346,7 @@ export async function getKanbanStatuses (
   issues: Array<WithLookup<Issue>>
 ): Promise<TypeState[]> {
   if (groupBy === IssuesGrouping.NoGrouping) {
-    return [{ _id: undefined, color: 0, title: await translate(tracker.string.NoGrouping, {}) }]
+    return [{ _id: undefined, color: UNSET_COLOR, title: await translate(tracker.string.NoGrouping, {}) }]
   }
   if (groupBy === IssuesGrouping.Priority) {
     const states = issues.reduce<TypeState[]>((result, issue) => {
@@ -355,7 +357,7 @@ export async function getKanbanStatuses (
         {
           _id: priority,
           title: issuePriorities[priority].label,
-          color: 0,
+          color: UNSET_COLOR,
           icon: issuePriorities[priority].icon
         }
       ]
@@ -371,14 +373,14 @@ export async function getKanbanStatuses (
     return issues.reduce<TypeState[]>((result, issue) => {
       const status = issue.$lookup?.status
       if (status === undefined || result.find(({ _id }) => _id === status._id) !== undefined) return result
-      const icon = '$lookup' in status ? status.$lookup?.category?.icon : undefined
+      const category = '$lookup' in status ? status.$lookup?.category : undefined
       return [
         ...result,
         {
           _id: status._id,
           title: status.name,
-          color: status.color ?? 0,
-          icon
+          icon: category?.icon,
+          color: status.color ?? category?.color ?? UNSET_COLOR
         }
       ]
     }, [])
@@ -392,7 +394,7 @@ export async function getKanbanStatuses (
         {
           _id: issue.assignee,
           title: issue.$lookup?.assignee?.name ?? noAssignee,
-          color: 0,
+          color: UNSET_COLOR,
           icon: undefined
         }
       ]
@@ -407,7 +409,7 @@ export async function getKanbanStatuses (
         {
           _id: issue.project,
           title: issue.$lookup?.project?.label ?? noProject,
-          color: 0,
+          color: UNSET_COLOR,
           icon: undefined
         }
       ]
@@ -420,7 +422,7 @@ export function getIssueStatusStates (issueStatuses: Array<WithLookup<IssueStatu
   return issueStatuses.map((status) => ({
     _id: status._id,
     title: status.name,
-    color: status.color ?? status.$lookup?.category?.color ?? 0,
+    color: status.color ?? status.$lookup?.category?.color ?? UNSET_COLOR,
     icon: status.$lookup?.category?.icon ?? undefined
   }))
 }
@@ -430,7 +432,7 @@ export async function getPriorityStates (): Promise<TypeState[]> {
     defaultPriorities.map(async (priority) => ({
       _id: priority,
       title: await translate(issuePriorities[priority].label, {}),
-      color: 0,
+      color: UNSET_COLOR,
       icon: issuePriorities[priority].icon
     }))
   )