mirror of
https://github.com/hcengineering/platform.git
synced 2024-11-23 14:06:00 +03:00
Add KanbanCard cover (#1688)
Signed-off-by: Dvinyanin Alexandr <dvinyanin.alexandr@gmail.com>
This commit is contained in:
Alex
GitHub
parent
de9de716b5
commit
8e1667b9fd
@ -654,6 +654,7 @@ a.no-line {
|
||||
.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-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-primary-button { border-color: var(--primary-button-border); }
|
||||
.border-button-enabled { border: 1px solid var(--theme-button-border-enabled); }
|
||||
|
||||
@ -21,7 +21,7 @@
|
||||
import type { Ref, WithLookup } from '@anticrm/core'
|
||||
import notification from '@anticrm/notification'
|
||||
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 CardInlineActions from './editor/CardInlineActions.svelte'
|
||||
import CardLabels from './editor/CardLabels.svelte'
|
||||
@ -67,6 +67,7 @@
|
||||
function updateDate (e: CustomEvent<CardDate>) {
|
||||
client.update(object, { date: e.detail })
|
||||
}
|
||||
$: coverBackground = object.cover?.color ? `background-color: ${numberToHexColor(object.cover.color)}` : ''
|
||||
</script>
|
||||
|
||||
<AttachmentDroppable
|
||||
@ -77,72 +78,131 @@
|
||||
space={object.space}
|
||||
canDrop={canDropAttachment}
|
||||
>
|
||||
<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}
|
||||
<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}
|
||||
<div class="fs-title text-lg">
|
||||
<EditBox
|
||||
bind:value={object.title}
|
||||
maxWidth="39rem"
|
||||
focus
|
||||
on:change={() => updateCard(client, object, 'title', object?.title)}
|
||||
/>
|
||||
{#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}
|
||||
<div style:pointer-events="none" class="abs-full-content h-full w-full flex-center fs-title">
|
||||
<Label label={board.string.DropFileToUpload} />
|
||||
</div>
|
||||
{:else}
|
||||
<div class="flex-row-center w-full">
|
||||
<div class="fs-title cursor-pointer">{object.title}</div>
|
||||
<div class="ml-2">
|
||||
<Component is={notification.component.NotificationPresenter} props={{ value: object }} />
|
||||
<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}
|
||||
<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}
|
||||
>
|
||||
<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}
|
||||
<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 cursor-pointer">{object.title}</div>
|
||||
<div class="ml-2">
|
||||
<Component is={notification.component.NotificationPresenter} props={{ value: object }} />
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="flex-between mb-1" style:pointer-events={dragoverAttachment ? 'none' : 'all'}>
|
||||
<div class="float-left-box">
|
||||
{#if object.date && hasDate(object)}
|
||||
<div class="float-left ml-1">
|
||||
<DatePresenter value={object.date} size="x-small" on:update={updateDate} />
|
||||
</div>
|
||||
{/if}
|
||||
{#if (object.attachments ?? 0) > 0}
|
||||
<div class="float-left">
|
||||
<AttachmentsPresenter value={object} size="small" />
|
||||
</div>
|
||||
{/if}
|
||||
{#if (object.comments ?? 0) > 0}
|
||||
<div class="float-left">
|
||||
<CommentsPresenter value={object} />
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{#if (object.members?.length ?? 0) > 0}
|
||||
<div class="flex justify-end mt-1 mb-2" style:pointer-events={dragoverAttachment ? 'none' : 'all'}>
|
||||
<UserBoxList
|
||||
_class={contact.class.Employee}
|
||||
items={object.members}
|
||||
label={board.string.Members}
|
||||
on:update={updateMembers}
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="flex-between mb-1" style:pointer-events={dragoverAttachment ? 'none' : 'all'}>
|
||||
<div class="float-left-box">
|
||||
{#if object.date && hasDate(object)}
|
||||
<div class="float-left ml-1">
|
||||
<DatePresenter value={object.date} size="x-small" on:update={updateDate} />
|
||||
</div>
|
||||
{/if}
|
||||
{#if (object.attachments ?? 0) > 0}
|
||||
<div class="float-left">
|
||||
<AttachmentsPresenter value={object} size="small" />
|
||||
</div>
|
||||
{/if}
|
||||
{#if (object.comments ?? 0) > 0}
|
||||
<div class="float-left">
|
||||
<CommentsPresenter value={object} />
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{#if (object.members?.length ?? 0) > 0}
|
||||
<div class="flex justify-end mt-1 mb-2" style:pointer-events={dragoverAttachment ? 'none' : 'all'}>
|
||||
<UserBoxList
|
||||
_class={contact.class.Employee}
|
||||
items={object.members}
|
||||
label={board.string.Members}
|
||||
on:update={updateMembers}
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</AttachmentDroppable>
|
||||
|
||||
@ -22,7 +22,6 @@
|
||||
|
||||
import plugin from '../../plugin'
|
||||
import { cardActionSorter, getCardActions } from '../../utils/CardActionUtils'
|
||||
import { hasCover } from '../../utils/CardUtils'
|
||||
|
||||
export let value: Card
|
||||
const client = getClient()
|
||||
@ -44,7 +43,7 @@
|
||||
if (supported) {
|
||||
if (action.type === board.cardActionType.Suggested) {
|
||||
suggestedActions.push(action)
|
||||
} else if (action.type === board.cardActionType.Cover && !hasCover(value)) {
|
||||
} else if (action.type === board.cardActionType.Cover) {
|
||||
addToCardActions.push(action)
|
||||
} else if (action.type === board.cardActionType.AddToCard) {
|
||||
addToCardActions.push(action)
|
||||
|
||||
Loading…
Reference in New Issue
Block a user