From ec4e6498d3cd7e1f9fd7ca430121a2dc5f93a27a Mon Sep 17 00:00:00 2001 From: Kieran Date: Wed, 10 May 2023 13:29:07 +0100 Subject: [PATCH] feat: a link profile image --- packages/app/src/Element/Modal.css | 1 + packages/app/src/Element/Note.tsx | 3 +- packages/app/src/Element/NoteCreator.tsx | 2 +- packages/app/src/Element/ProfileImage.css | 16 ++- packages/app/src/Element/ProfileImage.tsx | 35 ++----- packages/app/src/Element/Reactions.css | 36 +++---- packages/app/src/Element/Reactions.tsx | 121 ++++++++++------------ packages/app/src/Element/Timeline.tsx | 4 +- packages/app/src/Element/Zap.tsx | 5 +- packages/app/src/index.css | 1 + 10 files changed, 97 insertions(+), 127 deletions(-) diff --git a/packages/app/src/Element/Modal.css b/packages/app/src/Element/Modal.css index c26c5d9f..e155f759 100644 --- a/packages/app/src/Element/Modal.css +++ b/packages/app/src/Element/Modal.css @@ -19,4 +19,5 @@ border: 1px solid var(--font-tertiary-color); margin-top: auto; margin-bottom: auto; + overflow: hidden; } diff --git a/packages/app/src/Element/Note.tsx b/packages/app/src/Element/Note.tsx index 1326a8ca..42cfd4cb 100644 --- a/packages/app/src/Element/Note.tsx +++ b/packages/app/src/Element/Note.tsx @@ -327,10 +327,9 @@ export default function Note(props: NoteProps) { {options.showHeader && (
{(options.showTime || options.showBookmarked) && (
diff --git a/packages/app/src/Element/NoteCreator.tsx b/packages/app/src/Element/NoteCreator.tsx index 9c49a168..fd65f20c 100644 --- a/packages/app/src/Element/NoteCreator.tsx +++ b/packages/app/src/Element/NoteCreator.tsx @@ -293,7 +293,7 @@ export function NoteCreator() { ev.stopPropagation = true; LoginStore.switchAccount(a); }}> - + )); } diff --git a/packages/app/src/Element/ProfileImage.css b/packages/app/src/Element/ProfileImage.css index e8493226..5a586fe6 100644 --- a/packages/app/src/Element/ProfileImage.css +++ b/packages/app/src/Element/ProfileImage.css @@ -1,6 +1,10 @@ .pfp { - display: flex; + display: grid; + grid-template-columns: min-content auto; align-items: center; + text-decoration: none; + user-select: none; + min-width: 0; } .pfp .avatar-wrapper { @@ -14,7 +18,7 @@ cursor: pointer; } -.pfp a { +a.pfp { text-decoration: none; } @@ -25,6 +29,10 @@ font-weight: 600; } -.pfp .subheader .about { - max-width: calc(100vw - 140px); +.pfp .profile-name { + max-width: stretch; +} + +.pfp a { + text-decoration: none; } diff --git a/packages/app/src/Element/ProfileImage.tsx b/packages/app/src/Element/ProfileImage.tsx index 89ca564e..20182b7a 100644 --- a/packages/app/src/Element/ProfileImage.tsx +++ b/packages/app/src/Element/ProfileImage.tsx @@ -1,7 +1,6 @@ import "./ProfileImage.css"; import { useMemo } from "react"; -import { useNavigate } from "react-router-dom"; import { HexKey, NostrPrefix } from "@snort/nostr"; import { useUserProfile } from "Hooks/useUserProfile"; @@ -9,7 +8,7 @@ import { hexToBech32, profileLink } from "Util"; import Avatar from "Element/Avatar"; import Nip05 from "Element/Nip05"; import { MetadataCache } from "Cache"; -import usePageWidth from "Hooks/usePageWidth"; +import { Link } from "react-router-dom"; export interface ProfileImageProps { pubkey: HexKey; @@ -17,10 +16,8 @@ export interface ProfileImageProps { showUsername?: boolean; className?: string; link?: string; - autoWidth?: boolean; defaultNip?: string; verifyNip?: boolean; - linkToProfile?: boolean; overrideUsername?: string; } @@ -30,50 +27,32 @@ export default function ProfileImage({ showUsername = true, className, link, - autoWidth = true, defaultNip, verifyNip, - linkToProfile = true, overrideUsername, }: ProfileImageProps) { - const navigate = useNavigate(); const user = useUserProfile(pubkey); const nip05 = defaultNip ? defaultNip : user?.nip05; - const width = usePageWidth(); const name = useMemo(() => { return overrideUsername ?? getDisplayName(user, pubkey); }, [user, pubkey, overrideUsername]); - if (!pubkey && !link) { - link = "#"; - } - - const onAvatarClick = () => { - if (linkToProfile) { - navigate(link ?? profileLink(pubkey)); - } - }; - return ( -
+
{showUsername && ( -
+
-
-
{name.trim()}
- {nip05 && } -
-
-
- {subHeader} +
{name.trim()}
+ {nip05 && }
+
{subHeader}
)} -
+ ); } diff --git a/packages/app/src/Element/Reactions.css b/packages/app/src/Element/Reactions.css index f43cb7d3..aabedff5 100644 --- a/packages/app/src/Element/Reactions.css +++ b/packages/app/src/Element/Reactions.css @@ -1,28 +1,23 @@ .reactions-modal .modal-body { - padding: 0; - max-width: 586px; -} - -.reactions-view { padding: 24px 32px; background-color: #1b1b1b; border-radius: 16px; position: relative; + min-height: 33vh; } -.light .reactions-view { +.light .reactions-modal .modal-body { background-color: var(--note-bg); } @media (max-width: 720px) { - .reactions-view { + .reactions-modal .modal-body { padding: 12px 16px; - margin-top: -160px; max-width: calc(100vw - 32px); } } -.reactions-view .close { +.reactions-modal .modal-body .close { position: absolute; top: 12px; right: 16px; @@ -30,18 +25,18 @@ cursor: pointer; } -.reactions-view .close:hover { +.reactions-modal .modal-body .close:hover { color: var(--font-tertiary-color); } -.reactions-view .reactions-header { +.reactions-modal .modal-body .reactions-header { display: flex; flex-direction: row; align-items: center; margin-bottom: 32px; } -.reactions-view .reactions-header h2 { +.reactions-modal .modal-body .reactions-header h2 { margin: 0; flex-grow: 1; font-weight: 600; @@ -49,26 +44,25 @@ line-height: 19px; } -.reactions-view .body { +.reactions-modal .modal-body .body { overflow: scroll; - height: 320px; + height: 40vh; -ms-overflow-style: none; /* for Internet Explorer, Edge */ scrollbar-width: none; /* Firefox */ } -.reactions-view .body::-webkit-scrollbar { +.reactions-modal .modal-body .body::-webkit-scrollbar { display: none; } .reactions-item { - display: flex; - flex-direction: row; + display: grid; + grid-template-columns: 52px auto; align-items: center; margin-bottom: 24px; } .reactions-item .reaction-icon { - width: 52px; display: flex; align-items: center; justify-content: center; @@ -93,12 +87,8 @@ line-height: 17px; } -.reactions-item .zap-comment { - width: 332px; -} - @media (max-width: 520px) { - .reactions-view .tab.disabled { + .reactions-modal .modal-body .tab.disabled { display: none; } } diff --git a/packages/app/src/Element/Reactions.tsx b/packages/app/src/Element/Reactions.tsx index 60c9d090..ab8340f7 100644 --- a/packages/app/src/Element/Reactions.tsx +++ b/packages/app/src/Element/Reactions.tsx @@ -2,7 +2,6 @@ import "./Reactions.css"; import { useState, useMemo, useEffect } from "react"; import { useIntl, FormattedMessage } from "react-intl"; - import { TaggedRawEvent } from "@snort/nostr"; import { formatShort } from "Number"; @@ -75,72 +74,66 @@ const Reactions = ({ show, setShow, positive, negative, reposts, zaps }: Reactio return show ? ( -
-
- -
-
-

- -

-
- -
- {tab.value === 0 && - likes.map(ev => { - return ( -
-
{ev.content === "+" ? : ev.content}
- -
- ); - })} - {tab.value === 1 && - zaps.map(z => { - return ( - z.sender && ( -
-
- - {formatShort(z.amount)} -
- - {z.content} -
- } - overrideUsername={z.anonZap ? formatMessage({ defaultMessage: "Anonymous" }) : undefined} - /> +
+ +
+
+

+ +

+
+ +
+ {tab.value === 0 && + likes.map(ev => { + return ( +
+
{ev.content === "+" ? : ev.content}
+ +
+ ); + })} + {tab.value === 1 && + zaps.map(z => { + return ( + z.sender && ( +
+
+ + {formatShort(z.amount)}
- ) - ); - })} - {tab.value === 2 && - reposts.map(ev => { - return ( -
-
- -
- + {z.content}
} + link={z.anonZap ? "" : undefined} + overrideUsername={z.anonZap ? formatMessage({ defaultMessage: "Anonymous" }) : undefined} + />
- ); - })} - {tab.value === 3 && - dislikes.map(ev => { - return ( -
-
- -
- + ) + ); + })} + {tab.value === 2 && + reposts.map(ev => { + return ( +
+
+
- ); - })} -
+ +
+ ); + })} + {tab.value === 3 && + dislikes.map(ev => { + return ( +
+
+ +
+ +
+ ); + })}
) : null; diff --git a/packages/app/src/Element/Timeline.tsx b/packages/app/src/Element/Timeline.tsx index 29660183..3545a958 100644 --- a/packages/app/src/Element/Timeline.tsx +++ b/packages/app/src/Element/Timeline.tsx @@ -119,7 +119,7 @@ const Timeline = (props: TimelineProps) => { <>
onShowLatest()} ref={ref}> {latestAuthors.slice(0, 3).map(p => { - return ; + return ; })} { {!inView && (
onShowLatest(true)}> {latestAuthors.slice(0, 3).map(p => { - return ; + return ; })}
- - {receiver !== pubKey && showZapped && } + + {receiver !== pubKey && showZapped && }
@@ -151,7 +151,6 @@ export const ZapsSummary = ({ zaps }: ZapsSummaryProps) => {
{sender && ( diff --git a/packages/app/src/index.css b/packages/app/src/index.css index f9e3a792..d5be3289 100644 --- a/packages/app/src/index.css +++ b/packages/app/src/index.css @@ -42,6 +42,7 @@ html { scroll-behavior: smooth; + -webkit-tap-highlight-color: transparent; } html.light {