UBER-270: Enable color more wide (#3279)

Signed-off-by: Andrey Sobolev <haiodo@gmail.com>

models/recruit/src/index.ts

@@ -41,7 +41,7 @@ import presentation from '@hcengineering/model-presentation'
 import tags from '@hcengineering/model-tags'
 import task, { DOMAIN_TASK, TSpaceWithStates, TTask, actionTemplates } from '@hcengineering/model-task'
 import tracker from '@hcengineering/model-tracker'
-import view, { createAction, actionTemplates as viewTemplates } from '@hcengineering/model-view'
+import view, { createAction, showColorsViewOption, actionTemplates as viewTemplates } from '@hcengineering/model-view'
 import workbench, { Application, createNavigateAction } from '@hcengineering/model-workbench'
 import notification from '@hcengineering/notification'
 import { IntlString, getEmbeddedLabel } from '@hcengineering/platform'
@@ -624,7 +624,8 @@ export function createModel (builder: Builder): void {
     }
   }
 
-  const applicantViewOptions: ViewOptionsModel = {
+  const applicantViewOptions = (colors: boolean): ViewOptionsModel => {
+    const model: ViewOptionsModel = {
       groupBy: ['state', 'assignee', 'space'],
       orderBy: [
         ['state', SortingOrder.Ascending],
@@ -644,6 +645,11 @@ export function createModel (builder: Builder): void {
         }
       ]
     }
+    if (colors) {
+      model.other.push(showColorsViewOption)
+    }
+    return model
+  }
   builder.createDoc(
     view.class.Viewlet,
     core.space.Model,
@@ -710,7 +716,7 @@ export function createModel (builder: Builder): void {
         doneState: null,
         '$lookup.space.archived': false
       },
-      viewOptions: applicantViewOptions
+      viewOptions: applicantViewOptions(true)
     },
     recruit.viewlet.ListApplicant
   )
