From ab371789e916f4720e38c322fa5a1a2ff86fd13d Mon Sep 17 00:00:00 2001 From: "plebeius.eth" Date: Thu, 14 Sep 2023 17:35:28 +0200 Subject: [PATCH] update mobile post menu, rules and description --- src/components/BoardAvatar.jsx | 2 +- src/components/views/All.jsx | 80 +++---- src/components/views/Board.jsx | 276 ++++++++++++++++++++----- src/components/views/Catalog.jsx | 42 ++-- src/components/views/Description.jsx | 146 ++++++++++++- src/components/views/Rules.jsx | 107 +++++++++- src/components/views/Subscriptions.jsx | 78 +++---- src/components/views/Thread.jsx | 66 +++--- 8 files changed, 613 insertions(+), 184 deletions(-) diff --git a/src/components/BoardAvatar.jsx b/src/components/BoardAvatar.jsx index 454332cf..3499cf93 100644 --- a/src/components/BoardAvatar.jsx +++ b/src/components/BoardAvatar.jsx @@ -8,7 +8,7 @@ const BoardAvatar = ({ address }) => { useEffect(() => { if (subplebbit.suggested?.avatarUrl) { - setAvatarUrl(subplebbit.suggested.avatarUrl); + setAvatarUrl(subplebbit.suggested?.avatarUrl); } }, [subplebbit.suggested?.avatarUrl, subplebbit]); diff --git a/src/components/views/All.jsx b/src/components/views/All.jsx index 123cfd03..bcad83e7 100755 --- a/src/components/views/All.jsx +++ b/src/components/views/All.jsx @@ -1842,24 +1842,27 @@ const All = () => { (commentMediaInfo.type === 'webpage' && commentMediaInfo.thumbnail))) ? ( <> -
  • handleMobileOptionClick(thread.cid)}> - Search image on Google -
    • -
  • handleMobileOptionClick(thread.cid)}> - Search image on Yandex -
    • -
  • handleMobileOptionClick(thread.cid)}> - Search image on SauceNAO -
    • + +
  • handleMobileOptionClick(thread.cid)}> + Search image on Google +
    • +     + +
  • handleMobileOptionClick(thread.cid)}> + Search image on Yandex +
    • +     + +
  • handleMobileOptionClick(thread.cid)}> + Search image on SauceNAO +
    • +     ) : null } @@ -2164,28 +2167,31 @@ const All = () => { )} {(replyMediaInfo && ( - replyMediaInfo.type === 'image' || + replyMediaInfo.type === 'image' || (replyMediaInfo.type === 'webpage' && replyMediaInfo.thumbnail))) ? ( <> -
  • handleMobileOptionClick(reply.cid)}> - Search image on Google -
    • -
  • handleMobileOptionClick(reply.cid)}> - Search image on Yandex -
    • -
  • handleMobileOptionClick(reply.cid)}> - Search image on SauceNAO -
    • + +
  • handleMobileOptionClick(reply.cid)}> + Search image on Google +
    • +     + +
  • handleMobileOptionClick(reply.cid)}> + Search image on Yandex +
    • +     + +
  • handleMobileOptionClick(reply.cid)}> + Search image on SauceNAO +
    • +     ) : null } diff --git a/src/components/views/Board.jsx b/src/components/views/Board.jsx index f279d2d9..14c07851 100755 --- a/src/components/views/Board.jsx +++ b/src/components/views/Board.jsx @@ -1041,6 +1041,32 @@ const Board = () => { change rules ) : null} */} +
  • {setIsClientRedirectMenuOpen(true)}} + onMouseLeave={() => {setIsClientRedirectMenuOpen(false)}}> + View on » + +
    • , document.body @@ -1089,6 +1115,20 @@ const Board = () => { handleMobileOptionClick("rules"); handleShareClick(selectedAddress, "rules") }}>Share board + +
  • handleOptionClick("rules")}> + View on plebbit +
    • +     + +
  • handleOptionClick("rules")}> + View on plebones +
    • +     , document.body )} @@ -1200,6 +1240,32 @@ const Board = () => { change rules ) : null} */} +
  • {setIsClientRedirectMenuOpen(true)}} + onMouseLeave={() => {setIsClientRedirectMenuOpen(false)}}> + View on » + +
    • , document.body @@ -1248,6 +1314,20 @@ const Board = () => { handleMobileOptionClick("rules"); handleShareClick(selectedAddress, "rules") }}>Share board + +
  • handleOptionClick("rules")}> + View on plebbit +
    • +     + +
  • handleOptionClick("rules")}> + View on plebones +
    • +     , document.body )} @@ -1381,6 +1461,60 @@ const Board = () => { change description ) : null} */} + {subplebbit.suggested?.avatarUrl ? ( +
  • {setIsImageSearchOpen(true)}} + onMouseLeave={() => {setIsImageSearchOpen(false)}}> + Image search » + +
    • + ) : null} +
  • {setIsClientRedirectMenuOpen(true)}} + onMouseLeave={() => {setIsClientRedirectMenuOpen(false)}}> + View on » + +
    • , document.body @@ -1403,17 +1537,18 @@ const Board = () => {
    - + {createPortal( {postMenuMobileRef.current = el}} @@ -1422,11 +1557,48 @@ const Board = () => { display: openMobileMenuCid === "description" ? "block" : "none", top: mobileMenuPosition.top + 20, left: mobileMenuPosition.left}}> -
      + , document.body )} @@ -1459,7 +1631,7 @@ const Board = () => {
      - board avatar
      image
      @@ -2608,24 +2780,27 @@ const Board = () => { (commentMediaInfo.type === 'webpage' && commentMediaInfo.thumbnail))) ? ( <> -
    • handleMobileOptionClick(thread.cid)}> - Search image on Google -
      • -
    • handleMobileOptionClick(thread.cid)}> - Search image on Yandex -
      • -
    • handleMobileOptionClick(thread.cid)}> - Search image on SauceNAO -
      • + +
    • handleMobileOptionClick(thread.cid)}> + Search image on Google +
      • +       + +
    • handleMobileOptionClick(thread.cid)}> + Search image on Yandex +
      • +       + +
    • handleMobileOptionClick(thread.cid)}> + Search image on SauceNAO +
      • +       ) : null } @@ -2935,24 +3110,27 @@ const Board = () => { (replyMediaInfo.type === 'webpage' && replyMediaInfo.thumbnail))) ? ( <> -
    • handleMobileOptionClick(reply.cid)}> - Search image on Google -
      • -
    • handleMobileOptionClick(reply.cid)}> - Search image on Yandex -
      • -
    • handleMobileOptionClick(reply.cid)}> - Search image on SauceNAO -
      • + +
    • handleMobileOptionClick(reply.cid)}> + Search image on Google +
      • +       + +
    • handleMobileOptionClick(reply.cid)}> + Search image on Yandex +
      • +       + +
    • handleMobileOptionClick(reply.cid)}> + Search image on SauceNAO +
      • +       ) : null } diff --git a/src/components/views/Catalog.jsx b/src/components/views/Catalog.jsx index eac1f5f7..991c5476 100755 --- a/src/components/views/Catalog.jsx +++ b/src/components/views/Catalog.jsx @@ -24,7 +24,6 @@ import VerifiedAuthor from '../VerifiedAuthor'; import countLinks from '../../utils/countLinks'; import getCommentMediaInfo from '../../utils/getCommentMediaInfo'; import getFormattedTime from '../../utils/getFormattedTime'; -import handleShareClick from '../../utils/handleShareClick'; import handleStyleChange from '../../utils/handleStyleChange'; import useAnonModeRef from '../../hooks/useAnonModeRef'; import useClickForm from '../../hooks/useClickForm'; @@ -433,10 +432,13 @@ const CatalogPost = ({post}) => { style={{ display: openMenuCid === "rules" ? 'block' : 'none' }} >
        -
      • { - handleOptionClick("rules"); - handleShareClick(selectedAddress, "rules"); - }}>Share board
        • + +
      • { + handleOptionClick("rules"); + }}>Share board
        • +         {/* {isModerator ? ( <> change rules @@ -512,7 +514,7 @@ const CatalogPost = ({post}) => { setPopupPosition({top: rect.top + window.scrollY, left: rect.left}); }} onMouseLeave={() => setIsHoveringForMenu(false)} - src={subplebbit.suggested.avatarUrl} alt="board avatar" /> + src={subplebbit.suggested?.avatarUrl} alt="board avatar" /> ) : null} {subplebbit.suggested?.avatarUrl ? ( @@ -577,10 +579,13 @@ const CatalogPost = ({post}) => { style={{ display: openMenuCid === "description" ? 'block' : 'none' }} >
          -
        • { - handleOptionClick("description"); - handleShareClick(selectedAddress, "description"); - }}>Share board
          • + +
        • { + handleOptionClick("description"); + }}>Share board
          • +           {/* {isModerator ? ( <> change description @@ -595,19 +600,19 @@ const CatalogPost = ({post}) => { style={{display: isImageSearchOpen ? 'block': 'none'}}>
        • handleOptionClick("description")}> Google
        • handleOptionClick("description")}> Yandex
        • handleOptionClick("description")}> SauceNAO
          • @@ -818,10 +823,13 @@ const CatalogPost = ({post}) => { style={{ display: openMenuCid === thread.cid ? 'block' : 'none' }} >
            -
          • { - handleOptionClick(thread.cid); - handleShareClick(selectedAddress, thread.cid); - }}>Share thread
            • + +
          • { + handleOptionClick(thread.cid); + }}>Share thread
            • +             {({ authorAddress }) => ( <> {authorAddress === account?.author.address || diff --git a/src/components/views/Description.jsx b/src/components/views/Description.jsx index 74b53c7c..6381753f 100644 --- a/src/components/views/Description.jsx +++ b/src/components/views/Description.jsx @@ -5,7 +5,7 @@ import { Link, useNavigate, useParams } from 'react-router-dom'; import { Tooltip } from 'react-tooltip'; import { useSubplebbit } from '@plebbit/plebbit-react-hooks'; import { debounce } from 'lodash'; -import { Container, NavBar, Header, Break, PostMenu, PostForm } from '../styled/views/Board.styled'; +import { Container, NavBar, Header, Break, PostMenu, PostForm, PostMenuMobile } from '../styled/views/Board.styled'; import { TopBar, BoardForm, Footer, ReplyFormLink} from '../styled/views/Thread.styled'; import { PostMenuCatalog } from '../styled/views/Catalog.styled'; import BoardStats from '../BoardStats'; @@ -37,15 +37,20 @@ const Description = () => { const navigate = useNavigate(); const threadMenuRefs = useRef({}); - const postMenuRef = useRef(null); + const threadMenuRefsMobile = useRef({}); + const postMenuMobileRef = useRef(null); const postMenuCatalogRef = useRef(null); const [isAdminListOpen, setIsAdminListOpen] = useState(false); const [prevScrollPos, setPrevScrollPos] = useState(0); const [visible, setVisible] = useState(true); const [menuPosition, setMenuPosition] = useState({top: 0, left: 0}); + const [mobileMenuPosition, setMobileMenuPosition] = useState({top: 0, left: 0}); const [openMenuCid, setOpenMenuCid] = useState(null); + const [openMobileMenuCid, setOpenMobileMenuCid] = useState(null); const [isCreateBoardOpen, setIsCreateBoardOpen] = useState(false); + const [isImageSearchOpen, setIsImageSearchOpen] = useState(false); + const [isClientRedirectMenuOpen, setIsClientRedirectMenuOpen] = useState(false); const { subplebbitAddress } = useParams(); const subplebbit = useSubplebbit({subplebbitAddress: selectedAddress}); @@ -55,12 +60,23 @@ const Description = () => { setOpenMenuCid(null); }; + const handleMobileOptionClick = () => { + setOpenMobileMenuCid(null); + }; + + const handleOutsideClick = useCallback((e) => { - if (openMenuCid !== null && !postMenuRef.current.contains(e.target) && !postMenuCatalogRef.current.contains(e.target)) { + if (openMenuCid !== null && !postMenuCatalogRef.current.contains(e.target)) { setOpenMenuCid(null); } - }, [openMenuCid, postMenuRef, postMenuCatalogRef]); + }, [openMenuCid, postMenuCatalogRef]); + const handleMobileOutsideClick = useCallback((e) => { + if (openMobileMenuCid !== null && !postMenuMobileRef.current.contains(e.target)) { + setOpenMobileMenuCid(null); + } + }, [openMobileMenuCid, postMenuMobileRef]); + useEffect(() => { if (openMenuCid !== null) { @@ -74,6 +90,19 @@ const Description = () => { }; }, [openMenuCid, handleOutsideClick]); + + useEffect(() => { + if (openMobileMenuCid !== null) { + document.addEventListener('click', handleMobileOutsideClick); + } else { + document.removeEventListener('click', handleMobileOutsideClick); + } + + return () => { + document.removeEventListener('click', handleMobileOutsideClick); + }; + }, [openMobileMenuCid, handleMobileOutsideClick]); + useEffect(() => { window.scrollTo(0, 0); @@ -376,6 +405,60 @@ const Description = () => { change description ) : null} */} + {subplebbit.suggested?.avatarUrl ? ( +
          • {setIsImageSearchOpen(true)}} + onMouseLeave={() => {setIsImageSearchOpen(false)}}> + Image search » +
              +
            • handleOptionClick("description")}> + Google +
              • +
            • handleOptionClick("description")}> + Yandex +
              • +
            • handleOptionClick("description")}> + SauceNAO +
              • +
            +
            • + ) : null} +
          • {setIsClientRedirectMenuOpen(true)}} + onMouseLeave={() => {setIsClientRedirectMenuOpen(false)}}> + View on » +
              +
            • handleOptionClick("description")}> + Plebbit +
              • + {/*
            • handleOptionClick("description")}> + Seedit +
              • */} +
            • handleOptionClick("description")}> + Plebones +
              • +
            +
      , document.body @@ -395,8 +478,57 @@ const Description = () => {
      - + + {createPortal( + {postMenuMobileRef.current = el}} + onClick={(event) => event.stopPropagation()} + style={{position: "absolute", + display: openMobileMenuCid === "description" ? "block" : "none", + top: mobileMenuPosition.top + 20, + left: mobileMenuPosition.left}}> +
        +
      • { + handleMobileOptionClick("description"); + handleShareClick(selectedAddress, "description") + }}>Share board
        • + {subplebbit.suggested?.avatarUrl ? ( + <> +
      • handleMobileOptionClick("description")}> + Search image on Google +
        • +
      • handleMobileOptionClick("description")}> + Search image on Yandex +
        • +
      • handleMobileOptionClick("description")}> + Search image on SauceNAO +
        • + + ) : null + } +
      +       , document.body + )} {
      - board avatar
      image
      diff --git a/src/components/views/Rules.jsx b/src/components/views/Rules.jsx index b8526dcc..634f3c0b 100644 --- a/src/components/views/Rules.jsx +++ b/src/components/views/Rules.jsx @@ -5,7 +5,7 @@ import { Link, useNavigate, useParams } from 'react-router-dom'; import { Tooltip } from 'react-tooltip'; import { useSubplebbit } from '@plebbit/plebbit-react-hooks'; import { debounce } from 'lodash'; -import { Container, NavBar, Header, Break, PostMenu, PostForm } from '../styled/views/Board.styled'; +import { Container, NavBar, Header, Break, PostMenu, PostForm, PostMenuMobile } from '../styled/views/Board.styled'; import { TopBar, BoardForm, Footer, ReplyFormLink} from '../styled/views/Thread.styled'; import { PostMenuCatalog } from '../styled/views/Catalog.styled'; import BoardStats from '../BoardStats'; @@ -42,15 +42,19 @@ const Rules = () => { const navigate = useNavigate(); const threadMenuRefs = useRef({}); - const postMenuRef = useRef(null); + const threadMenuRefsMobile = useRef({}); + const postMenuMobileRef = useRef(null); const postMenuCatalogRef = useRef(null); const [isAdminListOpen, setIsAdminListOpen] = useState(false); const [prevScrollPos, setPrevScrollPos] = useState(0); const [visible, setVisible] = useState(true); const [menuPosition, setMenuPosition] = useState({top: 0, left: 0}); + const [mobileMenuPosition, setMobileMenuPosition] = useState({top: 0, left: 0}); const [openMenuCid, setOpenMenuCid] = useState(null); + const [openMobileMenuCid, setOpenMobileMenuCid] = useState(null); const [isCreateBoardOpen, setIsCreateBoardOpen] = useState(false); + const [isClientRedirectMenuOpen, setIsClientRedirectMenuOpen] = useState(false); const { subplebbitAddress } = useParams(); const subplebbit = useSubplebbit({subplebbitAddress: selectedAddress}); @@ -60,12 +64,23 @@ const Rules = () => { setOpenMenuCid(null); }; + const handleMobileOptionClick = () => { + setOpenMobileMenuCid(null); + }; + + const handleOutsideClick = useCallback((e) => { - if (openMenuCid !== null && !postMenuRef.current.contains(e.target) && !postMenuCatalogRef.current.contains(e.target)) { + if (openMenuCid !== null && !postMenuCatalogRef.current.contains(e.target)) { setOpenMenuCid(null); } - }, [openMenuCid, postMenuRef, postMenuCatalogRef]); + }, [openMenuCid, postMenuCatalogRef]); + const handleMobileOutsideClick = useCallback((e) => { + if (openMobileMenuCid !== null && !postMenuMobileRef.current.contains(e.target)) { + setOpenMobileMenuCid(null); + } + }, [openMobileMenuCid, postMenuMobileRef]); + useEffect(() => { if (openMenuCid !== null) { @@ -79,13 +94,25 @@ const Rules = () => { }; }, [openMenuCid, handleOutsideClick]); + + useEffect(() => { + if (openMobileMenuCid !== null) { + document.addEventListener('click', handleMobileOutsideClick); + } else { + document.removeEventListener('click', handleMobileOutsideClick); + } + + return () => { + document.removeEventListener('click', handleMobileOutsideClick); + }; + }, [openMobileMenuCid, handleMobileOutsideClick]); + useEffect(() => { window.scrollTo(0, 0); }, []); - useEffect(() => { const selectedSubplebbit = defaultSubplebbits.find((subplebbit) => subplebbit.address === subplebbitAddress); if (subplebbitAddress) { @@ -358,6 +385,32 @@ const Rules = () => { change rules ) : null} */} +
    • {setIsClientRedirectMenuOpen(true)}} + onMouseLeave={() => {setIsClientRedirectMenuOpen(false)}}> + View on » +
        +
      • handleOptionClick("rules")}> + Plebbit +
        • + {/*
      • handleOptionClick("rules")}> + Seedit +
        • */} +
      • handleOptionClick("rules")}> + Plebones +
        • +
      +
    , document.body @@ -391,8 +444,48 @@ const Rules = () => {
    - + + {createPortal( + {postMenuMobileRef.current = el}} + onClick={(event) => event.stopPropagation()} + style={{position: "absolute", + display: openMobileMenuCid === "rules" ? "block" : "none", + top: mobileMenuPosition.top + 20, + left: mobileMenuPosition.left}}> + + , document.body + )} { (commentMediaInfo.type === 'webpage' && commentMediaInfo.thumbnail))) ? ( <> -
  • handleMobileOptionClick(thread.cid)}> - Search image on Google -
    • -
  • handleMobileOptionClick(thread.cid)}> - Search image on Yandex -
    • -
  • handleMobileOptionClick(thread.cid)}> - Search image on SauceNAO -
    • + +
  • handleMobileOptionClick(thread.cid)}> + Search image on Google +
    • +     + +
  • handleMobileOptionClick(thread.cid)}> + Search image on Yandex +
    • +     + +
  • handleMobileOptionClick(thread.cid)}> + Search image on SauceNAO +
    • +     ) : null } @@ -2176,24 +2179,27 @@ const Subscriptions = () => { (replyMediaInfo.type === 'webpage' && replyMediaInfo.thumbnail))) ? ( <> -
  • handleMobileOptionClick(reply.cid)}> - Search image on Google -
    • -
  • handleMobileOptionClick(reply.cid)}> - Search image on Yandex -
    • -
  • handleMobileOptionClick(reply.cid)}> - Search image on SauceNAO -
    • + +
  • handleMobileOptionClick(reply.cid)}> + Search image on Google +
    • +     + +
  • handleMobileOptionClick(reply.cid)}> + Search image on Yandex +
    • +     + +
  • handleMobileOptionClick(reply.cid)}> + Search image on SauceNAO +
    • +     ) : null } diff --git a/src/components/views/Thread.jsx b/src/components/views/Thread.jsx index 1f489c4f..91bd7573 100755 --- a/src/components/views/Thread.jsx +++ b/src/components/views/Thread.jsx @@ -1832,24 +1832,27 @@ const Thread = () => { (commentMediaInfo.type === 'webpage' && commentMediaInfo.thumbnail))) ? ( <> +
  • handleMobileOptionClick(comment.cid)}> - Search image on Google + Search image on Google
    • + +
  • handleMobileOptionClick(comment.cid)}> - Search image on Yandex + Search image on Yandex
    • + +
  • handleMobileOptionClick(comment.cid)}> - Search image on SauceNAO + Search image on SauceNAO
    • + ) : null } @@ -2124,24 +2127,27 @@ const Thread = () => { (replyMediaInfo.type === 'webpage' && replyMediaInfo.thumbnail))) ? ( <> -
  • handleMobileOptionClick(reply.cid)}> - Search image on Google -
    • -
  • handleMobileOptionClick(reply.cid)}> - Search image on Yandex -
    • -
  • handleMobileOptionClick(reply.cid)}> - Search image on SauceNAO -
    • + +
  • handleMobileOptionClick(reply.cid)}> + Search image on Google +
    • +     + +
  • handleMobileOptionClick(reply.cid)}> + Search image on Yandex +
    • +     + +
  • handleMobileOptionClick(reply.cid)}> + Search image on SauceNAO +
    • +     ) : null }