From 35fde0736ce198b50bdb1b218bf81713cc18e783 Mon Sep 17 00:00:00 2001 From: rnjshippo Date: Tue, 15 Dec 2020 22:15:26 +0900 Subject: [PATCH 1/3] =?UTF-8?q?[feat]=20=EC=9D=B4=EB=AA=A8=EC=A7=80=20?= =?UTF-8?q?=EA=B4=80=EB=A0=A8=20=EB=94=94=EC=9E=90=EC=9D=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../common/EmojiListModal/EmojiListModal.tsx | 25 ++++--- .../EmojiBox/EmojiBoxItem/EmojiBoxItem.tsx | 68 +++++++++++-------- .../TooltipPopup/TooltipPopup.tsx | 43 ++++++++++++ 3 files changed, 100 insertions(+), 36 deletions(-) create mode 100644 client/src/components/common/ThreadItem/EmojiBox/EmojiBoxItem/TooltipPopup/TooltipPopup.tsx diff --git a/client/src/components/common/EmojiListModal/EmojiListModal.tsx b/client/src/components/common/EmojiListModal/EmojiListModal.tsx index 8de1551c..255e5228 100644 --- a/client/src/components/common/EmojiListModal/EmojiListModal.tsx +++ b/client/src/components/common/EmojiListModal/EmojiListModal.tsx @@ -1,19 +1,31 @@ import React from 'react'; import styled from 'styled-components'; import { Thread } from '@/types/thread'; -import { flex } from '@/styles/mixin'; import { useChannelState, useEmojiState, useUserState } from '@/hooks'; import { useDispatch } from 'react-redux'; import { sendMessageRequest } from '@/store/modules/socket.slice'; import { SOCKET_MESSAGE_TYPE } from '@/utils/constants'; const Container = styled.div` - ${flex('center', 'flex-start', 'row')}; + display: grid; + grid-template-columns: repeat(6, 1fr); +`; + +const EmojiBox = styled.div` + cursor: pointer; + transition: 0.3; + &:hover { + transition: 0.3; + background-color: #b5e0fe; + } + border-radius: 5px; `; const Emoji = styled.img` width: 22px; height: 22px; + margin: 0.2rem; + border-radius: 5px; user-select: none; cursor: pointer; `; @@ -46,12 +58,9 @@ const EmojiListModal: React.FC = ({ thread }: EmojiListModa {emojiList?.map((emoji) => { return ( - clickEmojiHandler(Number(emoji.id))} - /> + + clickEmojiHandler(Number(emoji.id))} /> + ); })} diff --git a/client/src/components/common/ThreadItem/EmojiBox/EmojiBoxItem/EmojiBoxItem.tsx b/client/src/components/common/ThreadItem/EmojiBox/EmojiBoxItem/EmojiBoxItem.tsx index 38f039bc..abf3c0e5 100644 --- a/client/src/components/common/ThreadItem/EmojiBox/EmojiBoxItem/EmojiBoxItem.tsx +++ b/client/src/components/common/ThreadItem/EmojiBox/EmojiBoxItem/EmojiBoxItem.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useState } from 'react'; +import React, { useEffect, useRef, useState } from 'react'; import styled from 'styled-components'; import { EmojiOfThread, Thread } from '@/types/thread'; import { flex } from '@/styles/mixin'; @@ -6,7 +6,7 @@ import { useChannelState, useEmojiState, useUserState } from '@/hooks'; import { useDispatch } from 'react-redux'; import { SOCKET_MESSAGE_TYPE } from '@/utils/constants'; import { sendMessageRequest } from '@/store/modules/socket.slice'; -import { JoinedUser } from '@/types'; +import TooltipPopup from './TooltipPopup/TooltipPopup'; const Container = styled.div` background-color: ${(props) => props.color}; @@ -18,26 +18,31 @@ const Container = styled.div` border-radius: 999em; margin-right: 0.2rem; `; -// EFEFEF const EmojiToolTip = styled.div` + width: 12rem; + ${flex('center', 'center', 'column')}; + padding: 0.8rem; background-color: black; - /* color: #505050; */ color: white; border: 1px solid black; - visibility: hidden; - position: absolute; - z-index: 1; - bottom: 2rem; - width: 10rem; - ${Container}:hover & { - visibility: visible; - } + border-radius: 8px; `; const EmojiItem = styled.div``; +const TooltipImg = styled.img` + width: 36px; + height: 36px; + margin-bottom: 0.4rem; + background-color: white; + border-radius: 8px; + padding: 4px; +`; -const ToolTipDescribe = styled.div``; +const ToolTipDescribe = styled.div` + font-size: 0.9rem; + word-break: break-all; +`; interface EmojiBoxItemProps { emoji: EmojiOfThread; @@ -83,7 +88,7 @@ const EmojiBoxItem: React.FC = ({ emoji, thread }: EmojiBoxIt }; const getToolTipDescribe = (emojiId: number) => { - return `reacted width ${getEmojiName(emojiId)}`; + return `${getEmojiName(emojiId)}`; }; const getEmojiUrl = (emojiId: number) => { @@ -110,21 +115,28 @@ const EmojiBoxItem: React.FC = ({ emoji, thread }: EmojiBoxIt return setbackgroundColor('#EFEFEF'); }; + const ref = useRef(null); + const [tooltipVisible, setTooltipVisible] = useState(false); + return ( - - - emoji url - - {getUserListNameInEmoji(emoji)} - {getToolTipDescribe(emoji.id)} - - + setTooltipVisible(true)} + onMouseLeave={() => setTooltipVisible(false)} + > + {ref.current && tooltipVisible && ( + + + + + {getUserListNameInEmoji(emoji)} + {`reacted with :${getToolTipDescribe(emoji.id)}:`} + + + + )} ` + position: fixed; + top: ${(props) => props.top ?? 0}; + left: ${(props) => props.left ?? 0}; + border-radius: 5px; + outline: 0; + z-index: 15; + transform: translateY(-100%); +`; + +interface TooltipProps { + anchorEl: HTMLElement; + top?: number; + left?: number; +} + +const TooltipPopup: FC> = ({ + children, + anchorEl, + top = 0, + left = 0, +}: PropsWithChildren) => { + const parentBox = anchorEl.getBoundingClientRect(); + + const TOP = top + parentBox.top; + const LEFT = left + parentBox.left; + + return ( + + {children} + + ); +}; + +export default TooltipPopup; From c1b25a705d9c0e6d8b1f57dff3720593230f1e56 Mon Sep 17 00:00:00 2001 From: rnjshippo Date: Tue, 15 Dec 2020 22:49:56 +0900 Subject: [PATCH 2/3] =?UTF-8?q?[feat]=20=EC=9D=B4=EB=AA=A8=EC=A7=80=20?= =?UTF-8?q?=EB=94=94=EC=9E=90=EC=9D=B8=20=EB=B0=8F=20=EB=B2=84=EA=B7=B8=20?= =?UTF-8?q?=ED=95=B4=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../EmojiBox/EmojiBoxItem/EmojiBoxItem.tsx | 51 +++++++++++-------- 1 file changed, 29 insertions(+), 22 deletions(-) diff --git a/client/src/components/common/ThreadItem/EmojiBox/EmojiBoxItem/EmojiBoxItem.tsx b/client/src/components/common/ThreadItem/EmojiBox/EmojiBoxItem/EmojiBoxItem.tsx index abf3c0e5..624a5253 100644 --- a/client/src/components/common/ThreadItem/EmojiBox/EmojiBoxItem/EmojiBoxItem.tsx +++ b/client/src/components/common/ThreadItem/EmojiBox/EmojiBoxItem/EmojiBoxItem.tsx @@ -8,13 +8,18 @@ import { SOCKET_MESSAGE_TYPE } from '@/utils/constants'; import { sendMessageRequest } from '@/store/modules/socket.slice'; import TooltipPopup from './TooltipPopup/TooltipPopup'; -const Container = styled.div` - background-color: ${(props) => props.color}; - box-shadow: inset 0 0 0 1px rgba(29, 155, 209); - ${flex('center', 'flex-start', 'row')}; +interface ContainerProps { + isMine: boolean; +} + +const Container = styled.div` + background-color: ${(props) => (props.isMine ? '#E2EFF4' : '#EFEFEF')}; + box-shadow: inset 0 0 0 1px ${(props) => (props.isMine ? '#1D9BD1' : '#EFEFEF')}; + ${flex()}; position: relative; cursor: pointer; - padding: 0.15rem 0.4rem; + width: 2.6rem; + height: 1.6rem; border-radius: 999em; margin-right: 0.2rem; `; @@ -29,7 +34,9 @@ const EmojiToolTip = styled.div` border-radius: 8px; `; -const EmojiItem = styled.div``; +const EmojiItem = styled.div` + ${flex()}; +`; const TooltipImg = styled.img` width: 36px; height: 36px; @@ -44,6 +51,13 @@ const ToolTipDescribe = styled.div` word-break: break-all; `; +const EmojiCount = styled.span` + font-size: 0.8rem; + font-weight: 800; + margin: 0 3px; + color: ${(props) => props.theme.color.blue1}; +`; + interface EmojiBoxItemProps { emoji: EmojiOfThread; thread: Thread; @@ -54,13 +68,15 @@ const EmojiBoxItem: React.FC = ({ emoji, thread }: EmojiBoxIt const { users, current } = useChannelState(); const { emojiList } = useEmojiState(); const dispatch = useDispatch(); - const [backgroundColor, setbackgroundColor] = useState('#EFEFEF'); + const [isMine, setIsMine] = useState(false); useEffect(() => { if (userInfo && emoji.userList.includes(userInfo.id)) { - setbackgroundColor('#E2EFF4'); + setIsMine(true); + } else { + setIsMine(false); } - }, []); + }, [emoji]); const getUserListNameInEmoji = (emojiProp: EmojiOfThread) => { return emojiProp.userList.reduce((acc, userIdInEmojiOfThread, idx, arr) => { @@ -109,10 +125,7 @@ const EmojiBoxItem: React.FC = ({ emoji, thread }: EmojiBoxIt }), ); } - if (backgroundColor === '#EFEFEF') { - return setbackgroundColor('#E2EFF4'); - } - return setbackgroundColor('#EFEFEF'); + setIsMine((mine) => !mine); }; const ref = useRef(null); @@ -120,7 +133,7 @@ const EmojiBoxItem: React.FC = ({ emoji, thread }: EmojiBoxIt return ( setTooltipVisible(true)} @@ -138,14 +151,8 @@ const EmojiBoxItem: React.FC = ({ emoji, thread }: EmojiBoxIt )} - emoji url - {emoji.userList && {emoji.userList.length}} + emoji url + {emoji.userList && {emoji.userList.length}} ); From 2fae409cf85656003ea5dcce58e23ba0fa267315 Mon Sep 17 00:00:00 2001 From: rnjshippo Date: Tue, 15 Dec 2020 22:50:55 +0900 Subject: [PATCH 3/3] =?UTF-8?q?[fix]=20=EB=A7=A5=EC=97=90=EC=84=9C=20keyDo?= =?UTF-8?q?wn=20=EC=98=A4=EB=A5=98=EB=82=98=EC=84=9C=20keyPress=EB=A1=9C?= =?UTF-8?q?=20=EB=B0=94=EA=BF=88?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/src/components/common/ThreadInputBox/ThreadInputBox.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/src/components/common/ThreadInputBox/ThreadInputBox.tsx b/client/src/components/common/ThreadInputBox/ThreadInputBox.tsx index a83a0c88..12e78fe3 100644 --- a/client/src/components/common/ThreadInputBox/ThreadInputBox.tsx +++ b/client/src/components/common/ThreadInputBox/ThreadInputBox.tsx @@ -202,7 +202,7 @@ const ThreadInputBox: React.FC = ({ inputBoxType }: ThreadI