update mobile post menu, rules and description

This commit is contained in:
plebeius.eth
2023-09-14 17:35:28 +02:00
parent cc98926fa6
commit ab371789e9
8 changed files with 613 additions and 184 deletions
+43 -37
View File
@@ -1842,24 +1842,27 @@ const All = () => {
(commentMediaInfo.type === 'webpage' &&
commentMediaInfo.thumbnail))) ? (
<>
<li onClick={() => handleMobileOptionClick(thread.cid)}>
<a style={{color: 'inherit', textDecoration: 'none'}}
href={`https://lens.google.com/uploadbyurl?url=${commentMediaInfo.url}`}
target="_blank" rel="noreferrer"
>Search image on Google</a>
</li>
<li onClick={() => handleMobileOptionClick(thread.cid)}>
<a style={{color: 'inherit', textDecoration: 'none'}}
href={`https://yandex.com/images/search?url=${commentMediaInfo.url}`}
target="_blank" rel="noreferrer"
>Search image on Yandex</a>
</li>
<li onClick={() => handleMobileOptionClick(thread.cid)}>
<a style={{color: 'inherit', textDecoration: 'none'}}
href={`https://saucenao.com/search.php?url=${commentMediaInfo.url}`}
target="_blank" rel="noreferrer"
>Search image on SauceNAO</a>
</li>
<a style={{color: 'inherit', textDecoration: 'none'}}
href={`https://lens.google.com/uploadbyurl?url=${commentMediaInfo.url}`}
target="_blank" rel="noreferrer">
<li onClick={() => handleMobileOptionClick(thread.cid)}>
Search image on Google
</li>
</a>
<a style={{color: 'inherit', textDecoration: 'none'}}
href={`https://yandex.com/images/search?url=${commentMediaInfo.url}`}
target="_blank" rel="noreferrer">
<li onClick={() => handleMobileOptionClick(thread.cid)}>
Search image on Yandex
</li>
</a>
<a style={{color: 'inherit', textDecoration: 'none'}}
href={`https://saucenao.com/search.php?url=${commentMediaInfo.url}`}
target="_blank" rel="noreferrer">
<li onClick={() => handleMobileOptionClick(thread.cid)}>
Search image on SauceNAO
</li>
</a>
</>
) : null
}
@@ -2164,28 +2167,31 @@ const All = () => {
</>
)}</VerifiedAuthor>
{(replyMediaInfo && (
replyMediaInfo.type === 'image' ||
replyMediaInfo.type === 'image' ||
(replyMediaInfo.type === 'webpage' &&
replyMediaInfo.thumbnail))) ? (
<>
<li onClick={() => handleMobileOptionClick(reply.cid)}>
<a style={{color: 'inherit', textDecoration: 'none'}}
href={`https://lens.google.com/uploadbyurl?url=${replyMediaInfo.url}`}
target="_blank" rel="noreferrer"
>Search image on Google</a>
</li>
<li onClick={() => handleMobileOptionClick(reply.cid)}>
<a style={{color: 'inherit', textDecoration: 'none'}}
href={`https://yandex.com/images/search?img_url=${replyMediaInfo.url}&rpt=imageview`}
target="_blank" rel="noreferrer"
>Search image on Yandex</a>
</li>
<li onClick={() => handleMobileOptionClick(reply.cid)}>
<a style={{color: 'inherit', textDecoration: 'none'}}
href={`https://saucenao.com/search.php?url=${replyMediaInfo.url}`}
target="_blank" rel="noreferrer"
>Search image on SauceNAO</a>
</li>
<a style={{color: 'inherit', textDecoration: 'none'}}
href={`https://lens.google.com/uploadbyurl?url=${replyMediaInfo.url}`}
target="_blank" rel="noreferrer">
<li onClick={() => handleMobileOptionClick(reply.cid)}>
Search image on Google
</li>
</a>
<a style={{color: 'inherit', textDecoration: 'none'}}
href={`https://yandex.com/images/search?url=${replyMediaInfo.url}`}
target="_blank" rel="noreferrer">
<li onClick={() => handleMobileOptionClick(reply.cid)}>
Search image on Yandex
</li>
</a>
<a style={{color: 'inherit', textDecoration: 'none'}}
href={`https://saucenao.com/search.php?url=${replyMediaInfo.url}`}
target="_blank" rel="noreferrer">
<li onClick={() => handleMobileOptionClick(reply.cid)}>
Search image on SauceNAO
</li>
</a>
</>
) : null
}
+227 -49
View File
@@ -1041,6 +1041,32 @@ const Board = () => {
change rules
</>
) : null} */}
<li
onMouseOver={() => {setIsClientRedirectMenuOpen(true)}}
onMouseLeave={() => {setIsClientRedirectMenuOpen(false)}}>
View on »
<ul className="dropdown-menu post-menu-catalog"
style={{display: isClientRedirectMenuOpen ? 'block': 'none'}}>
<li onClick={() => handleOptionClick("rules")}>
<a
href={`https://plebbitapp.eth.limo/#/p/${selectedAddress}`}
target="_blank" rel="noreferrer"
>Plebbit</a>
</li>
{/* <li onClick={() => handleOptionClick("rules")}>
<a
href={`https://seedit.eth.limo/#/p/${selectedAddress}`}
target="_blank" rel="noreferrer"
>Seedit</a>
</li> */}
<li onClick={() => handleOptionClick("rules")}>
<a
href={`https://plebones.netlify.app/#/p/${selectedAddress}`}
target="_blank" rel="noreferrer"
>Plebones</a>
</li>
</ul>
</li>
</ul>
</div>
</PostMenuCatalog>, document.body
@@ -1089,6 +1115,20 @@ const Board = () => {
handleMobileOptionClick("rules");
handleShareClick(selectedAddress, "rules")
}}>Share board</li>
<a style={{color: 'inherit', textDecoration: 'none'}}
href={`https://plebbitapp.eth.limo/#/p/${selectedAddress}`}
target="_blank" rel="noreferrer">
<li onClick={() => handleOptionClick("rules")}>
View on plebbit
</li>
</a>
<a style={{color: 'inherit', textDecoration: 'none'}}
href={`https://plebones.netlify.app/#/p/${selectedAddress}`}
target="_blank" rel="noreferrer">
<li onClick={() => handleOptionClick("rules")}>
View on plebones
</li>
</a>
</ul>
</PostMenuMobile>, document.body
)}
@@ -1200,6 +1240,32 @@ const Board = () => {
change rules
</>
) : null} */}
<li
onMouseOver={() => {setIsClientRedirectMenuOpen(true)}}
onMouseLeave={() => {setIsClientRedirectMenuOpen(false)}}>
View on »
<ul className="dropdown-menu post-menu-catalog"
style={{display: isClientRedirectMenuOpen ? 'block': 'none'}}>
<li onClick={() => handleOptionClick("rules")}>
<a
href={`https://plebbitapp.eth.limo/#/p/${selectedAddress}`}
target="_blank" rel="noreferrer"
>Plebbit</a>
</li>
{/* <li onClick={() => handleOptionClick("rules")}>
<a
href={`https://seedit.eth.limo/#/p/${selectedAddress}`}
target="_blank" rel="noreferrer"
>Seedit</a>
</li> */}
<li onClick={() => handleOptionClick("rules")}>
<a
href={`https://plebones.netlify.app/#/p/${selectedAddress}`}
target="_blank" rel="noreferrer"
>Plebones</a>
</li>
</ul>
</li>
</ul>
</div>
</PostMenuCatalog>, document.body
@@ -1248,6 +1314,20 @@ const Board = () => {
handleMobileOptionClick("rules");
handleShareClick(selectedAddress, "rules")
}}>Share board</li>
<a style={{color: 'inherit', textDecoration: 'none'}}
href={`https://plebbitapp.eth.limo/#/p/${selectedAddress}`}
target="_blank" rel="noreferrer">
<li onClick={() => handleOptionClick("rules")}>
View on plebbit
</li>
</a>
<a style={{color: 'inherit', textDecoration: 'none'}}
href={`https://plebones.netlify.app/#/p/${selectedAddress}`}
target="_blank" rel="noreferrer">
<li onClick={() => handleOptionClick("rules")}>
View on plebones
</li>
</a>
</ul>
</PostMenuMobile>, document.body
)}
@@ -1381,6 +1461,60 @@ const Board = () => {
change description
</>
) : null} */}
{subplebbit.suggested?.avatarUrl ? (
<li
onMouseOver={() => {setIsImageSearchOpen(true)}}
onMouseLeave={() => {setIsImageSearchOpen(false)}}>
Image search »
<ul className="dropdown-menu post-menu-catalog"
style={{display: isImageSearchOpen ? 'block': 'none'}}>
<li onClick={() => handleOptionClick("description")}>
<a
href={`https://lens.google.com/uploadbyurl?url=${subplebbit.suggested?.avatarUrl}`}
target="_blank" rel="noreferrer"
>Google</a>
</li>
<li onClick={() => handleOptionClick("description")}>
<a
href={`https://yandex.com/images/search?url=${subplebbit.suggested?.avatarUrl}`}
target="_blank" rel="noreferrer"
>Yandex</a>
</li>
<li onClick={() => handleOptionClick("description")}>
<a
href={`https://saucenao.com/search.php?url=${subplebbit.suggested?.avatarUrl}`}
target="_blank" rel="noreferrer"
>SauceNAO</a>
</li>
</ul>
</li>
) : null}
<li
onMouseOver={() => {setIsClientRedirectMenuOpen(true)}}
onMouseLeave={() => {setIsClientRedirectMenuOpen(false)}}>
View on »
<ul className="dropdown-menu post-menu-catalog"
style={{display: isClientRedirectMenuOpen ? 'block': 'none'}}>
<li onClick={() => handleOptionClick("description")}>
<a
href={`https://plebbitapp.eth.limo/#/p/${selectedAddress}`}
target="_blank" rel="noreferrer"
>Plebbit</a>
</li>
{/* <li onClick={() => handleOptionClick("description")}>
<a
href={`https://seedit.eth.limo/#/p/${selectedAddress}`}
target="_blank" rel="noreferrer"
>Seedit</a>
</li> */}
<li onClick={() => handleOptionClick("description")}>
<a
href={`https://plebones.netlify.app/#/p/${selectedAddress}`}
target="_blank" rel="noreferrer"
>Plebones</a>
</li>
</ul>
</li>
</ul>
</div>
</PostMenuCatalog>, document.body
@@ -1403,17 +1537,18 @@ const Board = () => {
<div className="op-container">
<div className="post op op-mobile">
<div className="post-info-mobile">
<button className="post-menu-button-mobile"
ref={el => {
threadMenuRefsMobile.current["description"] = el;
}}
onClick={(event) => {
event.stopPropagation();
const rect = threadMenuRefsMobile.current["description"].getBoundingClientRect();
setMobileMenuPosition({top: rect.top + window.scrollY, left: rect.left});
setOpenMobileMenuCid(prevCid => (prevCid === "description" ? null : "description"));
}}
style={{ all: 'unset', cursor: 'pointer' }}>...</button>
<button key={`mob-pb-`} className="post-menu-button-mobile"
ref={el => {
threadMenuRefsMobile.current["description"] = el;
}}
onClick={(event) => {
event.stopPropagation();
const rect = threadMenuRefsMobile.current["description"].getBoundingClientRect();
setMobileMenuPosition({top: rect.top + window.scrollY, left: rect.left});
setOpenMobileMenuCid(prevCid => (prevCid === "description" ? null : "description"));
}}
style={{ all: 'unset', cursor: 'pointer' }}
>...</button>
{createPortal(
<PostMenuMobile selectedStyle={selectedStyle}
ref={el => {postMenuMobileRef.current = el}}
@@ -1422,11 +1557,48 @@ const Board = () => {
display: openMobileMenuCid === "description" ? "block" : "none",
top: mobileMenuPosition.top + 20,
left: mobileMenuPosition.left}}>
<ul className={`post-menu-mobile-thread-${"description"}`}>
<ul className={`post-menu-mobile-thread-description`}>
<li onClick={() => {
handleMobileOptionClick("description");
handleShareClick(selectedAddress, "description")
}}>Share board</li>
{subplebbit.suggested?.avatarUrl ? (
<>
<a style={{ color: 'inherit', textDecoration: 'none' }}
href={`https://lens.google.com/uploadbyurl?url=${subplebbit.suggested?.avatarUrl}`}
target="_blank" rel="noreferrer"
onClick={() => handleMobileOptionClick("description")}>
<li>Search image on Google</li>
</a>
<a style={{ color: 'inherit', textDecoration: 'none' }}
href={`https://yandex.com/images/search?url=${subplebbit.suggested?.avatarUrl}`}
target="_blank" rel="noreferrer"
onClick={() => handleMobileOptionClick("description")}>
<li>Search image on Yandex</li>
</a>
<a style={{ color: 'inherit', textDecoration: 'none' }}
href={`https://saucenao.com/search.php?url=${subplebbit.suggested?.avatarUrl}`}
target="_blank" rel="noreferrer"
onClick={() => handleMobileOptionClick("description")}>
<li>Search image on SauceNAO</li>
</a>
</>
) : null
}
<a style={{color: 'inherit', textDecoration: 'none'}}
href={`https://plebbitapp.eth.limo/#/p/${selectedAddress}`}
target="_blank" rel="noreferrer">
<li onClick={() => handleOptionClick("description")}>
View on plebbit
</li>
</a>
<a style={{color: 'inherit', textDecoration: 'none'}}
href={`https://plebones.netlify.app/#/p/${selectedAddress}`}
target="_blank" rel="noreferrer">
<li onClick={() => handleOptionClick("description")}>
View on plebones
</li>
</a>
</ul>
</PostMenuMobile>, document.body
)}
@@ -1459,7 +1631,7 @@ const Board = () => {
<div className="file-mobile">
<div className="img-container">
<span className="file-thumb-mobile">
<img src={subplebbit.suggested.avatarUrl} alt="board avatar"
<img src={subplebbit.suggested?.avatarUrl} alt="board avatar"
onClick={handleImageClick}
style={{cursor: "pointer"}} />
<div className="file-info-mobile">image</div>
@@ -2608,24 +2780,27 @@ const Board = () => {
(commentMediaInfo.type === 'webpage' &&
commentMediaInfo.thumbnail))) ? (
<>
<li onClick={() => handleMobileOptionClick(thread.cid)}>
<a style={{color: 'inherit', textDecoration: 'none'}}
href={`https://lens.google.com/uploadbyurl?url=${commentMediaInfo.url}`}
target="_blank" rel="noreferrer"
>Search image on Google</a>
</li>
<li onClick={() => handleMobileOptionClick(thread.cid)}>
<a style={{color: 'inherit', textDecoration: 'none'}}
href={`https://yandex.com/images/search?url=${commentMediaInfo.url}`}
target="_blank" rel="noreferrer"
>Search image on Yandex</a>
</li>
<li onClick={() => handleMobileOptionClick(thread.cid)}>
<a style={{color: 'inherit', textDecoration: 'none'}}
href={`https://saucenao.com/search.php?url=${commentMediaInfo.url}`}
target="_blank" rel="noreferrer"
>Search image on SauceNAO</a>
</li>
<a style={{color: 'inherit', textDecoration: 'none'}}
href={`https://lens.google.com/uploadbyurl?url=${commentMediaInfo.url}`}
target="_blank" rel="noreferrer">
<li onClick={() => handleMobileOptionClick(thread.cid)}>
Search image on Google
</li>
</a>
<a style={{color: 'inherit', textDecoration: 'none'}}
href={`https://yandex.com/images/search?url=${commentMediaInfo.url}`}
target="_blank" rel="noreferrer">
<li onClick={() => handleMobileOptionClick(thread.cid)}>
Search image on Yandex
</li>
</a>
<a style={{color: 'inherit', textDecoration: 'none'}}
href={`https://saucenao.com/search.php?url=${commentMediaInfo.url}`}
target="_blank" rel="noreferrer">
<li onClick={() => handleMobileOptionClick(thread.cid)}>
Search image on SauceNAO
</li>
</a>
</>
) : null
}
@@ -2935,24 +3110,27 @@ const Board = () => {
(replyMediaInfo.type === 'webpage' &&
replyMediaInfo.thumbnail))) ? (
<>
<li onClick={() => handleMobileOptionClick(reply.cid)}>
<a style={{color: 'inherit', textDecoration: 'none'}}
href={`https://lens.google.com/uploadbyurl?url=${replyMediaInfo.url}`}
target="_blank" rel="noreferrer"
>Search image on Google</a>
</li>
<li onClick={() => handleMobileOptionClick(reply.cid)}>
<a style={{color: 'inherit', textDecoration: 'none'}}
href={`https://yandex.com/images/search?img_url=${replyMediaInfo.url}&rpt=imageview`}
target="_blank" rel="noreferrer"
>Search image on Yandex</a>
</li>
<li onClick={() => handleMobileOptionClick(reply.cid)}>
<a style={{color: 'inherit', textDecoration: 'none'}}
href={`https://saucenao.com/search.php?url=${replyMediaInfo.url}`}
target="_blank" rel="noreferrer"
>Search image on SauceNAO</a>
</li>
<a style={{color: 'inherit', textDecoration: 'none'}}
href={`https://lens.google.com/uploadbyurl?url=${replyMediaInfo.url}`}
target="_blank" rel="noreferrer">
<li onClick={() => handleMobileOptionClick(reply.cid)}>
Search image on Google
</li>
</a>
<a style={{color: 'inherit', textDecoration: 'none'}}
href={`https://yandex.com/images/search?url=${replyMediaInfo.url}`}
target="_blank" rel="noreferrer">
<li onClick={() => handleMobileOptionClick(reply.cid)}>
Search image on Yandex
</li>
</a>
<a style={{color: 'inherit', textDecoration: 'none'}}
href={`https://saucenao.com/search.php?url=${replyMediaInfo.url}`}
target="_blank" rel="noreferrer">
<li onClick={() => handleMobileOptionClick(reply.cid)}>
Search image on SauceNAO
</li>
</a>
</>
) : null
}
+25 -17
View File
@@ -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' }}
>
<ul className="post-menu-catalog">
<li onClick={() => {
handleOptionClick("rules");
handleShareClick(selectedAddress, "rules");
}}>Share board</li>
<a target="_blank" rel="noreferrer"
style={{color: 'inherit', textDecoration: 'none'}}
href={`https://pleb.bz/p/${selectedAddress}/?redirect=plebchan.eth.limo`}>
<li onClick={() => {
handleOptionClick("rules");
}}>Share board</li>
</a>
{/* {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}
</Link>
{subplebbit.suggested?.avatarUrl ? (
@@ -577,10 +579,13 @@ const CatalogPost = ({post}) => {
style={{ display: openMenuCid === "description" ? 'block' : 'none' }}
>
<ul className="post-menu-catalog">
<li onClick={() => {
handleOptionClick("description");
handleShareClick(selectedAddress, "description");
}}>Share board</li>
<a target="_blank" rel="noreferrer"
style={{color: 'inherit', textDecoration: 'none'}}
href={`https://pleb.bz/p/${selectedAddress}/?redirect=plebchan.eth.limo`}>
<li onClick={() => {
handleOptionClick("description");
}}>Share board</li>
</a>
{/* {isModerator ? (
<>
change description
@@ -595,19 +600,19 @@ const CatalogPost = ({post}) => {
style={{display: isImageSearchOpen ? 'block': 'none'}}>
<li onClick={() => handleOptionClick("description")}>
<a
href={`https://lens.google.com/uploadbyurl?url=${subplebbit.suggested.avatarUrl}`}
href={`https://lens.google.com/uploadbyurl?url=${subplebbit.suggested?.avatarUrl}`}
target="_blank" rel="noreferrer"
>Google</a>
</li>
<li onClick={() => handleOptionClick("description")}>
<a
href={`https://yandex.com/images/search?url=${subplebbit.suggested.avatarUrl}`}
href={`https://yandex.com/images/search?url=${subplebbit.suggested?.avatarUrl}`}
target="_blank" rel="noreferrer"
>Yandex</a>
</li>
<li onClick={() => handleOptionClick("description")}>
<a
href={`https://saucenao.com/search.php?url=${subplebbit.suggested.avatarUrl}`}
href={`https://saucenao.com/search.php?url=${subplebbit.suggested?.avatarUrl}`}
target="_blank" rel="noreferrer"
>SauceNAO</a>
</li>
@@ -818,10 +823,13 @@ const CatalogPost = ({post}) => {
style={{ display: openMenuCid === thread.cid ? 'block' : 'none' }}
>
<ul className="post-menu-catalog">
<li onClick={() => {
handleOptionClick(thread.cid);
handleShareClick(selectedAddress, thread.cid);
}}>Share thread</li>
<a target="_blank" rel="noreferrer"
style={{color: 'inherit', textDecoration: 'none'}}
href={`https://pleb.bz/p/${selectedAddress}/c/${thread.cid}?redirect=plebchan.eth.limo`}>
<li onClick={() => {
handleOptionClick(thread.cid);
}}>Share thread</li>
</a>
<VerifiedAuthor commentCid={thread.cid}>{({ authorAddress }) => (
<>
{authorAddress === account?.author.address ||
+139 -7
View File
@@ -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 ? (
<li
onMouseOver={() => {setIsImageSearchOpen(true)}}
onMouseLeave={() => {setIsImageSearchOpen(false)}}>
Image search »
<ul className="dropdown-menu post-menu-catalog"
style={{display: isImageSearchOpen ? 'block': 'none'}}>
<li onClick={() => handleOptionClick("description")}>
<a
href={`https://lens.google.com/uploadbyurl?url=${subplebbit.suggested?.avatarUrl}`}
target="_blank" rel="noreferrer"
>Google</a>
</li>
<li onClick={() => handleOptionClick("description")}>
<a
href={`https://yandex.com/images/search?url=${subplebbit.suggested?.avatarUrl}`}
target="_blank" rel="noreferrer"
>Yandex</a>
</li>
<li onClick={() => handleOptionClick("description")}>
<a
href={`https://saucenao.com/search.php?url=${subplebbit.suggested?.avatarUrl}`}
target="_blank" rel="noreferrer"
>SauceNAO</a>
</li>
</ul>
</li>
) : null}
<li
onMouseOver={() => {setIsClientRedirectMenuOpen(true)}}
onMouseLeave={() => {setIsClientRedirectMenuOpen(false)}}>
View on »
<ul className="dropdown-menu post-menu-catalog"
style={{display: isClientRedirectMenuOpen ? 'block': 'none'}}>
<li onClick={() => handleOptionClick("description")}>
<a
href={`https://plebbitapp.eth.limo/#/p/${selectedAddress}`}
target="_blank" rel="noreferrer"
>Plebbit</a>
</li>
{/* <li onClick={() => handleOptionClick("description")}>
<a
href={`https://seedit.eth.limo/#/p/${selectedAddress}`}
target="_blank" rel="noreferrer"
>Seedit</a>
</li> */}
<li onClick={() => handleOptionClick("description")}>
<a
href={`https://plebones.netlify.app/#/p/${selectedAddress}`}
target="_blank" rel="noreferrer"
>Plebones</a>
</li>
</ul>
</li>
</ul>
</div>
</PostMenuCatalog>, document.body
@@ -395,8 +478,57 @@ const Description = () => {
<div className="op-container">
<div className="post op op-mobile">
<div className="post-info-mobile">
<button className="post-menu-button-mobile"
style={{ all: 'unset', cursor: 'pointer' }}>...</button>
<button key={`mob-pb-`} className="post-menu-button-mobile"
ref={el => {
threadMenuRefsMobile.current["description"] = el;
}}
onClick={(event) => {
event.stopPropagation();
const rect = threadMenuRefsMobile.current["description"].getBoundingClientRect();
setMobileMenuPosition({top: rect.top + window.scrollY, left: rect.left});
setOpenMobileMenuCid(prevCid => (prevCid === "description" ? null : "description"));
}}
style={{ all: 'unset', cursor: 'pointer' }}
>...</button>
{createPortal(
<PostMenuMobile selectedStyle={selectedStyle}
ref={el => {postMenuMobileRef.current = el}}
onClick={(event) => event.stopPropagation()}
style={{position: "absolute",
display: openMobileMenuCid === "description" ? "block" : "none",
top: mobileMenuPosition.top + 20,
left: mobileMenuPosition.left}}>
<ul className={`post-menu-mobile-thread-description`}>
<li onClick={() => {
handleMobileOptionClick("description");
handleShareClick(selectedAddress, "description")
}}>Share board</li>
{subplebbit.suggested?.avatarUrl ? (
<>
<li onClick={() => handleMobileOptionClick("description")}>
<a style={{color: 'inherit', textDecoration: 'none'}}
href={`https://lens.google.com/uploadbyurl?url=${subplebbit.suggested?.avatarUrl}`}
target="_blank" rel="noreferrer"
>Search image on Google</a>
</li>
<li onClick={() => handleMobileOptionClick("description")}>
<a style={{color: 'inherit', textDecoration: 'none'}}
href={`https://yandex.com/images/search?url=${subplebbit.suggested?.avatarUrl}`}
target="_blank" rel="noreferrer"
>Search image on Yandex</a>
</li>
<li onClick={() => handleMobileOptionClick("description")}>
<a style={{color: 'inherit', textDecoration: 'none'}}
href={`https://saucenao.com/search.php?url=${subplebbit.suggested?.avatarUrl}`}
target="_blank" rel="noreferrer"
>Search image on SauceNAO</a>
</li>
</>
) : null
}
</ul>
</PostMenuMobile>, document.body
)}
<span className="name-block-mobile">
<span className="name-mobile capcode"
style={{cursor: 'pointer'}}
@@ -421,7 +553,7 @@ const Description = () => {
<div className="file-mobile">
<div className="img-container">
<span className="file-thumb-mobile">
<img src={subplebbit.suggested.avatarUrl} alt="board avatar"
<img src={subplebbit.suggested?.avatarUrl} alt="board avatar"
onClick={handleImageClick}
style={{cursor: "pointer"}} />
<div className="file-info-mobile">image</div>
+100 -7
View File
@@ -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} */}
<li
onMouseOver={() => {setIsClientRedirectMenuOpen(true)}}
onMouseLeave={() => {setIsClientRedirectMenuOpen(false)}}>
View on »
<ul className="dropdown-menu post-menu-catalog"
style={{display: isClientRedirectMenuOpen ? 'block': 'none'}}>
<li onClick={() => handleOptionClick("rules")}>
<a
href={`https://plebbitapp.eth.limo/#/p/${selectedAddress}`}
target="_blank" rel="noreferrer"
>Plebbit</a>
</li>
{/* <li onClick={() => handleOptionClick("rules")}>
<a
href={`https://seedit.eth.limo/#/p/${selectedAddress}`}
target="_blank" rel="noreferrer"
>Seedit</a>
</li> */}
<li onClick={() => handleOptionClick("rules")}>
<a
href={`https://plebones.netlify.app/#/p/${selectedAddress}`}
target="_blank" rel="noreferrer"
>Plebones</a>
</li>
</ul>
</li>
</ul>
</div>
</PostMenuCatalog>, document.body
@@ -391,8 +444,48 @@ const Rules = () => {
<div className="op-container">
<div className="post op op-mobile">
<div className="post-info-mobile">
<button className="post-menu-button-mobile"
style={{ all: 'unset', cursor: 'pointer' }}>...</button>
<button key={`mob-pb-`} className="post-menu-button-mobile"
ref={el => {
threadMenuRefsMobile.current["rules"] = el;
}}
onClick={(event) => {
event.stopPropagation();
const rect = threadMenuRefsMobile.current["rules"].getBoundingClientRect();
setMobileMenuPosition({top: rect.top + window.scrollY, left: rect.left});
setOpenMobileMenuCid(prevCid => (prevCid === "rules" ? null : "rules"));
}}
style={{ all: 'unset', cursor: 'pointer' }}
>...</button>
{createPortal(
<PostMenuMobile selectedStyle={selectedStyle}
ref={el => {postMenuMobileRef.current = el}}
onClick={(event) => event.stopPropagation()}
style={{position: "absolute",
display: openMobileMenuCid === "rules" ? "block" : "none",
top: mobileMenuPosition.top + 20,
left: mobileMenuPosition.left}}>
<ul className={`post-menu-mobile-thread-description`}>
<li onClick={() => {
handleMobileOptionClick("rules");
handleShareClick(selectedAddress, "rules")
}}>Share board</li>
<a style={{color: 'inherit', textDecoration: 'none'}}
href={`https://plebbitapp.eth.limo/#/p/${selectedAddress}`}
target="_blank" rel="noreferrer">
<li onClick={() => handleOptionClick("rules")}>
View on plebbit
</li>
</a>
<a style={{color: 'inherit', textDecoration: 'none'}}
href={`https://plebones.netlify.app/#/p/${selectedAddress}`}
target="_blank" rel="noreferrer">
<li onClick={() => handleOptionClick("rules")}>
View on plebones
</li>
</a>
</ul>
</PostMenuMobile>, document.body
)}
<span className="name-block-mobile">
<span className="name-mobile capcode"
style={{cursor: 'pointer'}}
+42 -36
View File
@@ -1850,24 +1850,27 @@ const Subscriptions = () => {
(commentMediaInfo.type === 'webpage' &&
commentMediaInfo.thumbnail))) ? (
<>
<li onClick={() => handleMobileOptionClick(thread.cid)}>
<a style={{color: 'inherit', textDecoration: 'none'}}
href={`https://lens.google.com/uploadbyurl?url=${commentMediaInfo.url}`}
target="_blank" rel="noreferrer"
>Search image on Google</a>
</li>
<li onClick={() => handleMobileOptionClick(thread.cid)}>
<a style={{color: 'inherit', textDecoration: 'none'}}
href={`https://yandex.com/images/search?url=${commentMediaInfo.url}`}
target="_blank" rel="noreferrer"
>Search image on Yandex</a>
</li>
<li onClick={() => handleMobileOptionClick(thread.cid)}>
<a style={{color: 'inherit', textDecoration: 'none'}}
href={`https://saucenao.com/search.php?url=${commentMediaInfo.url}`}
target="_blank" rel="noreferrer"
>Search image on SauceNAO</a>
</li>
<a style={{color: 'inherit', textDecoration: 'none'}}
href={`https://lens.google.com/uploadbyurl?url=${commentMediaInfo.url}`}
target="_blank" rel="noreferrer">
<li onClick={() => handleMobileOptionClick(thread.cid)}>
Search image on Google
</li>
</a>
<a style={{color: 'inherit', textDecoration: 'none'}}
href={`https://yandex.com/images/search?url=${commentMediaInfo.url}`}
target="_blank" rel="noreferrer">
<li onClick={() => handleMobileOptionClick(thread.cid)}>
Search image on Yandex
</li>
</a>
<a style={{color: 'inherit', textDecoration: 'none'}}
href={`https://saucenao.com/search.php?url=${commentMediaInfo.url}`}
target="_blank" rel="noreferrer">
<li onClick={() => handleMobileOptionClick(thread.cid)}>
Search image on SauceNAO
</li>
</a>
</>
) : null
}
@@ -2176,24 +2179,27 @@ const Subscriptions = () => {
(replyMediaInfo.type === 'webpage' &&
replyMediaInfo.thumbnail))) ? (
<>
<li onClick={() => handleMobileOptionClick(reply.cid)}>
<a style={{color: 'inherit', textDecoration: 'none'}}
href={`https://lens.google.com/uploadbyurl?url=${replyMediaInfo.url}`}
target="_blank" rel="noreferrer"
>Search image on Google</a>
</li>
<li onClick={() => handleMobileOptionClick(reply.cid)}>
<a style={{color: 'inherit', textDecoration: 'none'}}
href={`https://yandex.com/images/search?img_url=${replyMediaInfo.url}&rpt=imageview`}
target="_blank" rel="noreferrer"
>Search image on Yandex</a>
</li>
<li onClick={() => handleMobileOptionClick(reply.cid)}>
<a style={{color: 'inherit', textDecoration: 'none'}}
href={`https://saucenao.com/search.php?url=${replyMediaInfo.url}`}
target="_blank" rel="noreferrer"
>Search image on SauceNAO</a>
</li>
<a style={{color: 'inherit', textDecoration: 'none'}}
href={`https://lens.google.com/uploadbyurl?url=${replyMediaInfo.url}`}
target="_blank" rel="noreferrer">
<li onClick={() => handleMobileOptionClick(reply.cid)}>
Search image on Google
</li>
</a>
<a style={{color: 'inherit', textDecoration: 'none'}}
href={`https://yandex.com/images/search?url=${replyMediaInfo.url}`}
target="_blank" rel="noreferrer">
<li onClick={() => handleMobileOptionClick(reply.cid)}>
Search image on Yandex
</li>
</a>
<a style={{color: 'inherit', textDecoration: 'none'}}
href={`https://saucenao.com/search.php?url=${replyMediaInfo.url}`}
target="_blank" rel="noreferrer">
<li onClick={() => handleMobileOptionClick(reply.cid)}>
Search image on SauceNAO
</li>
</a>
</>
) : null
}
+36 -30
View File
@@ -1832,24 +1832,27 @@ const Thread = () => {
(commentMediaInfo.type === 'webpage' &&
commentMediaInfo.thumbnail))) ? (
<>
<a style={{color: 'inherit', textDecoration: 'none'}}
href={`https://lens.google.com/uploadbyurl?url=${commentMediaInfo.url}`}
target="_blank" rel="noreferrer">
<li onClick={() => handleMobileOptionClick(comment.cid)}>
<a style={{color: 'inherit', textDecoration: 'none'}}
href={`https://lens.google.com/uploadbyurl?url=${commentMediaInfo.url}`}
target="_blank" rel="noreferrer"
>Search image on Google</a>
Search image on Google
</li>
</a>
<a style={{color: 'inherit', textDecoration: 'none'}}
href={`https://yandex.com/images/search?url=${commentMediaInfo.url}`}
target="_blank" rel="noreferrer">
<li onClick={() => handleMobileOptionClick(comment.cid)}>
<a style={{color: 'inherit', textDecoration: 'none'}}
href={`https://yandex.com/images/search?url=${commentMediaInfo.url}`}
target="_blank" rel="noreferrer"
>Search image on Yandex</a>
Search image on Yandex
</li>
</a>
<a style={{color: 'inherit', textDecoration: 'none'}}
href={`https://saucenao.com/search.php?url=${commentMediaInfo.url}`}
target="_blank" rel="noreferrer">
<li onClick={() => handleMobileOptionClick(comment.cid)}>
<a style={{color: 'inherit', textDecoration: 'none'}}
href={`https://saucenao.com/search.php?url=${commentMediaInfo.url}`}
target="_blank" rel="noreferrer"
>Search image on SauceNAO</a>
Search image on SauceNAO
</li>
</a>
</>
) : null
}
@@ -2124,24 +2127,27 @@ const Thread = () => {
(replyMediaInfo.type === 'webpage' &&
replyMediaInfo.thumbnail))) ? (
<>
<li onClick={() => handleMobileOptionClick(reply.cid)}>
<a style={{color: 'inherit', textDecoration: 'none'}}
href={`https://lens.google.com/uploadbyurl?url=${replyMediaInfo.url}`}
target="_blank" rel="noreferrer"
>Search image on Google</a>
</li>
<li onClick={() => handleMobileOptionClick(reply.cid)}>
<a style={{color: 'inherit', textDecoration: 'none'}}
href={`https://yandex.com/images/search?img_url=${replyMediaInfo.url}&rpt=imageview`}
target="_blank" rel="noreferrer"
>Search image on Yandex</a>
</li>
<li onClick={() => handleMobileOptionClick(reply.cid)}>
<a style={{color: 'inherit', textDecoration: 'none'}}
href={`https://saucenao.com/search.php?url=${replyMediaInfo.url}`}
target="_blank" rel="noreferrer"
>Search image on SauceNAO</a>
</li>
<a style={{color: 'inherit', textDecoration: 'none'}}
href={`https://lens.google.com/uploadbyurl?url=${replyMediaInfo.url}`}
target="_blank" rel="noreferrer">
<li onClick={() => handleMobileOptionClick(reply.cid)}>
Search image on Google
</li>
</a>
<a style={{color: 'inherit', textDecoration: 'none'}}
href={`https://yandex.com/images/search?url=${replyMediaInfo.url}`}
target="_blank" rel="noreferrer">
<li onClick={() => handleMobileOptionClick(reply.cid)}>
Search image on Yandex
</li>
</a>
<a style={{color: 'inherit', textDecoration: 'none'}}
href={`https://saucenao.com/search.php?url=${replyMediaInfo.url}`}
target="_blank" rel="noreferrer">
<li onClick={() => handleMobileOptionClick(reply.cid)}>
Search image on SauceNAO
</li>
</a>
</>
) : null
}