UBERF-5603 (#4754)

Signed-off-by: Denis Bykhov <bykhov.denis@gmail.com>

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

@@ -20,17 +20,8 @@
   import { Panel } from '@hcengineering/panel'
   import { createQuery, getClient } from '@hcengineering/presentation'
   import { StyledTextBox } from '@hcengineering/text-editor'
-  import {
-    Button,
-    CircleButton,
-    EditBox,
-    IconAdd,
-    IconMoreH,
-    Label,
-    getEventPopupPositionElement,
-    showPopup
-  } from '@hcengineering/ui'
-  import { ContextMenu, DocAttributeBar, ParentsNavigator, invokeAction } from '@hcengineering/view-resources'
+  import { Button, EditBox, IconMoreH } from '@hcengineering/ui'
+  import { DocAttributeBar, ParentsNavigator, invokeAction, showMenu } from '@hcengineering/view-resources'
   import { createEventDispatcher, onMount } from 'svelte'
   import board from '../plugin'
   import { getCardActions } from '../utils/CardActionUtils'
@@ -113,11 +104,7 @@
         kind="ghost"
         size="medium"
         on:click={(e) => {
-          showPopup(
-            ContextMenu,
-            { object, baseMenuClass: board.class.Card, mode: 'editor' },
-            getEventPopupPositionElement(e)
-          )
+          showMenu(e, { object, baseMenuClass: board.class.Card, mode: 'editor' })
         }}
       />
     </svelte:fragment>

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

@@ -22,19 +22,9 @@
   import { ChatMessagesPresenter } from '@hcengineering/notification-resources'
   import { getClient } from '@hcengineering/presentation'
   import tags from '@hcengineering/tags'
-  import {
-    Button,
-    Component,
-    EditBox,
-    Icon,
-    IconMoreV,
-    Label,
-    getPopupPositionElement,
-    numberToHexColor,
-    showPopup
-  } from '@hcengineering/ui'
+  import { Button, Component, EditBox, Icon, IconMoreV, Label, numberToHexColor } from '@hcengineering/ui'
   import view from '@hcengineering/view'
-  import { ContextMenu } from '@hcengineering/view-resources'
+  import { showMenu } from '@hcengineering/view-resources'
   import board from '../plugin'
   import { hasDate, openCardPanel, updateCard, updateCardMembers } from '../utils/CardUtils'
   import DatePresenter from './presenters/DatePresenter.svelte'
@@ -53,9 +43,9 @@
     isEditMode = false
   }
 
-  function enterEditMode (): void {
+  function enterEditMode (e: MouseEvent): void {
     isEditMode = true
-    showPopup(ContextMenu, { object }, getPopupPositionElement(ref, { h: 'right', v: 'top' }), exitEditMode)
+    showMenu(e, { object }, exitEditMode)
   }
 
   function showCard () {

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

@@ -14,7 +14,7 @@
 // limitations under the License.
 -->
 <script lang="ts">
-  import board, { Card } from '@hcengineering/board'
+  import { Card } from '@hcengineering/board'
   import {
     CategoryType,
     Class,
@@ -30,10 +30,8 @@
   import { ActionContext, createQuery } from '@hcengineering/presentation'
   import type { DocWithRank, Project } from '@hcengineering/task'
   import task, { getStates } from '@hcengineering/task'
-  import { getEventPositionElement, showPopup } from '@hcengineering/ui'
   import { typeStore } from '@hcengineering/task-resources'
   import {
-    ContextMenu,
     ListSelectionProvider,
     SelectDirection,
     focusStore,
@@ -41,6 +39,7 @@
     getGroupByValues,
     groupBy,
     setGroupByValues,
+    showMenu,
     statusStore
   } from '@hcengineering/view-resources'
   import { onMount } from 'svelte'
@@ -77,15 +76,6 @@
 
   const selection = listProvider.selection
 
-  const showMenu = async (ev: MouseEvent, object: Doc): Promise<void> => {
-    ev.preventDefault()
-    if (object._class !== board.class.Card) {
-      return
-    }
-
-    showPopup(ContextMenu, { object }, getEventPositionElement(ev))
-  }
-
   let resultQuery: DocumentQuery<DocWithRank>
 
   $: resultQuery = { ...query, isArchived: { $nin: [true] }, space }
@@ -144,7 +134,9 @@
   on:check={(evt) => {
     listProvider.updateSelection(evt.detail.docs, evt.detail.value)
   }}
-  on:contextmenu={(evt) => showMenu(evt.detail.evt, evt.detail.objects)}
+  on:contextmenu={(evt) => {
+    showMenu(evt.detail.evt, { object: evt.detail.objects })
+  }}
   selection={listProvider.current($focusStore)}
 >
   <svelte:fragment slot="card" let:object>

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

@@ -1,21 +1,8 @@
 <script lang="ts">
   import { State } from '@hcengineering/task'
-  import {
-    Button,
-    getEventPositionElement,
-    getPlatformColorDef,
-    getPlatformColorForTextDef,
-    IconMoreV,
-    showPopup,
-    themeStore
-  } from '@hcengineering/ui'
-  import { ContextMenu } from '@hcengineering/view-resources'
+  import { Button, getPlatformColorDef, getPlatformColorForTextDef, IconMoreV, themeStore } from '@hcengineering/ui'
+  import { showMenu } from '@hcengineering/view-resources'
   export let state: State
-
-  const showMenu = async (ev: MouseEvent): Promise<void> => {
-    ev.preventDefault()
-    showPopup(ContextMenu, { object: state }, getEventPositionElement(ev))
-  }
 </script>
 
 {#if state}
@@ -29,7 +16,13 @@
     <div class="flex-between h-full font-medium pr-2 pl-4">
       <span class="lines-limit-2">{state.name}</span>
       <div class="flex">
-        <Button icon={IconMoreV} kind="ghost" on:click={showMenu} />
+        <Button
+          icon={IconMoreV}
+          kind="ghost"
+          on:click={(e) => {
+            showMenu(e, { object: state })
+          }}
+        />
       </div>
     </div>
   </div>