enhance: tooltips

2022-04-07 09:39:30 +08:00
parent 064ffbca96
commit 333b8cae05
8 changed files with 115 additions and 64 deletions
@@ -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,6 +100,7 @@ export default function Reaction({ mid, reactions = null }) {
          </span>
        ) : null;
      })}
+      <Tooltip placement="top" tip="Add Reaction">
        <Tippy
          interactive
          placement="right-start"
@@ -107,6 +109,7 @@ export default function Reaction({ mid, reactions = null }) {
        >
          <button className="add"></button>
        </Tippy>
+      </Tooltip>
    </StyledWrapper>
  );
 }
@@ -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,6 +101,7 @@ export default function Search() {
        <img src={searchIcon} />
        <input placeholder="Search..." className="input" />
      </div>
+      <Tooltip tip="More" placement="bottom">
        <Tippy
          interactive
          placement="bottom-end"
@@ -131,6 +133,7 @@ export default function Search() {
        >
          <img src={addIcon} alt="add icon" className="add" />
        </Tippy>
+      </Tooltip>
    </StyledWrapper>
  );
 }
@@ -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 (
    <Tippy
+      offset={[0, 18]}
      duration={0}
      delay={[0, 0]}
      placement={placement}
-      content={<StyledTip>{tip}</StyledTip>}
+      content={<StyledTip className={placement}>{tip}</StyledTip>}
    >
      {children}
    </Tippy>
@@ -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 = [] }) {
            </div>
            <ul className="opts">
              <li className="opt">
+                <Tooltip tip="Notifications" placement="bottom">
                  <img src={alertIcon} alt="opt icon" />
+                </Tooltip>
              </li>
              <li className="opt">
+                <Tooltip tip="Pin" placement="bottom">
                  <img src={pinIcon} alt="opt icon" />
+                </Tooltip>
              </li>
              <li className="opt" onClick={toggleMembersVisible}>
+                <Tooltip tip="Channel Members" placement="bottom">
                  <img src={peopleIcon} alt="opt icon" />
+                </Tooltip>
              </li>
            </ul>
          </StyledHeader>
@@ -103,7 +110,7 @@ export default function ChannelChat({ cid = "", dropFiles = [] }) {
                  </div>
                )}
                {memberIds.map((uid) => {
-                  return <Contact key={uid} uid={uid} popover />;
+                  return <Contact key={uid} uid={uid} dm popover />;
                })}
              </StyledContacts>
            </>
@@ -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,
@@ -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 }) => {
          <span className={`txt ${unreads == 0 ? "read" : ""}`}>{name}</span>
        </div>
        <div className="icons">
+          <Tooltip placement="bottom" tip="Channel Setting">
            <i className="setting" onClick={handleChannelSetting}></i>
+          </Tooltip>
          {unreads > 0 && (
            <i className={`badge ${unreads > 99 ? "dot" : ""}`}>
              {unreads > 99 ? null : unreads}
@@ -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
              </span>
-              <MdAdd
+              <Tooltip tip="New Channel" placement="bottom">
+                <AddIcon
+                  className="add_icon"
                  onClick={toggleChannelModalVisible}
-                size={18}
-                color="#78787C"
                />
+              </Tooltip>
            </h3>
            <nav className="nav">
              <ChannelList setDropFiles={setChannelDropFiles} />
@@ -83,11 +85,12 @@ export default function ChatPage() {
                />
                DIRECT MESSAGE
              </span>
-              <MdAdd
-                size={18}
-                color="#78787C"
+              <Tooltip tip="New DM" placement="bottom">
+                <AddIcon
+                  className="add_icon"
                  onClick={toggleContactsModalVisible}
                />
+              </Tooltip>
            </h3>
            <nav className="nav">
              <DMList
@@ -31,6 +31,10 @@ const StyledWrapper = styled.div`
          transition: transform 0.5s ease;
          transform-origin: center;
        }
+        .add_icon {
+          width: 18px;
+          height: 18px;
+        }
      }
      > .nav {
        display: flex;
@@ -42,7 +42,7 @@ export default function Menu() {
  return (
    <StyledMenus>
      <li className="menu" onClick={handleSetting}>
-        <Tooltip placement="top" tip="Settings">
+        <Tooltip placement="right" tip="Settings">
          <img src={settingIcon} alt="setting icon" className="icon" />
        </Tooltip>
        {/* {expand && (