Skip to content

Commit 2cba231

Browse files
Yashraj7890Yashraj7890
committed
modified_tooltips
1 parent 6fb23d7 commit 2cba231

File tree

5 files changed

+96
-68
lines changed

5 files changed

+96
-68
lines changed

‎packages/react/src/components/ChatHeader/ChatHeader.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -354,7 +354,7 @@ const ChatHeader = ({
354354
<Menu options={menuOptions} />
355355
) : (
356356
<>
357-
<Tooltip text="Maximize" position="bottom">
357+
<Tooltip text="Maximize" position="bottom" X="-25%" Y="30%">
358358
<ActionButton
359359
onClick={() => {
360360
setFullScreen((prev) => !prev);

‎packages/react/src/components/ChatInput/ChatInputFormattingToolbar.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -111,7 +111,7 @@ const ChatInputFormattingToolbar = ({ messageRef, inputRef }) => {
111111
</>
112112
)}
113113
{formatter.map((item, index) => (
114-
<Tooltip text={item.name} position="top" key={index}>
114+
<Tooltip text={item.name} position="top" key={index} X="-17%">
115115
<ActionButton
116116
square
117117
disabled={isRecordingMessage}
@@ -128,10 +128,10 @@ const ChatInputFormattingToolbar = ({ messageRef, inputRef }) => {
128128
</ActionButton>
129129
</Tooltip>
130130
))}
131-
<Tooltip text="Audio Message" position="top">
131+
<Tooltip text="Audio Message" position="top" X="-35%">
132132
<AudioMessageRecorder />
133133
</Tooltip>
134-
<Tooltip text="Video Message" position="top">
134+
<Tooltip text="Video Message" position="top" X="-35%">
135135
<VideoMessageRecorder />
136136
</Tooltip>
137137
<ActionButton

‎packages/react/src/components/Menu/Menu.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -84,7 +84,7 @@ const Menu = ({
8484
className={appendClassNames('ec-menu-wrapper', wrapperClasses)}
8585
style={wrapperStyles}
8686
>
87-
<Tooltip text="Options" position="bottom">
87+
<Tooltip text="Options" position="bottom" X="-25%" Y="30%">
8888
{' '}
8989
<ActionButton ghost icon="kebab" onClick={() => setOpen(!isOpen)} />
9090
</Tooltip>

‎packages/react/src/components/Message/MessageToolbox.js

Lines changed: 61 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import { Modal } from '../Modal';
1010
import { Icon } from '../Icon';
1111
import { Button } from '../Button';
1212
import { parseEmoji } from '../../lib/emoji';
13+
import { Tooltip } from '../Tooltip';
1314

1415
const MessageToolboxWrapperCss = css`
1516
display: none;
@@ -88,30 +89,36 @@ export const MessageToolbox = ({
8889
{...props}
8990
>
9091
{!isThreadMessage ? (
92+
<Tooltip text="Reply" position="top" X="-28%" Y="-64%">
93+
<ActionButton
94+
ghost
95+
size="small"
96+
icon="thread"
97+
onClick={handleOpenThread(message)}
98+
/>
99+
</Tooltip>
100+
) : null}
101+
<Tooltip text="Star" position="top" X="-26%" Y="-64%">
91102
<ActionButton
92103
ghost
93104
size="small"
94-
icon="thread"
95-
onClick={handleOpenThread(message)}
105+
icon={`${
106+
message.starred &&
107+
message.starred.find((u) => u._id === authenticatedUserId)
108+
? 'star-filled'
109+
: 'star'
110+
}`}
111+
onClick={() => handleStarMessage(message)}
96112
/>
97-
) : null}
98-
<ActionButton
99-
ghost
100-
size="small"
101-
icon={`${
102-
message.starred &&
103-
message.starred.find((u) => u._id === authenticatedUserId)
104-
? 'star-filled'
105-
: 'star'
106-
}`}
107-
onClick={() => handleStarMessage(message)}
108-
/>
109-
<ActionButton
110-
ghost
111-
size="small"
112-
icon="emoji"
113-
onClick={() => setEmojiOpen(true)}
114-
/>
113+
</Tooltip>
114+
<Tooltip text="Emoji" position="top" X="-26%" Y="-64%">
115+
<ActionButton
116+
ghost
117+
size="small"
118+
icon="emoji"
119+
onClick={() => setEmojiOpen(true)}
120+
/>
121+
</Tooltip>
115122
<Popup
116123
modal
117124
open={isEmojiOpen}
@@ -127,38 +134,46 @@ export const MessageToolbox = ({
127134
/>
128135
</Popup>
129136
{!isThreadMessage && (
130-
<ActionButton
131-
ghost
132-
size="small"
133-
icon={`${message.pinned ? 'pin-filled' : 'pin'}`}
134-
onClick={() => handlePinMessage(message)}
135-
/>
136-
)}
137-
{message.u._id === authenticatedUserId && (
138-
<>
139-
<ActionButton
140-
ghost={!isEditing}
141-
color={isEditing ? 'secondary' : 'default'}
142-
size="small"
143-
icon="edit"
144-
onClick={() => handleEditMessage(message)}
145-
/>
137+
<Tooltip text="Pin" position="top" X="-26%" Y="-64%">
146138
<ActionButton
147139
ghost
148140
size="small"
149-
icon="trash"
150-
color="error"
151-
onClick={() => handleClickDelete(message)}
141+
icon={`${message.pinned ? 'pin-filled' : 'pin'}`}
142+
onClick={() => handlePinMessage(message)}
152143
/>
144+
</Tooltip>
145+
)}
146+
{message.u._id === authenticatedUserId && (
147+
<>
148+
<Tooltip text="Edit" position="top" X="-26%" Y="-64%">
149+
<ActionButton
150+
ghost={!isEditing}
151+
color={isEditing ? 'secondary' : 'default'}
152+
size="small"
153+
icon="edit"
154+
onClick={() => handleEditMessage(message)}
155+
/>
156+
</Tooltip>
157+
<Tooltip text="Delete" position="top" X="-26%" Y="-64%">
158+
<ActionButton
159+
ghost
160+
size="small"
161+
icon="trash"
162+
color="error"
163+
onClick={() => handleClickDelete(message)}
164+
/>
165+
</Tooltip>
153166
</>
154167
)}
155-
<ActionButton
156-
ghost
157-
size="small"
158-
icon="report"
159-
color="error"
160-
onClick={() => handlerReportMessage(message)}
161-
/>
168+
<Tooltip text="Report" position="top" X="-26%" Y="-64%">
169+
<ActionButton
170+
ghost
171+
size="small"
172+
icon="report"
173+
color="error"
174+
onClick={() => handlerReportMessage(message)}
175+
/>
176+
</Tooltip>
162177
</Box>
163178
</Box>
164179
{showDeleteModal && (

‎packages/react/src/components/Tooltip/Tooltip.js

Lines changed: 30 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,17 @@
11
import React, { useState } from 'react';
22

3-
const Tooltip = ({ children, text, position }) => {
3+
const Tooltip = ({ children, text, position, X, Y }) => {
44
const [isTooltipVisible, setTooltipVisible] = useState(false);
5-
5+
let touchTimer;
66
const tooltipStyle = {
77
position: 'absolute',
8-
left: '64%',
9-
transform: 'translateX(-50%) ',
10-
backgroundColor: 'rgba(97, 97, 97, 1)',
8+
backgroundColor: 'black',
119
color: 'white',
12-
padding: '4px',
10+
padding: '4.5px',
1311
borderRadius: '3px',
14-
boxShadow: '0 2px 10px rgba(0, 0, 0, 0.2)',
15-
zIndex: 9999,
16-
fontSize: '12.5px',
12+
boxShadow: '0 2px 10px rgba(0, 0, 0, 0.4)',
13+
zIndex: 999,
14+
fontSize: '13.8px',
1715
whiteSpace: 'nowrap',
1816
fontFamily: 'sans-serif',
1917
};
@@ -25,35 +23,50 @@ const Tooltip = ({ children, text, position }) => {
2523
marginLeft: '-5px',
2624
borderWidth: '6px',
2725
borderStyle: 'solid',
28-
borderColor: 'rgba(97, 97, 97, 1) transparent transparent transparent',
26+
borderColor: 'black transparent transparent transparent',
27+
zIndex: 999,
2928
};
3029

31-
// Add more positions according to your needs and modify tooltipStyle and tooltipArrowStyle accordingly
30+
const Adjust = (A, B) => {
31+
let AB = '';
32+
if (A != null) {
33+
AB = `${AB}translateX(${A})`;
34+
tooltipStyle.transform = AB;
35+
}
36+
if (B != null) {
37+
AB = `${AB}translateY(${B})`;
38+
tooltipStyle.transform = AB;
39+
}
40+
};
3241

42+
// Add more positions according to your needs and modify tooltipStyle and tooltipArrowStyle accordingly
3343
if (position === 'top') {
3444
tooltipStyle.top = '-100%';
3545
tooltipArrowStyle.top = '100%';
36-
tooltipArrowStyle.transform = 'translateX(-50%)';
46+
Adjust(X, Y);
3747
} else if (position === 'bottom') {
3848
tooltipStyle.top = '100%';
49+
tooltipStyle.transform = 'translateY(45%) translateX(-55%)';
3950
tooltipArrowStyle.bottom = '100%';
40-
tooltipArrowStyle.transform = 'translateX(-50%) rotate(180deg)';
51+
tooltipArrowStyle.transform = 'rotate(180deg)';
52+
Adjust(X, Y);
4153
}
4254

4355
const handleMouseEnter = () => {
44-
setTooltipVisible(true);
56+
touchTimer = setTimeout(() => {
57+
setTooltipVisible(true);
58+
}, 300);
4559
};
4660

4761
const handleMouseLeave = () => {
62+
clearTimeout(touchTimer);
4863
setTooltipVisible(false);
4964
};
5065

51-
let touchTimer;
52-
5366
const handleTouchStart = () => {
5467
touchTimer = setTimeout(() => {
5568
setTooltipVisible(true);
56-
}, 500);
69+
}, 400);
5770
};
5871

5972
const handleTouchEnd = () => {

0 commit comments

Comments
 (0)