mirror of
https://github.com/bitsocialnet/5chan.git
synced 2026-08-03 07:41:04 +02:00
add post actions menu
This commit is contained in:
Tom
@@ -1667,6 +1667,49 @@ export const BoardForm = styled.div`
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#post-menu {
|
||||
z-index: 999;
|
||||
position: absolute;
|
||||
font-size: 12px;
|
||||
line-height: 1.3em;
|
||||
left: 80%;
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
li {
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
padding: 2px 4px;
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
display: none;
|
||||
position: absolute;
|
||||
left: 100%;
|
||||
top: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.dropdown:hover .dropdown-menu {
|
||||
display: block;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
${({ selectedStyle }) => {
|
||||
switch (selectedStyle) {
|
||||
case 'Yotsuba':
|
||||
@@ -1675,6 +1718,23 @@ export const BoardForm = styled.div`
|
||||
border: 1px solid #d99f91 !important;
|
||||
border-left: none !important;
|
||||
border-top: none !important;
|
||||
}
|
||||
|
||||
#post-menu {
|
||||
ul {
|
||||
background-color: #f0e0d6;
|
||||
border: 1px solid #d9bfb7;
|
||||
border-bottom: 1px solid #d9bfb7;
|
||||
border-right-width: 2px;
|
||||
}
|
||||
|
||||
li {
|
||||
border-bottom: 1px solid #ccc;
|
||||
|
||||
:hover {
|
||||
background-color: #ffe;
|
||||
}
|
||||
}
|
||||
}`;
|
||||
|
||||
case 'Yotsuba-B':
|
||||
@@ -1683,16 +1743,68 @@ export const BoardForm = styled.div`
|
||||
border: 1px solid #ba9dbf !important;
|
||||
border-left: none !important;
|
||||
border-top: none !important;
|
||||
}
|
||||
|
||||
#post-menu {
|
||||
ul {
|
||||
background-color: #d6daf0;
|
||||
border: 1px solid #b7c5d9;
|
||||
border-right-width: 2px;
|
||||
}
|
||||
|
||||
li {
|
||||
border-bottom: 1px solid #b7c5d9;
|
||||
|
||||
:hover {
|
||||
background-color: #eef2ff;
|
||||
}
|
||||
}
|
||||
}`;
|
||||
|
||||
case 'Futaba':
|
||||
return `.highlighted {
|
||||
background-color: #f0c0b0 !important;
|
||||
}
|
||||
|
||||
#post-menu {
|
||||
font-size: 13px !important;
|
||||
|
||||
ul {
|
||||
background-color: #f0e0d6;
|
||||
border: 1px solid #d9bfb7;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
li {
|
||||
border-bottom: 1px solid #d9bfb7;
|
||||
|
||||
:hover {
|
||||
background-color: #ffe;
|
||||
}
|
||||
}
|
||||
}`;
|
||||
|
||||
case 'Burichan':
|
||||
return `.highlighted {
|
||||
background-color: #d6bad0 !important;
|
||||
}
|
||||
|
||||
#post-menu {
|
||||
font-size: 13px !important;
|
||||
|
||||
ul {
|
||||
background-color: #d6daf0;
|
||||
border: 1px solid #b7c5d9;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
li {
|
||||
border-bottom: 1px solid #b7c5d9;
|
||||
|
||||
:hover {
|
||||
background-color: #eef2ff;
|
||||
}
|
||||
}
|
||||
}`;
|
||||
|
||||
case 'Tomorrow':
|
||||
@@ -1700,13 +1812,46 @@ export const BoardForm = styled.div`
|
||||
background-color: #1d1d21 !important;
|
||||
border: 1px solid #111 !important;
|
||||
}
|
||||
|
||||
#post-menu {
|
||||
ul {
|
||||
background-color: #282a2e;
|
||||
border: 1px solid #000;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
li {
|
||||
border-bottom: 1px solid #000;
|
||||
|
||||
:hover {
|
||||
background-color: #1d1f21;
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
case 'Photon':
|
||||
return `.highlighted {
|
||||
background-color: #ccc !important;
|
||||
border: 1px solid #ccc !important;
|
||||
}
|
||||
|
||||
#post-menu {
|
||||
ul {
|
||||
background-color: #ddd;
|
||||
border: 1px solid #ccc;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
li {
|
||||
border-bottom: 1px solid #ccc;
|
||||
|
||||
:hover {
|
||||
background-color: #eee;
|
||||
}
|
||||
}
|
||||
}`;
|
||||
|
||||
|
||||
default:
|
||||
return '';
|
||||
@@ -3792,4 +3937,11 @@ export const BoardForm = styled.div`
|
||||
}
|
||||
}}
|
||||
}
|
||||
`;
|
||||
`;
|
||||
|
||||
export const PostMenu = styled.div`
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
transition: transform 0.1s;
|
||||
transform: ${props => props.rotated ? 'rotate(90deg)' : 'none'};
|
||||
`;
|
||||
|
||||
@@ -828,6 +828,49 @@ export const BoardForm = styled.div`
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
#post-menu {
|
||||
z-index: 999;
|
||||
position: absolute;
|
||||
font-size: 12px;
|
||||
line-height: 1.3em;
|
||||
left: 80%;
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
li {
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
padding: 2px 4px;
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
display: none;
|
||||
position: absolute;
|
||||
left: 100%;
|
||||
top: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.dropdown:hover .dropdown-menu {
|
||||
display: block;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
${({ selectedStyle }) => {
|
||||
switch (selectedStyle) {
|
||||
case 'Yotsuba':
|
||||
@@ -836,6 +879,23 @@ export const BoardForm = styled.div`
|
||||
border: 1px solid #d99f91 !important;
|
||||
border-left: none !important;
|
||||
border-top: none !important;
|
||||
}
|
||||
|
||||
#post-menu {
|
||||
ul {
|
||||
background-color: #f0e0d6;
|
||||
border: 1px solid #d9bfb7;
|
||||
border-bottom: 1px solid #d9bfb7;
|
||||
border-right-width: 2px;
|
||||
}
|
||||
|
||||
li {
|
||||
border-bottom: 1px solid #ccc;
|
||||
|
||||
:hover {
|
||||
background-color: #ffe;
|
||||
}
|
||||
}
|
||||
}`;
|
||||
|
||||
case 'Yotsuba-B':
|
||||
@@ -844,28 +904,112 @@ export const BoardForm = styled.div`
|
||||
border: 1px solid #ba9dbf !important;
|
||||
border-left: none !important;
|
||||
border-top: none !important;
|
||||
}
|
||||
|
||||
#post-menu {
|
||||
ul {
|
||||
background-color: #d6daf0;
|
||||
border: 1px solid #b7c5d9;
|
||||
border-right-width: 2px;
|
||||
}
|
||||
|
||||
li {
|
||||
border-bottom: 1px solid #b7c5d9;
|
||||
|
||||
:hover {
|
||||
background-color: #eef2ff;
|
||||
}
|
||||
}
|
||||
}`;
|
||||
|
||||
case 'Futaba':
|
||||
return `.highlighted {
|
||||
background-color: #f0c0b0 !important;
|
||||
}
|
||||
|
||||
#post-menu {
|
||||
font-size: 13px !important;
|
||||
|
||||
ul {
|
||||
background-color: #f0e0d6;
|
||||
border: 1px solid #d9bfb7;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
li {
|
||||
border-bottom: 1px solid #d9bfb7;
|
||||
|
||||
:hover {
|
||||
background-color: #ffe;
|
||||
}
|
||||
}
|
||||
}`;
|
||||
|
||||
case 'Burichan':
|
||||
return `.highlighted {
|
||||
background-color: #d6bad0 !important;
|
||||
}
|
||||
|
||||
#post-menu {
|
||||
font-size: 13px !important;
|
||||
|
||||
ul {
|
||||
background-color: #d6daf0;
|
||||
border: 1px solid #b7c5d9;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
li {
|
||||
border-bottom: 1px solid #b7c5d9;
|
||||
|
||||
:hover {
|
||||
background-color: #eef2ff;
|
||||
}
|
||||
}
|
||||
}`;
|
||||
|
||||
case 'Tomorrow':
|
||||
return `.highlighted {
|
||||
background-color: #1d1d21 !important;
|
||||
border: 1px solid #111 !important;
|
||||
}
|
||||
|
||||
#post-menu {
|
||||
ul {
|
||||
background-color: #282a2e;
|
||||
border: 1px solid #000;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
li {
|
||||
border-bottom: 1px solid #000;
|
||||
|
||||
:hover {
|
||||
background-color: #1d1f21;
|
||||
}
|
||||
}
|
||||
}`;
|
||||
|
||||
case 'Photon':
|
||||
return `.highlighted {
|
||||
background-color: #ccc !important;
|
||||
border: 1px solid #ccc !important;
|
||||
}
|
||||
|
||||
#post-menu {
|
||||
ul {
|
||||
background-color: #ddd;
|
||||
border: 1px solid #ccc;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
li {
|
||||
border-bottom: 1px solid #ccc;
|
||||
|
||||
:hover {
|
||||
background-color: #eee;
|
||||
}
|
||||
}
|
||||
}`;
|
||||
|
||||
default:
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import React, { Fragment, useEffect, useMemo, useState } from 'react';
|
||||
import React, { Fragment, useEffect, useMemo, useState, useRef } from 'react';
|
||||
import { Helmet } from 'react-helmet-async';
|
||||
import { Link, useNavigate } from 'react-router-dom';
|
||||
import { Tooltip } from 'react-tooltip';
|
||||
@@ -7,7 +7,7 @@ import { useAccount, useAccountComments, useFeed, useSubplebbits } from '@plebbi
|
||||
import { flattenCommentsPages } from '@plebbit/plebbit-react-hooks/dist/lib/utils'
|
||||
import { debounce } from 'lodash';
|
||||
import useGeneralStore from '../../hooks/stores/useGeneralStore';
|
||||
import { Container, NavBar, Header, Break, TopBar, BoardForm } from '../styled/Board.styled';
|
||||
import { Container, NavBar, Header, Break, TopBar, BoardForm, PostMenu } from '../styled/Board.styled';
|
||||
import { Footer } from '../styled/Thread.styled';
|
||||
import ImageBanner from '../ImageBanner';
|
||||
import OfflineIndicator from '../OfflineIndicator';
|
||||
@@ -41,13 +41,18 @@ const All = () => {
|
||||
} = useGeneralStore(state => state);
|
||||
|
||||
const account = useAccount();
|
||||
const navigate = useNavigate();
|
||||
|
||||
const threadMenuRefs = useRef({});
|
||||
const replyMenuRefs = useRef({});
|
||||
|
||||
const [isReplyOpen, setIsReplyOpen] = useState(false);
|
||||
const navigate = useNavigate();
|
||||
const [prevScrollPos, setPrevScrollPos] = useState(0);
|
||||
const [visible, setVisible] = useState(true);
|
||||
|
||||
const [rotatedStates, setRotatedStates] = useState({});
|
||||
const [errorMessage, setErrorMessage] = useState(null);
|
||||
const [isImageSearchOpen, setIsImageSearchOpen] = useState(false);
|
||||
|
||||
useError(errorMessage, [errorMessage]);
|
||||
|
||||
const addresses = defaultSubplebbits.map(subplebbit => subplebbit.address);
|
||||
@@ -446,7 +451,66 @@ const All = () => {
|
||||
]
|
||||
</span>
|
||||
</span>
|
||||
<button key={`pmb-${index}`} className="post-menu-button" title="Post menu" style={{ all: 'unset', cursor: 'pointer' }} data-cmd="post-menu">▶</button>
|
||||
<PostMenu
|
||||
key={`pmb-${index}`}
|
||||
title="Post menu"
|
||||
ref={el => threadMenuRefs.current[thread.cid] = el}
|
||||
className='post-menu-button'
|
||||
rotated={rotatedStates[thread.cid]}
|
||||
onClick={() => {
|
||||
const rect = threadMenuRefs.current[thread.cid].getBoundingClientRect();
|
||||
const menu = document.querySelector(`.post-menu-thread-${thread.cid}`);
|
||||
const scrollY = window.scrollY || window.pageYOffset;
|
||||
menu.style.top = `calc(${rect.top + scrollY}px - 225px)`;
|
||||
menu.style.left = `${rect.left}px`;
|
||||
|
||||
setRotatedStates(prevState => ({
|
||||
...prevState,
|
||||
[thread.cid]: !prevState[thread.cid]
|
||||
}));
|
||||
}}
|
||||
>
|
||||
▶
|
||||
</PostMenu>
|
||||
<div id="post-menu" className={`post-menu-thread post-menu-thread-${thread.cid}`}
|
||||
style={{ display: rotatedStates[thread.cid] ? 'block' : 'none' }}>
|
||||
<ul>
|
||||
<li>Edit post</li>
|
||||
<li>Hide thread</li>
|
||||
{(commentMediaInfo && (
|
||||
commentMediaInfo.type === 'image' ||
|
||||
(commentMediaInfo.type === 'webpage' &&
|
||||
commentMediaInfo.thumbnail))) ? (
|
||||
<li
|
||||
onMouseOver={() => {setIsImageSearchOpen(true)}}
|
||||
onMouseLeave={() => {setIsImageSearchOpen(false)}}>
|
||||
Image search »
|
||||
<ul className="dropdown-menu"
|
||||
style={{display: isImageSearchOpen ? 'block': 'none'}}>
|
||||
<li>
|
||||
<a
|
||||
href={`https://lens.google.com/uploadbyurl?url=${commentMediaInfo.url}`}
|
||||
target="_blank" rel="noreferrer"
|
||||
>Google</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href={`https://yandex.com/images/search?url=${commentMediaInfo.url}`}
|
||||
target="_blank" rel="noreferrer"
|
||||
>Yandex</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href={`https://saucenao.com/search.php?url=${commentMediaInfo.url}`}
|
||||
target="_blank" rel="noreferrer"
|
||||
>SauceNAO</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
) : null
|
||||
}
|
||||
</ul>
|
||||
</div>
|
||||
<div key={`bi-${index}`} id="backlink-id" className="backlink">
|
||||
{thread.replies?.pages?.topAll.comments
|
||||
.sort((a, b) => a.timestamp - b.timestamp)
|
||||
@@ -575,7 +639,65 @@ const All = () => {
|
||||
tooltipPlace="top"
|
||||
className="offline-reply" />
|
||||
</span>
|
||||
<button key={`pmb-${index}`} className="post-menu-button" title="Post menu" style={{ all: 'unset', cursor: 'pointer' }} data-cmd="post-menu">▶</button>
|
||||
<PostMenu
|
||||
key={`pmb-${index}`}
|
||||
title="Post menu"
|
||||
ref={el => replyMenuRefs.current[reply.cid] = el}
|
||||
className='post-menu-button'
|
||||
rotated={rotatedStates[reply.cid]}
|
||||
onClick={() => {
|
||||
const rect = replyMenuRefs.current[reply.cid].getBoundingClientRect();
|
||||
const menu = document.querySelector(`.post-menu-reply-${reply.cid}`);
|
||||
const scrollY = window.scrollY || window.pageYOffset;
|
||||
menu.style.top = `calc(${rect.top + scrollY}px - 225px)`;
|
||||
menu.style.left = `${rect.left}px`;
|
||||
|
||||
setRotatedStates(prevState => ({
|
||||
...prevState,
|
||||
[reply.cid]: !prevState[reply.cid]
|
||||
}));
|
||||
}}
|
||||
>
|
||||
▶
|
||||
</PostMenu>
|
||||
<div id="post-menu" className={`post-menu-reply post-menu-reply-${reply.cid}`}
|
||||
style={{ display: rotatedStates[reply.cid] ? 'block' : 'none' }}>
|
||||
<ul>
|
||||
<li>Edit post</li>
|
||||
<li>Hide post</li>
|
||||
{(replyMediaInfo && (
|
||||
replyMediaInfo.type === 'image' ||
|
||||
(replyMediaInfo.type === 'webpage' &&
|
||||
replyMediaInfo.thumbnail))) ? (
|
||||
<li
|
||||
onMouseOver={() => {setIsImageSearchOpen(true)}}
|
||||
onMouseLeave={() => {setIsImageSearchOpen(false)}}>
|
||||
Image search »
|
||||
<ul className="dropdown-menu"
|
||||
style={{display: isImageSearchOpen ? 'block': 'none'}}>
|
||||
<li>
|
||||
<a
|
||||
href={`https://lens.google.com/uploadbyurl?url=${commentMediaInfo.url}`}
|
||||
target="_blank" rel="noreferrer"
|
||||
>Google</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href={`https://yandex.com/images/search?url=${commentMediaInfo.url}`}
|
||||
target="_blank" rel="noreferrer"
|
||||
>Yandex</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href={`https://saucenao.com/search.php?url=${commentMediaInfo.url}`}
|
||||
target="_blank" rel="noreferrer"
|
||||
>SauceNAO</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
) : null}
|
||||
</ul>
|
||||
</div>
|
||||
<div id="backlink-id" className="backlink">
|
||||
{reply.replies?.pages?.topAll.comments
|
||||
.sort((a, b) => a.timestamp - b.timestamp)
|
||||
|
||||
+134
-12
@@ -7,7 +7,7 @@ import { useAccount, useAccountComments, useFeed, usePublishComment, useSubplebb
|
||||
import { flattenCommentsPages } from '@plebbit/plebbit-react-hooks/dist/lib/utils'
|
||||
import { debounce } from 'lodash';
|
||||
import useGeneralStore from '../../hooks/stores/useGeneralStore';
|
||||
import { Container, NavBar, Header, Break, PostFormLink, PostFormTable, PostForm, TopBar, BoardForm } from '../styled/Board.styled';
|
||||
import { Container, NavBar, Header, Break, PostFormLink, PostFormTable, PostForm, TopBar, BoardForm, PostMenu} from '../styled/Board.styled';
|
||||
import { Footer } from '../styled/Thread.styled';
|
||||
import ImageBanner from '../ImageBanner';
|
||||
import OfflineIndicator from '../OfflineIndicator';
|
||||
@@ -51,31 +51,35 @@ const Board = () => {
|
||||
} = useGeneralStore(state => state);
|
||||
|
||||
const account = useAccount();
|
||||
const navigate = useNavigate();
|
||||
const { subplebbitAddress } = useParams();
|
||||
|
||||
const nameRef = useRef();
|
||||
const subjectRef = useRef();
|
||||
const commentRef = useRef();
|
||||
const linkRef = useRef();
|
||||
const threadMenuRefs = useRef({});
|
||||
const replyMenuRefs = useRef({});
|
||||
|
||||
const [isReplyOpen, setIsReplyOpen] = useState(false);
|
||||
const navigate = useNavigate();
|
||||
const [prevScrollPos, setPrevScrollPos] = useState(0);
|
||||
const [visible, setVisible] = useState(true);
|
||||
const { feed, hasMore, loadMore } = useFeed({subplebbitAddresses: [`${selectedAddress}`], sortType: 'new'});
|
||||
const [selectedFeed, setSelectedFeed] = useState(feed);
|
||||
const { subplebbitAddress } = useParams();
|
||||
const subplebbit = useSubplebbit({subplebbitAddress: selectedAddress});
|
||||
|
||||
const { subscribed, subscribe, unsubscribe } = useSubscribe({subplebbitAddress: selectedAddress});
|
||||
const stateString = useStateString(subplebbit);
|
||||
|
||||
const { subscribed, subscribe, unsubscribe } = useSubscribe({subplebbitAddress: selectedAddress});
|
||||
const [isReplyOpen, setIsReplyOpen] = useState(false);
|
||||
const [prevScrollPos, setPrevScrollPos] = useState(0);
|
||||
const [visible, setVisible] = useState(true);
|
||||
const [triggerPublishComment, setTriggerPublishComment] = useState(false);
|
||||
const [selectedFeed, setSelectedFeed] = useState(feed);
|
||||
const [rotatedStates, setRotatedStates] = useState({});
|
||||
const [isImageSearchOpen, setIsImageSearchOpen] = useState(false);
|
||||
|
||||
|
||||
const [errorMessage, setErrorMessage] = useState(null);
|
||||
const [successMessage] = useState(null);
|
||||
useError(errorMessage, [errorMessage]);
|
||||
useSuccess(successMessage, [successMessage]);
|
||||
|
||||
const [triggerPublishComment, setTriggerPublishComment] = useState(false);
|
||||
|
||||
const errorString = useMemo(() => {
|
||||
if (subplebbit?.state === 'failed') {
|
||||
@@ -87,6 +91,7 @@ const Board = () => {
|
||||
}
|
||||
}, [subplebbit?.state, subplebbit?.error, selectedAddress])
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
if (errorString) {
|
||||
setErrorMessage(errorString);
|
||||
@@ -674,7 +679,66 @@ const Board = () => {
|
||||
]
|
||||
</span>
|
||||
</span>
|
||||
<button key={`pmb-${index}`} className="post-menu-button" title="Post menu" style={{ all: 'unset', cursor: 'pointer' }} data-cmd="post-menu">▶</button>
|
||||
<PostMenu
|
||||
key={`pmb-${index}`}
|
||||
title="Post menu"
|
||||
ref={el => threadMenuRefs.current[thread.cid] = el}
|
||||
className='post-menu-button'
|
||||
rotated={rotatedStates[thread.cid]}
|
||||
onClick={() => {
|
||||
const rect = threadMenuRefs.current[thread.cid].getBoundingClientRect();
|
||||
const menu = document.querySelector(`.post-menu-thread-${thread.cid}`);
|
||||
const scrollY = window.scrollY || window.pageYOffset;
|
||||
menu.style.top = `calc(${rect.top + scrollY}px - 258px)`;
|
||||
menu.style.left = `${rect.left}px`;
|
||||
|
||||
setRotatedStates(prevState => ({
|
||||
...prevState,
|
||||
[thread.cid]: !prevState[thread.cid]
|
||||
}));
|
||||
}}
|
||||
>
|
||||
▶
|
||||
</PostMenu>
|
||||
<div id="post-menu" className={`post-menu-thread post-menu-thread-${thread.cid}`}
|
||||
style={{ display: rotatedStates[thread.cid] ? 'block' : 'none' }}>
|
||||
<ul>
|
||||
<li>Edit post</li>
|
||||
<li>Hide thread</li>
|
||||
{(commentMediaInfo && (
|
||||
commentMediaInfo.type === 'image' ||
|
||||
(commentMediaInfo.type === 'webpage' &&
|
||||
commentMediaInfo.thumbnail))) ? (
|
||||
<li
|
||||
onMouseOver={() => {setIsImageSearchOpen(true)}}
|
||||
onMouseLeave={() => {setIsImageSearchOpen(false)}}>
|
||||
Image search »
|
||||
<ul className="dropdown-menu"
|
||||
style={{display: isImageSearchOpen ? 'block': 'none'}}>
|
||||
<li>
|
||||
<a
|
||||
href={`https://lens.google.com/uploadbyurl?url=${commentMediaInfo.url}`}
|
||||
target="_blank" rel="noreferrer"
|
||||
>Google</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href={`https://yandex.com/images/search?url=${commentMediaInfo.url}`}
|
||||
target="_blank" rel="noreferrer"
|
||||
>Yandex</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href={`https://saucenao.com/search.php?url=${commentMediaInfo.url}`}
|
||||
target="_blank" rel="noreferrer"
|
||||
>SauceNAO</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
) : null
|
||||
}
|
||||
</ul>
|
||||
</div>
|
||||
<div key={`bi-${index}`} id="backlink-id" className="backlink">
|
||||
{thread.replies?.pages?.topAll.comments
|
||||
.sort((a, b) => a.timestamp - b.timestamp)
|
||||
@@ -785,7 +849,65 @@ const Board = () => {
|
||||
<span key="pending" style={{color: 'red', fontWeight: '700'}}>Pending</span>
|
||||
)}
|
||||
</span>
|
||||
<button key={`pmb-${index}`} className="post-menu-button" title="Post menu" style={{ all: 'unset', cursor: 'pointer' }} data-cmd="post-menu">▶</button>
|
||||
<PostMenu
|
||||
key={`pmb-${index}`}
|
||||
title="Post menu"
|
||||
ref={el => replyMenuRefs.current[reply.cid] = el}
|
||||
className='post-menu-button'
|
||||
rotated={rotatedStates[reply.cid]}
|
||||
onClick={() => {
|
||||
const rect = replyMenuRefs.current[reply.cid].getBoundingClientRect();
|
||||
const menu = document.querySelector(`.post-menu-reply-${reply.cid}`);
|
||||
const scrollY = window.scrollY || window.pageYOffset;
|
||||
menu.style.top = `calc(${rect.top + scrollY}px - 258px)`;
|
||||
menu.style.left = `${rect.left}px`;
|
||||
|
||||
setRotatedStates(prevState => ({
|
||||
...prevState,
|
||||
[reply.cid]: !prevState[reply.cid]
|
||||
}));
|
||||
}}
|
||||
>
|
||||
▶
|
||||
</PostMenu>
|
||||
<div id="post-menu" className={`post-menu-reply post-menu-reply-${reply.cid}`}
|
||||
style={{ display: rotatedStates[reply.cid] ? 'block' : 'none' }}>
|
||||
<ul>
|
||||
<li>Edit post</li>
|
||||
<li>Hide post</li>
|
||||
{(replyMediaInfo && (
|
||||
replyMediaInfo.type === 'image' ||
|
||||
(replyMediaInfo.type === 'webpage' &&
|
||||
replyMediaInfo.thumbnail))) ? (
|
||||
<li
|
||||
onMouseOver={() => {setIsImageSearchOpen(true)}}
|
||||
onMouseLeave={() => {setIsImageSearchOpen(false)}}>
|
||||
Image search »
|
||||
<ul className="dropdown-menu"
|
||||
style={{display: isImageSearchOpen ? 'block': 'none'}}>
|
||||
<li>
|
||||
<a
|
||||
href={`https://lens.google.com/uploadbyurl?url=${commentMediaInfo.url}`}
|
||||
target="_blank" rel="noreferrer"
|
||||
>Google</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href={`https://yandex.com/images/search?url=${commentMediaInfo.url}`}
|
||||
target="_blank" rel="noreferrer"
|
||||
>Yandex</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href={`https://saucenao.com/search.php?url=${commentMediaInfo.url}`}
|
||||
target="_blank" rel="noreferrer"
|
||||
>SauceNAO</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
) : null}
|
||||
</ul>
|
||||
</div>
|
||||
<div id="backlink-id" className="backlink">
|
||||
{reply.replies?.pages?.topAll.comments
|
||||
.sort((a, b) => a.timestamp - b.timestamp)
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import React, { Fragment, useEffect, useMemo, useState } from 'react';
|
||||
import React, { Fragment, useEffect, useMemo, useState, useRef } from 'react';
|
||||
import { Helmet } from 'react-helmet-async';
|
||||
import { Link, useNavigate } from 'react-router-dom';
|
||||
import { Tooltip } from 'react-tooltip';
|
||||
@@ -7,7 +7,7 @@ import { useAccount, useAccountComments, useFeed, useSubplebbits } from '@plebbi
|
||||
import { flattenCommentsPages } from '@plebbit/plebbit-react-hooks/dist/lib/utils'
|
||||
import { debounce } from 'lodash';
|
||||
import useGeneralStore from '../../hooks/stores/useGeneralStore';
|
||||
import { Container, NavBar, Header, Break, TopBar, BoardForm } from '../styled/Board.styled';
|
||||
import { Container, NavBar, Header, Break, TopBar, BoardForm, PostMenu } from '../styled/Board.styled';
|
||||
import { Footer } from '../styled/Thread.styled';
|
||||
import ImageBanner from '../ImageBanner';
|
||||
import OfflineIndicator from '../OfflineIndicator';
|
||||
@@ -41,11 +41,16 @@ const Subscriptions = () => {
|
||||
} = useGeneralStore(state => state);
|
||||
|
||||
const account = useAccount();
|
||||
const navigate = useNavigate();
|
||||
|
||||
const threadMenuRefs = useRef({});
|
||||
const replyMenuRefs = useRef({});
|
||||
|
||||
const [isReplyOpen, setIsReplyOpen] = useState(false);
|
||||
const navigate = useNavigate();
|
||||
const [prevScrollPos, setPrevScrollPos] = useState(0);
|
||||
const [visible, setVisible] = useState(true);
|
||||
const [rotatedStates, setRotatedStates] = useState({});
|
||||
const [isImageSearchOpen, setIsImageSearchOpen] = useState(false);
|
||||
|
||||
const [errorMessage, setErrorMessage] = useState(null);
|
||||
useError(errorMessage, [errorMessage]);
|
||||
@@ -451,7 +456,66 @@ const Subscriptions = () => {
|
||||
]
|
||||
</span>
|
||||
</span>
|
||||
<button key={`pmb-${index}`} className="post-menu-button" title="Post menu" style={{ all: 'unset', cursor: 'pointer' }} data-cmd="post-menu">▶</button>
|
||||
<PostMenu
|
||||
key={`pmb-${index}`}
|
||||
title="Post menu"
|
||||
ref={el => threadMenuRefs.current[thread.cid] = el}
|
||||
className='post-menu-button'
|
||||
rotated={rotatedStates[thread.cid]}
|
||||
onClick={() => {
|
||||
const rect = threadMenuRefs.current[thread.cid].getBoundingClientRect();
|
||||
const menu = document.querySelector(`.post-menu-thread-${thread.cid}`);
|
||||
const scrollY = window.scrollY || window.pageYOffset;
|
||||
menu.style.top = `calc(${rect.top + scrollY}px - 225px)`;
|
||||
menu.style.left = `${rect.left}px`;
|
||||
|
||||
setRotatedStates(prevState => ({
|
||||
...prevState,
|
||||
[thread.cid]: !prevState[thread.cid]
|
||||
}));
|
||||
}}
|
||||
>
|
||||
▶
|
||||
</PostMenu>
|
||||
<div id="post-menu" className={`post-menu-thread post-menu-thread-${thread.cid}`}
|
||||
style={{ display: rotatedStates[thread.cid] ? 'block' : 'none' }}>
|
||||
<ul>
|
||||
<li>Edit post</li>
|
||||
<li>Hide thread</li>
|
||||
{(commentMediaInfo && (
|
||||
commentMediaInfo.type === 'image' ||
|
||||
(commentMediaInfo.type === 'webpage' &&
|
||||
commentMediaInfo.thumbnail))) ? (
|
||||
<li
|
||||
onMouseOver={() => {setIsImageSearchOpen(true)}}
|
||||
onMouseLeave={() => {setIsImageSearchOpen(false)}}>
|
||||
Image search »
|
||||
<ul className="dropdown-menu"
|
||||
style={{display: isImageSearchOpen ? 'block': 'none'}}>
|
||||
<li>
|
||||
<a
|
||||
href={`https://lens.google.com/uploadbyurl?url=${commentMediaInfo.url}`}
|
||||
target="_blank" rel="noreferrer"
|
||||
>Google</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href={`https://yandex.com/images/search?url=${commentMediaInfo.url}`}
|
||||
target="_blank" rel="noreferrer"
|
||||
>Yandex</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href={`https://saucenao.com/search.php?url=${commentMediaInfo.url}`}
|
||||
target="_blank" rel="noreferrer"
|
||||
>SauceNAO</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
) : null
|
||||
}
|
||||
</ul>
|
||||
</div>
|
||||
<div key={`bi-${index}`} id="backlink-id" className="backlink">
|
||||
{thread.replies?.pages?.topAll.comments
|
||||
.sort((a, b) => a.timestamp - b.timestamp)
|
||||
@@ -580,7 +644,65 @@ const Subscriptions = () => {
|
||||
tooltipPlace="top"
|
||||
className="offline-reply" />
|
||||
</span>
|
||||
<button key={`pmb-${index}`} className="post-menu-button" title="Post menu" style={{ all: 'unset', cursor: 'pointer' }} data-cmd="post-menu">▶</button>
|
||||
<PostMenu
|
||||
key={`pmb-${index}`}
|
||||
title="Post menu"
|
||||
ref={el => replyMenuRefs.current[reply.cid] = el}
|
||||
className='post-menu-button'
|
||||
rotated={rotatedStates[reply.cid]}
|
||||
onClick={() => {
|
||||
const rect = replyMenuRefs.current[reply.cid].getBoundingClientRect();
|
||||
const menu = document.querySelector(`.post-menu-reply-${reply.cid}`);
|
||||
const scrollY = window.scrollY || window.pageYOffset;
|
||||
menu.style.top = `calc(${rect.top + scrollY}px - 225px)`;
|
||||
menu.style.left = `${rect.left}px`;
|
||||
|
||||
setRotatedStates(prevState => ({
|
||||
...prevState,
|
||||
[reply.cid]: !prevState[reply.cid]
|
||||
}));
|
||||
}}
|
||||
>
|
||||
▶
|
||||
</PostMenu>
|
||||
<div id="post-menu" className={`post-menu-reply post-menu-reply-${reply.cid}`}
|
||||
style={{ display: rotatedStates[reply.cid] ? 'block' : 'none' }}>
|
||||
<ul>
|
||||
<li>Edit post</li>
|
||||
<li>Hide post</li>
|
||||
{(replyMediaInfo && (
|
||||
replyMediaInfo.type === 'image' ||
|
||||
(replyMediaInfo.type === 'webpage' &&
|
||||
replyMediaInfo.thumbnail))) ? (
|
||||
<li
|
||||
onMouseOver={() => {setIsImageSearchOpen(true)}}
|
||||
onMouseLeave={() => {setIsImageSearchOpen(false)}}>
|
||||
Image search »
|
||||
<ul className="dropdown-menu"
|
||||
style={{display: isImageSearchOpen ? 'block': 'none'}}>
|
||||
<li>
|
||||
<a
|
||||
href={`https://lens.google.com/uploadbyurl?url=${commentMediaInfo.url}`}
|
||||
target="_blank" rel="noreferrer"
|
||||
>Google</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href={`https://yandex.com/images/search?url=${commentMediaInfo.url}`}
|
||||
target="_blank" rel="noreferrer"
|
||||
>Yandex</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href={`https://saucenao.com/search.php?url=${commentMediaInfo.url}`}
|
||||
target="_blank" rel="noreferrer"
|
||||
>SauceNAO</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
) : null}
|
||||
</ul>
|
||||
</div>
|
||||
<div id="backlink-id" className="backlink">
|
||||
{reply.replies?.pages?.topAll.comments
|
||||
.sort((a, b) => a.timestamp - b.timestamp)
|
||||
|
||||
@@ -6,7 +6,7 @@ import { useAccount, useAccountComments, useComment, usePublishComment, useSubpl
|
||||
import { flattenCommentsPages } from '@plebbit/plebbit-react-hooks/dist/lib/utils'
|
||||
import { debounce } from 'lodash';
|
||||
import useGeneralStore from '../../hooks/stores/useGeneralStore';
|
||||
import { Container, NavBar, Header, Break, PostForm, PostFormTable } from '../styled/Board.styled';
|
||||
import { Container, NavBar, Header, Break, PostForm, PostFormTable, PostMenu } from '../styled/Board.styled';
|
||||
import { ReplyFormLink, TopBar, BottomBar, BoardForm, Footer } from '../styled/Thread.styled';
|
||||
import ImageBanner from '../ImageBanner';
|
||||
import OfflineIndicator from '../OfflineIndicator';
|
||||
@@ -48,23 +48,27 @@ const Thread = () => {
|
||||
showPostFormLink,
|
||||
} = useGeneralStore(state => state);
|
||||
|
||||
const account = useAccount();
|
||||
const navigate = useNavigate();
|
||||
const handleClickForm = useClickForm();
|
||||
|
||||
const nameRef = useRef();
|
||||
const commentRef = useRef();
|
||||
const linkRef = useRef();
|
||||
const threadMenuRefs = useRef({});
|
||||
const replyMenuRefs = useRef({});
|
||||
|
||||
const [triggerPublishComment, setTriggerPublishComment] = useState(false);
|
||||
|
||||
const [errorMessage, setErrorMessage] = useState(null);
|
||||
useError(errorMessage, [errorMessage]);
|
||||
|
||||
const [isReplyOpen, setIsReplyOpen] = useState(false);
|
||||
const navigate = useNavigate();
|
||||
const [prevScrollPos, setPrevScrollPos] = useState(0);
|
||||
const [visible, setVisible] = useState(true);
|
||||
const account = useAccount();
|
||||
const [rotatedStates, setRotatedStates] = useState({});
|
||||
const [isImageSearchOpen, setIsImageSearchOpen] = useState(false);
|
||||
|
||||
useError(errorMessage, [errorMessage]);
|
||||
const comment = useComment({commentCid: selectedThread});
|
||||
const { subplebbitAddress, threadCid } = useParams();
|
||||
const handleClickForm = useClickForm();
|
||||
const subplebbit = useSubplebbit({subplebbitAddress: comment.subplebbitAddress});
|
||||
const selectedAddress = subplebbit.address;
|
||||
|
||||
@@ -631,7 +635,65 @@ const Thread = () => {
|
||||
setIsReplyOpen(true); setSelectedParentCid(comment.cid); setSelectedShortCid(comment.shortCid);
|
||||
}} title="Reply to this post">{comment.shortCid}</button>
|
||||
</span>
|
||||
<button className="post-menu-button" title="Post menu" style={{ all: 'unset', cursor: 'pointer' }}>▶</button>
|
||||
<PostMenu
|
||||
key={`pmb-${index}`}
|
||||
title="Post menu"
|
||||
ref={el => threadMenuRefs.current[comment.cid] = el}
|
||||
className='post-menu-button'
|
||||
rotated={rotatedStates[comment.cid]}
|
||||
onClick={() => {
|
||||
const rect = threadMenuRefs.current[comment.cid].getBoundingClientRect();
|
||||
const menu = document.querySelector(`.post-menu-thread-${comment.cid}`);
|
||||
menu.style.top = `calc(${rect.top}px + 17px)`;
|
||||
menu.style.left = `${rect.left}px`;
|
||||
|
||||
setRotatedStates(prevState => ({
|
||||
...prevState,
|
||||
[comment.cid]: !prevState[comment.cid]
|
||||
}));
|
||||
}}
|
||||
>
|
||||
▶
|
||||
</PostMenu>
|
||||
<div id="post-menu" className={`post-menu-thread post-menu-thread-${comment.cid}`}
|
||||
style={{ display: rotatedStates[comment.cid] ? 'block' : 'none' }}>
|
||||
<ul>
|
||||
<li>Edit post</li>
|
||||
<li>Hide thread</li>
|
||||
{(commentMediaInfo && (
|
||||
commentMediaInfo.type === 'image' ||
|
||||
(commentMediaInfo.type === 'webpage' &&
|
||||
commentMediaInfo.thumbnail))) ? (
|
||||
<li
|
||||
onMouseOver={() => {setIsImageSearchOpen(true)}}
|
||||
onMouseLeave={() => {setIsImageSearchOpen(false)}}>
|
||||
Image search »
|
||||
<ul className="dropdown-menu"
|
||||
style={{display: isImageSearchOpen ? 'block': 'none'}}>
|
||||
<li>
|
||||
<a
|
||||
href={`https://lens.google.com/uploadbyurl?url=${commentMediaInfo.url}`}
|
||||
target="_blank" rel="noreferrer"
|
||||
>Google</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href={`https://yandex.com/images/search?url=${commentMediaInfo.url}`}
|
||||
target="_blank" rel="noreferrer"
|
||||
>Yandex</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href={`https://saucenao.com/search.php?url=${commentMediaInfo.url}`}
|
||||
target="_blank" rel="noreferrer"
|
||||
>SauceNAO</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
) : null
|
||||
}
|
||||
</ul>
|
||||
</div>
|
||||
<div id="backlink-id" className="backlink">
|
||||
{comment?.replies?.pages?.topAll.comments
|
||||
.sort((a, b) => a.timestamp - b.timestamp)
|
||||
@@ -716,7 +778,64 @@ const Thread = () => {
|
||||
<span key="pending" style={{color: 'red', fontWeight: '700'}}>Pending</span>
|
||||
)}
|
||||
</span>
|
||||
<button key={`pmb-${index}`} className="post-menu-button" title="Post menu" style={{ all: 'unset', cursor: 'pointer' }}>▶</button>
|
||||
<PostMenu
|
||||
key={`pmb-${index}`}
|
||||
title="Post menu"
|
||||
ref={el => replyMenuRefs.current[reply.cid] = el}
|
||||
className='post-menu-button'
|
||||
rotated={rotatedStates[reply.cid]}
|
||||
onClick={() => {
|
||||
const rect = replyMenuRefs.current[reply.cid].getBoundingClientRect();
|
||||
const menu = document.querySelector(`.post-menu-reply-${reply.cid}`);
|
||||
menu.style.top = `calc(${rect.top}px + 17px)`;
|
||||
menu.style.left = `${rect.left}px`;
|
||||
|
||||
setRotatedStates(prevState => ({
|
||||
...prevState,
|
||||
[reply.cid]: !prevState[reply.cid]
|
||||
}));
|
||||
}}
|
||||
>
|
||||
▶
|
||||
</PostMenu>
|
||||
<div id="post-menu" className={`post-menu-reply post-menu-reply-${reply.cid}`}
|
||||
style={{ display: rotatedStates[reply.cid] ? 'block' : 'none' }}>
|
||||
<ul>
|
||||
<li>Edit post</li>
|
||||
<li>Hide post</li>
|
||||
{(replyMediaInfo && (
|
||||
replyMediaInfo.type === 'image' ||
|
||||
(replyMediaInfo.type === 'webpage' &&
|
||||
replyMediaInfo.thumbnail))) ? (
|
||||
<li
|
||||
onMouseOver={() => {setIsImageSearchOpen(true)}}
|
||||
onMouseLeave={() => {setIsImageSearchOpen(false)}}>
|
||||
Image search »
|
||||
<ul className="dropdown-menu"
|
||||
style={{display: isImageSearchOpen ? 'block': 'none'}}>
|
||||
<li>
|
||||
<a
|
||||
href={`https://lens.google.com/uploadbyurl?url=${commentMediaInfo.url}`}
|
||||
target="_blank" rel="noreferrer"
|
||||
>Google</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href={`https://yandex.com/images/search?url=${commentMediaInfo.url}`}
|
||||
target="_blank" rel="noreferrer"
|
||||
>Yandex</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href={`https://saucenao.com/search.php?url=${commentMediaInfo.url}`}
|
||||
target="_blank" rel="noreferrer"
|
||||
>SauceNAO</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
) : null}
|
||||
</ul>
|
||||
</div>
|
||||
<div id="backlink-id" className="backlink">
|
||||
{reply.replies?.pages?.topAll.comments
|
||||
.sort((a, b) => a.timestamp - b.timestamp)
|
||||
|
||||
Reference in New Issue
Block a user