From 910096b55afcb1d1457e943bdeb0903662933fa6 Mon Sep 17 00:00:00 2001 From: zerosoul Date: Thu, 26 May 2022 10:36:54 +0800 Subject: [PATCH] feat: add more add member entries --- src/assets/icons/mention.svg | 3 + src/common/component/AddEntriesMenu.js | 113 +++++++++++++++++++++++++ src/common/component/Search.js | 89 +------------------ src/common/component/Server.js | 87 +------------------ 4 files changed, 124 insertions(+), 168 deletions(-) create mode 100644 src/assets/icons/mention.svg create mode 100644 src/common/component/AddEntriesMenu.js diff --git a/src/assets/icons/mention.svg b/src/assets/icons/mention.svg new file mode 100644 index 00000000..308ad908 --- /dev/null +++ b/src/assets/icons/mention.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/common/component/AddEntriesMenu.js b/src/common/component/AddEntriesMenu.js new file mode 100644 index 00000000..cbb6a9a0 --- /dev/null +++ b/src/common/component/AddEntriesMenu.js @@ -0,0 +1,113 @@ +import { useState } from "react"; +import { useSelector } from "react-redux"; +import styled from "styled-components"; +import { hideAll } from "tippy.js"; +import IconInvite from "../../assets/icons/add.person.svg"; +import IconMention from "../../assets/icons/mention.svg"; +import ChannelIcon from "./ChannelIcon"; +import ChannelModal from "./ChannelModal"; +import ContactsModal from "./ContactsModal"; +import InviteModal from "./InviteModal"; + +const Styled = styled.ul` + z-index: 999; + user-select: none; + box-shadow: 0px 24px 48px -12px rgba(16, 24, 40, 0.18); + border-radius: 12px; + color: #616161; + background: #fff; + display: flex; + flex-direction: column; + padding: 4px; + .item { + border-radius: 3px; + display: flex; + align-items: center; + gap: 8px; + font-weight: 600; + font-size: 14px; + line-height: 20px; + cursor: pointer; + padding: 10px 8px; + &:hover { + background: rgba(116, 127, 141, 0.2); + } + .icon { + width: 20px; + height: 20px; + path { + fill: #475467; + } + } + } +`; +export default function AddEntriesMenu() { + const currentUser = useSelector( + (store) => store.contacts.byId[store.authData.uid] + ); + const [isPrivate, setIsPrivate] = useState(false); + const [inviteModalVisible, setInviteModalVisible] = useState(false); + + const [channelModalVisible, setChannelModalVisible] = useState(false); + const [contactsModalVisible, setContactsModalVisible] = useState(false); + const toggleInviteModalVisible = () => { + setInviteModalVisible((prev) => { + if (!prev) { + hideAll(); + } + return !prev; + }); + }; + const toggleContactsModalVisible = () => { + setContactsModalVisible((prevVisible) => { + if (!prevVisible) { + hideAll(); + } + return !prevVisible; + }); + }; + const handleOpenChannelModal = (isPrivate) => { + setIsPrivate(isPrivate); + setChannelModalVisible(true); + hideAll(); + }; + const handleCloseModal = () => { + setChannelModalVisible(false); + }; + return ( + <> + + {currentUser?.is_admin && ( +
  • + + New Channel +
    • + )} +
  • + + New Private Channel +
    • +
  • + + New Message +
    • +
  • + + Invite People +
    • +     + {channelModalVisible && ( + + )} + {contactsModalVisible && ( + + )} + {inviteModalVisible && ( + + )} + + ); +} diff --git a/src/common/component/Search.js b/src/common/component/Search.js index 39fab15f..8f840e03 100644 --- a/src/common/component/Search.js +++ b/src/common/component/Search.js @@ -1,16 +1,12 @@ -import { useState } from "react"; +// import { useState } from "react"; import styled from "styled-components"; -import { useSelector } from "react-redux"; + import Tippy from "@tippyjs/react"; -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 AddEntriesMenu from "./AddEntriesMenu"; import Tooltip from "../component/Tooltip"; -import ChannelIcon from "./ChannelIcon"; -import ChannelModal from "./ChannelModal"; -import ContactsModal from "./ContactsModal"; const StyledWrapper = styled.div` position: relative; @@ -38,65 +34,11 @@ const StyledWrapper = styled.div` .add { cursor: pointer; } - .popup { - z-index: 999; - user-select: none; - box-shadow: 0px 20px 25px rgba(31, 41, 55, 0.1), - 0px 10px 10px rgba(31, 41, 55, 0.04); - border-radius: 8px; - color: #616161; - background: #fff; - display: flex; - flex-direction: column; - padding: 4px; - .item { - border-radius: 3px; - display: flex; - align-items: center; - gap: 4px; - font-weight: 600; - font-size: 14px; - line-height: 20px; - cursor: pointer; - padding: 10px 8px; - &:hover { - background: rgba(116, 127, 141, 0.2); - } - } - } `; export default function Search() { - const currentUser = useSelector( - (store) => store.contacts.byId[store.authData.uid] - ); - const [channelModalVisible, setChannelModalVisible] = useState(false); - const [contactsModalVisible, setContactsModalVisible] = useState(false); - const [isPrivate, setIsPrivate] = useState(false); - const toggleContactsModalVisible = () => { - setContactsModalVisible((prevVisible) => { - if (!prevVisible) { - hideAll(); - } - return !prevVisible; - }); - }; - const handleOpenChannelModal = (isPrivate) => { - setIsPrivate(isPrivate); - setChannelModalVisible(true); - hideAll(); - }; - const handleCloseModal = () => { - setChannelModalVisible(false); - }; console.log("searching"); return ( - {channelModalVisible && ( - - )} - {contactsModalVisible && ( - - )}
    @@ -106,30 +48,7 @@ export default function Search() { interactive placement="bottom-end" trigger="click" - content={ -
      - {currentUser?.is_admin && ( -
    • - - New Channel -
      • - )} -
    • - - New Private Channel -
      • -
    • - icon mail - New Message -
      • -
    - } + content={} > add icon diff --git a/src/common/component/Server.js b/src/common/component/Server.js index aab6560a..dbe28311 100644 --- a/src/common/component/Server.js +++ b/src/common/component/Server.js @@ -1,15 +1,11 @@ -import { useState } from "react"; +// import { useState } from "react"; import styled from "styled-components"; import { useSelector } from "react-redux"; import Tippy from "@tippyjs/react"; -import { hideAll } from "tippy.js"; import addIcon from "../../assets/icons/add.svg?url"; -import mailIcon from "../../assets/icons/mail.svg?url"; import Tooltip from "./Tooltip"; -import ChannelIcon from "./ChannelIcon"; -import ChannelModal from "./ChannelModal"; -import ContactsModal from "./ContactsModal"; import { NavLink, useLocation } from "react-router-dom"; +import AddEntriesMenu from "./AddEntriesMenu"; const StyledWrapper = styled.div` min-height: 56px; @@ -53,71 +49,19 @@ const StyledWrapper = styled.div` .add { cursor: pointer; } - .popup { - z-index: 999; - user-select: none; - box-shadow: 0px 20px 25px rgba(31, 41, 55, 0.1), - 0px 10px 10px rgba(31, 41, 55, 0.04); - border-radius: 8px; - color: #616161; - background: #fff; - display: flex; - flex-direction: column; - padding: 4px; - .item { - border-radius: 3px; - display: flex; - align-items: center; - gap: 4px; - font-weight: 600; - font-size: 14px; - line-height: 20px; - cursor: pointer; - padding: 10px 8px; - &:hover { - background: rgba(116, 127, 141, 0.2); - } - } - } `; export default function Server() { const { pathname } = useLocation(); - const { currentUser, server, userCount } = useSelector((store) => { + const { server, userCount } = useSelector((store) => { return { userCount: store.contacts.ids.length, - currentUser: store.contacts.byId[store.authData.uid], server: store.server, }; }); - const [channelModalVisible, setChannelModalVisible] = useState(false); - const [contactsModalVisible, setContactsModalVisible] = useState(false); - const [isPrivate, setIsPrivate] = useState(false); - const toggleContactsModalVisible = () => { - setContactsModalVisible((prevVisible) => { - if (!prevVisible) { - hideAll(); - } - return !prevVisible; - }); - }; - const handleOpenChannelModal = (isPrivate) => { - setIsPrivate(isPrivate); - setChannelModalVisible(true); - hideAll(); - }; - const handleCloseModal = () => { - setChannelModalVisible(false); - }; // console.log("server info", server); const { name, description, logo } = server; return ( - {channelModalVisible && ( - - )} - {contactsModalVisible && ( - - )}
    @@ -136,30 +80,7 @@ export default function Server() { interactive placement="bottom-end" trigger="click" - content={ -
      - {currentUser?.is_admin && ( -
    • - - New Channel -
      • - )} -
    • - - New Private Channel -
      • -
    • - icon mail - New Message -
      • -
    - } + content={} > add icon