@@ -727,7 +733,7 @@ export function createModel (builder: Builder): void {
         '$lookup.space.archived': false
       },
       viewOptions: {
-        ...applicantViewOptions,
+        ...applicantViewOptions(false),
         groupDepth: 1
       },
       options: {

models/tracker/src/index.ts

@@ -49,7 +49,7 @@ import {
 import attachment from '@hcengineering/model-attachment'
 import chunter from '@hcengineering/model-chunter'
 import core, { DOMAIN_SPACE, TAttachedDoc, TDoc, TSpace, TStatus, TType } from '@hcengineering/model-core'
-import view, { actionTemplates, classPresenter, createAction } from '@hcengineering/model-view'
+import view, { actionTemplates, classPresenter, createAction, showColorsViewOption } from '@hcengineering/model-view'
 import workbench, { createNavigateAction } from '@hcengineering/model-workbench'
 import notification from '@hcengineering/notification'
 import { IntlString } from '@hcengineering/platform'
@@ -74,7 +74,7 @@ import {
   TimeSpendReport,
   trackerId
 } from '@hcengineering/tracker'
-import { KeyBinding, ViewOptionModel, ViewOptionsModel } from '@hcengineering/view'
+import { KeyBinding, ViewOptionsModel } from '@hcengineering/view'
 import tracker from './plugin'
 
 import { generateClassNotificationTypes } from '@hcengineering/model-notification'
@@ -449,19 +449,11 @@ export function createModel (builder: Builder): void {
     TTypeReportedTime
   )
 
-  const showColors: ViewOptionModel = {
-    key: 'shouldShowColors',
-    type: 'toggle',
-    defaultValue: false,
-    actionTarget: 'display',
-    label: tracker.string.ShowColors
-  }
-
   const issuesOptions = (kanban: boolean): ViewOptionsModel => ({
     groupBy: ['status', 'assignee', 'priority', 'component', 'milestone'],
     orderBy: [
       ['status', SortingOrder.Ascending],
-      ['priority', SortingOrder.Ascending],
+      ['priority', SortingOrder.Descending],
       ['modifiedOn', SortingOrder.Descending],
       ['createdOn', SortingOrder.Descending],
       ['dueDate', SortingOrder.Ascending],
@@ -484,7 +476,7 @@ export function createModel (builder: Builder): void {
         action: view.function.ShowEmptyGroups,
         label: view.string.ShowEmptyGroups
       },
-      ...(!kanban ? [showColors] : [])
+      ...(!kanban ? [showColorsViewOption] : [])
     ]
   })
 
@@ -601,7 +593,7 @@ export function createModel (builder: Builder): void {
       ['dueDate', SortingOrder.Ascending]
     ],
     groupDepth: 1,
-    other: [showColors]
+    other: [showColorsViewOption]
   }
 
   builder.createDoc(
@@ -680,7 +672,7 @@ export function createModel (builder: Builder): void {
           ['dueDate', SortingOrder.Ascending],
           ['rank', SortingOrder.Ascending]
         ],
-        other: [showColors]
+        other: [showColorsViewOption]
       },
       config: [
         // { key: '', presenter: tracker.component.PriorityEditor, props: { kind: 'list', size: 'small' } },
@@ -1787,7 +1779,7 @@ export function createModel (builder: Builder): void {
       ['targetDate', SortingOrder.Descending],
       ['createdOn', SortingOrder.Descending]
     ],
-    other: [showColors]
+    other: [showColorsViewOption]
   }
 
   builder.createDoc(
@@ -1859,7 +1851,7 @@ export function createModel (builder: Builder): void {
       ['modifiedOn', SortingOrder.Descending],
       ['createdOn', SortingOrder.Descending]
     ],
-    other: [showColors]
+    other: [showColorsViewOption]
   }
 
   builder.createDoc(

models/view/src/index.ts

@@ -63,6 +63,7 @@ import type {
   ViewAction,
   ViewActionInput,
   ViewContext,
+  ViewOptionModel,
   ViewOptions,
   ViewOptionsModel,
   Viewlet,
@@ -362,6 +363,14 @@ export const actionTemplates = template({
   }
 })
 
+export const showColorsViewOption: ViewOptionModel = {
+  key: 'shouldShowColors',
+  type: 'toggle',
+  defaultValue: true,
+  actionTarget: 'display',
+  label: view.string.ShowColors
+}
+
 export function createModel (builder: Builder): void {
   builder.createModel(
     TLinkProvider,

packages/theme/styles/components.scss

@@ -818,7 +818,7 @@
 .list-container .button.list:hover,
 .list-container .datetime-button,
 .list-container .datetime-button:hover {
-  background-color: var(--theme-list-button-color) !important;
+  background-color: var(--theme-list-button-color);
   .icon, .btn-icon {
     margin-right: .5rem;
     color: var(--theme-halfcontent-color) !important;

packages/ui/src/components/calendar/DatePresenter.svelte

@@ -321,6 +321,7 @@
     &.transparent {
       padding: 0 0.625rem;
       border-radius: 0.25rem;
+      background-color: inherit;
 
       &:hover {
         background-color: var(--theme-button-hovered);

plugins/recruit-resources/src/components/VacancyPresenter.svelte

@@ -17,13 +17,22 @@
   import { getEmbeddedLabel } from '@hcengineering/platform'
 
   import { Vacancy } from '@hcengineering/recruit'
-  import { Icon, tooltip } from '@hcengineering/ui'
+  import { Icon, getPlatformAvatarColorForTextDef, themeStore, tooltip } from '@hcengineering/ui'
   import { DocNavLink } from '@hcengineering/view-resources'
+  import { createEventDispatcher, onMount } from 'svelte'
   import recruit from '../plugin'
 
   export let value: Vacancy
   export let inline: boolean = false
   export let disabled = false
+
+  const dispatch = createEventDispatcher()
+  $: accentColor = getPlatformAvatarColorForTextDef(value.name, $themeStore.dark)
+
+  $: dispatch('accent-color', accentColor)
+  onMount(() => {
+    dispatch('accent-color', accentColor)
+  })
 </script>
 
 {#if value}

plugins/tracker-assets/lang/en.json

@@ -283,8 +283,7 @@
 
     "NoStatusFound": "No matching status found",
     "CreateMissingStatus": "Create missing status",
-    "UnsetParent": "Parent issue will be unset",
-    "ShowColors": "Use colors"
+    "UnsetParent": "Parent issue will be unset"    
   },
   "status": {}
 }

plugins/tracker-assets/lang/ru.json

@@ -282,8 +282,7 @@
     "ProjectEmojiiCategory": "Эмодзи",
     "NoStatusFound": "Статус не найдет",
     "CreateMissingStatus": "Создать отсутствущий статус",
-    "UnsetParent": "Родительская задача будет убрана",
-    "ShowColors": "Использовать цвета"
+    "UnsetParent": "Родительская задача будет убрана"    
   },
   "status": {}
 }

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

@@ -300,6 +300,7 @@
                 {space}
                 size={'small'}
                 kind={'list-header'}
+                display={'kanban'}
                 colorInherit={!$themeStore.dark}
                 accent
                 on:accent-color={(ev) => setAccentColor(index, ev)}

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

@@ -15,13 +15,25 @@
 <script lang="ts">
   import { Asset, IntlString } from '@hcengineering/platform'
   import { IssuePriority } from '@hcengineering/tracker'
-  import { Icon, Label } from '@hcengineering/ui'
-  import { issuePriorities } from '../../utils'
+  import { Icon, Label, getPlatformColorDef, themeStore } from '@hcengineering/ui'
+  import { createEventDispatcher, onMount } from 'svelte'
+  import { IssuePriorityColor, issuePriorities } from '../../utils'
 
   export let value: IssuePriority | undefined
 
   let label: IntlString, icon: Asset
   $: if (value !== undefined) ({ label, icon } = issuePriorities[value])
+
+  const dispatch = createEventDispatcher()
+  $: accentColor = getPlatformColorDef(
+    IssuePriorityColor[value !== undefined ? value : IssuePriority.NoPriority],
+    $themeStore.dark
+  )
+
+  $: dispatch('accent-color', accentColor)
+  onMount(() => {
+    dispatch('accent-color', accentColor)
+  })
 </script>
 
 {#if value !== undefined}

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

@@ -14,8 +14,9 @@
 -->
 <script lang="ts">
   import { IssuePriority } from '@hcengineering/tracker'
-  import { Icon, Label } from '@hcengineering/ui'
-  import { issuePriorities } from '../../utils'
+  import { Icon, Label, getPlatformColorDef, themeStore } from '@hcengineering/ui'
+  import { createEventDispatcher, onMount } from 'svelte'
+  import { IssuePriorityColor, issuePriorities } from '../../utils'
 
   export let value: IssuePriority
   export let size: 'small' | 'medium' = 'small'
@@ -26,6 +27,14 @@
 
   $: icon = issuePriorities[value]?.icon
   $: label = issuePriorities[value]?.label
+
+  const dispatch = createEventDispatcher()
+  $: accentColor = getPlatformColorDef(IssuePriorityColor[value], $themeStore.dark)
+
+  $: dispatch('accent-color', accentColor)
+  onMount(() => {
+    dispatch('accent-color', accentColor)
+  })
 </script>
 
 <div class="flex-presenter cursor-default">

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

@@ -15,8 +15,9 @@
 <script lang="ts">
   import { WithLookup } from '@hcengineering/core'
   import { Milestone } from '@hcengineering/tracker'
-  import { Icon } from '@hcengineering/ui'
+  import { Icon, getPlatformAvatarColorDef, getPlatformAvatarColorForTextDef, themeStore } from '@hcengineering/ui'
   import { DocNavLink } from '@hcengineering/view-resources'
+  import { createEventDispatcher, onMount } from 'svelte'
   import tracker from '../../plugin'
 
   export let value: WithLookup<Milestone>
@@ -24,6 +25,17 @@
   export let disabled = false
   export let inline = false
   export let onClick: (() => void) | undefined = undefined
+
+  const dispatch = createEventDispatcher()
+  $: accentColor =
+    value?.label !== undefined
+      ? getPlatformAvatarColorForTextDef(value?.label, $themeStore.dark)
+      : getPlatformAvatarColorDef(0, $themeStore.dark)
+
+  $: dispatch('accent-color', accentColor)
+  onMount(() => {
+    dispatch('accent-color', accentColor)
+  })
 </script>
 
 <DocNavLink object={value} {disabled} {inline} {onClick}>

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

@@ -16,12 +16,21 @@
   import { Ref } from '@hcengineering/core'
   import { createQuery } from '@hcengineering/presentation'
   import { Milestone } from '@hcengineering/tracker'
-  import { ButtonKind, DatePresenter, deviceOptionsStore as deviceInfo } from '@hcengineering/ui'
+  import {
+    ButtonKind,
+    DatePresenter,
+    deviceOptionsStore as deviceInfo,
+    getPlatformAvatarColorDef,
+    getPlatformAvatarColorForTextDef,
+    themeStore
+  } from '@hcengineering/ui'
+  import { createEventDispatcher, onMount } from 'svelte'
   import tracker from '../../plugin'
   import MilestoneSelector from './MilestoneSelector.svelte'
 
   export let value: Ref<Milestone>
   export let kind: ButtonKind = 'link'
+  export let display: 'kanban' | 'list' | undefined = undefined
 
   const milestoneQuery = createQuery()
   let milestone: Milestone | undefined
@@ -30,6 +39,17 @@
   })
 
   $: twoRows = $deviceInfo.twoRows
+
+  const dispatch = createEventDispatcher()
+  $: accentColor =
+    milestone?.label !== undefined
+      ? getPlatformAvatarColorForTextDef(milestone?.label, $themeStore.dark)
+      : getPlatformAvatarColorDef(0, $themeStore.dark)
+
+  $: dispatch('accent-color', accentColor)
+  onMount(() => {
+    dispatch('accent-color', accentColor)
+  })
 </script>
 
 <div
@@ -41,7 +61,7 @@
     <MilestoneSelector {kind} isEditable={false} enlargedText {value} />
   </div>
 
-  {#if milestone && kind === 'list-header'}
+  {#if milestone && kind === 'list-header' && display !== 'kanban'}
     <div class="flex-row-center" class:minus-margin-space={kind === 'list-header'} class:text-sm={twoRows}>
       {#if milestone}
         <DatePresenter value={milestone.targetDate} kind={'transparent'} />

plugins/tracker-resources/src/plugin.ts

@@ -302,8 +302,7 @@ export default mergeIds(trackerId, tracker, {
 
     NoStatusFound: '' as IntlString,
     CreateMissingStatus: '' as IntlString,
-    UnsetParent: '' as IntlString,
-    ShowColors: '' as IntlString
+    UnsetParent: '' as IntlString
   },
   component: {
     NopeComponent: '' as AnyComponent,

plugins/tracker-resources/src/utils.ts

@@ -44,9 +44,9 @@ import {
   IssuesDateModificationPeriod,
   IssuesGrouping,
   IssuesOrdering,
-  Project,
   Milestone,
   MilestoneStatus,
+  Project,
   TimeReportDayType
 } from '@hcengineering/tracker'
 import {
@@ -55,12 +55,13 @@ import {
   areDatesEqual,
   getMillisecondsInMonth,
   isWeekend,
-  MILLISECONDS_IN_WEEK
+  MILLISECONDS_IN_WEEK,
+  PaletteColorIndexes
 } from '@hcengineering/ui'
 import { ViewletDescriptor } from '@hcengineering/view'
 import { CategoryQuery, groupBy, ListSelectionProvider, SelectDirection } from '@hcengineering/view-resources'
 import tracker from './plugin'
-import { defaultPriorities, defaultMilestoneStatuses } from './types'
+import { defaultMilestoneStatuses, defaultPriorities } from './types'
 
 export * from './types'
 
@@ -100,14 +101,6 @@ export const issuesOrderKeyMap: Record<IssuesOrdering, IssuesOrderByKeys> = {
   [IssuesOrdering.Manual]: 'rank'
 }
 
-export const issuesSortOrderMap: Record<IssuesOrderByKeys, SortingOrder> = {
-  status: SortingOrder.Ascending,
-  priority: SortingOrder.Ascending,
-  modifiedOn: SortingOrder.Descending,
-  dueDate: SortingOrder.Ascending,
-  rank: SortingOrder.Ascending
-}
-
 export const issuesGroupEditorMap: Record<'status' | 'priority' | 'component' | 'milestone', AnyComponent | undefined> =
   {
     status: tracker.component.StatusEditor,
@@ -326,7 +319,7 @@ export async function issuePrioritySort (value: IssuePriority[]): Promise<IssueP
     const i1 = defaultPriorities.indexOf(a)
     const i2 = defaultPriorities.indexOf(b)
 
-    return i1 - i2
+    return i2 - i1
   })
   return value
 }
@@ -650,3 +643,14 @@ export function issueToAttachedData (issue: Issue): AttachedData<Issue> {
   const { _id, _class, space, ...data } = issue
   return { ...data }
 }
+
+/**
+ * @public
+ */
+export const IssuePriorityColor = {
+  [IssuePriority.NoPriority]: PaletteColorIndexes.Blueberry,
+  [IssuePriority.Urgent]: PaletteColorIndexes.Orange,
+  [IssuePriority.High]: PaletteColorIndexes.Sunshine,
+  [IssuePriority.Medium]: PaletteColorIndexes.Ocean,
+  [IssuePriority.Low]: PaletteColorIndexes.Cloud
+}

plugins/view-assets/lang/en.json

@@ -96,6 +96,7 @@
     "Hide": "Hide",
     "SaveAs": "Save as",
     "And": "and",
-    "Between": "is between"
+    "Between": "is between",
+    "ShowColors": "Use colors"
   }
 }

plugins/view-assets/lang/ru.json

@@ -92,6 +92,7 @@
     "Hide": "Спрятать",
     "SaveAs": "Сохранить как",
     "And": "и",
-    "Between": "между"
+    "Between": "между",
+    "ShowColors": "Использовать цвета"
   }
 }

plugins/view-resources/src/components/ObjectPresenter.svelte

@@ -59,5 +59,13 @@
 </script>
 
 {#if presenter}
-  <svelte:component this={presenter.presenter} value={doc} {...props} {inline} {shouldShowAvatar} {noUnderline} />
+  <svelte:component
+    this={presenter.presenter}
+    value={doc}
+    {...props}
+    {inline}
+    {shouldShowAvatar}
+    {noUnderline}
+    on:accent-color
+  />
 {/if}

plugins/view-resources/src/components/SpaceRefPresenter.svelte

@@ -19,4 +19,4 @@
   export let value: Ref<Space>
 </script>
 
-<ObjectPresenter objectId={value} _class={core.class.Space} />
+<ObjectPresenter objectId={value} _class={core.class.Space} on:accent-color />

plugins/view-resources/src/components/list/List.svelte

@@ -96,8 +96,10 @@
   }
 
   export function select (offset: 2 | -2 | 1 | -1 | 0, of?: Doc): void {
+    if (of !== undefined || offset !== 0) {
       listCategories?.select(offset, of)
     }
+  }
 
   let dragItem: {
     doc?: Doc

plugins/view-resources/src/components/list/ListCategory.svelte

@@ -380,6 +380,14 @@
       }}
       on:collapse={() => {
         collapsed = !collapsed
+        if (collapsed) {
+          if ($focusStore.focus !== undefined) {
+            const fid = $focusStore.focus._id
+            if (items.some((it) => it._id === fid)) {
+              $focusStore = { provider: $focusStore.provider }
+            }
+          }
+        }
         localStorage.setItem(categoryCollapseKey, collapsed ? 'true' : 'false')
       }}
     />

plugins/view-resources/src/components/list/ListHeader.svelte

@@ -62,7 +62,7 @@
   let accentColor: ColorDefinition | undefined = undefined
 
   $: headerBGColor =
-    level === 0 && (viewOptions as any).shouldShowColors
+    level === 0 && (viewOptions as any).shouldShowColors !== false
       ? accentColor?.background ?? defaultBackground($themeStore.dark)
       : defaultBackground($themeStore.dark)
 

plugins/view-resources/src/plugin.ts

@@ -87,7 +87,8 @@ export default mergeIds(viewId, view, {
     BetweenDates: '' as IntlString,
     SaveAs: '' as IntlString,
     And: '' as IntlString,
-    Between: '' as IntlString
+    Between: '' as IntlString,
+    ShowColors: '' as IntlString
   },
   function: {
     StatusSort: '' as SortFunc