Board: Fix cover presenter (#1872)

* Fix cover presenter

Signed-off-by: Anna No <anna.no@xored.com>

* Fix cover presenter

Signed-off-by: Anna No <anna.no@xored.com>

plugins/board-resources/src/components/EditCard.svelte

@@ -56,7 +56,17 @@
   let handleMove: (e: Event) => void
   let checklists: TodoItem[] = []
   const mixins: Mixin<Doc>[] = []
-  const ignoreKeys = ['isArchived', 'location', 'title', 'description', 'state', 'members', 'number', 'assignee']
+  const ignoreKeys = [
+    'isArchived',
+    'location',
+    'title',
+    'description',
+    'state',
+    'members',
+    'number',
+    'assignee',
+    'doneState'
+  ]
 
   function change (field: string, value: any) {
     if (object) {

plugins/board-resources/src/components/editor/CardActions.svelte

@@ -20,10 +20,8 @@
   import { Ref } from '@anticrm/core'
   import { getClient } from '@anticrm/presentation'
   import { CheckBox, Label } from '@anticrm/ui'
-  import { invokeAction } from '@anticrm/view-resources'
 
   import plugin from '../../plugin'
-  import { getCardActions } from '../../utils/CardActionUtils'
   import { updateCardMembers } from '../../utils/CardUtils'
   import UserBoxList from '../UserBoxList.svelte'
   import CardLabels from './CardLabels.svelte'
@@ -31,8 +29,6 @@
   export let value: Card
   const client = getClient()
 
-  let coverHandler: (e: Event) => void
-
   function updateMembers (e: CustomEvent<Ref<Employee>[]>) {
     updateCardMembers(value, client, e.detail)
   }
@@ -43,37 +39,40 @@
       client.update(value, { doneState: null })
     }
   }
-
-  getCardActions(client, {
-    _id: { $in: [board.action.Cover] }
-  }).then(async (result) => {
-    for (const action of result) {
-      if (action._id === board.action.Cover) {
-        coverHandler = (e: Event) => invokeAction(value, e, action.action, action.actionProps)
-      }
-    }
-  })
 </script>
 
 {#if value}
-  <div class="flex-col flex-gap-3 mt-4">
-    <div class="flex-row-stretch flex-gap-1 items-center">
-      <div class="label w-24">
-        <Label label={plugin.string.Completed} />
-      </div>
+  <div class="attributes-bar-container">
+    <div class="label fs-bold">
+      <Label label={plugin.string.Completed} />
+    </div>
+    <div class="ml-4">
       <CheckBox checked={value.doneState === board.state.Completed} on:value={updateState} />
     </div>
-    <div class="flex-row-stretch flex-gap-1 items-center">
-      <div class="label w-24">
-        <Label label={plugin.string.Members} />
-      </div>
+    <div class="label fs-bold">
+      <Label label={plugin.string.Members} />
+    </div>
+    <div class="ml-4">
       <UserBoxList value={value.members ?? []} on:update={updateMembers} />
     </div>
-    <div class="flex-row-stretch flex-gap-1 items-center">
-      <div class="label w-24">
-        <Label label={plugin.string.Labels} />
-      </div>
-      <CardLabels {value} />
+    <div class="label fs-bold">
+      <Label label={plugin.string.Labels} />
     </div>
+    <CardLabels {value} />
   </div>
 {/if}
+
+<style lang="scss">
+  .attributes-bar-container {
+    height: 100%;
+    display: grid;
+    grid-template-columns: 1fr 1.5fr;
+    grid-auto-flow: row;
+    justify-content: start;
+    align-items: center;
+    gap: 0.5rem;
+    padding-bottom: 0.5rem;
+    width: 100%;
+    height: min-content;
+  }
+</style>

plugins/board-resources/src/components/editor/CardCoverEditor.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { CardCover } from '@anticrm/board'
-  import { Button, eventToHTMLElement, IconAdd, showPopup } from '@anticrm/ui'
+  import { Button, eventToHTMLElement, Icon, IconAdd, showPopup } from '@anticrm/ui'
   import CardCoverPicker from '../popups/CardCoverPicker.svelte'
   import CardCoverPresenter from '../presenters/CardCoverPresenter.svelte'
 
@@ -12,8 +12,12 @@
   }
 </script>
 
-{#if value}
-  <CardCoverPresenter {value} on:click={coverHandler} />
-{:else}
-  <Button icon={IconAdd} kind="no-border" on:click={coverHandler} />
-{/if}
+<Button kind="link" on:click={coverHandler}>
+  <div slot="content">
+    {#if value}
+      <CardCoverPresenter {value} on:click={coverHandler} />
+    {:else}
+      <Icon icon={IconAdd} size="small" />
+    {/if}
+  </div>
+</Button>

plugins/board-resources/src/components/editor/CardLabels.svelte

@@ -15,7 +15,7 @@
 <script lang="ts">
   import type { Card, CardLabel } from '@anticrm/board'
   import { getClient } from '@anticrm/presentation'
-  import { Button, IconAdd } from '@anticrm/ui'
+  import { Button, Icon, IconAdd } from '@anticrm/ui'
   import { invokeAction } from '@anticrm/view-resources'
 
   import board from '../../plugin'
@@ -68,26 +68,29 @@
   }
 </script>
 
-{#if labels}
-  <div
-    class="flex-row-center flex-wrap flex-gap-1 mb-1"
-    class:labels-inline-container={isInline}
-    on:click={toggleCompact}
-    on:mouseover={hoverIn}
-    on:focus={hoverIn}
-    on:mouseout={hoverOut}
-    on:blur={hoverOut}
-  >
-    {#each labels as label}
-      <LabelPresenter
-        value={label}
-        size={isInline ? (isCompact ? 'tiny' : 'x-small') : undefined}
-        {isHovered}
-        on:click={labelsHandler}
-      />
-    {/each}
-    {#if !isInline}
-      <Button icon={IconAdd} kind="no-border" size="large" on:click={labelsHandler} />
-    {/if}
-  </div>
-{/if}
+<div
+  class="flex mb-1"
+  class:labels-inline-container={isInline}
+  on:click={toggleCompact}
+  on:mouseover={hoverIn}
+  on:focus={hoverIn}
+  on:mouseout={hoverOut}
+  on:blur={hoverOut}
+>
+  {#if labels && labels.length > 0}
+    <div class="flex-row-center flex-wrap flex-gap-1 ml-4">
+      {#each labels as label}
+        <LabelPresenter
+          value={label}
+          size={isInline ? (isCompact ? 'tiny' : 'x-small') : undefined}
+          {isHovered}
+          on:click={labelsHandler}
+        />
+      {/each}
+    </div>
+  {:else if !isInline}
+    <Button kind="link" size="large" on:click={labelsHandler}>
+      <Icon slot="content" icon={IconAdd} size="small" />
+    </Button>
+  {/if}
+</div>