mirror of
https://github.com/hcengineering/platform.git
synced 2025-06-05 15:24:22 +00:00
Add KanbanCard cover (#1688)
Signed-off-by: Dvinyanin Alexandr <dvinyanin.alexandr@gmail.com>
This commit is contained in:
parent
de9de716b5
commit
8e1667b9fd
@ -654,6 +654,7 @@ a.no-line {
|
|||||||
.border-radius-1 { border-radius: 0.25rem; }
|
.border-radius-1 { border-radius: 0.25rem; }
|
||||||
.border-radius-left-1 { border-top-left-radius: 0.25rem; border-bottom-left-radius: 0.25rem; }
|
.border-radius-left-1 { border-top-left-radius: 0.25rem; border-bottom-left-radius: 0.25rem; }
|
||||||
.border-radius-right-1 { border-top-right-radius: 0.25rem; border-bottom-right-radius: 0.25rem; }
|
.border-radius-right-1 { border-top-right-radius: 0.25rem; border-bottom-right-radius: 0.25rem; }
|
||||||
|
.border-radius-top-1 { border-top-right-radius: 0.25rem; border-top-left-radius: 0.25rem; }
|
||||||
.border-bg-accent {border: 1px solid var(--theme-bg-accent-color);}
|
.border-bg-accent {border: 1px solid var(--theme-bg-accent-color);}
|
||||||
.border-primary-button { border-color: var(--primary-button-border); }
|
.border-primary-button { border-color: var(--primary-button-border); }
|
||||||
.border-button-enabled { border: 1px solid var(--theme-button-border-enabled); }
|
.border-button-enabled { border: 1px solid var(--theme-button-border-enabled); }
|
||||||
|
@ -21,7 +21,7 @@
|
|||||||
import type { Ref, WithLookup } from '@anticrm/core'
|
import type { Ref, WithLookup } from '@anticrm/core'
|
||||||
import notification from '@anticrm/notification'
|
import notification from '@anticrm/notification'
|
||||||
import { getClient, UserBoxList } from '@anticrm/presentation'
|
import { getClient, UserBoxList } from '@anticrm/presentation'
|
||||||
import { Button, Component, EditBox, IconEdit, Label, showPopup } from '@anticrm/ui'
|
import { Button, Component, EditBox, IconEdit, Label, numberToHexColor, showPopup } from '@anticrm/ui'
|
||||||
import board from '../plugin'
|
import board from '../plugin'
|
||||||
import CardInlineActions from './editor/CardInlineActions.svelte'
|
import CardInlineActions from './editor/CardInlineActions.svelte'
|
||||||
import CardLabels from './editor/CardLabels.svelte'
|
import CardLabels from './editor/CardLabels.svelte'
|
||||||
@ -67,6 +67,7 @@
|
|||||||
function updateDate (e: CustomEvent<CardDate>) {
|
function updateDate (e: CustomEvent<CardDate>) {
|
||||||
client.update(object, { date: e.detail })
|
client.update(object, { date: e.detail })
|
||||||
}
|
}
|
||||||
|
$: coverBackground = object.cover?.color ? `background-color: ${numberToHexColor(object.cover.color)}` : ''
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<AttachmentDroppable
|
<AttachmentDroppable
|
||||||
@ -77,7 +78,8 @@
|
|||||||
space={object.space}
|
space={object.space}
|
||||||
canDrop={canDropAttachment}
|
canDrop={canDropAttachment}
|
||||||
>
|
>
|
||||||
<div class="relative flex-col pt-2 pb-1 pr-2 pl-2" bind:this={ref}>
|
{#if object.cover?.size === 'large'}
|
||||||
|
<div class="relative flex-col pt-2 pb-1 pr-2 pl-2 border-radius-1" style={coverBackground} bind:this={ref}>
|
||||||
{#if dragoverAttachment}
|
{#if dragoverAttachment}
|
||||||
<div style:pointer-events="none" class="abs-full-content h-full w-full flex-center fs-title">
|
<div style:pointer-events="none" class="abs-full-content h-full w-full flex-center fs-title">
|
||||||
<Label label={board.string.DropFileToUpload} />
|
<Label label={board.string.DropFileToUpload} />
|
||||||
@ -96,7 +98,64 @@
|
|||||||
<Button icon={IconEdit} kind="transparent" on:click={enterEditMode} />
|
<Button icon={IconEdit} kind="transparent" on:click={enterEditMode} />
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
<div class="flex-between pb-2 ml-1" style:pointer-events={dragoverAttachment ? 'none' : 'all'} on:click={showCard}>
|
<div
|
||||||
|
class="flex-between pb-2 ml-1"
|
||||||
|
style:pointer-events={dragoverAttachment ? 'none' : 'all'}
|
||||||
|
on:click={showCard}
|
||||||
|
>
|
||||||
|
<div class="mt-6 mb-2">
|
||||||
|
{#if isEditMode}
|
||||||
|
<div class="fs-title text-lg">
|
||||||
|
<EditBox
|
||||||
|
bind:value={object.title}
|
||||||
|
maxWidth="39rem"
|
||||||
|
focus
|
||||||
|
on:change={() => updateCard(client, object, 'title', object?.title)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
{:else}
|
||||||
|
<div class="flex-row-center w-full">
|
||||||
|
<div class="fs-title text-lg cursor-pointer">{object.title}</div>
|
||||||
|
<div class="ml-2">
|
||||||
|
<Component is={notification.component.NotificationPresenter} props={{ value: object }} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{:else}
|
||||||
|
{#if object.cover}
|
||||||
|
<div class="relative h-9 border-radius-top-1" style={coverBackground}>
|
||||||
|
<div class="absolute mr-1 mt-1" style:top="0" style:right="0">
|
||||||
|
<Button icon={IconEdit} kind="transparent" on:click={enterEditMode} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
<div class="relative flex-col pt-2 pb-1 pr-2 pl-2" bind:this={ref}>
|
||||||
|
{#if dragoverAttachment}
|
||||||
|
<div style:pointer-events="none" class="abs-full-content h-full w-full flex-center fs-title">
|
||||||
|
<Label label={board.string.DropFileToUpload} />
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
style:opacity="0.3"
|
||||||
|
style:pointer-events="none"
|
||||||
|
class="abs-full-content background-theme-content-accent h-full w-full flex-center fs-title"
|
||||||
|
/>
|
||||||
|
{/if}
|
||||||
|
<div class="ml-1">
|
||||||
|
<CardLabels bind:value={object} isInline={true} />
|
||||||
|
</div>
|
||||||
|
{#if !isEditMode && !object.cover}
|
||||||
|
<div class="absolute mr-1 mt-1" style:top="0" style:right="0">
|
||||||
|
<Button icon={IconEdit} kind="transparent" on:click={enterEditMode} />
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
<div
|
||||||
|
class="flex-between pb-2 ml-1"
|
||||||
|
style:pointer-events={dragoverAttachment ? 'none' : 'all'}
|
||||||
|
on:click={showCard}
|
||||||
|
>
|
||||||
{#if isEditMode}
|
{#if isEditMode}
|
||||||
<div class="fs-title text-lg">
|
<div class="fs-title text-lg">
|
||||||
<EditBox
|
<EditBox
|
||||||
@ -145,4 +204,5 @@
|
|||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
|
{/if}
|
||||||
</AttachmentDroppable>
|
</AttachmentDroppable>
|
||||||
|
@ -22,7 +22,6 @@
|
|||||||
|
|
||||||
import plugin from '../../plugin'
|
import plugin from '../../plugin'
|
||||||
import { cardActionSorter, getCardActions } from '../../utils/CardActionUtils'
|
import { cardActionSorter, getCardActions } from '../../utils/CardActionUtils'
|
||||||
import { hasCover } from '../../utils/CardUtils'
|
|
||||||
|
|
||||||
export let value: Card
|
export let value: Card
|
||||||
const client = getClient()
|
const client = getClient()
|
||||||
@ -44,7 +43,7 @@
|
|||||||
if (supported) {
|
if (supported) {
|
||||||
if (action.type === board.cardActionType.Suggested) {
|
if (action.type === board.cardActionType.Suggested) {
|
||||||
suggestedActions.push(action)
|
suggestedActions.push(action)
|
||||||
} else if (action.type === board.cardActionType.Cover && !hasCover(value)) {
|
} else if (action.type === board.cardActionType.Cover) {
|
||||||
addToCardActions.push(action)
|
addToCardActions.push(action)
|
||||||
} else if (action.type === board.cardActionType.AddToCard) {
|
} else if (action.type === board.cardActionType.AddToCard) {
|
||||||
addToCardActions.push(action)
|
addToCardActions.push(action)
|
||||||
|
Loading…
Reference in New Issue
Block a user