Add KanbanCard cover (#1688)

Signed-off-by: Dvinyanin Alexandr <dvinyanin.alexandr@gmail.com>

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); }

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<CardDate>) {
     client.update(object, { date: e.detail })
   }
+  $: coverBackground = object.cover?.color ? `background-color: ${numberToHexColor(object.cover.color)}` : ''
 </script>
 
 <AttachmentDroppable
@@ -77,7 +78,8 @@
   space={object.space}
   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}
         <div style:pointer-events="none" class="abs-full-content h-full w-full flex-center fs-title">
           <Label label={board.string.DropFileToUpload} />
@@ -96,7 +98,64 @@
           <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="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
@@ -145,4 +204,5 @@
         </div>
       {/if}
     </div>
+  {/if}
 </AttachmentDroppable>

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)