Adding icons to the context menu

deltachat · May 8, 2024 · 2cdbe5b · 2cdbe5b
1 parent 69f3a76
commit 2cdbe5b
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 62 deletions.
diff --git a/src/renderer/components/ContextMenu.tsx b/src/renderer/components/ContextMenu.tsx
@@ -6,15 +6,18 @@ import React, {
   useCallback,
 } from 'react'
 import classNames from 'classnames'
+import Icon from './Icon'
 
 import useContextMenu from '../hooks/useContextMenu'
 
 type ContextMenuItemActionable = {
+  icon?: IconName
   action: (event: React.MouseEvent<Element, MouseEvent>) => void
   subitems?: never
 }
 
 type ContextMenuItemExpandable = {
+  icon?: IconName
   action?: never
   subitems: (ContextMenuItem | undefined)[]
 }
@@ -344,6 +347,7 @@ export function ContextMenu(props: {
               key={index}
               {...(item.subitems && { 'data-expandable-index': index })}
             >
+              {item.icon && <Icon icon={item.icon} />}
               {item.label}
               {item.subitems && <div className='right-icon'></div>}
             </div>

diff --git a/src/renderer/components/composer/menuAttachment.tsx b/src/renderer/components/composer/menuAttachment.tsx
@@ -1,13 +1,6 @@
-import React, { useCallback } from 'react'
-import {
-  Button,
-  Position,
-  Popover,
-  Menu,
-  MenuItem,
-  IconName,
-} from '@blueprintjs/core'
+import React, { useCallback, useContext } from 'react'
 import { dirname } from 'path'
+import { Button } from '@blueprintjs/core'
 
 import { runtime } from '../../runtime'
 import { useStore } from '../../stores/store'
@@ -19,25 +12,23 @@ import useVideoChat from '../../hooks/useVideoChat'
 import { LastUsedSlot, rememberLastUsedPath } from '../../utils/lastUsedPaths'
 import { selectedAccountId } from '../../ScreenController'
 
+import { ContextMenuItem } from './ContextMenu'
+import { ContextMenuContext } from '../../contexts/ContextMenuContext'
+
 import type { T } from '@deltachat/jsonrpc-client'
 
 type Props = {
   addFileToDraft: (file: string, viewType: T.Viewtype) => void
   selectedChat: T.FullChat | null
 }
 
-type MenuAttachmentItemObject = {
-  id: number
-  icon: IconName
-  text: string
-  onClick: todo
-}
-
 // Main component that creates the menu and popover
 export default function MenuAttachment({
   addFileToDraft,
   selectedChat,
 }: Props) {
+  const { openContextMenu } = useContext(ContextMenuContext)
+
   const tx = useTranslationFunction()
   const openConfirmationDialog = useConfirmationDialog()
   const { sendVideoChatInvitation } = useVideoChat()
@@ -111,59 +102,50 @@ export default function MenuAttachment({
   ])
 
   // item array used to populate menu
-  const items: MenuAttachmentItemObject[] = [
+  const menu: (ContextMenuItem | false)[] = [
     settings?.settings.webrtc_instance && {
-      id: 0,
-      icon: 'phone' as IconName,
-      text: tx('videochat'),
-      onClick: onVideoChat,
+      icon: 'bell',
+      // icon: 'phone' as IconName,
+      label: tx('videochat'),
+      action: onVideoChat,
     },
     {
-      id: 1,
-      icon: 'media' as IconName,
-      text: tx('image'),
-      onClick: addFilenameMedia.bind(null),
+      icon: 'image',
+      // icon: 'media' as IconName,
+      label: tx('image'),
+      action: addFilenameMedia.bind(null),
     },
     {
-      id: 2,
-      icon: 'document' as IconName,
-      text: tx('file'),
-      onClick: addFilenameFile.bind(null),
+      icon: 'info',
+      // icon: 'document' as IconName,
+      label: tx('file'),
+      action: addFilenameFile.bind(null),
     },
-  ].filter(item => !!item) as MenuAttachmentItemObject[]
+  ]
 
-  return (
-    <div className='attachment-button'>
-      <Popover
-        content={
-          <Menu>
-            <MenuAttachmentItems itemsArray={items} />
-          </Menu>
-        }
-        position={Position.TOP_LEFT}
-      >
-        <Button id='test-attachment-menu' minimal icon='paperclip' />
-      </Popover>
-    </div>
-  )
-}
+  const onClickAttachmentMenu = (event: React.MouseEvent<any, MouseEvent>) => {
+    const threeDotButtonElement = document.querySelector(
+      '#attachment-menu-button'
+    ) as HTMLDivElement
+
+    const boundingBox = threeDotButtonElement.getBoundingClientRect()
+
+    const [cursorX, cursorY] = [boundingBox.x, boundingBox.y]
+    event.preventDefault() // prevent default runtime context menu from opening
+
+    openContextMenu({
+      cursorX,
+      cursorY,
+      items: menu,
+    })
+  }
 
-// Function to populate Menu
-const MenuAttachmentItems = ({
-  itemsArray,
-}: {
-  itemsArray: MenuAttachmentItemObject[]
-}) => {
   return (
-    <>
-      {itemsArray.map((item: MenuAttachmentItemObject) => (
-        <MenuItem
-          key={item.id}
-          icon={item.icon}
-          text={item.text}
-          onClick={item.onClick}
-        />
-      ))}
-    </>
+    <Button
+      icon='paperclip'
+      id='attachment-menu-button'
+      className='attachment-button'
+      onClick={onClickAttachmentMenu}
+    />
   )
 }
diff --git a/test/testcafe/messagelist_tests.ts b/test/testcafe/messagelist_tests.ts
@@ -170,7 +170,7 @@ export async function goToSideBarSubSettingsMenu(t, label) {
 }
 
 export async function sendVideoChatInvitation(t) {
-  await t.click('#test-attachment-menu')
+  await t.click('#attachment-menu-button')
   await t.click(
     Selector('a.bp4-menu-item').withText(await translate('videochat'))
   )