Board: Update popups style (#2043)

Signed-off-by: Anna No <anna.no@xored.com>
hcengineering · Jun 9, 2022 · 2997efd · 2997efd
1 parent b510538
commit 2997efd
Show file tree

Hide file tree

Showing 7 changed files with 122 additions and 218 deletions.
diff --git a/packages/presentation/src/components/Card.svelte b/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}

diff --git a/plugins/board-resources/src/components/KanbanCard.svelte b/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

diff --git a/plugins/board-resources/src/components/popups/AddChecklist.svelte b/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 { Label, Button, Dropdown, EditBox, IconClose } from '@anticrm/ui'
+  import presentation, { Card as Popup, createQuery, getClient } from '@anticrm/presentation'
+  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">
-  <div class="relative flex-row-center w-full ">
-    <div class="flex-center flex-grow fs-title mt-1 mb-1">
-      <Label label={board.string.Checklists} />
-    </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 ml-4 mt-4 mr-4 flex-gap-1">
-    <div class="text-md font-medium">
-      <Label label={board.string.Title} />
-    </div>
-
+<Popup
+  label={board.string.Checklists}
+  okAction={addChecklist}
+  okLabel={presentation.string.Add}
+  canSave={(name?.length ?? 0) > 0}
+  on:close={() => {
+    dispatch('close')
+  }}
+>
+  <div class="flex-col flex-gap-1">
+    <Label label={board.string.Title} />
     <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="text-md font-medium">
-      <Label label={board.string.CopyChecklistFrom} />
-    </div>
-
+  <div class="flex-col flex-gap-1">
+    <Label label={board.string.CopyChecklistFrom} />
     <div class="mt-1 mb-1 w-full">
       <Dropdown
         bind:selected={selectedTemplate}
@@ -146,14 +134,4 @@
       />
     </div>
   </div>
-
-  <div class="ap-footer">
-    <Button
-      label={presentation.string.Add}
-      size="small"
-      kind="primary"
-      disabled={(name?.length ?? 0) <= 0}
-      on:click={addChecklist}
-    />
-  </div>
-</div>
+</Popup>
diff --git a/plugins/board-resources/src/components/popups/AttachmentPicker.svelte b/plugins/board-resources/src/components/popups/AttachmentPicker.svelte
diff --git a/plugins/board-resources/src/components/popups/CardCoverPicker.svelte b/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 { Button, hexColorToNumber, Icon, Label, IconCheck, IconClose } from '@anticrm/ui'
+  import presentation, { Card as Popup, getClient } from '@anticrm/presentation'
+  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>) {
-    cover = newCover ? { size: 'small', color: colorGroups[0][0], ...cover, ...newCover } : null
+  function close () {
+    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">
-  <div class="ap-space" />
-  <div class="flex-center flex-grow fs-title mt-1 mb-1">
-    <Label label={board.string.Cover} />
-  </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={() => {
-        dispatch('close')
-      }}
-    />
-  </div>
-  <div class="ap-space bottom-divider" />
-  <div class="flex" />
+<Popup
+  label={board.string.Cover}
+  canSave={cover ? coverColor !== cover.color || coverSize !== cover.size : !!coverColor}
+  okAction={updateCover}
+  okLabel={presentation.string.Save}
+  on:close={close}
+>
   <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,24 +58,15 @@
         width="40%"
         disabled={!cover || cover.size === 'small'}
         on:click={() => {
-          updateCover({ size: 'small' })
+          coverSize = 'small'
         }}
       />
       <Button
         icon={board.icon.Board}
         width="40%"
         disabled={!cover || cover.size === 'large'}
         on:click={() => {
-          updateCover({ size: 'large' })
-        }}
-      />
-    </div>
-    <div class="flex-center">
-      <Button
-        label={board.string.RemoveCover}
-        width="80%"
-        on:click={() => {
-          updateCover()
+          coverSize = 'large'
         }}
       />
     </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>