Message Actions (static)

src/components/Inbox/DialogCard.module.scss

@@ -6,10 +6,10 @@
   font-size: 14px;
   padding: 12px;
   transition: background 0.3s ease-in-out;
-  cursor: pointer;
   width: 100%;
 
   &.hovered:hover {
+    cursor: pointer;
     background: #f7f7f7;
   }
 

src/components/Inbox/Message.module.scss

@@ -51,10 +51,14 @@ $actionsWidth: 32px * 2;
       z-index: -1;
       transition: 0.3s ease-in-out;
     }
-
+    &.popupVisible {
+      position: relative;
+      z-index: 100;
+    }
+    &.popupVisible,
     &:hover {
       .actions {
-        z-index: 100;
+        z-index: 10000;
         opacity: 1;
         right: -$actionsWidth;
       }
@@ -102,8 +106,11 @@ $actionsWidth: 32px * 2;
         }
       }
 
-      &:hover .actions {
-        left: -$actionsWidth;
+      &.popupVisible,
+      &:hover {
+        .actions {
+          left: -$actionsWidth;
+        }
       }
     }
 

src/components/Inbox/Message.tsx

@@ -29,10 +29,6 @@ const Message = (props: Props) => {
   const [isPopupVisible, setIsPopupVisible] = createSignal<boolean>(false)
   const [selectedAction, setSelectedAction] = createSignal<string>()
 
-  const handleMouseLeave = () => {
-    if (isPopupVisible()) setIsPopupVisible(false)
-  }
-
   return (
     <div class={clsx(styles.Message, isOwn && styles.own)}>
       <Show when={!isOwn}>
@@ -41,14 +37,13 @@ const Message = (props: Props) => {
           <div class={styles.name}>{user.name}</div>
         </div>
       </Show>
-      <div class={styles.body} onMouseLeave={handleMouseLeave}>
+      <div class={clsx(styles.body, { [styles.popupVisible]: isPopupVisible() })}>
         <div class={styles.text}>
           <div class={styles.actions}>
             <div onClick={props.replyClick}>
               <Icon name="chat-reply" class={styles.reply} />
             </div>
             <MessageActionsPopup
-              forceHide={!isPopupVisible()}
               actionSelect={(selectedAction) => setSelectedAction(selectedAction)}
               onVisibilityChange={(isVisible) => setIsPopupVisible(isVisible)}
               trigger={<Icon name="menu" />}

src/components/Inbox/MessageActionsPopup.tsx

@@ -3,11 +3,13 @@ import type { PopupProps } from '../_shared/Popup'
 import { Popup } from '../_shared/Popup'
 import { t } from '../../utils/intl'
 
+export type MessageActionType = 'reply' | 'copy' | 'pin' | 'forward' | 'select' | 'delete'
+
 type MessageActionsPopup = {
   actionSelect?: (selectedAction) => void
 } & Omit<PopupProps, 'children'>
 
-const actions = [
+const actions: { name: string; action: MessageActionType }[] = [
   { name: t('Reply'), action: 'reply' },
   { name: t('Copy'), action: 'copy' },
   { name: t('Pin'), action: 'pin' },
@@ -17,7 +19,8 @@ const actions = [
 ]
 
 export const MessageActionsPopup = (props: MessageActionsPopup) => {
-  const [selectedAction, setSelectedAction] = createSignal<string>()
+  const [selectedAction, setSelectedAction] = createSignal<MessageActionType | null>(null)
+
   createEffect(() => {
     if (props.actionSelect) props.actionSelect(selectedAction())
   })
@@ -25,7 +28,14 @@ export const MessageActionsPopup = (props: MessageActionsPopup) => {
     <Popup {...props} variant="tiny">
       <ul class="nodash">
         <For each={actions}>
-          {(item) => <li onClick={() => setSelectedAction(item.action)}>{item.name}</li>}
+          {(item) => (
+            <li
+              style={item.action === 'delete' && { color: 'red' }}
+              onClick={() => setSelectedAction(item.action)}
+            >
+              {item.name}
+            </li>
+          )}
         </For>
       </ul>
     </Popup>

src/components/_shared/Popup/Popup.tsx

@@ -13,7 +13,6 @@ export type PopupProps = {
   onVisibilityChange?: (isVisible) => void
   horizontalAnchor?: HorizontalAnchor
   variant?: 'bordered' | 'tiny'
-  forceHide?: boolean
 }
 
 export const Popup = (props: PopupProps) => {
@@ -34,9 +33,6 @@ export const Popup = (props: PopupProps) => {
     handler: () => setIsVisible(false)
   })
 
-  createEffect(() => {
-    if (props.forceHide) setIsVisible(false)
-  })
   const toggle = () => setIsVisible((oldVisible) => !oldVisible)
 
   return (