modified_tooltips

RocketChat · Feb 19, 2024 · 2cba231 · 2cba231
1 parent 6fb23d7
commit 2cba231
Show file tree

Hide file tree

Showing 5 changed files with 96 additions and 68 deletions.
diff --git a/packages/react/src/components/ChatHeader/ChatHeader.js b/packages/react/src/components/ChatHeader/ChatHeader.js
@@ -354,7 +354,7 @@ const ChatHeader = ({
             <Menu options={menuOptions} />
           ) : (
             <>
-              <Tooltip text="Maximize" position="bottom">
+              <Tooltip text="Maximize" position="bottom" X="-25%" Y="30%">
                 <ActionButton
                   onClick={() => {
                     setFullScreen((prev) => !prev);

diff --git a/packages/react/src/components/ChatInput/ChatInputFormattingToolbar.js b/packages/react/src/components/ChatInput/ChatInputFormattingToolbar.js
@@ -111,7 +111,7 @@ const ChatInputFormattingToolbar = ({ messageRef, inputRef }) => {
         </>
       )}
       {formatter.map((item, index) => (
-        <Tooltip text={item.name} position="top" key={index}>
+        <Tooltip text={item.name} position="top" key={index} X="-17%">
           <ActionButton
             square
             disabled={isRecordingMessage}
@@ -128,10 +128,10 @@ const ChatInputFormattingToolbar = ({ messageRef, inputRef }) => {
           </ActionButton>
         </Tooltip>
       ))}
-      <Tooltip text="Audio Message" position="top">
+      <Tooltip text="Audio Message" position="top" X="-35%">
         <AudioMessageRecorder />
       </Tooltip>
-      <Tooltip text="Video Message" position="top">
+      <Tooltip text="Video Message" position="top" X="-35%">
         <VideoMessageRecorder />
       </Tooltip>
       <ActionButton

diff --git a/packages/react/src/components/Menu/Menu.js b/packages/react/src/components/Menu/Menu.js
@@ -84,7 +84,7 @@ const Menu = ({
       className={appendClassNames('ec-menu-wrapper', wrapperClasses)}
       style={wrapperStyles}
     >
-      <Tooltip text="Options" position="bottom">
+      <Tooltip text="Options" position="bottom" X="-25%" Y="30%">
         {' '}
         <ActionButton ghost icon="kebab" onClick={() => setOpen(!isOpen)} />
       </Tooltip>

diff --git a/packages/react/src/components/Message/MessageToolbox.js b/packages/react/src/components/Message/MessageToolbox.js
@@ -10,6 +10,7 @@ import { Modal } from '../Modal';
 import { Icon } from '../Icon';
 import { Button } from '../Button';
 import { parseEmoji } from '../../lib/emoji';
+import { Tooltip } from '../Tooltip';
 
 const MessageToolboxWrapperCss = css`
   display: none;
@@ -88,30 +89,36 @@ export const MessageToolbox = ({
           {...props}
         >
           {!isThreadMessage ? (
+            <Tooltip text="Reply" position="top" X="-28%" Y="-64%">
+              <ActionButton
+                ghost
+                size="small"
+                icon="thread"
+                onClick={handleOpenThread(message)}
+              />
+            </Tooltip>
+          ) : null}
+          <Tooltip text="Star" position="top" X="-26%" Y="-64%">
             <ActionButton
               ghost
               size="small"
-              icon="thread"
-              onClick={handleOpenThread(message)}
+              icon={`${
+                message.starred &&
+                message.starred.find((u) => u._id === authenticatedUserId)
+                  ? 'star-filled'
+                  : 'star'
+              }`}
+              onClick={() => handleStarMessage(message)}
             />
-          ) : null}
-          <ActionButton
-            ghost
-            size="small"
-            icon={`${
-              message.starred &&
-              message.starred.find((u) => u._id === authenticatedUserId)
-                ? 'star-filled'
-                : 'star'
-            }`}
-            onClick={() => handleStarMessage(message)}
-          />
-          <ActionButton
-            ghost
-            size="small"
-            icon="emoji"
-            onClick={() => setEmojiOpen(true)}
-          />
+          </Tooltip>
+          <Tooltip text="Emoji" position="top" X="-26%" Y="-64%">
+            <ActionButton
+              ghost
+              size="small"
+              icon="emoji"
+              onClick={() => setEmojiOpen(true)}
+            />
+          </Tooltip>
           <Popup
             modal
             open={isEmojiOpen}
@@ -127,38 +134,46 @@ export const MessageToolbox = ({
             />
           </Popup>
           {!isThreadMessage && (
-            <ActionButton
-              ghost
-              size="small"
-              icon={`${message.pinned ? 'pin-filled' : 'pin'}`}
-              onClick={() => handlePinMessage(message)}
-            />
-          )}
-          {message.u._id === authenticatedUserId && (
-            <>
-              <ActionButton
-                ghost={!isEditing}
-                color={isEditing ? 'secondary' : 'default'}
-                size="small"
-                icon="edit"
-                onClick={() => handleEditMessage(message)}
-              />
+            <Tooltip text="Pin" position="top" X="-26%" Y="-64%">
               <ActionButton
                 ghost
                 size="small"
-                icon="trash"
-                color="error"
-                onClick={() => handleClickDelete(message)}
+                icon={`${message.pinned ? 'pin-filled' : 'pin'}`}
+                onClick={() => handlePinMessage(message)}
               />
+            </Tooltip>
+          )}
+          {message.u._id === authenticatedUserId && (
+            <>
+              <Tooltip text="Edit" position="top" X="-26%" Y="-64%">
+                <ActionButton
+                  ghost={!isEditing}
+                  color={isEditing ? 'secondary' : 'default'}
+                  size="small"
+                  icon="edit"
+                  onClick={() => handleEditMessage(message)}
+                />
+              </Tooltip>
+              <Tooltip text="Delete" position="top" X="-26%" Y="-64%">
+                <ActionButton
+                  ghost
+                  size="small"
+                  icon="trash"
+                  color="error"
+                  onClick={() => handleClickDelete(message)}
+                />
+              </Tooltip>
             </>
           )}
-          <ActionButton
-            ghost
-            size="small"
-            icon="report"
-            color="error"
-            onClick={() => handlerReportMessage(message)}
-          />
+          <Tooltip text="Report" position="top" X="-26%" Y="-64%">
+            <ActionButton
+              ghost
+              size="small"
+              icon="report"
+              color="error"
+              onClick={() => handlerReportMessage(message)}
+            />
+          </Tooltip>
         </Box>
       </Box>
       {showDeleteModal && (

diff --git a/packages/react/src/components/Tooltip/Tooltip.js b/packages/react/src/components/Tooltip/Tooltip.js
@@ -1,19 +1,17 @@
 import React, { useState } from 'react';
 
-const Tooltip = ({ children, text, position }) => {
+const Tooltip = ({ children, text, position, X, Y }) => {
   const [isTooltipVisible, setTooltipVisible] = useState(false);
-
+  let touchTimer;
   const tooltipStyle = {
     position: 'absolute',
-    left: '64%',
-    transform: 'translateX(-50%) ',
-    backgroundColor: 'rgba(97, 97, 97, 1)',
+    backgroundColor: 'black',
     color: 'white',
-    padding: '4px',
+    padding: '4.5px',
     borderRadius: '3px',
-    boxShadow: '0 2px 10px rgba(0, 0, 0, 0.2)',
-    zIndex: 9999,
-    fontSize: '12.5px',
+    boxShadow: '0 2px 10px rgba(0, 0, 0, 0.4)',
+    zIndex: 999,
+    fontSize: '13.8px',
     whiteSpace: 'nowrap',
     fontFamily: 'sans-serif',
   };
@@ -25,35 +23,50 @@ const Tooltip = ({ children, text, position }) => {
     marginLeft: '-5px',
     borderWidth: '6px',
     borderStyle: 'solid',
-    borderColor: 'rgba(97, 97, 97, 1) transparent transparent transparent',
+    borderColor: 'black transparent transparent transparent',
+    zIndex: 999,
   };
 
-  // Add more positions according to your needs and modify tooltipStyle and tooltipArrowStyle accordingly
+  const Adjust = (A, B) => {
+    let AB = '';
+    if (A != null) {
+      AB = `${AB}translateX(${A})`;
+      tooltipStyle.transform = AB;
+    }
+    if (B != null) {
+      AB = `${AB}translateY(${B})`;
+      tooltipStyle.transform = AB;
+    }
+  };
 
+  // Add more positions according to your needs and modify tooltipStyle and tooltipArrowStyle accordingly
   if (position === 'top') {
     tooltipStyle.top = '-100%';
     tooltipArrowStyle.top = '100%';
-    tooltipArrowStyle.transform = 'translateX(-50%)';
+    Adjust(X, Y);
   } else if (position === 'bottom') {
     tooltipStyle.top = '100%';
+    tooltipStyle.transform = 'translateY(45%) translateX(-55%)';
     tooltipArrowStyle.bottom = '100%';
-    tooltipArrowStyle.transform = 'translateX(-50%) rotate(180deg)';
+    tooltipArrowStyle.transform = 'rotate(180deg)';
+    Adjust(X, Y);
   }
 
   const handleMouseEnter = () => {
-    setTooltipVisible(true);
+    touchTimer = setTimeout(() => {
+      setTooltipVisible(true);
+    }, 300);
   };
 
   const handleMouseLeave = () => {
+    clearTimeout(touchTimer);
     setTooltipVisible(false);
   };
 
-  let touchTimer;
-
   const handleTouchStart = () => {
     touchTimer = setTimeout(() => {
       setTooltipVisible(true);
-    }, 500);
+    }, 400);
   };
 
   const handleTouchEnd = () => {