Board: Update popups style (#2043)

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

packages/presentation/src/components/Card.svelte

@@ -64,6 +64,9 @@
   {/if}
   <div class="antiCard-footer reverse">
     <div class="buttons-group text-sm flex-no-shrink">
+      {#if $$slots.buttons}
+        <slot name="buttons" />
+      {/if}
       {#if createMore !== undefined}
         <MiniToggle label={presentation.string.CreateMore} bind:on={createMore} />
       {/if}

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

@@ -29,7 +29,7 @@
     EditBox,
     getPopupPositionElement,
     Icon,
-    IconEdit,
+    IconMoreV,
     Label,
     numberToHexColor,
     showPopup
@@ -96,7 +96,7 @@
       {/if}
       {#if !isEditMode}
         <div class="absolute mr-1 mt-1" style:top="0" style:right="0">
-          <Button icon={IconEdit} kind="transparent" on:click={enterEditMode} />
+          <Button icon={IconMoreV} kind="transparent" on:click={enterEditMode} />
         </div>
       {/if}
       <div
@@ -129,7 +129,7 @@
     {#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} />
+          <Button icon={IconMoreV} kind="transparent" on:click={enterEditMode} />
         </div>
       </div>
     {/if}
@@ -146,7 +146,7 @@
       {/if}
       {#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} />
+          <Button icon={IconMoreV} kind="transparent" on:click={enterEditMode} />
         </div>
       {/if}
       <div

plugins/board-resources/src/components/popups/AddChecklist.svelte

@@ -5,8 +5,8 @@
   import { WithLookup } from '@anticrm/core'
   import task, { calcRank, TodoItem } from '@anticrm/task'
   import { translate } from '@anticrm/platform'
-  import presentation, { createQuery, getClient } from '@anticrm/presentation'
+  import presentation, { Card as Popup, createQuery, getClient } from '@anticrm/presentation'
-  import { Label, Button, Dropdown, EditBox, IconClose } from '@anticrm/ui'
+  import { Label, Dropdown, EditBox } from '@anticrm/ui'
   import type { ListItem } from '@anticrm/ui'
 
   import board from '../../plugin'
@@ -31,10 +31,6 @@
     noneListItem.label = result
   })
 
-  function close () {
-    dispatch('close')
-  }
-
   async function addChecklist () {
     if (!name || name.trim().length <= 0) {
       return
@@ -110,32 +106,24 @@
   )
 </script>
 
-<div class="antiPopup w-85">
+<Popup
-  <div class="relative flex-row-center w-full ">
+  label={board.string.Checklists}
-    <div class="flex-center flex-grow fs-title mt-1 mb-1">
+  okAction={addChecklist}
-      <Label label={board.string.Checklists} />
+  okLabel={presentation.string.Add}
-    </div>
+  canSave={(name?.length ?? 0) > 0}
-
+  on:close={() => {
-    <div class="absolute mr-1 mt-1 mb-1" style:top="0" style:right="0">
+    dispatch('close')
-      <Button icon={IconClose} kind="transparent" size="small" on:click={close} />
+  }}
-    </div>
+>
-  </div>
+  <div class="flex-col flex-gap-1">
-  <div class="ap-space bottom-divider" />
-  <div class="flex-col ml-4 mt-4 mr-4 flex-gap-1">
-    <div class="text-md font-medium">
     <Label label={board.string.Title} />
-    </div>
-
     <div class="p-2 mt-1 mb-1 border-bg-accent border-radius-1">
       <EditBox bind:value={name} maxWidth="100%" focus={true} />
     </div>
   </div>
 
-  <div class="flex-col ml-4 mt-4 mr-4 flex-gap-1">
+  <div class="flex-col flex-gap-1">
-    <div class="text-md font-medium">
     <Label label={board.string.CopyChecklistFrom} />
-    </div>
-
     <div class="mt-1 mb-1 w-full">
       <Dropdown
         bind:selected={selectedTemplate}
@@ -146,14 +134,4 @@
       />
     </div>
   </div>
-
+</Popup>
-  <div class="ap-footer">
-    <Button
-      label={presentation.string.Add}
-      size="small"
-      kind="primary"
-      disabled={(name?.length ?? 0) <= 0}
-      on:click={addChecklist}
-    />
-  </div>
-</div>

plugins/board-resources/src/components/popups/AttachmentPicker.svelte

@@ -1,59 +0,0 @@
-<script lang="ts">
-  import { AddAttachment } from '@anticrm/attachment-resources'
-  import { Card } from '@anticrm/board'
-  import { Button, IconClose, Label } from '@anticrm/ui'
-  import { createEventDispatcher } from 'svelte'
-
-  import board from '../../plugin'
-
-  export let value: Card
-
-  let inputFile: HTMLInputElement
-  let loading: number = 0
-
-  const dispatch = createEventDispatcher()
-  function close () {
-    dispatch('close')
-  }
-  function onAttached () {
-    if (loading === 0) {
-      close()
-    }
-  }
-</script>
-
-<div class="antiPopup w-60 pb-2">
-  <div class="relative flex-row-center w-full">
-    <div class="flex-center flex-grow fs-title mt-1 mb-1">
-      <Label label={board.string.AttachFrom} />
-    </div>
-    <div class="absolute mr-1 mt-1 mb-1" style:top="0" style:right="0">
-      <Button icon={IconClose} kind="transparent" size="small" on:click={close} />
-    </div>
-  </div>
-  <div class="ap-space bottom-divider" />
-  <div class="flex-col mt-2 w-full">
-    <AddAttachment
-      bind:inputFile
-      bind:loading
-      objectClass={value._class}
-      objectId={value._id}
-      space={value.space}
-      on:attached={onAttached}
-    >
-      <svelte:fragment slot="control" let:click>
-        <Button
-          label={board.string.Computer}
-          kind="transparent"
-          width="100%"
-          justify="left"
-          on:click={() => {
-            click()
-          }}
-        />
-      </svelte:fragment>
-    </AddAttachment>
-  </div>
-  <div class="ap-space bottom-divider mt-3" />
-  <div class="mt-1 ml-2 mr-2 text-md"><Label label={board.string.AttachmentTip} /></div>
-</div>

plugins/board-resources/src/components/popups/CardCoverPicker.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { CardCover, Card } from '@anticrm/board'
-  import { getClient } from '@anticrm/presentation'
+  import presentation, { Card as Popup, getClient } from '@anticrm/presentation'
-  import { Button, hexColorToNumber, Icon, Label, IconCheck, IconClose } from '@anticrm/ui'
+  import { Button, hexColorToNumber, Icon, Label, IconCheck } from '@anticrm/ui'
   import { createEventDispatcher } from 'svelte'
   import board from '../../plugin'
   import { getBoardAvailableColors } from '../../utils/BoardUtils'
@@ -10,7 +10,9 @@
   export let object: Card | undefined
   export let onChange: (e: any) => void | undefined
 
-  $: cover = object ? object.cover : value
+  let cover = object ? object.cover : value
+  let coverColor = cover?.color
+  let coverSize = cover?.size ?? 'small'
 
   const client = getClient()
   const dispatch = createEventDispatcher()
@@ -19,30 +21,32 @@
     return colors.length ? [colors.slice(0, 5), ...chunk(colors.slice(5))] : []
   })(getBoardAvailableColors().map(hexColorToNumber))
 
-  function updateCover (newCover?: Partial<CardCover>) {
+  function close () {
-    cover = newCover ? { size: 'small', color: colorGroups[0][0], ...cover, ...newCover } : null
+    dispatch('close')
+  }
+  function updateCover () {
+    if (!coverColor) {
+      return
+    }
+    const newCover = { color: coverColor, size: coverSize }
+    if (onChange) onChange(newCover)
+    if (object) client.update(object, { cover: newCover })
+  }
+
+  function removeCover () {
+    cover = null
     if (onChange) onChange(cover)
     else if (object) client.update(object, { cover })
   }
 </script>
 
-<div class="antiPopup w-85">
+<Popup
-  <div class="ap-space" />
+  label={board.string.Cover}
-  <div class="flex-center flex-grow fs-title mt-1 mb-1">
+  canSave={cover ? coverColor !== cover.color || coverSize !== cover.size : !!coverColor}
-    <Label label={board.string.Cover} />
+  okAction={updateCover}
-  </div>
+  okLabel={presentation.string.Save}
-  <div class="absolute mr-1 mt-1 mb-1" style:top="0" style:right="0">
+  on:close={close}
-    <Button
+>
-      icon={IconClose}
-      kind="transparent"
-      size="small"
-      on:click={() => {
-        dispatch('close')
-      }}
-    />
-  </div>
-  <div class="ap-space bottom-divider" />
-  <div class="flex" />
   <div class="flex-col ml-4 mt-4 mb-4 mr-4 flex-gap-1">
     <div class="text-md font-medium">
       <Label label={board.string.Size} />
@@ -54,7 +58,7 @@
         width="40%"
         disabled={!cover || cover.size === 'small'}
         on:click={() => {
-          updateCover({ size: 'small' })
+          coverSize = 'small'
         }}
       />
       <Button
@@ -62,16 +66,7 @@
         width="40%"
         disabled={!cover || cover.size === 'large'}
         on:click={() => {
-          updateCover({ size: 'large' })
+          coverSize = 'large'
-        }}
-      />
-    </div>
-    <div class="flex-center">
-      <Button
-        label={board.string.RemoveCover}
-        width="80%"
-        on:click={() => {
-          updateCover()
         }}
       />
     </div>
@@ -89,10 +84,10 @@
                 value={color}
                 size="large"
                 on:click={() => {
-                  updateCover({ color })
+                  coverColor = color
                 }}
               >
-                {#if cover && cover.color === color}
+                {#if coverColor === color}
                   <div class="flex-center flex-grow fs-title h-full">
                     <Icon icon={IconCheck} size="small" />
                   </div>
@@ -104,4 +99,7 @@
       {/each}
     </div>
   </div>
-</div>
+  <svelte:fragment slot="buttons">
+    <Button label={board.string.RemoveCover} kind="transparent" on:click={removeCover} />
+  </svelte:fragment>
+</Popup>

plugins/board-resources/src/components/popups/CopyCard.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
   import { createEventDispatcher, onMount } from 'svelte'
-  import { Label, Button, Status as StatusControl, TextArea } from '@anticrm/ui'
+  import { Label, Status as StatusControl, TextArea } from '@anticrm/ui'
   import { Class, Client, Doc, Ref } from '@anticrm/core'
   import { getResource, OK, Resource, Status } from '@anticrm/platform'
-  import { getClient } from '@anticrm/presentation'
+  import { Card as Popup, getClient } from '@anticrm/presentation'
   import { Card } from '@anticrm/board'
   import view from '@anticrm/view'
   import board from '../../plugin'
@@ -89,34 +89,43 @@
   onMount(() => inputRef.focus())
 </script>
 
-<div class="antiPopup antiPopup-withHeader antiPopup-withTitle antiPopup-withCategory w-85">
+<Popup
-  <div class="ap-space" />
+  label={board.string.CopyCard}
-  <div class="fs-title ap-header flex-row-center">
+  canSave={status === OK}
-    <Label label={board.string.CopyCard} />
+  okAction={copyCard}
-  </div>
+  okLabel={board.string.CreateCard}
-  <div class="ap-space bottom-divider" />
+  on:close={() => {
+    dispatch('close')
+  }}
+>
   <StatusControl {status} />
   <div class="ap-title">
     <Label label={board.string.Title} />
   </div>
-  <div class="mr-4 ml-4 mt-2">
+  <div class="mt-2">
     <TextArea bind:this={inputRef} bind:value={title} />
   </div>
   <div class="ap-title">
     <Label label={board.string.CopyTo} />
   </div>
-  <div class="ap-category">
+  <div class="w-full flex ml-2">
-    <div class="categoryItem w-full border-radius-2 p-2 background-button-bg-enabled">
+    <div style:flex-basis="10%" class="text-md">
+      <Label label={board.string.Board} />
+    </div>
     <SpaceSelect label={board.string.Board} object={value} bind:selected={selected.space} />
   </div>
+  <div class="w-full flex ml-2">
+    <div style:flex-basis="10%" class="text-md">
+      <Label label={board.string.List} />
     </div>
-  <div class="ap-category flex-gap-3">
-    <div class="categoryItem w-full border-radius-2 p-2 background-button-bg-enabled">
     {#key selected.space}
       <StateSelect label={board.string.List} object={value} space={selected.space} bind:selected={selected.state} />
     {/key}
   </div>
-    <div class="categoryItem w-full border-radius-2 p-2 background-button-bg-enabled">
+  <div class="w-full flex ml-2">
+    <div style:flex-basis="10%" class="text-md">
+      <Label label={board.string.Position} />
+    </div>
     {#key selected.state}
       <RankSelect
         label={board.string.Position}
@@ -127,21 +136,4 @@
       />
     {/key}
   </div>
-  </div>
+</Popup>
-  <div class="ap-footer">
-    <Button
-      size={'small'}
-      label={board.string.Cancel}
-      on:click={() => {
-        dispatch('close')
-      }}
-    />
-    <Button
-      label={board.string.CreateCard}
-      size={'small'}
-      disabled={status !== OK}
-      kind={'primary'}
-      on:click={copyCard}
-    />
-  </div>
-</div>

plugins/board-resources/src/components/popups/MoveCard.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { createEventDispatcher } from 'svelte'
-  import { Label, Button, Status as StatusControl } from '@anticrm/ui'
+  import { Label, Status as StatusControl } from '@anticrm/ui'
-  import { getClient } from '@anticrm/presentation'
+  import { Card as Popup, getClient } from '@anticrm/presentation'
   import { Class, Client, Doc, DocumentUpdate, Ref } from '@anticrm/core'
   import { getResource, OK, Resource, Status } from '@anticrm/platform'
   import { Card } from '@anticrm/board'
@@ -58,47 +58,39 @@
   $: validate({ ...value, ...selected }, value._class)
 </script>
 
-<div class="antiPopup antiPopup-withHeader antiPopup-withTitle antiPopup-withCategory w-85">
+<Popup
-  <div class="ap-space" />
+  label={board.string.MoveCard}
-  <div class="fs-title ap-header flex-row-center">
+  canSave={status === OK && (value.state !== selected.state || value.rank !== selected.rank)}
-    <Label label={board.string.MoveCard} />
+  okAction={move}
-  </div>
+  okLabel={board.string.Move}
-  <div class="ap-space bottom-divider" />
+  on:close={() => {
+    dispatch('close')
+  }}
+>
   <StatusControl {status} />
   <div class="ap-title">
     <Label label={board.string.SelectDestination} />
   </div>
-  <div class="ap-category">
+  <div class="w-full flex ml-2">
-    <div class="categoryItem w-full border-radius-2 p-2 background-button-bg-enabled">
+    <div style:flex-basis="10%" class="text-md">
+      <Label label={board.string.Board} />
+    </div>
     <SpaceSelect label={board.string.Board} object={value} bind:selected={selected.space} />
   </div>
+  <div class="w-full flex ml-2">
+    <div style:flex-basis="10%" class="text-md">
+      <Label label={board.string.List} />
     </div>
-  <div class="ap-category flex-gap-3">
-    <div class="categoryItem w-full border-radius-2 p-2 background-button-bg-enabled">
     {#key selected.space}
       <StateSelect label={board.string.List} object={value} space={selected.space} bind:selected={selected.state} />
     {/key}
   </div>
-    <div class="categoryItem w-full border-radius-2 p-2 background-button-bg-enabled">
+  <div class="w-full flex ml-2">
+    <div style:flex-basis="10%" class="text-md">
+      <Label label={board.string.Position} />
+    </div>
     {#key selected.state}
       <RankSelect label={board.string.Position} object={value} state={selected.state} bind:selected={selected.rank} />
     {/key}
   </div>
-  </div>
+</Popup>
-  <div class="ap-footer">
-    <Button
-      size={'small'}
-      label={board.string.Cancel}
-      on:click={() => {
-        dispatch('close')
-      }}
-    />
-    <Button
-      label={board.string.Move}
-      size={'small'}
-      disabled={status !== OK || (value.state === selected.state && value.rank === selected.rank)}
-      kind={'primary'}
-      on:click={move}
-    />
-  </div>
-</div>