Board: fix popup alignments (#1467)

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

models/board/src/index.ts

@@ -117,7 +117,7 @@ export class TCardAction extends TDoc implements CardAction {
   label!: IntlString
   position!: number
   type!: string
-  handler?: Resource<(card: Card, client: Client) => void>
+  handler?: Resource<(card: Card, client: Client, e?: Event) => void>
   supported?: Resource<(card: Card, client: Client) => boolean>
 }
 

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

@@ -99,10 +99,10 @@
                 label={action.label}
                 kind={action.kind ?? 'no-border'}
                 justify="left"
-                on:click={async () => {
+                on:click={async (e) => {
                   if (action.handler) {
                     const handler = await getResource(action.handler)
-                    handler(value, client)
+                    handler(value, client, e)
                   }
                 }}
               />

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

@@ -2,12 +2,12 @@
   import { createEventDispatcher } from 'svelte'
   import { Label, Button, ActionIcon, IconClose, EditBox } from '@anticrm/ui'
   import board from '../../plugin'
-  import { getClient } from '@anticrm/presentation';
-  import { Attachment } from '@anticrm/attachment';
+  import { getClient } from '@anticrm/presentation'
+  import { Attachment } from '@anticrm/attachment'
 
   export let object: Attachment
 
-  let {name} = object
+  let { name } = object
 
   const client = getClient()
   const dispatch = createEventDispatcher()
@@ -19,8 +19,8 @@
     <div class="flex-center flex-grow">
       <Label label={board.string.Edit}/>
     </div>
-    <div class="close-icon">
-      <ActionIcon icon={IconClose} size={'small'} action={() => {dispatch("close")}} />
+    <div class="close-icon mr-1">
+      <ActionIcon icon={IconClose} size={'small'} action={() => { dispatch('close') }} />
     </div>
   </div>
   <div class="ap-space bottom-divider"/>
@@ -36,7 +36,7 @@
       kind={'primary'}
       on:click={() => {
         if (!name) return
-        client.update(object, {name})
+        client.update(object, { name })
         dispatch('close')
       }}
     />

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

@@ -2,8 +2,8 @@
   import { createEventDispatcher } from 'svelte'
   import { Label, Button, ActionIcon, IconClose } from '@anticrm/ui'
   import board from '../../plugin'
-  import { getClient } from '@anticrm/presentation';
-  import { Attachment } from '@anticrm/attachment';
+  import { getClient } from '@anticrm/presentation'
+  import { Attachment } from '@anticrm/attachment'
 
   export let object: Attachment
 
@@ -17,8 +17,8 @@
     <div class="flex-center flex-grow">
       <Label label={board.string.Delete} />
     </div>
-    <div class="close-icon">
-      <ActionIcon icon={IconClose} size={'small'} action={() => {dispatch("close")}} />
+    <div class="close-icon mr-1">
+      <ActionIcon icon={IconClose} size={'small'} action={() => { dispatch('close') }} />
     </div>
   </div>
   <div class="ap-space bottom-divider"/>

plugins/board-resources/src/components/presenters/AttachmentPresenter.svelte

@@ -12,21 +12,20 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 -->
-
 <script lang="ts">
   import type { Attachment } from '@anticrm/attachment'
   import { PDFViewer, getFileUrl } from '@anticrm/presentation'
   import { Button, showPopup, TimeSince, closeTooltip } from '@anticrm/ui'
   import board from '../../plugin'
-  import EditAttachment from '../popups/EditAttachment.svelte';
-  import RemoveAttachment from '../popups/RemoveAttachment.svelte';
+  import { getPopupAlignment } from '../../utils/PopupUtils'
+  import EditAttachment from '../popups/EditAttachment.svelte'
+  import RemoveAttachment from '../popups/RemoveAttachment.svelte'
 
   export let value: Attachment
 
   const maxLenght: number = 30
-  const trimFilename = (fname: string): string => (fname.length > maxLenght)
-    ? fname.substr(0, (maxLenght - 1) / 2) + '...' + fname.substr(-(maxLenght - 1) / 2)
-    : fname
+  const trimFilename = (fname: string): string =>
+    fname.length > maxLenght ? fname.substr(0, (maxLenght - 1) / 2) + '...' + fname.substr(-(maxLenght - 1) / 2) : fname
 
   function iconLabel (name: string): string {
     const parts = name.split('.')
@@ -39,10 +38,11 @@
   }
 
   const handleClick = openEmbedded(value.type)
-  ? () => {
-    closeTooltip();
-    showPopup(PDFViewer, { file: value.file, name: value.name, contentType: value.type }, 'right')
-  } : undefined
+    ? () => {
+        closeTooltip()
+        showPopup(PDFViewer, { file: value.file, name: value.name, contentType: value.type }, 'right')
+      }
+    : undefined
 </script>
 
 <div class="flex-row-center">
@@ -51,14 +51,26 @@
       <img src={getFileUrl(value.file)} alt={value.name} />
     </div>
   {:else}
-    <a class="no-line" href={getFileUrl(value.file)} download={value.name}><div class="flex-center icon">{iconLabel(value.name)}</div></a>
+    <a class="no-line" href={getFileUrl(value.file)} download={value.name}><div class="flex-center icon">
+        {iconLabel(value.name)}
+      </div></a>
   {/if}
   <div class="flex-col-centre info">
     <div class="fs-title">{trimFilename(value.name)}</div>
-    <div class="flex-row-center">
-      <TimeSince value={value.lastModified}/>
-      <Button label={board.string.Edit} on:click={() => {showPopup(EditAttachment, {object: value})}} kind="transparent"/>
-      <Button label={board.string.Delete} on:click={() => {showPopup(RemoveAttachment, {object: value})}} kind="transparent"/>
+    <div class="flex-row-center flex-gap-1">
+      <TimeSince value={value.lastModified} />
+      <Button
+        label={board.string.Edit}
+        on:click={(e) => {
+          showPopup(EditAttachment, { object: value }, getPopupAlignment(e))
+        }}
+        kind="transparent" />
+      <Button
+        label={board.string.Delete}
+        on:click={(e) => {
+          showPopup(RemoveAttachment, { object: value }, getPopupAlignment(e))
+        }}
+        kind="transparent" />
     </div>
   </div>
 </div>
@@ -73,8 +85,8 @@
     font-size: 1rem;
     color: var(--primary-button-color);
     background-color: var(--primary-button-enabled);
-    border: 1px solid rgba(0, 0, 0, .1);
-    border-radius: .5rem;
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    border-radius: 0.5rem;
   }
   .content {
     width: 8rem;

plugins/board-resources/src/index.ts

@@ -20,6 +20,7 @@ import { Ref } from '@anticrm/core'
 import contact, { Employee } from '@anticrm/contact'
 import { showPopup } from '@anticrm/ui'
 import { Card } from '@anticrm/board'
+import type { TxOperations as Client } from '@anticrm/core'
 import { Resources } from '@anticrm/platform'
 import { TxOperations } from '@anticrm/core'
 import CardPresenter from './components/CardPresenter.svelte'
@@ -46,17 +47,18 @@ import {
   unarchiveCard,
   deleteCard
 } from './utils/CardUtils'
+import { getPopupAlignment } from './utils/PopupUtils'
 
-async function showMoveCardPopup (object: Card): Promise<void> {
-  showPopup(MoveView, { object })
+async function showMoveCardPopup (object: Card, client: Client, e?: Event): Promise<void> {
+  showPopup(MoveView, { object }, getPopupAlignment(e))
 }
 
-async function showDatePickerPopup (object: Card): Promise<void> {
-  showPopup(DateRangePicker, { object })
+async function showDatePickerPopup (object: Card, client: Client, e?: Event): Promise<void> {
+  showPopup(DateRangePicker, { object }, getPopupAlignment(e))
 }
 
-async function showCardLabelsPopup (object: Card): Promise<void> {
-  showPopup(CardLabelsPopup, { object })
+async function showCardLabelsPopup (object: Card, client: Client, e?: Event): Promise<void> {
+  showPopup(CardLabelsPopup, { object }, getPopupAlignment(e))
 }
 
 async function showEditMembersPopup(object: Card, client: TxOperations): Promise<void> {

plugins/board-resources/src/utils/PopupUtils.ts

@@ -0,0 +1,15 @@
+import { PopupAlignment } from '@anticrm/ui'
+
+export function getPopupAlignment (e?: Event): PopupAlignment | undefined {
+  if (!e || !e.target) {
+    return undefined
+  }
+  const target = e.target as HTMLElement
+  if (target.getBoundingClientRect) {
+    return {
+      getBoundingClientRect: () => target.getBoundingClientRect()
+    }
+  }
+
+  return undefined
+}

plugins/board/src/index.ts

@@ -91,7 +91,7 @@ export interface CardAction extends Doc {
   label: IntlString
   position: number
   type: string
-  handler?: Resource<(card: Card, client: Client) => void>
+  handler?: Resource<(card: Card, client: Client, e?: Event) => void>
   supported?: Resource<(card: Card, client: Client) => boolean>
 }
 
@@ -148,22 +148,22 @@ const boards = plugin(boardId, {
     Delete: '' as Ref<CardAction>
   },
   cardActionHandler: {
-    Cover: '' as Resource<(card: Card, client: Client) => void>,
-    Join: '' as Resource<(card: Card, client: Client) => void>,
-    Members: '' as Resource<(card: Card, client: Client) => void>,
-    Labels: '' as Resource<(card: Card, client: Client) => void>,
-    Checklist: '' as Resource<(card: Card, client: Client) => void>,
-    Dates: '' as Resource<(card: Card, client: Client) => void>,
-    Attachments: '' as Resource<(card: Card, client: Client) => void>,
-    CustomFields: '' as Resource<(card: Card, client: Client) => void>,
-    AddButton: '' as Resource<(card: Card, client: Client) => void>,
-    Move: '' as Resource<(card: Card, client: Client) => void>,
-    Copy: '' as Resource<(card: Card, client: Client) => void>,
-    MakeTemplate: '' as Resource<(card: Card, client: Client) => void>,
-    Watch: '' as Resource<(card: Card, client: Client) => void>,
-    Archive: '' as Resource<(card: Card, client: Client) => void>,
-    SendToBoard: '' as Resource<(card: Card, client: Client) => void>,
-    Delete: '' as Resource<(card: Card, client: Client) => void>
+    Cover: '' as Resource<(card: Card, client: Client, e?: Event) => void>,
+    Join: '' as Resource<(card: Card, client: Client, e?: Event) => void>,
+    Members: '' as Resource<(card: Card, client: Client, e?: Event) => void>,
+    Labels: '' as Resource<(card: Card, client: Client, e?: Event) => void>,
+    Checklist: '' as Resource<(card: Card, client: Client, e?: Event) => void>,
+    Dates: '' as Resource<(card: Card, client: Client, e?: Event) => void>,
+    Attachments: '' as Resource<(card: Card, client: Client, e?: Event) => void>,
+    CustomFields: '' as Resource<(card: Card, client: Client, e?: Event) => void>,
+    AddButton: '' as Resource<(card: Card, client: Client, e?: Event) => void>,
+    Move: '' as Resource<(card: Card, client: Client, e?: Event) => void>,
+    Copy: '' as Resource<(card: Card, client: Client, e?: Event) => void>,
+    MakeTemplate: '' as Resource<(card: Card, client: Client, e?: Event) => void>,
+    Watch: '' as Resource<(card: Card, client: Client, e?: Event) => void>,
+    Archive: '' as Resource<(card: Card, client: Client, e?: Event) => void>,
+    SendToBoard: '' as Resource<(card: Card, client: Client, e?: Event) => void>,
+    Delete: '' as Resource<(card: Card, client: Client, e?: Event) => void>
   },
   cardActionSupportedHandler: {
     Join: '' as Resource<(card: Card, client: Client) => boolean>,