Fixed the filling of the status icon. Fixed jumping popups. (#2232)

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

plugins/tracker-resources/src/components/issues/IssueStatusIcon.svelte

@@ -13,11 +13,12 @@
 // limitations under the License.
 -->
 <script lang="ts">
-  import { WithLookup } from '@anticrm/core'
+  import { WithLookup, SortingOrder } from '@anticrm/core'
   import { getClient } from '@anticrm/presentation'
   import { IssueStatus, IssueStatusCategory } from '@anticrm/tracker'
-  import { getPlatformColor, Icon, IconSize } from '@anticrm/ui'
+  import { getPlatformColor, IconSize } from '@anticrm/ui'
   import tracker from '../../plugin'
+  import StatusIcon from '../icons/StatusIcon.svelte'
 
   export let value: WithLookup<IssueStatus>
   export let size: IconSize
@@ -26,6 +27,11 @@
   const client = getClient()
 
   let category: IssueStatusCategory | undefined
+  let categories: IssueStatus[] | undefined
+  let statusIcon: {
+    index: number | undefined
+    count: number | undefined
+  } = { index: undefined, count: undefined }
 
   async function updateCategory (status: WithLookup<IssueStatus>) {
     if (status.$lookup?.category) {
@@ -34,6 +40,19 @@
     if (category === undefined) {
       category = await client.findOne(tracker.class.IssueStatusCategory, { _id: value.category })
     }
+    if (value.category === tracker.issueStatusCategory.Started) {
+      categories = await client.findAll(
+        tracker.class.IssueStatus,
+        { category: tracker.issueStatusCategory.Started },
+        { sort: { rank: SortingOrder.Ascending } }
+      )
+      if (categories) {
+        categories.map((cat, i) => {
+          if (cat._id === value._id) statusIcon = { index: i + 1, count: categories ? categories.length + 1 : 0 }
+          return true
+        })
+      }
+    }
   }
 
   $: updateCategory(value)
@@ -45,6 +64,6 @@
     'currentColor'
 </script>
 
-{#if icon !== undefined}
-  <Icon {icon} fill={color} {size} />
+{#if icon !== undefined && color !== undefined && category !== undefined}
+  <StatusIcon {category} {size} fill={color} {statusIcon} />
 {/if}

plugins/tracker-resources/src/components/issues/KanbanView.svelte

@@ -19,17 +19,7 @@
   import notification from '@anticrm/notification'
   import { createQuery } from '@anticrm/presentation'
   import { Issue, IssuesGrouping, IssuesOrdering, IssueStatus, Team, ViewOptions } from '@anticrm/tracker'
-  import {
-    Button,
-    Component,
-    Icon,
-    IconAdd,
-    showPanel,
-    showPopup,
-    Loading,
-    tooltip,
-    getPlatformColor
-  } from '@anticrm/ui'
+  import { Button, Component, IconAdd, showPanel, showPopup, Loading, tooltip } from '@anticrm/ui'
   import { focusStore, ListSelectionProvider, SelectDirection, selectionStore } from '@anticrm/view-resources'
   import ActionContext from '@anticrm/view-resources/src/components/ActionContext.svelte'
   import Menu from '@anticrm/view-resources/src/components/Menu.svelte'
@@ -40,8 +30,7 @@
     getKanbanStatuses,
     getPriorityStates,
     issuesGroupBySorting,
-    issuesSortOrderMap,
-    UNSET_COLOR
+    issuesSortOrderMap
   } from '../../utils'
   import CreateIssue from '../CreateIssue.svelte'
   import ProjectEditor from '../projects/ProjectEditor.svelte'
@@ -52,6 +41,7 @@
   import PriorityEditor from './PriorityEditor.svelte'
   import StatusEditor from './StatusEditor.svelte'
   import tags from '@anticrm/tags'
+  import IssueStatusIcon from './IssueStatusIcon.svelte'
 
   export let currentSpace: Ref<Team> = tracker.team.DefaultTeam
   export let baseMenuClass: Ref<Class<Doc>> | undefined = undefined
@@ -160,6 +150,9 @@
   $: states = getIssueStates(groupBy, shouldShowEmptyGroups, issueStates, issueStatusStates, priorityStates)
 
   const fullFilled: { [key: string]: boolean } = {}
+  const getState = (state: any): WithLookup<IssueStatus> | undefined => {
+    return issueStatuses?.filter((is) => is._id === state._id)[0]
+  }
 </script>
 
 {#if !states?.length}
@@ -193,16 +186,11 @@
     on:contextmenu={(evt) => showMenu(evt.detail.evt, evt.detail.objects)}
   >
     <svelte:fragment slot="header" let:state let:count>
+      {@const stateWLU = getState(state)}
       <div class="header flex-col">
         <div class="flex-between label font-medium w-full h-full">
           <div class="flex-row-center gap-2">
-            {#if state.icon}
-              <Icon
-                icon={state.icon}
-                fill={state.color === UNSET_COLOR ? 'currentColor' : getPlatformColor(state.color)}
-                size="small"
-              />
-            {/if}
+            {#if stateWLU !== undefined}<IssueStatusIcon value={stateWLU} size={'small'} />{/if}
             <span class="lines-limit-2 ml-2">{state.title}</span>
             <span class="counter ml-2 text-md">{count}</span>
           </div>

plugins/tracker-resources/src/components/issues/StatusEditor.svelte

@@ -17,9 +17,10 @@
   import { AttachedData, Ref, SortingOrder, WithLookup } from '@anticrm/core'
   import { Issue, IssueStatus } from '@anticrm/tracker'
   import { createQuery, getClient } from '@anticrm/presentation'
-  import { Button, showPopup, SelectPopup, TooltipAlignment, eventToHTMLElement, getPlatformColor } from '@anticrm/ui'
+  import { Button, showPopup, SelectPopup, TooltipAlignment, eventToHTMLElement } from '@anticrm/ui'
   import type { ButtonKind, ButtonSize } from '@anticrm/ui'
   import tracker from '../../plugin'
+  import StatusPresenter from './StatusPresenter.svelte'
   import IssueStatusIcon from './IssueStatusIcon.svelte'
 
   export let value: Issue | AttachedData<Issue>
@@ -64,14 +65,12 @@
 
   $: selectedStatus = statuses?.find((status) => status._id === value.status) ?? statuses?.[0]
   $: selectedStatusLabel = shouldShowLabel ? selectedStatus?.name : undefined
-  $: statusesInfo = statuses?.map((s) => {
-    const color = s.color ?? s.$lookup?.category?.color
-
+  $: statusesInfo = statuses?.map((s, i) => {
     return {
       id: s._id,
-      text: s.name,
-      icon: s.$lookup?.category?.icon,
-      ...(color !== undefined ? { iconColor: getPlatformColor(color) } : undefined)
+      component: StatusPresenter,
+      props: { value: s, size: 'small' },
+      isSelected: selectedStatus?._id === s._id ?? false
     }
   })
   $: if (!statuses) {
@@ -112,12 +111,12 @@
       {width}
       on:click={handleStatusEditorOpened}
     >
-      <span slot="content" class="inline-flex">
+      <span slot="content" class="inline-flex pointer-events-none">
         {#if selectedStatus}
           <IssueStatusIcon value={selectedStatus} size="inline" />
         {/if}
         {#if selectedStatusLabel}
-          <span class="overflow-label disabled" class:ml-1={selectedStatus}>{selectedStatusLabel}</span>
+          <span class="overflow-label disabled" class:ml-2={selectedStatus}>{selectedStatusLabel}</span>
         {/if}
       </span>
     </Button>

plugins/tracker-resources/src/components/issues/StatusPresenter.svelte

@@ -18,12 +18,13 @@
   import IssueStatusIcon from './IssueStatusIcon.svelte'
 
   export let value: WithLookup<IssueStatus> | undefined
+  export let size: 'small' | 'medium' = 'medium'
 </script>
 
 {#if value}
   <div class="flex-presenter">
     {#if value.$lookup?.category?.icon}
-      <IssueStatusIcon {value} size="medium" />
+      <IssueStatusIcon {value} {size} />
     {/if}
     <span class="overflow-label" class:ml-2={value.$lookup?.category?.icon !== undefined}>
       {value.name}