From 8e1667b9fdb7580b4a314d7724abc9ef6cafebb0 Mon Sep 17 00:00:00 2001 From: Alex <41288429+Dvinyanin@users.noreply.github.com> Date: Sat, 7 May 2022 00:49:28 +0700 Subject: [PATCH] Add KanbanCard cover (#1688) Signed-off-by: Dvinyanin Alexandr --- packages/theme/styles/_layouts.scss | 1 + .../src/components/KanbanCard.svelte | 188 ++++++++++++------ .../src/components/editor/CardActions.svelte | 3 +- 3 files changed, 126 insertions(+), 66 deletions(-) diff --git a/packages/theme/styles/_layouts.scss b/packages/theme/styles/_layouts.scss index 14eaef9d7d..9e8b21f01b 100644 --- a/packages/theme/styles/_layouts.scss +++ b/packages/theme/styles/_layouts.scss @@ -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); } diff --git a/plugins/board-resources/src/components/KanbanCard.svelte b/plugins/board-resources/src/components/KanbanCard.svelte index f53e07e971..8c19ca8fdf 100644 --- a/plugins/board-resources/src/components/KanbanCard.svelte +++ b/plugins/board-resources/src/components/KanbanCard.svelte @@ -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) { client.update(object, { date: e.detail }) } + $: coverBackground = object.cover?.color ? `background-color: ${numberToHexColor(object.cover.color)}` : '' -
- {#if dragoverAttachment} -
-
-
- {/if} -
- -
- {#if !isEditMode} -
-
- {/if} -
- {#if isEditMode} -
- updateCard(client, object, 'title', object?.title)} - /> + {#if object.cover?.size === 'large'} +
+ {#if dragoverAttachment} +
+
- {:else} -
-
{object.title}
-
- +
+ {/if} +
+ +
+ {#if !isEditMode} +
+
+ {/if} +
+
+ {#if isEditMode} +
+ updateCard(client, object, 'title', object?.title)} + /> +
+ {:else} +
+
{object.title}
+
+ +
+
+ {/if} +
+
+
+ {:else} + {#if object.cover} +
+
+
+
+ {/if} +
+ {#if dragoverAttachment} +
+
+
+ {/if} +
+ +
+ {#if !isEditMode && !object.cover} +
+
+ {/if} +
+ {#if isEditMode} +
+ updateCard(client, object, 'title', object?.title)} + />
+ {:else} +
+
{object.title}
+
+ +
+
+ {/if} +
+
+
+ {#if object.date && hasDate(object)} +
+ +
+ {/if} + {#if (object.attachments ?? 0) > 0} +
+ +
+ {/if} + {#if (object.comments ?? 0) > 0} +
+ +
+ {/if} +
+
+ {#if (object.members?.length ?? 0) > 0} +
+
{/if}
-
-
- {#if object.date && hasDate(object)} -
- -
- {/if} - {#if (object.attachments ?? 0) > 0} -
- -
- {/if} - {#if (object.comments ?? 0) > 0} -
- -
- {/if} -
-
- {#if (object.members?.length ?? 0) > 0} -
- -
- {/if} -
+ {/if} diff --git a/plugins/board-resources/src/components/editor/CardActions.svelte b/plugins/board-resources/src/components/editor/CardActions.svelte index 99636d90fc..446f4bb7ae 100644 --- a/plugins/board-resources/src/components/editor/CardActions.svelte +++ b/plugins/board-resources/src/components/editor/CardActions.svelte @@ -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)