Message reactions with emojis

CHANGELOG.md

@@ -8,6 +8,7 @@
   - Hovering outside of the menu closes last opened sublevel
   - ChatListContextMenu mute option now opens a submenu with duration options instead of a dialog
 - Add shortcut to scan qr code to "New Chat" dialog #3623
+- Message reactions with emojis #2964
 
 ### Changed
 - Update `deltachat-node` and `deltachat/jsonrpc-client` to `v1.132.1`

scss/composer/_emoji-sticker-picker.scss

@@ -46,42 +46,11 @@ $emojimart-search-height: 31px + 6px;
       }
     }
   }
-  div.emoji-picker,
+
   div.sticker-picker {
     height: calc(#{$esp-height} - #{$esp-header-height});
   }
 
-  div.emoji-picker {
-    & > div {
-      width: 100%;
-      height: 100%;
-      em-emoji-picker {
-        width: 100%;
-        height: 100%;
-        --border-radius: 0px;
-
-        // unknown effect?
-        --background-rgb: var(--emoji-picker-background-rgb);
-        // background
-        --rgb-background: var(--emoji-picker-background-rgb);
-        // base color for text, seach placeholder an icons
-        --rgb-color: var(--emoji-picker-text-rgb);
-        --rgb-accent: var(--emoji-picker-accent-rgb);
-        // selected input field bg
-        --rgb-input: var(--emoji-picker-selected-input-bg-rgb);
-        // border, scrollbar, in-active search input, emoji hover background
-        --color-border: var(--emoji-picker-border-and-hover-color);
-
-        --font-family: $roboto;
-
-        // --category-icon-size: 24px;
-        // --font-size: 20px;
-        --color-border-over: rgba(0, 0, 0, 0);
-        --shadow: none;
-      }
-    }
-  }
-
   div.sticker-picker {
     background: var(--emojiMartBg);
     width: 100%;

scss/message/_message-attachment.scss

@@ -7,7 +7,7 @@
   margin-left: -12px;
   margin-right: -12px;
   margin-top: -10px;
-  margin-bottom: -11px;
+  margin-bottom: -12px;
 
   border-radius: 16px;
   overflow: hidden;

scss/message/_message.scss

@@ -149,7 +149,6 @@
   .metadata {
     margin-top: 10px;
     margin-bottom: -7px;
-    float: right;
   }
 
   .module-message__img-attachment {
@@ -223,9 +222,10 @@
 }
 
 .message.outgoing {
+  flex-direction: row-reverse;
   float: right;
-  margin-right: 0;
   margin-left: 32px;
+  margin-right: 0;
 
   .metadata:not(.with-image-no-caption) {
     & > .date {
@@ -370,25 +370,10 @@
   }
 }
 
-/* Spec: container > 438px and container < 593px*/
-@media (min-width: 800px) and (max-width: 925px) {
-  .message {
-    max-width: 374px;
-
-    &.incoming {
-      margin-right: auto;
-    }
-
-    &.outgoing {
-      margin-left: auto;
-    }
-  }
-}
-
 // Spec: container > 593px
 @media (min-width: 926px) {
   .message {
-    max-width: 66%;
+    max-width: 75%;
 
     &.incoming {
       margin-right: auto;
@@ -402,7 +387,7 @@
 
 @media (max-width: 925px) {
   .message {
-    max-width: 90%;
+    max-width: 100%;
 
     &.incoming {
       margin-right: auto;

src/renderer/components/AbsolutePositioningHelper/index.tsx

@@ -0,0 +1,129 @@
+import React, { useState, useLayoutEffect, useRef } from 'react'
+
+import styles from './styles.module.scss'
+
+import type { ReactNode } from 'react'
+
+type Props = {
+  /** Desired x position of element, usually determined by a user click event */
+  x: number
+
+  /** Desired y position of element, usually determined by a user click event */
+  y: number
+
+  /** Element which will be absolutely positioned and automatically adjusted */
+  children: ReactNode
+}
+
+/**
+ * Helper component which fixes it's wrapped components absolutely on the screen,
+ * if possible, centered and above the desired position. The position is usually
+ * determined by an user mouse event.
+ *
+ * Additionally it makes sure the wrapped components are not crossing the window's
+ * boundaries. In that case the position will be automatically adjusted.
+ *
+ * Note: This does not adjust the element after window size changes. Usually you
+ * want to cancel what you're doing with this component after a window resize
+ * or scroll.
+ */
+export default function AbsolutePositioningHelper(props: Props) {
+  const ref = useRef<HTMLDivElement>(null)
+  const [dimensions, setDimensions] = useState({
+    refWidth: 0,
+    refHeight: 0,
+    windowWidth: window.innerWidth,
+    windowHeight: window.innerHeight,
+  })
+
+  // Observe size & position changes of the wrapped "ref" element.
+  useLayoutEffect(() => {
+    if (!ref.current) {
+      return
+    }
+
+    const refElem = ref.current
+
+    const observer = new ResizeObserver(entries => {
+      if (entries.length === 0) {
+        return
+      }
+
+      const { width: refWidth, height: refHeight } = entries[0].contentRect
+
+      if (refWidth === 0 || refHeight === 0) {
+        return
+      }
+
+      setDimensions({
+        windowWidth: window.innerWidth,
+        windowHeight: window.innerHeight,
+        refWidth,
+        refHeight,
+      })
+    })
+
+    observer.observe(refElem)
+
+    return () => {
+      observer.unobserve(refElem)
+    }
+  }, [])
+
+  let x
+
+  // Adjust element position to be centered
+  x = props.x - dimensions.refWidth / 2
+
+  // Change the x position when it is too far to the right and leaving the window
+  if (x + dimensions.refWidth > dimensions.windowWidth) {
+    x = dimensions.windowWidth - dimensions.refWidth
+  }
+
+  // .. and when it is too far to the left
+  if (x < 0) {
+    x = 0
+  }
+
+  let y
+
+  // Align element to be above the initial y position
+  y = props.y - dimensions.refHeight
+
+  // Align the element under the initial y position if it would otherwise cut the top
+  if (y < dimensions.refHeight) {
+    y = props.y
+  }
+
+  // .. and when it is too far to the bottom
+  if (y + dimensions.refHeight > dimensions.windowHeight) {
+    y = dimensions.windowHeight - dimensions.refHeight
+  }
+
+  // Finally adjust when the screen is just too small
+  if (y < 0) {
+    y = 0
+  }
+
+  // Hide wrapper if observed element is not rendered yet. Do not remove
+  // it from DOM as we need to learn about it's size as soon as it comes in.
+  // This helps us to prevent weird flickering when React is not ready yet.
+  const visibility =
+    dimensions.refWidth === 0 || dimensions.refHeight === 0
+      ? 'hidden'
+      : 'visible'
+
+  return (
+    <div
+      style={{
+        left: `${x}px`,
+        top: `${y}px`,
+        visibility,
+      }}
+      className={styles.absolutePositioningHelper}
+      ref={ref}
+    >
+      {props.children}
+    </div>
+  )
+}

src/renderer/components/AbsolutePositioningHelper/styles.module.scss

@@ -0,0 +1,4 @@
+.absolutePositioningHelper {
+  position: fixed;
+  z-index: 1000;
+}

src/renderer/components/ContactName/index.tsx

@@ -0,0 +1,23 @@
+import React from 'react'
+
+import { InlineVerifiedIcon } from '../VerifiedIcon'
+
+import styles from './styles.module.scss'
+
+type Props = {
+  displayName: string
+  address: string
+  isVerified?: boolean
+}
+
+export default function ContactName(props: Props) {
+  return (
+    <div className={styles.contactName}>
+      <div className={styles.contactNameDisplay}>
+        <span className={styles.contactNameTruncated}>{props.displayName}</span>
+        {props.isVerified && <InlineVerifiedIcon />}
+      </div>
+      <div className={styles.contactNameAddress}>{props.address}</div>
+    </div>
+  )
+}

src/renderer/components/ContactName/styles.module.scss

@@ -0,0 +1,23 @@
+.contactName {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.contactNameDisplay {
+  font-weight: bold;
+  white-space: nowrap;
+}
+
+.contactNameTruncated {
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+.contactNameAddress {
+  color: var(--contactEmailColor);
+  margin-top: 3px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

src/renderer/components/ContextMenu.tsx

@@ -9,7 +9,10 @@ import classNames from 'classnames'
 
 import useContextMenu from '../hooks/useContextMenu'
 
-type ContextMenuItemActionable = { action: () => void; subitems?: never }
+type ContextMenuItemActionable = {
+  action: (event: React.MouseEvent<Element, MouseEvent>) => void
+  subitems?: never
+}
 
 type ContextMenuItemExpandable = {
   action?: never
@@ -340,7 +343,7 @@ export function ContextMenu(props: {
                   keyboardFocus.current = -1
                   didOpen.current = false
                   closeCallback()
-                  item.action()
+                  item.action(ev)
                 }
               }}
               onMouseOver={() => {

src/renderer/components/EmojiPicker/index.tsx

@@ -0,0 +1,67 @@
+import Picker from '@emoji-mart/react'
+import React from 'react'
+import classNames from 'classnames'
+import emojiData from '@emoji-mart/data'
+
+import useTranslationFunction from '../../hooks/useTranslationFunction'
+import { useThemeCssVar } from '../../ThemeManager'
+
+import styles from './styles.module.scss'
+
+import type { BaseEmoji } from 'emoji-mart/index'
+
+type Props = {
+  className?: string
+  onSelect: (emoji: BaseEmoji) => void
+  full?: boolean
+}
+
+export default function EmojiPicker({
+  className,
+  onSelect,
+  full = false,
+}: Props) {
+  const tx = useTranslationFunction()
+
+  let iconsTheme = useThemeCssVar('--SPECIAL-emoji-picker-category-icon-style')
+  if (iconsTheme !== 'solid' && iconsTheme !== 'outline') {
+    iconsTheme = 'solid'
+  }
+
+  return (
+    <div
+      className={classNames(styles.emojiPicker, className, {
+        [styles.full]: full,
+      })}
+    >
+      <Picker
+        data={emojiData}
+        i18n={{
+          search: tx('search'),
+          notfound: tx('emoji_not_found'),
+          categories: {
+            search: tx('emoji_search_results'),
+            recent: tx('emoji_recent'),
+            people: tx('emoji_people'),
+            nature: tx('emoji_nature'),
+            foods: tx('emoji_foods'),
+            activity: tx('emoji_activity'),
+            places: tx('emoji_places'),
+            objects: tx('emoji_objects'),
+            symbols: tx('emoji_symbols'),
+            flags: tx('emoji_flags'),
+          },
+        }}
+        native
+        onEmojiSelect={onSelect}
+        navPosition='bottom'
+        previewPosition='none'
+        searchPosition='sticky'
+        skinTonePosition='none'
+        autoFocus
+        dynamicWidth={full}
+        icons={iconsTheme}
+      />
+    </div>
+  )
+}