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

Signed-off-by: Ruslan Bayandinov <wazsone@ya.ru>
This commit is contained in:
Ruslan Bayandinov 2023-06-08 17:30:22 +07:00 committed by GitHub
parent 19ed49a32f
commit ba65d1d2ea
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 64 additions and 19 deletions
packages/presentation/src/components
plugins
tracker-resources/src/components
tracker/src
view/src

View File

@ -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

View File

@ -13,9 +13,10 @@
// limitations under the License.
-->
<script lang="ts">
import type { IntlString } from '@hcengineering/platform'
import { getClient } from '../utils'
import { createEventDispatcher, ComponentType } from 'svelte'
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 { createEventDispatcher } from 'svelte'
import SpacesPopup from './SpacesPopup.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}

View File

@ -13,12 +13,13 @@
// limitations under the License.
-->
<script lang="ts">
import type { Class, DocumentQuery, FindOptions, Ref, Space } from '@hcengineering/core'
import type { IntlString } from '@hcengineering/platform'
import { Class, DocumentQuery, FindOptions, Ref, Space } from '@hcengineering/core'
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

View File

@ -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}

View File

@ -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

View File

@ -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

View File

@ -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}

View File

@ -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>

View File

@ -31,12 +31,10 @@ import {
Type,
WithLookup
} from '@hcengineering/core'
import type { Asset, IntlString, Plugin, Resource } from '@hcengineering/platform'
import { plugin } from '@hcengineering/platform'
import type { TagCategory, TagElement } from '@hcengineering/tags'
import { TagReference } from '@hcengineering/tags'
import { Asset, IntlString, Plugin, Resource, plugin } from '@hcengineering/platform'
import { TagCategory, TagElement, 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
}

View File

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