Adding icons to the context menu

- ContextMenu items now can have 'icon' parameter

scss/composer/_composer.scss

@@ -60,19 +60,20 @@
     display: flex;
     align-items: flex-end;
 
-    .attachment-button,
-    .emoji-button {
-      .bp4-button.bp4-minimal {
-        width: 40px;
-        height: 40px;
+    .attachment-button {
+      width: 40px;
+      height: 40px;
 
-        &:hover {
-          background: none;
-          cursor: pointer;
-        }
-        &:focus {
-          outline: none;
-        }
+      outline: none;
+      background: none;
+      box-shadow: none;
+
+      &:hover {
+        background: none;
+        cursor: pointer;
+      }
+      &:focus {
+        outline: none;
       }
     }
 

scss/misc/_context_menu.scss

@@ -19,8 +19,8 @@
   // position is determined in code
   position: fixed;
   pointer-events: auto;
-  background-color: var(--bp4MenuBg);
-  color: var(--bp4MenuText);
+  background-color: var(--bgPrimary);
+  color: var(--textPrimary);
 
   border-radius: 3px;
   overflow: hidden;
@@ -36,14 +36,20 @@
     white-space: nowrap;
     display: flex;
     align-items: center;
-    justify-content: space-between;
+    justify-content: flex-start;
+
+    & .left-icon {
+      background-color: var(--iconBackground);
+      margin: 0 5px 0 0;
+    }
 
     & .right-icon {
       width: 18px;
       height: 18px;
+      margin-left: auto;
       @include color-svg(
         '../images/icons/navigate_next.svg',
-        var(--bp4MenuText),
+        var(--textPrimary),
         100%
       );
       transform: translate(11px, -0.07em);

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 className='left-icon' icon={item.icon} />}
               {item.label}
               {item.subitems && <div className='right-icon'></div>}
             </div>

src/renderer/components/Icon/index.tsx

@@ -11,16 +11,19 @@ export type IconName =
   | 'code-tags'
   | 'cross'
   | 'devices'
+  | 'document'
   | 'favorite'
   | 'forum'
   | 'image'
   | 'info'
   | 'lead-pencil'
   | 'list'
+  | 'media'
   | 'more'
   | 'open_in_new'
   | 'person'
   | 'person-filled'
+  | 'phone'
   | 'qr'
   | 'question_mark'
   | 'reaction'

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,47 @@ 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,
+      label: tx('videochat'),
+      action: onVideoChat,
     },
     {
-      id: 1,
       icon: 'media' as IconName,
-      text: tx('image'),
-      onClick: addFilenameMedia.bind(null),
+      label: tx('image'),
+      action: addFilenameMedia.bind(null),
     },
     {
-      id: 2,
       icon: 'document' as IconName,
-      text: tx('file'),
-      onClick: addFilenameFile.bind(null),
+      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}
+    />
   )
 }

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'))
   )

themes/_themebase.scss

@@ -27,6 +27,8 @@ $hover-contrast-change: 2%;
   --buttonDangerText: #{$colorDanger};
   --buttonDisabledBackground: #{$bgSecondary};
   --buttonDisabledText: #{changeContrast($textSecondary, 45%)};
+  /* Icons */
+  --iconBackground: #757575; /* color from emoji.png */
   /* NavBar */
   --navBarBackground: #{$bgNavBar};
   --navBarText: #{$textNavBar};