From 333b8cae05b33bb695c633cf7f9921968c422089 Mon Sep 17 00:00:00 2001 From: zerosoul Date: Thu, 7 Apr 2022 09:39:30 +0800 Subject: [PATCH] enhance: tooltips --- src/common/component/Message/Reaction.js | 19 ++++---- src/common/component/Search.js | 57 +++++++++++++----------- src/common/component/Tooltip.js | 48 +++++++++++++++----- src/routes/chat/ChannelChat/index.js | 19 +++++--- src/routes/chat/ChannelList/NavItem.js | 5 ++- src/routes/chat/index.js | 25 ++++++----- src/routes/chat/styled.js | 4 ++ src/routes/home/Menu.js | 2 +- 8 files changed, 115 insertions(+), 64 deletions(-) diff --git a/src/common/component/Message/Reaction.js b/src/common/component/Message/Reaction.js index 054979d2..77a536bc 100644 --- a/src/common/component/Message/Reaction.js +++ b/src/common/component/Message/Reaction.js @@ -5,6 +5,7 @@ import Tippy from "@tippyjs/react"; import { hideAll } from "tippy.js"; import Emoji from "../Emoji"; import EmojiPicker from "./EmojiPicker"; +import Tooltip from "../Tooltip"; import { useReactMessageMutation } from "../../../app/services/message"; // import { Emojis } from "../../../app/config"; import addEmojiIcon from "../../../assets/icons/add.emoji.svg?url"; @@ -99,14 +100,16 @@ export default function Reaction({ mid, reactions = null }) { ) : null; })} - } - > - - + + } + > + + + ); } diff --git a/src/common/component/Search.js b/src/common/component/Search.js index 1826e5a8..b3345fce 100644 --- a/src/common/component/Search.js +++ b/src/common/component/Search.js @@ -7,6 +7,7 @@ import { hideAll } from "tippy.js"; import searchIcon from "../../assets/icons/search.svg?url"; import addIcon from "../../assets/icons/add.svg?url"; import mailIcon from "../../assets/icons/mail.svg?url"; +import Tooltip from "../component/Tooltip"; import ChannelIcon from "./ChannelIcon"; import ChannelModal from "./ChannelModal"; import ContactsModal from "./ContactsModal"; @@ -100,37 +101,39 @@ export default function Search() { - - {currentUser?.is_admin && ( + + + {currentUser?.is_admin && ( +
  • + + New Channel +
    • + )}
  • - - New Channel + + New Private Channel
    • - )} -
  • - - New Private Channel -
    • -
  • - icon mail - New Message -
    • - - } - > - add icon -     +
  • + icon mail + New Message +
    • + + } + > + add icon +     + ); } diff --git a/src/common/component/Tooltip.js b/src/common/component/Tooltip.js index bc7a8cc6..d02e4cf5 100644 --- a/src/common/component/Tooltip.js +++ b/src/common/component/Tooltip.js @@ -2,23 +2,49 @@ import Tippy from "@tippyjs/react"; import styled from "styled-components"; const StyledTip = styled.div` - background-color: #000; - border-radius: 5px; - padding: 5px; - font-size: 10px; - color: #fff; + position: relative; + background: #fff; + padding: 8px 12px; + font-weight: 500; + font-size: 12px; + line-height: 18px; + color: #1d2939; + border-radius: var(--br); + box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), + 0px 4px 6px -2px rgba(16, 24, 40, 0.03); + &::after { + background-color: inherit; + position: absolute; + content: ""; + width: 12px; + height: 12px; + border-radius: 1px; + transform-origin: center; + } + &.right::after { + left: 0; + top: 50%; + transform: translate3d(-50%, -50%, 0) rotate(45deg); + } + &.top::after { + left: 50%; + bottom: 0; + transform: translate3d(-50%, 50%, 0) rotate(45deg); + } + &.bottom::after { + top: 0; + left: 50%; + transform: translate3d(-50%, -50%, 0) rotate(45deg); + } `; -export default function Tooltip({ - tip = "", - placement = "right-start", - children, -}) { +export default function Tooltip({ tip = "", placement = "right", children }) { return ( {tip}} + content={{tip}} > {children} diff --git a/src/routes/chat/ChannelChat/index.js b/src/routes/chat/ChannelChat/index.js index f31839ec..ca993df2 100644 --- a/src/routes/chat/ChannelChat/index.js +++ b/src/routes/chat/ChannelChat/index.js @@ -4,6 +4,7 @@ import { useSelector } from "react-redux"; import { useReadMessageMutation } from "../../../app/services/message"; import useChatScroll from "../../../common/hook/useChatScroll"; import ChannelIcon from "../../../common/component/ChannelIcon"; +import Tooltip from "../../../common/component/Tooltip"; import Send from "../../../common/component/Send"; import Contact from "../../../common/component/Contact"; import Layout from "../Layout"; @@ -21,7 +22,6 @@ import { import AddMemberModal from "./AddMemberModal"; export default function ChannelChat({ cid = "", dropFiles = [] }) { - // const containerRef = useRef(null); const [updateReadIndex] = useReadMessageMutation(); const updateReadDebounced = useDebounce(updateReadIndex, 300); const [membersVisible, setMembersVisible] = useState(true); @@ -54,6 +54,7 @@ export default function ChannelChat({ cid = "", dropFiles = [] }) { const toggleAddVisible = () => { setAddMemberModalVisible((prev) => !prev); }; + const { name, description, is_public, members = [] } = data; const memberIds = members.length == 0 ? userIds : members; console.log("channel message list", msgIds); @@ -81,13 +82,19 @@ export default function ChannelChat({ cid = "", dropFiles = [] }) { @@ -103,7 +110,7 @@ export default function ChannelChat({ cid = "", dropFiles = [] }) { )} {memberIds.map((uid) => { - return ; + return ; })} @@ -128,11 +135,13 @@ export default function ChannelChat({ cid = "", dropFiles = [] }) { .map((mid, idx) => { const curr = messageData[mid]; if (!curr) return null; + const isFirst = idx == 0; const prev = idx == 0 ? null : messageData[msgIds[idx - 1]]; const read = curr?.from_uid == loginUid || mid <= readIndex; return renderMessageFragment({ updateReadIndex: updateReadDebounced, read, + isFirst, prev, curr, contextId: cid, diff --git a/src/routes/chat/ChannelList/NavItem.js b/src/routes/chat/ChannelList/NavItem.js index 6cc9f4f6..a9b29f1f 100644 --- a/src/routes/chat/ChannelList/NavItem.js +++ b/src/routes/chat/ChannelList/NavItem.js @@ -5,6 +5,7 @@ import { useDispatch, useSelector } from "react-redux"; import Tippy from "@tippyjs/react"; import useContextMenu from "../../../common/hook/useContextMenu"; import ContextMenu from "../../../common/component/ContextMenu"; +import Tooltip from "../../../common/component/Tooltip"; // import { useDebounce} from "rooks"; import { useReadMessageMutation } from "../../../app/services/message"; @@ -118,7 +119,9 @@ const NavItem = ({ id, setFiles, toggleRemoveConfirm }) => { {name}
    - + + + {unreads > 0 && ( 99 ? "dot" : ""}`}> {unreads > 99 ? null : unreads} diff --git a/src/routes/chat/index.js b/src/routes/chat/index.js index 4337eaa2..e1a34b8d 100644 --- a/src/routes/chat/index.js +++ b/src/routes/chat/index.js @@ -3,11 +3,12 @@ import { useState } from "react"; import { useParams } from "react-router-dom"; import { useSelector } from "react-redux"; -import { MdAdd } from "react-icons/md"; import { AiOutlineCaretDown } from "react-icons/ai"; import StyledWrapper from "./styled"; +import AddIcon from "../../assets/icons/add.svg"; import Search from "../../common/component/Search"; +import Tooltip from "../../common/component/Tooltip"; // import Contact from "../../common/component/Contact"; import CurrentUser from "../../common/component/CurrentUser"; import ChannelChat from "./ChannelChat"; @@ -63,11 +64,12 @@ export default function ChatPage() { /> CHANNELS - + + +