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

add offline indicator to all desktop views

Browse Source
This commit is contained in:
Tom
2023-05-06 15:40:30 +02:00
parent 5ee3c2c5e3
commit 511e2248c9
9 changed files with 85 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/BoardSubscription.jsx
-22
View File
@@ -1,22 +0,0 @@
import React from "react";
import { useSubplebbit } from "@plebbit/plebbit-react-hooks";
import { Tooltip } from 'react-tooltip';
const BoardSubscription = ({ address }) => {
const subplebbit = useSubplebbit({ subplebbitAddress: address });
const isOnline = subplebbit.updatedAt > Date.now() / 1000 - 60 * 20;
return (
<>
{address}&nbsp;{!isOnline && (
<img className="disconnected" alt="offline" src="assets/offline.png"
data-tooltip-id="tooltip"
data-tooltip-content="OFFLINE"
data-tooltip-place="top" />
)}
</>
);
};
export default BoardSubscription;
src/components/OfflineIndicator.jsx
+28
View File
@@ -0,0 +1,28 @@
import React from "react";
import { useSubplebbit } from "@plebbit/plebbit-react-hooks";
const OfflineIndicator = ({ address, className, tooltipPlace }) => {
const subplebbit = useSubplebbit({ subplebbitAddress: address });
const isOnline = subplebbit.updatedAt > Date.now() / 1000 - 60 * 20;
return (
<>
{!isOnline && (
<>
{" "}
<img
className={className}
alt="offline"
src="assets/offline.png"
data-tooltip-id="tooltip"
data-tooltip-content="OFFLINE"
data-tooltip-place={tooltipPlace}
/>
</>
)}
</>
);
};
export default OfflineIndicator;
src/components/styled/Board.styled.jsx
+13
View File
@@ -30,6 +30,12 @@ export const NavBar = styled.div`
#board-nav-mobile {
display: none;
}
.offline-nav {
width: 12px;
position: relative;
margin: 2px 2px -2px -2px;
}
}
@media (max-width: 480px) {
@@ -1617,6 +1623,13 @@ export const BoardForm = styled.div`
margin-top: 10px;
}
.offline-sub {
width: 13px;
margin-right: -5px;
margin-bottom: -2px;
position: relative;
}
${({ selectedStyle }) => {
switch (selectedStyle) {
case 'Yotsuba':
src/components/styled/Home.styled.jsx
+14 -4
View File
@@ -286,18 +286,28 @@ export const BoardsContent = styled.div`
.boardlink, #view-all {
font-size: 1.2em;
}
.disconnected {
width: 15px;
margin-bottom: -1px;
position: absolute;
}
}
@media (min-width: 480px) {
#mobile-br {
display: none;
}
.disconnected {
width: 11px;
margin-bottom: -1px;
margin-top: 2px;
position: absolute;
}
}
.disconnected {
width: 13px;
position: absolute;
}
`;
export const Footer = styled.div`
src/components/views/Board.jsx
+5 -2
View File
@@ -10,6 +10,7 @@ import useGeneralStore from '../../hooks/stores/useGeneralStore';
import { Container, NavBar, Header, Break, PostFormLink, PostFormTable, PostForm, TopBar, BoardForm } from '../styled/Board.styled';
import { Footer } from '../styled/Thread.styled';
import ImageBanner from '../ImageBanner';
import OfflineIndicator from '../OfflineIndicator';
import Post from '../Post';
import PostLoader from '../PostLoader';
import ReplyModal from '../ReplyModal';
@@ -325,10 +326,8 @@ const Board = () => {
try {
if (subscribed === false) {
await subscribe(selectedAddress);
setSuccessMessage(`Subscribed to ${selectedTitle ? selectedTitle : selectedAddress}`);
} else if (subscribed === true) {
await unsubscribe(selectedAddress);
setSuccessMessage(`Unsubscribed from ${selectedTitle ? selectedTitle : selectedAddress}`);
}
} catch (error) {
setErrorMessage(error);
@@ -360,6 +359,10 @@ const Board = () => {
{index === 0 ? null : "\u00a0"}
<Link to={`/p/${subplebbit.address}`} key={`a-${subplebbit.address}`} onClick={() => handleClickTitle(subplebbit.title, subplebbit.address)}
>{subplebbit.title ? subplebbit.title : subplebbit.address}</Link>
<OfflineIndicator
address={subplebbit.address}
className="offline-nav"
tooltipPlace="bottom" />
{index !== defaultSubplebbits.length - 1 ? " /" : null}
</span>
))}
src/components/views/Catalog.jsx
+5 -2
View File
@@ -10,6 +10,7 @@ import { Threads } from '../styled/Catalog.styled';
import { TopBar, Footer } from '../styled/Thread.styled';
import CatalogLoader from '../CatalogLoader';
import ImageBanner from '../ImageBanner';
import OfflineIndicator from '../OfflineIndicator';
import SettingsModal from '../SettingsModal';
import getCommentMediaInfo from '../../utils/getCommentMediaInfo';
import handleStyleChange from '../../utils/handleStyleChange';
@@ -239,10 +240,8 @@ const Catalog = () => {
try {
if (subscribed === false) {
await subscribe(selectedAddress);
setSuccessMessage(`Subscribed to ${selectedTitle ? selectedTitle : selectedAddress}`);
} else if (subscribed === true) {
await unsubscribe(selectedAddress);
setSuccessMessage(`Unsubscribed from ${selectedTitle ? selectedTitle : selectedAddress}`);
}
} catch (error) {
setErrorMessage(error);
@@ -273,6 +272,10 @@ const Catalog = () => {
setSelectedAddress(subplebbit.address);
}}
>{subplebbit.title ? subplebbit.title : subplebbit.address}</Link>
<OfflineIndicator
address={subplebbit.address}
className="offline-nav"
tooltipPlace="bottom" />
{index !== defaultSubplebbits.length - 1 ? " /" : null}
</span>
))}
src/components/views/Home.jsx
+6 -2
View File
@@ -5,7 +5,7 @@ import useGeneralStore from '../../hooks/stores/useGeneralStore';
import { Link, useNavigate } from 'react-router-dom';
import { Container, Header, Logo, Page, Search, About, AboutTitle, AboutContent, Boards, BoardsTitle, BoardsContent, Footer } from '../styled/Home.styled';
import BoardAvatar from '../BoardAvatar';
import BoardSubscription from '../BoardSubscription';
import OfflineIndicator from '../OfflineIndicator';
import packageJson from '../../../package.json'
import { Tooltip } from 'react-tooltip';
const {version} = packageJson
@@ -104,7 +104,11 @@ const Home = () => {
<>
<Link key={`sub-${index}`} className="boardlink" to={`/p/${subscription}`}>
<br id="mobile-br" />
<BoardSubscription address={subscription} />
{subscription}&nbsp;
<OfflineIndicator
address={subscription}
className="disconnected"
tooltipPlace="top" />
</Link>
<br />
</>
src/components/views/Subscriptions.jsx
+9
View File
@@ -10,6 +10,7 @@ import useGeneralStore from '../../hooks/stores/useGeneralStore';
import { Container, NavBar, Header, Break, TopBar, BoardForm } from '../styled/Board.styled';
import { Footer } from '../styled/Thread.styled';
import ImageBanner from '../ImageBanner';
import OfflineIndicator from '../OfflineIndicator';
import Post from '../Post';
import PostLoader from '../PostLoader';
import ReplyModal from '../ReplyModal';
@@ -173,6 +174,10 @@ const Subscriptions = () => {
{index === 0 ? null : "\u00a0"}
<Link to={`/p/${subplebbit.address}`} key={`a-${subplebbit.address}`} onClick={() => handleClickTitle(subplebbit.title, subplebbit.address)}
>{subplebbit.title ? subplebbit.title : subplebbit.address}</Link>
<OfflineIndicator
address={subplebbit.address}
className="offline-nav"
tooltipPlace="bottom" />
{index !== defaultSubplebbits.length - 1 ? " /" : null}
</span>
))}
@@ -387,6 +392,10 @@ const Subscriptions = () => {
>{thread.subplebbitAddress.slice(0, 10) + "(...)"}</span>
)}
</Link>
<OfflineIndicator key={`oi-${index}`}
address={thread.subplebbitAddress}
className="offline-sub"
tooltipPlace="top" />
<span key={`rl1-${index}`}>&nbsp;&nbsp;
[
<Link key={`rl2-${index}`} to={`/p/${thread.subplebbitAddress}/c/${thread.cid}`} onClick={() => setSelectedThread(thread.cid)} className="reply-link" >Reply</Link>
src/components/views/Thread.jsx
+5
View File
@@ -9,6 +9,7 @@ import useGeneralStore from '../../hooks/stores/useGeneralStore';
import { Container, NavBar, Header, Break, PostForm, PostFormTable } from '../styled/Board.styled';
import { ReplyFormLink, TopBar, BottomBar, BoardForm, Footer } from '../styled/Thread.styled';
import ImageBanner from '../ImageBanner';
import OfflineIndicator from '../OfflineIndicator';
import Post from '../Post';
import PostLoader from '../PostLoader';
import ReplyModal from '../ReplyModal';
@@ -297,6 +298,10 @@ const Thread = () => {
setSelectedAddress(subplebbit.address);
}}
>{subplebbit.title ? subplebbit.title : subplebbit.address}</Link>
<OfflineIndicator
address={subplebbit.address}
className="offline-nav"
tooltipPlace="bottom" />
{index !== defaultSubplebbits.length - 1 ? " /" : null}
</span>
))}