diff --git a/src/components/catalog-row/catalog-row.tsx b/src/components/catalog-row/catalog-row.tsx index f1bc7a1d..30a19bde 100644 --- a/src/components/catalog-row/catalog-row.tsx +++ b/src/components/catalog-row/catalog-row.tsx @@ -1,12 +1,12 @@ import { Link, useLocation } from 'react-router-dom'; import { useTranslation } from 'react-i18next'; import { Comment } from '@plebbit/plebbit-react-hooks'; +import styles from './catalog-row.module.css'; import { getCommentMediaInfo, getHasThumbnail } from '../../lib/utils/media-utils'; import { isAllView } from '../../lib/utils/view-utils'; import useFetchGifFirstFrame from '../../hooks/use-fetch-gif-first-frame'; import useCountLinksInReplies from '../../hooks/use-count-links-in-replies'; -import styles from './catalog-row.module.css'; -import PostMenu from '../post/post-menu/post-menu'; +import PostMenuDesktop from '../post/post-desktop/post-menu-desktop/'; export const CatalogPostMedia = ({ commentMediaInfo }: { commentMediaInfo: any }) => { const { patternThumbnailUrl, thumbnail, type, url } = commentMediaInfo || {}; @@ -93,7 +93,7 @@ const CatalogPost = ({ post }: { post: Comment }) => { )} - + diff --git a/src/components/post/post-desktop/post-desktop.tsx b/src/components/post/post-desktop/post-desktop.tsx index 0e1f3eb8..b65e8eee 100644 --- a/src/components/post/post-desktop/post-desktop.tsx +++ b/src/components/post/post-desktop/post-desktop.tsx @@ -4,6 +4,7 @@ import { useLocation, useParams } from 'react-router-dom'; import { Link } from 'react-router-dom'; import { useAccount } from '@plebbit/plebbit-react-hooks'; import Plebbit from '@plebbit/plebbit-js/dist/browser/index.js'; +import styles from '../post.module.css'; import { getCommentMediaInfo, getDisplayMediaInfoType, getHasThumbnail } from '../../../lib/utils/media-utils'; import { getFormattedDate } from '../../../lib/utils/time-utils'; import { isValidURL } from '../../../lib/utils/url-utils'; @@ -15,9 +16,8 @@ import CommentMedia from '../../comment-media'; import { canEmbed } from '../../embed'; import LoadingEllipsis from '../../loading-ellipsis'; import Markdown from '../../markdown'; +import PostMenuDesktop from './post-menu-desktop/'; import { PostProps } from '../post'; -import styles from '../post.module.css'; -import PostMenu from '../post-menu'; import _ from 'lodash'; const PostInfo = ({ openReplyModal, post, roles }: PostProps) => { @@ -102,7 +102,7 @@ const PostInfo = ({ openReplyModal, post, roles }: PostProps) => { )} - + ); }; diff --git a/src/components/post/post-desktop/post-menu-desktop/index.ts b/src/components/post/post-desktop/post-menu-desktop/index.ts new file mode 100644 index 00000000..54cc808b --- /dev/null +++ b/src/components/post/post-desktop/post-menu-desktop/index.ts @@ -0,0 +1 @@ +export { default } from './post-menu-desktop'; diff --git a/src/components/post/post-menu/post-menu.module.css b/src/components/post/post-desktop/post-menu-desktop/post-menu-desktop.module.css similarity index 73% rename from src/components/post/post-menu/post-menu.module.css rename to src/components/post/post-desktop/post-menu-desktop/post-menu-desktop.module.css index 451151f5..1a48bec9 100644 --- a/src/components/post/post-menu/post-menu.module.css +++ b/src/components/post/post-desktop/post-menu-desktop/post-menu-desktop.module.css @@ -1,8 +1,8 @@ .postMenu { position: absolute; - background-color: var(--post-menu-background-color); - border-bottom: var(--post-menu-border-bottom); - border-right: var(--post-menu-border-right); + background-color: var(--post-menu-desktop-background-color); + border-bottom: var(--post-menu-desktop-border-bottom); + border-right: var(--post-menu-desktop-border-right); outline: none; z-index: 2; } @@ -14,7 +14,7 @@ } .postMenuBtn { - color: var(--post-menu-button-color); + color: var(--post-menu-desktop-button-color); transition: transform 0.1s; transform: rotate(90deg); position: absolute; @@ -23,19 +23,19 @@ .postMenuBtn:hover { cursor: pointer; - color: var(--post-menu-button-color-hover); + color: var(--post-menu-desktop-button-color-hover); } .postMenuItem { cursor: pointer; padding: 2px 4px; - border: 1px solid var(--post-menu-item-border-color); - background-color: var(--post-menu-item-background-color); + border: 1px solid var(--post-menu-desktop-item-border-color); + background-color: var(--post-menu-desktop-item-background-color); border-bottom: none; } .postMenuItem:hover { - background-color: var(--post-menu-item-hover-background-color); + background-color: var(--post-menu-desktop-item-hover-background-color); } .dropdown { @@ -47,8 +47,8 @@ left: 100%; top: -1px; display: none; - border-bottom: var(--post-menu-border-bottom); - border-right: var(--post-menu-border-right); + border-bottom: var(--post-menu-desktop-border-bottom); + border-right: var(--post-menu-desktop-border-right); } .dropdown a { @@ -107,7 +107,7 @@ @media (min-width: 640px) { .postMenuBtn { right: -2px; - opacity: var(--post-menu-btn-opacity); + opacity: var(--post-menu-desktop-btn-opacity); } .stickyIconWrapper { diff --git a/src/components/post/post-menu/post-menu.tsx b/src/components/post/post-desktop/post-menu-desktop/post-menu-desktop.tsx similarity index 92% rename from src/components/post/post-menu/post-menu.tsx rename to src/components/post/post-desktop/post-menu-desktop/post-menu-desktop.tsx index 944c9097..6c19f7ff 100644 --- a/src/components/post/post-menu/post-menu.tsx +++ b/src/components/post/post-desktop/post-menu-desktop/post-menu-desktop.tsx @@ -3,12 +3,12 @@ import { createPortal } from 'react-dom'; import { useLocation } from 'react-router-dom'; import { autoUpdate, flip, FloatingFocusManager, offset, shift, useClick, useDismiss, useFloating, useId, useInteractions, useRole } from '@floating-ui/react'; import { Comment } from '@plebbit/plebbit-react-hooks'; -import styles from './post-menu.module.css'; -import { getCommentMediaInfo } from '../../../lib/utils/media-utils'; -import { copyShareLinkToClipboard, isValidURL } from '../../../lib/utils/url-utils'; -import { isCatalogView } from '../../../lib/utils/view-utils'; +import styles from './post-menu-desktop.module.css'; +import { getCommentMediaInfo } from '../../../../lib/utils/media-utils'; +import { copyShareLinkToClipboard, isValidURL } from '../../../../lib/utils/url-utils'; +import { isCatalogView } from '../../../../lib/utils/view-utils'; -interface PostMenuProps { +interface PostMenuDesktopProps { cid: string; isDescription?: boolean; isRules?: boolean; @@ -16,7 +16,7 @@ interface PostMenuProps { onClose: () => void; } -const CopyLinkButton = ({ cid, subplebbitAddress, onClose }: PostMenuProps) => { +const CopyLinkButton = ({ cid, subplebbitAddress, onClose }: PostMenuDesktopProps) => { return (
{ @@ -63,7 +63,7 @@ const ImageSearchButton = ({ url, onClose }: { url: string; onClose: () => void ); }; -const ViewOnButton = ({ cid, isDescription, isRules, subplebbitAddress, onClose }: PostMenuProps) => { +const ViewOnButton = ({ cid, isDescription, isRules, subplebbitAddress, onClose }: PostMenuDesktopProps) => { const [isClientRedirectMenuOpen, setIsClientRedirectMenuOpen] = useState(false); const viewOnOtherClientLink = `p/${subplebbitAddress}${isDescription || isRules ? '' : `/c/${cid}`}`; @@ -95,7 +95,7 @@ const ViewOnButton = ({ cid, isDescription, isRules, subplebbitAddress, onClose ); }; -const PostMenu = ({ post }: { post: Comment }) => { +const PostMenuDesktop = ({ post }: { post: Comment }) => { const { cid, isDescription, isRules, link, subplebbitAddress } = post; const commentMediaInfo = getCommentMediaInfo(post); const { thumbnail, type, url } = commentMediaInfo || {}; @@ -145,4 +145,4 @@ const PostMenu = ({ post }: { post: Comment }) => { ); }; -export default PostMenu; +export default PostMenuDesktop; diff --git a/src/components/post/post-menu/index.ts b/src/components/post/post-menu/index.ts deleted file mode 100644 index 7c04c4cc..00000000 --- a/src/components/post/post-menu/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from './post-menu'; diff --git a/src/components/post/post-mobile/post-menu-mobile/index.ts b/src/components/post/post-mobile/post-menu-mobile/index.ts new file mode 100644 index 00000000..6fccc4be --- /dev/null +++ b/src/components/post/post-mobile/post-menu-mobile/index.ts @@ -0,0 +1 @@ +export { default } from './post-menu-mobile'; diff --git a/src/components/post/post-mobile/post-menu-mobile/post-menu-mobile.module.css b/src/components/post/post-mobile/post-menu-mobile/post-menu-mobile.module.css new file mode 100644 index 00000000..bbcee2bd --- /dev/null +++ b/src/components/post/post-mobile/post-menu-mobile/post-menu-mobile.module.css @@ -0,0 +1,37 @@ +.postMenuBtn { + color: var(--post-mobile-menu-button-color); + line-height: 1em; + width: 1em; + text-align: center; + transition: transform 0.1s; + transform: rotate(90deg); + -webkit-transform: rotate(90deg); + float: left; + font-weight: 700; + font-size: 16px; + height: 100%; +} + +.postMenu { + font-size: 16px; + line-height: 2.5em; + background-color: var(--post-menu-mobile-background-color); + border: var(--post-menu-mobile-border); + border-right-width: var(---post-menu-mobile-border-right-width); + list-style: none; + padding: 0; + margin: 0; + white-space: nowrap; +} + +.postMenuItem { + cursor: pointer; + position: relative; + padding: 2px 4px; + vertical-align: middle; + border-bottom: var(--post-menu-mobile-item-border-bottom); +} + +.postMenuItem:hover { + background-color: var(--post-menu-mobile-item-hover-background-color); +} \ No newline at end of file diff --git a/src/components/post/post-mobile/post-menu-mobile/post-menu-mobile.tsx b/src/components/post/post-mobile/post-menu-mobile/post-menu-mobile.tsx new file mode 100644 index 00000000..2d79a22a --- /dev/null +++ b/src/components/post/post-mobile/post-menu-mobile/post-menu-mobile.tsx @@ -0,0 +1,46 @@ +import { useState } from 'react'; +import { createPortal } from 'react-dom'; +import { autoUpdate, flip, FloatingFocusManager, offset, shift, useClick, useDismiss, useFloating, useId, useInteractions, useRole } from '@floating-ui/react'; +import { Comment } from '@plebbit/plebbit-react-hooks'; +import styles from './post-menu-mobile.module.css'; + +const PostMenuMobile = ({ post }: { post: Comment }) => { + const [isMenuOpen, setIsMenuOpen] = useState(false); + + const { refs, floatingStyles, context } = useFloating({ + placement: 'bottom-start', + open: isMenuOpen, + onOpenChange: setIsMenuOpen, + middleware: [offset({ mainAxis: 3, crossAxis: 8 }), flip(), shift({ padding: 10 })], + whileElementsMounted: autoUpdate, + }); + const click = useClick(context); + const dismiss = useDismiss(context); + const role = useRole(context); + const { getReferenceProps, getFloatingProps } = useInteractions([click, dismiss, role]); + const headingId = useId(); + + return ( + <> + setIsMenuOpen((prev) => !prev)} ref={refs.setReference} {...getReferenceProps()}> + ... + + {isMenuOpen && + createPortal( + +
+
Copy link
+
Search image on Google
+
Search image on Yandex
+
Search image on SauceNAO
+
View on Seedit
+
View on Plebones
+
+
, + document.body, + )} + + ); +}; + +export default PostMenuMobile; diff --git a/src/components/post/post-mobile/post-mobile.tsx b/src/components/post/post-mobile/post-mobile.tsx index 3ad4c4ed..ec01f7c9 100644 --- a/src/components/post/post-mobile/post-mobile.tsx +++ b/src/components/post/post-mobile/post-mobile.tsx @@ -3,6 +3,7 @@ import { Trans, useTranslation } from 'react-i18next'; import { Link, useLocation, useParams } from 'react-router-dom'; import { useAccount } from '@plebbit/plebbit-react-hooks'; import Plebbit from '@plebbit/plebbit-js/dist/browser/index.js'; +import styles from '../post.module.css'; import { getCommentMediaInfo, getHasThumbnail } from '../../../lib/utils/media-utils'; import { getFormattedDate } from '../../../lib/utils/time-utils'; import { isAllView, isPendingPostView, isPostPageView, isSubscriptionsView } from '../../../lib/utils/view-utils'; @@ -12,8 +13,8 @@ import useStateString from '../../../hooks/use-state-string'; import CommentMedia from '../../comment-media'; import LoadingEllipsis from '../../loading-ellipsis'; import Markdown from '../../markdown'; +import PostMenuMobile from './post-menu-mobile'; import { PostProps } from '../post'; -import styles from '../post.module.css'; import _ from 'lodash'; const PostInfoAndMedia = ({ openReplyModal, post, roles }: PostProps) => { @@ -45,9 +46,7 @@ const PostInfoAndMedia = ({ openReplyModal, post, roles }: PostProps) => { return ( <>
- - ... - + {shortDisplayName || _.capitalize(t('anonymous'))} diff --git a/src/themes.css b/src/themes.css index 17b53f88..92b938ea 100644 --- a/src/themes.css +++ b/src/themes.css @@ -127,6 +127,13 @@ --post-menu-desktop-item-background-color: #f0e0d6; --post-menu-desktop-item-hover-background-color: #ffe; + /* post menu mobile */ + --post-menu-mobile-background-color: #f0e0d6; + --post-menu-mobile-border: 1px solid #d9bfb7; + --post-menu-mobile-border-right-width: 2px; + --post-menu-mobile-item-border-bottom: 1px solid #d9bfb7; + --post-menu-mobile-item-hover-background-color: #ffe; + /* post mobile */ --post-mobile-background-color: #f5e9e1; --post-mobile-info-border-bottom: 1px solid #d9bfb7; @@ -305,6 +312,13 @@ --post-menu-desktop-item-background-color: #d6daf0; --post-menu-desktop-item-hover-background-color: #eef2ff; + /* post menu mobile */ + --post-menu-mobile-background-color: #d6daf0; + --post-menu-mobile-border: 1px solid #b7c5d9; + --post-menu-mobile-border-right-width: 2px; + --post-menu-mobile-item-border-bottom: 1px solid #b7c5d9; + --post-menu-mobile-item-hover-background-color: #eef2ff; + /* post mobile */ --post-mobile-background-color: #d6daf0; --post-mobile-info-border-bottom: 1px solid #b7c5d9; @@ -453,6 +467,13 @@ --post-menu-desktop-item-background-color: #f0e0d6; --post-menu-desktop-item-hover-background-color: #ffe; + /* post menu mobile */ + --post-menu-mobile-background-color: #f0e0d6; + --post-menu-mobile-border: 1px solid #d9bfb7; + --post-menu-mobile-border-right-width: 2px; + --post-menu-mobile-item-border-bottom: 1px solid #d9bfb7; + --post-menu-mobile-item-hover-background-color: #ffe; + /* post mobile */ --post-mobile-background-color: #f5e9e1; --post-mobile-info-border-bottom: 1px solid #d9bfb7; @@ -610,6 +631,13 @@ --post-menu-desktop-item-background-color: #d6daf0; --post-menu-desktop-item-hover-background-color: #eef2ff; + /* post menu mobile */ + --post-menu-mobile-background-color: #d6daf0; + --post-menu-mobile-border: 1px solid #b7c5d9; + --post-menu-mobile-border-right-width: 2px; + --post-menu-mobile-item-border-bottom: 1px solid #b7c5d9; + --post-menu-mobile-item-hover-background-color: #eef2ff; + /* post mobile */ --post-mobile-background-color: #d6daf0; --post-mobile-info-border-bottom: 1px solid #b7c5d9; @@ -775,6 +803,13 @@ --post-menu-desktop-item-background-color: #282a2e; --post-menu-desktop-item-hover-background-color: #1d1f21; + /* post menu mobile */ + --post-menu-mobile-background-color: #282a2e; + --post-menu-mobile-border: 1px solid #000; + --post-menu-mobile-border-right-width: 2px; + --post-menu-mobile-item-border-bottom: 1px solid #000; + --post-menu-mobile-item-hover-background-color: #1d1f21; + /* post mobile */ --post-mobile-background-color: #282A2E; --post-mobile-info-border-top: 1px solid #2D2F33; @@ -959,6 +994,13 @@ --post-menu-desktop-item-background-color: #ddd; --post-menu-desktop-item-hover-background-color: #eee; + /* post menu mobile */ + --post-menu-mobile-background-color: #ddd; + --post-menu-mobile-border: 1px solid #ccc; + --post-menu-mobile-border-right-width: 2px; + --post-menu-mobile-item-border-bottom: 1px solid #ccc; + --post-menu-mobile-item-hover-background-color: #eee; + /* quotelink */ --post-quotelink-text-color: #f60; --post-quotelink-text-color-hover: #f30;