mirror of
https://github.com/hcengineering/platform.git
synced 2024-11-22 21:50:34 +03:00
Done statuses, replaced circles with a tick and a cross (#2227)
Signed-off-by: Alexander Platov <sas_lord@mail.ru>
This commit is contained in:
Alexander Platov
GitHub
parent
ef1673128e
commit
0a3f5c26d3
@ -78,7 +78,8 @@
|
||||
--caret-color: #6e5ed2;
|
||||
--warning-color: #f2994a;
|
||||
--error-color: #eb5757;
|
||||
--done-color: #34DB80;
|
||||
--lost-color: #eb5757;
|
||||
--won-color: #34DB80;
|
||||
|
||||
--divider-color: #303236;
|
||||
--menu-bg-select: #2d2f36;
|
||||
@ -229,7 +230,8 @@
|
||||
--caret-color: #6e5ed2;
|
||||
--warning-color: #f2994a; // Dark
|
||||
--error-color: #eb5757; // Dark
|
||||
--done-color: #34DB80; // Dark
|
||||
--lost-color: #eb5757; // Dark
|
||||
--won-color: #34DB80; // Dark
|
||||
|
||||
--divider-color: #e0e0e0;
|
||||
--menu-bg-select: #f0f3f9;
|
||||
|
||||
@ -62,7 +62,9 @@
|
||||
}}
|
||||
>
|
||||
{#if item.icon}
|
||||
<div class="icon"><Icon icon={item.icon} size={size === 'small' ? 'x-small' : 'small'} /></div>
|
||||
<div class="icon">
|
||||
<Icon icon={item.icon} size={size === 'small' ? 'x-small' : 'small'} fill={item.color ?? 'currentColor'} />
|
||||
</div>
|
||||
{:else if item.color}
|
||||
<div class="color" style:background-color={item.color} />
|
||||
{/if}
|
||||
|
||||
@ -22,6 +22,8 @@
|
||||
import { TableBrowser } from '@anticrm/view-resources'
|
||||
import task from '../plugin'
|
||||
import StatesBar from './state/StatesBar.svelte'
|
||||
import Won from './icons/Won.svelte'
|
||||
import Lost from './icons/Lost.svelte'
|
||||
|
||||
export let _class: Ref<Class<Task>>
|
||||
export let space: Ref<SpaceWithStates>
|
||||
@ -61,7 +63,8 @@
|
||||
return {
|
||||
id: s._id,
|
||||
label: s.title,
|
||||
color: s._class === task.class.WonState ? 'var(--done-color)' : 'var(--error-color)'
|
||||
icon: s._class === task.class.WonState ? Won : Lost,
|
||||
color: s._class === task.class.WonState ? 'var(--won-color)' : 'var(--lost-color)'
|
||||
}
|
||||
})
|
||||
itemsDS.unshift({ id: 'NoDoneState', labelIntl: task.string.NoDoneState })
|
||||
|
||||
@ -15,11 +15,18 @@
|
||||
-->
|
||||
<script lang="ts">
|
||||
export let size: 'small' | 'medium' | 'large'
|
||||
const fill: string = 'currentColor'
|
||||
export let style: 'normal' | 'circle' = 'normal'
|
||||
export let fill: string = 'var(--lost-color)'
|
||||
</script>
|
||||
|
||||
<svg class="svg-{size}" {fill} viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M8,1.5C4.4,1.5,1.5,4.4,1.5,8s2.9,6.5,6.5,6.5s6.5-2.9,6.5-6.5S11.6,1.5,8,1.5z M2.5,8c0-1.3,0.5-2.6,1.3-3.5l7.7,7.7 c-1,0.8-2.2,1.3-3.5,1.3C5,13.5,2.5,11,2.5,8z M12.2,11.5L4.5,3.8C5.4,3,6.7,2.5,8,2.5c3,0,5.5,2.5,5.5,5.5 C13.5,9.3,13,10.6,12.2,11.5z"
|
||||
/>
|
||||
<svg class="svg-{size}" {fill} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
{#if style === 'circle'}
|
||||
<path
|
||||
d="M15.7,8.3c-0.1-0.1-0.2-0.2-0.3-0.2C15.3,8,15.1,8,15,8s-0.3,0-0.4,0.1c-0.1,0.1-0.2,0.1-0.3,0.2L12,10.6L9.7,8.3C9.5,8.1,9.3,8,9,8S8.5,8.1,8.3,8.3C8.1,8.5,8,8.7,8,9c0,0.3,0.1,0.5,0.3,0.7l2.3,2.3l-2.3,2.3c-0.1,0.1-0.2,0.2-0.2,0.3C8,14.7,8,14.9,8,15s0,0.3,0.1,0.4c0.1,0.1,0.1,0.2,0.2,0.3c0.1,0.1,0.2,0.2,0.3,0.2C8.7,16,8.9,16,9,16c0.1,0,0.3,0,0.4-0.1c0.1-0.1,0.2-0.1,0.3-0.2l2.3-2.3l2.3,2.3c0.1,0.1,0.2,0.2,0.3,0.2C14.7,16,14.9,16,15,16s0.3,0,0.4-0.1c0.1-0.1,0.2-0.1,0.3-0.2c0.1-0.1,0.2-0.2,0.2-0.3C16,15.3,16,15.1,16,15s0-0.3-0.1-0.4c-0.1-0.1-0.1-0.2-0.2-0.3L13.4,12l2.3-2.3c0.1-0.1,0.2-0.2,0.2-0.3C16,9.3,16,9.1,16,9c0-0.1,0-0.3-0.1-0.4C15.9,8.5,15.8,8.4,15.7,8.3L15.7,8.3z M19.1,4.9c-0.9-1-2-1.7-3.2-2.2c-1.2-0.5-2.5-0.8-3.9-0.8c-1.3,0-2.6,0.2-3.9,0.7S5.7,3.9,4.8,4.8C3.9,5.7,3.1,6.9,2.6,8.1C2.1,9.3,1.9,10.6,1.9,12c0,1.3,0.3,2.6,0.8,3.9C3.2,17,4,18.1,4.9,19.1c0.9,1,2,1.7,3.2,2.2c1.2,0.5,2.5,0.8,3.9,0.8c1.3,0,2.6-0.2,3.9-0.7c1.2-0.5,2.3-1.2,3.3-2.2c0.9-0.9,1.7-2.1,2.2-3.3c0.5-1.2,0.8-2.5,0.7-3.9c0-1.3-0.3-2.6-0.8-3.9S20,5.9,19.1,4.9L19.1,4.9z M17.7,17.7c-1.3,1.3-3,2.1-4.9,2.3c-1.8,0.2-3.7-0.3-5.2-1.3c-1.5-1-2.7-2.6-3.2-4.3c-0.5-1.8-0.4-3.7,0.3-5.4c0.7-1.7,2-3.1,3.6-4c1.6-0.9,3.5-1.2,5.3-0.8c1.8,0.4,3.4,1.3,4.6,2.8S20,10.1,20,12c0,1.1-0.2,2.1-0.6,3.1C19,16,18.4,16.9,17.7,17.7L17.7,17.7z"
|
||||
/>
|
||||
{:else}
|
||||
<path
|
||||
d="M17.9,16.6c-0.1-0.1-0.1-0.2-0.2-0.3L13.4,12l4.3-4.3C17.9,7.5,18,7.3,18,7s-0.1-0.5-0.3-0.7C17.5,6.1,17.3,6,17,6s-0.5,0.1-0.7,0.3L12,10.6L7.7,6.3C7.5,6.1,7.3,6,7,6S6.5,6.1,6.3,6.3C6.1,6.5,6,6.7,6,7s0.1,0.5,0.3,0.7l4.3,4.3l-4.3,4.3c-0.1,0.1-0.2,0.2-0.2,0.3S6,16.9,6,17c0,0.1,0,0.3,0.1,0.4c0.1,0.1,0.1,0.2,0.2,0.3c0.1,0.1,0.2,0.2,0.3,0.2C6.7,18,6.9,18,7,18s0.3,0,0.4-0.1c0.1-0.1,0.2-0.1,0.3-0.2l4.3-4.3l4.3,4.3c0.1,0.1,0.2,0.2,0.3,0.2C16.7,18,16.9,18,17,18c0.1,0,0.3,0,0.4-0.1c0.1-0.1,0.2-0.1,0.3-0.2c0.1-0.1,0.2-0.2,0.2-0.3C18,17.3,18,17.1,18,17C18,16.9,18,16.7,17.9,16.6z"
|
||||
/>
|
||||
{/if}
|
||||
</svg>
|
||||
|
||||
32
plugins/task-resources/src/components/icons/Unknown.svelte
Normal file
32
plugins/task-resources/src/components/icons/Unknown.svelte
Normal file
@ -0,0 +1,32 @@
|
||||
<!--
|
||||
// Copyright © 2020, 2021 Anticrm Platform Contributors.
|
||||
// Copyright © 2021 Hardcore Engineering Inc.
|
||||
//
|
||||
// Licensed under the Eclipse Public License, Version 2.0 (the "License");
|
||||
// you may not use this file except in compliance with the License. You may
|
||||
// obtain a copy of the License at https://www.eclipse.org/legal/epl-2.0
|
||||
//
|
||||
// Unless required by applicable law or agreed to in writing, software
|
||||
// distributed under the License is distributed on an "AS IS" BASIS,
|
||||
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
//
|
||||
// See the License for the specific language governing permissions and
|
||||
// limitations under the License.
|
||||
-->
|
||||
<script lang="ts">
|
||||
export let size: 'small' | 'medium' | 'large'
|
||||
export let style: 'normal' | 'circle' = 'normal'
|
||||
export let fill: string = 'var(--dark-color)'
|
||||
</script>
|
||||
|
||||
<svg class="svg-{size}" {fill} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
{#if style === 'circle'}
|
||||
<path
|
||||
d="M12,2c-2,0-3.9,0.6-5.6,1.7C4.8,4.8,3.5,6.3,2.8,8.2C2,10,1.8,12,2.2,14s1.3,3.7,2.7,5.1c1.4,1.4,3.2,2.4,5.1,2.7c1.9,0.4,4,0.2,5.8-0.6c1.8-0.8,3.4-2,4.5-3.7C21.4,15.9,22,14,22,12c0-1.3-0.3-2.6-0.8-3.8C20.7,7,20,5.9,19.1,4.9c-0.9-0.9-2-1.7-3.2-2.2C14.6,2.3,13.3,2,12,2z M12,20c-1.6,0-3.1-0.5-4.4-1.3c-1.3-0.9-2.3-2.1-2.9-3.6S3.8,12,4.2,10.4c0.3-1.6,1.1-3,2.2-4.1s2.5-1.9,4.1-2.2C12,3.8,13.6,4,15.1,4.6c1.5,0.6,2.7,1.6,3.6,2.9C19.5,8.9,20,10.4,20,12c0,2.1-0.8,4.2-2.3,5.7C16.2,19.2,14.1,20,12,20z M16,11H8c-0.3,0-0.5,0.1-0.7,0.3C7.1,11.5,7,11.7,7,12s0.1,0.5,0.3,0.7C7.5,12.9,7.7,13,8,13h8c0.3,0,0.5-0.1,0.7-0.3S17,12.3,17,12s-0.1-0.5-0.3-0.7S16.3,11,16,11z"
|
||||
/>
|
||||
{:else}
|
||||
<path
|
||||
d="M16,11H8c-0.3,0-0.5,0.1-0.7,0.3S7,11.7,7,12s0.1,0.5,0.3,0.7S7.7,13,8,13h8c0.3,0,0.5-0.1,0.7-0.3S17,12.3,17,12s-0.1-0.5-0.3-0.7S16.3,11,16,11z"
|
||||
/>
|
||||
{/if}
|
||||
</svg>
|
||||
@ -15,11 +15,18 @@
|
||||
-->
|
||||
<script lang="ts">
|
||||
export let size: 'small' | 'medium' | 'large'
|
||||
const fill: string = 'currentColor'
|
||||
export let style: 'normal' | 'circle' = 'normal'
|
||||
export let fill: string = 'var(--won-color)'
|
||||
</script>
|
||||
|
||||
<svg class="svg-{size}" {fill} viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M4,13.2c-0.3,0-0.5-0.2-0.5-0.5V3.8c0-0.3,0-0.6,0.2-0.8s0.5-0.2,0.8-0.2h6.3c0.6,0,1.1,0,1.3,0.5c0.2,0.5-0.1,0.8-0.6,1.2 L9.4,6.7l2.1,2.1c0.5,0.5,0.8,0.8,0.6,1.2c-0.2,0.5-0.7,0.5-1.3,0.5H4.5v2.2C4.5,12.9,4.3,13.2,4,13.2z M4.5,9.5h6.3L8.6,7.3 C8.4,7.1,8.2,7,8.2,6.7c0-0.3,0.2-0.5,0.3-0.6l2.2-2.2H4.5V9.5z"
|
||||
/>
|
||||
<svg class="svg-{size}" {fill} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
{#if style === 'circle'}
|
||||
<path
|
||||
d="M14.7,8.8l-4.3,4.3l-1.7-1.7c-0.1-0.1-0.2-0.2-0.3-0.2c-0.1-0.1-0.3-0.1-0.4-0.1c-0.1,0-0.3,0-0.4,0.1c-0.1,0.1-0.2,0.1-0.3,0.2c-0.1,0.1-0.2,0.2-0.2,0.3C7,11.9,7,12,7,12.1c0,0.1,0,0.3,0.1,0.4c0.1,0.1,0.1,0.2,0.2,0.3l2.4,2.4c0.1,0.1,0.2,0.2,0.3,0.2c0.1,0,0.3,0.1,0.4,0.1c0.3,0,0.5-0.1,0.7-0.3l5-5c0.1-0.1,0.2-0.2,0.2-0.3c0.1-0.1,0.1-0.3,0.1-0.4s0-0.3-0.1-0.4c-0.1-0.1-0.1-0.2-0.2-0.3c-0.2-0.2-0.4-0.3-0.7-0.3S14.9,8.6,14.7,8.8z M12,2c-2,0-3.9,0.6-5.6,1.7C4.8,4.8,3.5,6.3,2.8,8.2C2,10,1.8,12,2.2,14s1.3,3.7,2.7,5.1c1.4,1.4,3.2,2.4,5.1,2.7c1.9,0.4,4,0.2,5.8-0.6c1.8-0.8,3.4-2,4.5-3.7C21.4,15.9,22,14,22,12c0-1.3-0.3-2.6-0.8-3.8C20.7,7,20,5.9,19.1,4.9c-0.9-0.9-2-1.7-3.2-2.2C14.6,2.3,13.3,2,12,2z M12,20c-1.6,0-3.1-0.5-4.4-1.3c-1.3-0.9-2.3-2.1-2.9-3.6S3.8,12,4.2,10.4c0.3-1.6,1.1-3,2.2-4.1s2.5-1.9,4.1-2.2C12,3.8,13.6,4,15.1,4.6c1.5,0.6,2.7,1.6,3.6,2.9C19.5,8.9,20,10.4,20,12c0,2.1-0.8,4.2-2.3,5.7C16.2,19.2,14.1,20,12,20z"
|
||||
/>
|
||||
{:else}
|
||||
<path
|
||||
d="M18.9,7.5c-0.1-0.1-0.1-0.2-0.2-0.3C18.6,7.1,18.5,7,18.4,7c-0.1-0.1-0.3-0.1-0.4-0.1c-0.1,0-0.3,0-0.4,0.1c-0.1,0.1-0.2,0.1-0.3,0.2l-7.5,7.5l-3.1-3.1c-0.1-0.1-0.2-0.2-0.3-0.2S6.1,11.2,6,11.2c-0.1,0-0.3,0-0.4,0.1c-0.1,0.1-0.2,0.1-0.3,0.2S5.1,11.8,5,11.9C5,12,5,12.1,5,12.3c0,0.1,0,0.3,0.1,0.4c0.1,0.1,0.1,0.2,0.2,0.3l3.8,3.8c0.1,0.1,0.2,0.2,0.3,0.2c0.1,0.1,0.3,0.1,0.4,0.1s0.3,0,0.4-0.1c0.1-0.1,0.2-0.1,0.3-0.2l8.2-8.2c0.1-0.1,0.2-0.2,0.2-0.3C19,8.2,19,8.1,19,7.9C19,7.8,19,7.7,18.9,7.5z"
|
||||
/>
|
||||
{/if}
|
||||
</svg>
|
||||
|
||||
@ -18,6 +18,8 @@
|
||||
import type { Kanban } from '@anticrm/task'
|
||||
import task, { DoneState, LostState, WonState } from '@anticrm/task'
|
||||
import { createEventDispatcher } from 'svelte'
|
||||
import Won from '../icons/Won.svelte'
|
||||
import Lost from '../icons/Lost.svelte'
|
||||
|
||||
export let kanban: Kanban
|
||||
let wonStates: WonState[] = []
|
||||
@ -58,7 +60,7 @@
|
||||
on:dragover|preventDefault={() => {}}
|
||||
on:drop={onDone(wonState)}
|
||||
>
|
||||
<div class="done-icon won mr-2" />
|
||||
<div class="mr-2"><Won size={'small'} /></div>
|
||||
{wonState.title}
|
||||
</div>
|
||||
{/each}
|
||||
@ -77,7 +79,7 @@
|
||||
on:dragover|preventDefault={() => {}}
|
||||
on:drop={onDone(lostState)}
|
||||
>
|
||||
<div class="done-icon lost mr-2" />
|
||||
<div class="mr-2"><Lost size={'small'} /></div>
|
||||
{lostState.title}
|
||||
</div>
|
||||
{/each}
|
||||
@ -111,17 +113,4 @@
|
||||
border-color: var(--theme-dialog-divider);
|
||||
}
|
||||
}
|
||||
|
||||
.done-icon {
|
||||
width: 0.5rem;
|
||||
height: 0.5rem;
|
||||
border-radius: 50%;
|
||||
|
||||
&.won {
|
||||
background-color: #27b166;
|
||||
}
|
||||
&.lost {
|
||||
background-color: #f96e50;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -22,6 +22,7 @@
|
||||
import DoneStatePresenter from './DoneStatePresenter.svelte'
|
||||
import DoneStatesPopup from './DoneStatesPopup.svelte'
|
||||
import task from '../../plugin'
|
||||
import Unknown from '../icons/Unknown.svelte'
|
||||
|
||||
export let value: Ref<DoneState> | null | undefined
|
||||
export let onChange: (value: any) => void
|
||||
@ -47,6 +48,7 @@
|
||||
)
|
||||
} else {
|
||||
query.unsubscribe()
|
||||
state = undefined
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -78,19 +80,9 @@
|
||||
<div class="pointer-events-none"><DoneStatePresenter value={state} showTitle /></div>
|
||||
{:else}
|
||||
<div class="flex-row-center pointer-events-none">
|
||||
<div class="color background-card-divider" />
|
||||
<div class="dark-color mr-2"><Unknown size={'small'} /></div>
|
||||
<span class="overflow-label"><Label label={task.string.NoDoneState} /></span>
|
||||
</div>
|
||||
{/if}
|
||||
</svelte:fragment>
|
||||
</Button>
|
||||
|
||||
<style lang="scss">
|
||||
.color {
|
||||
margin-right: 0.75rem;
|
||||
min-width: 0.5rem;
|
||||
width: 0.5rem;
|
||||
height: 0.5rem;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -17,6 +17,8 @@
|
||||
import type { DoneState } from '@anticrm/task'
|
||||
import task from '@anticrm/task'
|
||||
import { getPlatformColor } from '@anticrm/ui'
|
||||
import Won from '../icons/Won.svelte'
|
||||
import Lost from '../icons/Lost.svelte'
|
||||
|
||||
export let value: DoneState
|
||||
export let showTitle: boolean = false
|
||||
@ -26,20 +28,11 @@
|
||||
|
||||
{#if value}
|
||||
<div class="flex-center">
|
||||
<div class="state-container" class:state-container-title={showTitle} style="background-color: {color};" />
|
||||
<div class:mr-2={showTitle} style="color: {color};">
|
||||
<svelte:component this={value._class === task.class.WonState ? Won : Lost} size={'small'} />
|
||||
</div>
|
||||
{#if showTitle}
|
||||
{value.title}
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<style lang="scss">
|
||||
.state-container {
|
||||
width: 0.5rem;
|
||||
height: 0.5rem;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
.state-container-title {
|
||||
margin-right: 0.75rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -20,6 +20,9 @@
|
||||
import { getPlatformColor, Label } from '@anticrm/ui'
|
||||
import { createEventDispatcher } from 'svelte'
|
||||
import task from '../../plugin'
|
||||
import Won from '../icons/Won.svelte'
|
||||
import Lost from '../icons/Lost.svelte'
|
||||
import Unknown from '../icons/Unknown.svelte'
|
||||
|
||||
export let space: Ref<SpaceWithStates>
|
||||
let states: DoneState[] = []
|
||||
@ -53,7 +56,9 @@
|
||||
dispatch('close', state)
|
||||
}}
|
||||
>
|
||||
<div class="color" style="background-color: {getColor(state._class)}" />
|
||||
<div class="mr-2" style="color: {getColor(state._class)}">
|
||||
<svelte:component this={state._class === task.class.WonState ? Won : Lost} size={'small'} />
|
||||
</div>
|
||||
<span class="label">{state.title}</span>
|
||||
</button>
|
||||
{/each}
|
||||
@ -63,19 +68,9 @@
|
||||
dispatch('close', null)
|
||||
}}
|
||||
>
|
||||
<div class="color background-card-divider" />
|
||||
<Label label={task.string.NoDoneState} />
|
||||
<div class="dark-color mr-2"><Unknown size={'small'} /></div>
|
||||
<span class="overflow-label"><Label label={task.string.NoDoneState} /></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
.color {
|
||||
flex-shrink: 0;
|
||||
margin-right: 0.75rem;
|
||||
width: 0.5rem;
|
||||
height: 0.5rem;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -23,6 +23,8 @@
|
||||
import Circles from './Circles.svelte'
|
||||
import StatusesPopup from './StatusesPopup.svelte'
|
||||
import task from '../../plugin'
|
||||
import Won from '../icons/Won.svelte'
|
||||
import Lost from '../icons/Lost.svelte'
|
||||
|
||||
export let states: State[] = []
|
||||
export let wonStates: DoneState[] = []
|
||||
@ -152,7 +154,9 @@
|
||||
{#if state}
|
||||
<div class="states flex-row-center">
|
||||
<div class="bar" />
|
||||
<div class="color" style="background-color: #a5d179" />
|
||||
<div class="mr-2">
|
||||
<Won size={'medium'} />
|
||||
</div>
|
||||
<div class="flex-grow caption-color">
|
||||
<AttributeEditor maxWidth={'13rem'} _class={state._class} object={state} key="title" />
|
||||
</div>
|
||||
@ -192,7 +196,9 @@
|
||||
{#if state}
|
||||
<div class="states flex-row-center">
|
||||
<div class="bar" />
|
||||
<div class="color" style="background-color: #f28469" />
|
||||
<div class="mr-2">
|
||||
<Lost size={'medium'} />
|
||||
</div>
|
||||
<div class="flex-grow caption-color">
|
||||
<AttributeEditor maxWidth={'13rem'} _class={state._class} object={state} key="title" />
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user