wieerwill/platform
1
0
Fork 0
mirror of https://github.com/hcengineering/platform.git synced 2025-04-13 19:58:09 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Use ui colors in kanban (#819)

Browse Source 
Signed-off-by: Ilya Sumbatyants <ilya.sumb@gmail.com>
This commit is contained in:
Ilya Sumbatyants 2022-01-14 16:04:56 +07:00 committed by GitHub
parent 0e12210e8e
commit 50a9fc9980
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
14 changed files with 73 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
dev/generator/src/kanban.ts
View File

@ -5,11 +5,11 @@ import { findOrUpdate } from './utils'
export async function createUpdateSpaceKanban (ctx: MeasureContext, spaceId: Ref<SpaceWithStates>, client: TxOperations): Promise<Ref<State>[]> {
const rawStates = [
{ color: '#7C6FCD', name: 'Initial' },
{ color: '#6F7BC5', name: 'Intermidiate' },
{ color: '#77C07B', name: 'OverIntermidiate' },
{ color: '#A5D179', name: 'Done' },
{ color: '#F28469', name: 'Invalid' }
{ color: 9, name: 'Initial' },
{ color: 10, name: 'Intermidiate' },
{ color: 1, name: 'OverIntermidiate' },
{ color: 0, name: 'Done' },
{ color: 11, name: 'Invalid' }
]
const states: Array<Ref<State>> = []
const stateRanks = genRanks(rawStates.length)

4
dev/tool/src/importer.ts
View File

@ -372,8 +372,6 @@ async function createUpdateSpaceKanban (spaceId: Ref<Vacancy>, client: TxOperati
const states: Map<string, Ref<State>> = new Map()
const stateRanks = genRanks(stateNames.length)
const colors: string[] = ['#A5D179', '#77C07B', '#60B96E', '#45AEA3', '#46CBDE', '#47BDF6',
'#5AADF6', '#73A6CD', '#B977CB', '#7C6FCD', '#6F7BC5', '#F28469']
let pos = 0
for (const st of stateNames) {
const rank = stateRanks.next().value
@ -388,7 +386,7 @@ async function createUpdateSpaceKanban (spaceId: Ref<Vacancy>, client: TxOperati
sid,
{
title: st,
color: colors[(pos++) % colors.length],
color: pos++,
rank
}
)

12
models/lead/src/creation.ts
View File

@ -38,12 +38,12 @@ export async function createDeps (client: Client): Promise<void> {
const defaultKanban = {
states: [
{ color: '#7C6FCD', title: 'Incoming' },
{ color: '#6F7BC5', title: 'Negotation' },
{ color: '#77C07B', title: 'Offer preparing' },
{ color: '#A5D179', title: 'Make a decision' },
{ color: '#F28469', title: 'Contract conclusion' },
{ color: '#7C6FCD', title: 'Done' }
{ color: 9, title: 'Incoming' },
{ color: 10, title: 'Negotation' },
{ color: 1, title: 'Offer preparing' },
{ color: 0, title: 'Make a decision' },
{ color: 11, title: 'Contract conclusion' },
{ color: 9, title: 'Done' }
],
doneStates: [
{ isWon: true, title: 'Won' },

8
models/recruit/src/creation.ts
View File

@ -37,10 +37,10 @@ export async function createDeps (client: Client): Promise<void> {
const defaultKanban = {
states: [
{ color: '#7C6FCD', title: 'HR Interview' },
{ color: '#6F7BC5', title: 'Technical Interview' },
{ color: '#77C07B', title: 'Test task' },
{ color: '#A5D179', title: 'Offer' }
{ color: 9, title: 'HR Interview' },
{ color: 10, title: 'Technical Interview' },
{ color: 1, title: 'Test task' },
{ color: 0, title: 'Offer' }
],
doneStates: [
{ isWon: true, title: 'Won' },

10
models/task/src/creation.ts
View File

@ -37,11 +37,11 @@ export async function createDeps (client: Client): Promise<void> {
const defaultKanban = {
states: [
{ color: '#7C6FCD', title: 'Open' },
{ color: '#6F7BC5', title: 'In Progress' },
{ color: '#77C07B', title: 'Under review' },
{ color: '#A5D179', title: 'Done' },
{ color: '#F28469', title: 'Invalid' }
{ color: 9, title: 'Open' },
{ color: 10, title: 'In Progress' },
{ color: 1, title: 'Under review' },
{ color: 0, title: 'Done' },
{ color: 11, title: 'Invalid' }
],
doneStates: [
{ isWon: true, title: 'Won' },

4
models/task/src/index.ts
View File

@ -59,7 +59,7 @@ export class TState extends TDoc implements State {
@Prop(TypeString(), 'Title' as IntlString)
title!: string
color!: string
color!: number
declare rank: string
}
@ -173,7 +173,7 @@ export class TStateTemplate extends TAttachedDoc implements StateTemplate {
title!: string
@Prop(TypeString(), 'Color' as IntlString)
color!: string
color!: number
declare rank: string
}

36
models/task/src/migration.ts
View File

@ -13,7 +13,7 @@
// limitations under the License.
//
import { AttachedDoc, Class, Doc, Domain, DOMAIN_TX, Ref, TxCollectionCUD, TxCreateDoc, TxCUD, TxOperations } from '@anticrm/core'
import { AttachedDoc, Class, Doc, Domain, DOMAIN_TX, Ref, TxCollectionCUD, TxCreateDoc, TxCUD, TxOperations, TxResult } from '@anticrm/core'
import {
MigrateOperation,
MigrateUpdate,
@ -22,7 +22,7 @@ import {
MigrationUpgradeClient
} from '@anticrm/model'
import core from '@anticrm/model-core'
import { Issue } from '@anticrm/task'
import type { State, StateTemplate, Issue } from '@anticrm/task'
import { DOMAIN_TASK, DOMAIN_STATE, DOMAIN_KANBAN } from '.'
import task from './plugin'
@ -133,5 +133,37 @@ export const taskOperation: MigrateOperation = {
})
}
}
const tx = new TxOperations(client, core.account.System)
// To not depend on ui package let's use inlined ones one time
const colors = new Map([
'#A5D179',
'#77C07B',
'#60B96E',
'#45AEA3',
'#46CBDE',
'#47BDF6',
'#5AADF6',
'#73A6CD',
'#B977CB',
'#7C6FCD',
'#6F7BC5',
'#F28469'
].map((color, idx) => [color, idx]))
const getIndex = (color: string): number => colors.get(color) ?? 0
const updateStates = async (states: (State[] | StateTemplate[])): Promise<TxResult[]> =>
await Promise.all(
states
.filter((state) => typeof state.color === 'string')
.map(async (state) => await tx.update(state, { color: getIndex(state.color as never as string) }))
)
const states = await client.findAll(task.class.State, {})
await updateStates(states)
const templateStates = await client.findAll(task.class.StateTemplate, {})
await updateStates(templateStates)
}
}

8
packages/ui/src/colors.ts
View File

@ -1,5 +1,5 @@
const blackColors: string[] = [
const blackColors = Object.freeze([
'#A5D179',
'#77C07B',
'#60B96E',
@ -12,7 +12,7 @@ const blackColors: string[] = [
'#7C6FCD',
'#6F7BC5',
'#F28469'
]
])
/**
* @public
@ -31,8 +31,8 @@ export function getPlatformColorForText (text: string): string {
/**
* @public
*/
export function getPlatformColorCount (): number {
return blackColors.length
export function getPlatformColors (): readonly string[] {
return blackColors
}
function hashCode (str: string): number {

2
plugins/task-resources/src/components/kanban/KanbanEditor.svelte
View File

@ -74,7 +74,7 @@
await client.createDoc(task.class.State, kanban.space, {
title: 'New State',
color: '#7C6FCD',
color: 9,
rank: calcRank(lastOne, undefined)
})
}

2
plugins/task-resources/src/components/kanban/KanbanTemplateEditor.svelte
View File

@ -86,7 +86,7 @@
'statesC',
{
title: 'New State',
color: '#7C6FCD',
color: 9,
rank: calcRank(lastOne, undefined)
}
)

4
plugins/task-resources/src/components/kanban/KanbanView.svelte
View File

@ -21,7 +21,7 @@
import { createQuery, getClient } from '@anticrm/presentation'
import type { Kanban, SpaceWithStates, State } from '@anticrm/task'
import task, { DoneState, LostState, WonState, DocWithRank, calcRank } from '@anticrm/task'
import type { AnySvelteComponent } from '@anticrm/ui'
import { AnySvelteComponent, getPlatformColor } from '@anticrm/ui'
import { AnyComponent, Loading, ScrollBox } from '@anticrm/ui'
import KanbanPanel from './KanbanPanel.svelte'
// import KanbanPanelEmpty from './KanbanPanelEmpty.svelte'
@ -182,7 +182,7 @@
<ScrollBox>
<div class="kanban-content">
{#each states as state (state)}
<KanbanPanel label={state.title} color={state.color} counter={4}
<KanbanPanel label={state.title} color={getPlatformColor(state.color)} counter={4}
on:dragover={(event) => {
event.preventDefault()
if (dragCard.state !== state._id) {

8
plugins/task-resources/src/components/state/ColorsPopup.svelte
View File

@ -16,10 +16,10 @@
<script lang="ts">
import { createEventDispatcher } from 'svelte'
import { getPlatformColors } from '@anticrm/ui'
import PopupDialog from './PopupDialog.svelte'
export let colors: string[] = ['#A5D179', '#77C07B', '#60B96E', '#45AEA3', '#46CBDE', '#47BDF6',
'#5AADF6', '#73A6CD', '#B977CB', '#7C6FCD', '#6F7BC5', '#F28469']
export let colors: readonly string[] = getPlatformColors()
export let columns: number = 5
const dispatch = createEventDispatcher()
@ -27,8 +27,8 @@
<PopupDialog label={'CHOOSE A COLOR'}>
<div class="color-grid" style="grid-template-columns: repeat({columns}, 1.5rem)">
{#each colors as color}
<div class="color" style="background-color: {color}" on:click={() => { dispatch('close', color) }} />
{#each colors as color, i}
<div class="color" style="background-color: {color}" on:click={() => { dispatch('close', i) }} />
{/each}
</div>
</PopupDialog>

6
plugins/task-resources/src/components/state/StatesEditor.svelte
View File

@ -18,7 +18,7 @@
import { Ref } from '@anticrm/core'
import { AttributeEditor, getClient } from '@anticrm/presentation'
import type { DoneState, State } from '@anticrm/task'
import { CircleButton, IconAdd, IconMoreH, Label, showPopup } from '@anticrm/ui'
import { CircleButton, IconAdd, IconMoreH, Label, showPopup, getPlatformColor } from '@anticrm/ui'
import { createEventDispatcher } from 'svelte'
import ColorsPopup from './ColorsPopup.svelte'
import Circles from './Circles.svelte'
@ -60,7 +60,7 @@
})
}
const onColorChange = (state: State) => async (color: string | undefined): Promise<void> => {
const onColorChange = (state: State) => async (color: number | undefined): Promise<void> => {
if (color === undefined) {
return
}
@ -97,7 +97,7 @@
}}
>
<div class="bar"><Circles /></div>
<div class="color" style="background-color: {state.color}"
<div class="color" style="background-color: {getPlatformColor(state.color)}"
on:click={() => {
showPopup(ColorsPopup, {}, elements[i], onColorChange(state))
}}

2
plugins/task/src/index.ts
View File

@ -46,7 +46,7 @@ export interface DocWithRank extends Doc {
*/
export interface State extends DocWithRank {
title: string
color: string
color: number
}
/**