External/5chan
1
0
Fork 0
mirror of https://github.com/bitsocialnet/5chan.git synced 2026-08-03 07:41:04 +02:00
Code Issues Packages Projects Releases Wiki Activity

added tooltip

Browse Source
This commit is contained in:
plebbitor
2023-02-28 16:34:33 +01:00
parent e105097fd5
commit 08cc113295
4 changed files with 154 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.js
+1
View File
@@ -6,6 +6,7 @@ import Board from './components/Board';
import Thread from './components/Thread'; import Thread from './components/Thread';
import Catalog from './components/Catalog'; import Catalog from './components/Catalog';
import { createGlobalStyle } from 'styled-components'; import { createGlobalStyle } from 'styled-components';
import 'react-tooltip/dist/react-tooltip.css';
export const BoardContext = React.createContext(); export const BoardContext = React.createContext();
src/components/Board.jsx
+74 -10
View File
@@ -5,6 +5,7 @@ import { Container, NavBar, Header, Break, PostFormLink, PostFormTable, PostForm
import ImageBanner from './ImageBanner'; import ImageBanner from './ImageBanner';
import { useFeed, useAccountsActions } from '@plebbit/plebbit-react-hooks'; import { useFeed, useAccountsActions } from '@plebbit/plebbit-react-hooks';
import InfiniteScroll from 'react-infinite-scroller'; import InfiniteScroll from 'react-infinite-scroller';
import { Tooltip } from 'react-tooltip';
const Board = ({ setBodyStyle }) => { const Board = ({ setBodyStyle }) => {
@@ -493,19 +494,56 @@ const Board = ({ setBodyStyle }) => {
<div key={`mob-po-${thread.cid}`} className="post op"> <div key={`mob-po-${thread.cid}`} className="post op">
<div key={`mob-pi-${thread.cid}`} className="post-info-mobile"> <div key={`mob-pi-${thread.cid}`} className="post-info-mobile">
<a key={`mob-pb-${thread.cid}`} className="post-menu-button-mobile" href={handleVoidClick}>...</a> <a key={`mob-pb-${thread.cid}`} className="post-menu-button-mobile" href={handleVoidClick}>...</a>
<span className="name-block-mobile"> <span key={`mob-nbm-${thread.cid}`} className="name-block-mobile">
<span key={`mob-n-${thread.cid}`} className="name-mobile">LongName (...)</span> {thread.author.displayName
? thread.author.displayName.length > 15
? <>
<Tooltip key={`mob-tt-nm-${thread.cid}`} id="tt-name-mobile" className="tooltip" />
<span key={`mob-n-${thread.cid}`} className="name-mobile"
data-tooltip-id="tt-name-mobile"
data-tooltip-content={thread.author.displayName}
data-tooltip-place="top">
{thread.author.displayName.slice(0, 15) + " (...)"}
</span>
</>
: <span key={`mob-n-${thread.cid}`} className="name-mobile">
{thread.author.displayName}</span>
: <span key={`mob-n-${thread.cid}`} className="name-mobile">
Anonymous</span>}
&nbsp; &nbsp;
<span key={`mob-pa-${thread.cid}`} className="poster-address-mobile"> <span key={`mob-pa-${thread.cid}`} className="poster-address-mobile">
(User:&nbsp; (User:&nbsp;
<span key={`mob-ha-${thread.cid}`} className="highlight-address-mobile" title="Highlight posts by this address">CCxfJWFT...</span> {thread.author.address.length > 15 ?
) <>
<Tooltip key={`mob-tt-am-${thread.cid}`} id="tt-address-mobile" className="tooltip" />
<span key={`mob-ha-${thread.cid}`} className="highlight-address-mobile"
data-tooltip-id="tt-address-mobile"
data-tooltip-content={thread.author.address}
data-tooltip-place="top">
{thread.author.address.slice(0, 15) + "..."}
</span>
</>
: <span key={`mob-ha-${thread.cid}`} className="highlight-address-mobile">
{thread.author.address}
</span>}
)&nbsp;
</span> </span>
<br key={`mob-br1-${thread.cid}`} /> <br key={`mob-br1-${thread.cid}`} />
<span key={`mob-s-${thread.cid}`} className="subject-mobile"> {thread.title ? (
{/* {thread.title ? `${thread.title}` : null} */} thread.title.length > 30 ?
Sometimes titles can be very lon (…) <>
</span> <Tooltip key={`mob-tt-tm-${thread.cid}`} id="tt-title-mobile" className="tooltip" />
<span key={`mob-t-${thread.cid}`} className="subject-mobile"
data-tooltip-id="tt-title-mobile"
data-tooltip-content={thread.title}
data-tooltip-place="top">
{thread.title.slice(0, 30) + " (...)"}
</span>
</>
: <span key={`mob-t-${thread.cid}`} className="subject-mobile">
{thread.title}
</span>)
: null}
</span> </span>
<span key={`mob-dt-${thread.cid}`} className="date-time-mobile"> <span key={`mob-dt-${thread.cid}`} className="date-time-mobile">
2 weeks ago 2 weeks ago
@@ -542,11 +580,37 @@ const Board = ({ setBodyStyle }) => {
<div key={`mob-pi-${reply.cid}`} className="post-info-mobile"> <div key={`mob-pi-${reply.cid}`} className="post-info-mobile">
<a className="post-menu-button-mobile" title="Post menu">...</a> <a className="post-menu-button-mobile" title="Post menu">...</a>
<span key={`mob-nb-${reply.cid}`} className="name-block-mobile"> <span key={`mob-nb-${reply.cid}`} className="name-block-mobile">
<span key={`mob-n-${reply.cid}`} className="name-mobile">LongName (...)</span> {reply.author.displayName
? reply.author.displayName.length > 12
? <>
<Tooltip key={`mob-tt-nm-${reply.cid}`} id="tt-name-mobile" className="tooltip" />
<span key={`mob-n-${reply.cid}`} className="name-mobile"
data-tooltip-id="tt-name-mobile"
data-tooltip-content={reply.author.displayName}
data-tooltip-place="top">
{reply.author.displayName.slice(0, 12) + " (...)"}
</span>
</>
: <span key={`mob-n-${reply.cid}`} className="name-mobile">
{reply.author.displayName}</span>
: <span key={`mob-n-${reply.cid}`} className="name-mobile">
Anonymous</span>}
&nbsp; &nbsp;
<span key={`mob-pa-${reply.cid}`} className="poster-address-mobile"> <span key={`mob-pa-${reply.cid}`} className="poster-address-mobile">
(User:&nbsp; (User:&nbsp;
<span key={`mob-ha-${reply.cid}`} className="highlight-address-mobile" title="Highlight posts by this address">CCxfJWFT...</span> {reply.author.address.length > 12 ?
<>
<Tooltip key={`mob-tt-am-${reply.cid}`} id="tt-address-mobile" className="tooltip" />
<span key={`mob-ha-${reply.cid}`} className="highlight-address-mobile"
data-tooltip-id="tt-address-mobile"
data-tooltip-content={reply.author.address}
data-tooltip-place="top">
{reply.author.address.slice(0, 12) + "..."}
</span>
</>
: <span key={`mob-ha-${reply.cid}`} className="highlight-address-mobile">
{reply.author.address}
</span>}
) )
</span> </span>
<br key={`mob-br-${reply.cid}`} /> <br key={`mob-br-${reply.cid}`} />
src/components/Thread.jsx
+72 -9
View File
@@ -5,6 +5,7 @@ import { ReplyFormTable, ReplyFormLink, TopBar, BottomBar } from './styles/Threa
import { BoardContext } from '../App'; import { BoardContext } from '../App';
import { useComment } from '@plebbit/plebbit-react-hooks'; import { useComment } from '@plebbit/plebbit-react-hooks';
import ImageBanner from './ImageBanner'; import ImageBanner from './ImageBanner';
import { Tooltip } from 'react-tooltip';
const Thread = ({ setBodyStyle }) => { const Thread = ({ setBodyStyle }) => {
const [defaultSubplebbits, setDefaultSubplebbits] = useState([]); const [defaultSubplebbits, setDefaultSubplebbits] = useState([]);
@@ -417,18 +418,54 @@ const Thread = ({ setBodyStyle }) => {
<div key={`mob-pi-${comment.cid}`} className="post-info-mobile"> <div key={`mob-pi-${comment.cid}`} className="post-info-mobile">
<a key={`mob-pb-${comment.cid}`} className="post-menu-button-mobile" href={handleVoidClick}>...</a> <a key={`mob-pb-${comment.cid}`} className="post-menu-button-mobile" href={handleVoidClick}>...</a>
<span className="name-block-mobile"> <span className="name-block-mobile">
<span key={`mob-n-${comment.cid}`} className="name-mobile">LongName (...)</span> {comment.author.displayName
? comment.author.displayName.length > 15
? <>
<Tooltip key={`mob-tt-nm-${comment.cid}`} id="tt-name-mobile" className="tooltip" />
<span key={`mob-n-${comment.cid}`} className="name-mobile"
data-tooltip-id="tt-name-mobile"
data-tooltip-content={comment.author.displayName}
data-tooltip-place="top">
{comment.author.displayName.slice(0, 15) + " (...)"}
</span>
</>
: <span key={`mob-n-${comment.cid}`} className="name-mobile">
{comment.author.displayName}</span>
: <span key={`mob-n-${comment.cid}`} className="name-mobile">
Anonymous</span>}
&nbsp; &nbsp;
<span key={`mob-pa-${comment.cid}`} className="poster-address-mobile"> <span key={`mob-pa-${comment.cid}`} className="poster-address-mobile">
(User:&nbsp; (User:&nbsp;
<span key={`mob-ha-${comment.cid}`} className="highlight-address-mobile" title="Highlight posts by this address">CCxfJWFT...</span> {comment.author.address.length > 15 ?
) <>
<Tooltip key={`mob-tt-am-${comment.cid}`} id="tt-address-mobile" className="tooltip" />
<span key={`mob-ha-${comment.cid}`} className="highlight-address-mobile"
data-tooltip-id="tt-address-mobile"
data-tooltip-content={comment.author.address}
data-tooltip-place="top">
{comment.author.address.slice(0, 15) + "..."}
</span>
</>
: <span key={`mob-ha-${comment.cid}`} className="highlight-address-mobile">
{comment.author.address}
</span>}
)&nbsp;
</span> </span>
<br key={`mob-br1-${comment.cid}`} /> <br key={`mob-br1-${comment.cid}`} />
<span key={`mob-s-${comment.cid}`} className="subject-mobile"> {comment.title ? (
{/* {thread.title ? `${thread.title}` : null} */} comment.title.length > 30 ?
Sometimes titles can be very lon (…) <>
</span> <Tooltip key={`mob-tt-tm-${comment.cid}`} id="tt-title-mobile" className="tooltip" />
<span key={`mob-t-${comment.cid}`} className="subject-mobile"
data-tooltip-id="tt-title-mobile"
data-tooltip-content={comment.title}
data-tooltip-place="top">
{comment.title.slice(0, 30) + " (...)"}
</span>
</>
: <span key={`mob-t-${comment.cid}`} className="subject-mobile">
{comment.title}
</span>) : null}
</span> </span>
<span key={`mob-dt-${comment.cid}`} className="date-time-mobile"> <span key={`mob-dt-${comment.cid}`} className="date-time-mobile">
2 weeks ago 2 weeks ago
@@ -465,11 +502,37 @@ const Thread = ({ setBodyStyle }) => {
<div key={`mob-pi-${reply.cid}`} className="post-info-mobile"> <div key={`mob-pi-${reply.cid}`} className="post-info-mobile">
<a className="post-menu-button-mobile" title="Post menu">...</a> <a className="post-menu-button-mobile" title="Post menu">...</a>
<span key={`mob-nb-${reply.cid}`} className="name-block-mobile"> <span key={`mob-nb-${reply.cid}`} className="name-block-mobile">
<span key={`mob-n-${reply.cid}`} className="name-mobile">{reply.author.displayName || "Anonymous"}</span> {reply.author.displayName
? reply.author.displayName.length > 12
? <>
<Tooltip key={`mob-tt-nm-${reply.cid}`} id="tt-name-mobile" className="tooltip" />
<span key={`mob-n-${reply.cid}`} className="name-mobile"
data-tooltip-id="tt-name-mobile"
data-tooltip-content={reply.author.displayName}
data-tooltip-place="top">
{reply.author.displayName.slice(0, 12) + " (...)"}
</span>
</>
: <span key={`mob-n-${reply.cid}`} className="name-mobile">
{reply.author.displayName}</span>
: <span key={`mob-n-${reply.cid}`} className="name-mobile">
Anonymous</span>}
&nbsp; &nbsp;
<span key={`mob-pa-${reply.cid}`} className="poster-address-mobile"> <span key={`mob-pa-${reply.cid}`} className="poster-address-mobile">
(User:&nbsp; (User:&nbsp;
<span key={`mob-ha-${reply.cid}`} className="highlight-address-mobile" title="Highlight posts by this address">CCxfJWFT...</span> {reply.author.address.length > 12 ?
<>
<Tooltip key={`mob-tt-am-${reply.cid}`} id="tt-address-mobile" className="tooltip" />
<span key={`mob-ha-${reply.cid}`} className="highlight-address-mobile"
data-tooltip-id="tt-address-mobile"
data-tooltip-content={reply.author.address}
data-tooltip-place="top">
{reply.author.address.slice(0, 12) + "..."}
</span>
</>
: <span key={`mob-ha-${reply.cid}`} className="highlight-address-mobile">
{reply.author.address}
</span>}
) )
</span> </span>
<br key={`mob-br-${reply.cid}`} /> <br key={`mob-br-${reply.cid}`} />
src/components/styles/Board.styled.jsx
+7
View File
@@ -1575,6 +1575,13 @@ export const BoardForm = styled.div`
display: none; display: none;
} }
.tooltip {
border-radius: 0;
max-width: 80%;
font-size: 11px;
padding: 3px;
}
${({ selectedStyle }) => { ${({ selectedStyle }) => {
switch (selectedStyle) { switch (selectedStyle) {
case 'Yotsuba': case 'Yotsuba':