From f148cda74a8adce6a127f499913c0401863ef10f Mon Sep 17 00:00:00 2001 From: Justin Date: Fri, 1 Jul 2022 16:07:01 -0400 Subject: [PATCH] Extend Account component --- app/soapbox/components/account.tsx | 66 +++++++++++-------- app/soapbox/components/quoted-status.tsx | 1 + app/soapbox/components/scroll-top-button.tsx | 12 ++-- app/soapbox/components/sidebar_menu.tsx | 6 +- app/soapbox/components/status.tsx | 7 +- app/soapbox/components/ui/stack/stack.tsx | 2 +- .../compose/components/reply_indicator.tsx | 1 + .../steps/suggested-accounts-step.tsx | 1 + .../features/ui/components/actions_modal.tsx | 1 + .../modals/report-modal/report-modal.tsx | 1 + .../ui/components/profile-dropdown.tsx | 2 +- 11 files changed, 60 insertions(+), 40 deletions(-) diff --git a/app/soapbox/components/account.tsx b/app/soapbox/components/account.tsx index 2d53e6da8..72ba40e38 100644 --- a/app/soapbox/components/account.tsx +++ b/app/soapbox/components/account.tsx @@ -9,7 +9,7 @@ import { getAcct } from 'soapbox/utils/accounts'; import { displayFqn } from 'soapbox/utils/state'; import RelativeTimestamp from './relative_timestamp'; -import { Avatar, Emoji, HStack, Icon, IconButton, Text } from './ui'; +import { Avatar, Emoji, HStack, Icon, IconButton, Stack, Text } from './ui'; import type { Account as AccountEntity } from 'soapbox/types/entities'; @@ -57,7 +57,9 @@ interface IAccount { timestamp?: string | Date, timestampUrl?: string, futureTimestamp?: boolean, + withAccountNote?: boolean, withDate?: boolean, + withLinkToProfile?: boolean, withRelationship?: boolean, showEdit?: boolean, emoji?: string, @@ -78,7 +80,9 @@ const Account = ({ timestamp, timestampUrl, futureTimestamp = false, + withAccountNote = false, withDate = false, + withLinkToProfile = true, withRelationship = true, showEdit = false, emoji, @@ -154,12 +158,12 @@ const Account = ({ if (withDate) timestamp = account.created_at; - const LinkEl: any = showProfileHoverCard ? Link : 'div'; + const LinkEl: any = withLinkToProfile ? Link : 'div'; return (
- + {children}} @@ -202,35 +206,45 @@ const Account = ({ - - @{username} + + + @{username} - {account.favicon && ( - - )} + {account.favicon && ( + + )} - {(timestamp) ? ( - <> - · + {(timestamp) ? ( + <> + · - {timestampUrl ? ( - + {timestampUrl ? ( + + + + ) : ( - - ) : ( - - )} - - ) : null} + )} + + ) : null} - {showEdit ? ( - <> - · + {showEdit ? ( + <> + · - - - ) : null} - + + + ) : null} + + + {withAccountNote && ( + + )} +
diff --git a/app/soapbox/components/quoted-status.tsx b/app/soapbox/components/quoted-status.tsx index 5d6eb526e..82fe8860a 100644 --- a/app/soapbox/components/quoted-status.tsx +++ b/app/soapbox/components/quoted-status.tsx @@ -137,6 +137,7 @@ const QuotedStatus: React.FC = ({ status, onCancel, compose }) => timestamp={status.created_at} withRelationship={false} showProfileHoverCard={!compose} + withLinkToProfile={false} /> {renderReplyMentions()} diff --git a/app/soapbox/components/scroll-top-button.tsx b/app/soapbox/components/scroll-top-button.tsx index 3652296ef..8735e4296 100644 --- a/app/soapbox/components/scroll-top-button.tsx +++ b/app/soapbox/components/scroll-top-button.tsx @@ -34,6 +34,12 @@ const ScrollTopButton: React.FC = ({ const [scrolled, setScrolled] = useState(false); const autoload = settings.get('autoloadTimelines') === true; + const visible = count > 0 && scrolled; + + const classes = classNames('left-1/2 -translate-x-1/2 fixed top-20 z-50', { + 'hidden': !visible, + }); + const getScrollTop = (): number => { return (document.scrollingElement || document.documentElement).scrollTop; }; @@ -75,12 +81,6 @@ const ScrollTopButton: React.FC = ({ maybeUnload(); }, [count]); - const visible = count > 0 && scrolled; - - const classes = classNames('left-1/2 -translate-x-1/2 fixed top-20 z-50', { - 'hidden': !visible, - }); - return (
diff --git a/app/soapbox/components/sidebar_menu.tsx b/app/soapbox/components/sidebar_menu.tsx index 2940c5bfa..3164c83e3 100644 --- a/app/soapbox/components/sidebar_menu.tsx +++ b/app/soapbox/components/sidebar_menu.tsx @@ -84,7 +84,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => { const getAccount = makeGetAccount(); const instance = useAppSelector((state) => state.instance); const me = useAppSelector((state) => state.me); - const account = useAppSelector((state) => me ? getAccount(state, me) : null); + const account = useAppSelector((state) => me ? getAccount(state, me) : null); const otherAccounts: ImmutableList = useAppSelector((state) => getOtherAccounts(state)); const sidebarOpen = useAppSelector((state) => state.sidebar.sidebarOpen); const settings = useAppSelector((state) => getSettings(state)); @@ -121,7 +121,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => { const renderAccount = (account: AccountEntity) => (
- +
); @@ -166,7 +166,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => { - + diff --git a/app/soapbox/components/status.tsx b/app/soapbox/components/status.tsx index 200b2de10..52ec1a93b 100644 --- a/app/soapbox/components/status.tsx +++ b/app/soapbox/components/status.tsx @@ -134,11 +134,11 @@ class Status extends ImmutablePureComponent { this.didShowCard = Boolean(!this.props.muted && !this.props.hidden && this.props.status && this.props.status.card); } - getSnapshotBeforeUpdate(): ScrollPosition | undefined { + getSnapshotBeforeUpdate(): ScrollPosition | null { if (this.props.getScrollPosition) { - return this.props.getScrollPosition(); + return this.props.getScrollPosition() || null; } else { - return undefined; + return null; } } @@ -483,6 +483,7 @@ class Status extends ImmutablePureComponent { hideActions={!reblogElement} showEdit={!!status.edited_at} showProfileHoverCard={this.props.hoverable} + withLinkToProfile={this.props.hoverable} />
diff --git a/app/soapbox/components/ui/stack/stack.tsx b/app/soapbox/components/ui/stack/stack.tsx index 3bb96d276..17b4df36e 100644 --- a/app/soapbox/components/ui/stack/stack.tsx +++ b/app/soapbox/components/ui/stack/stack.tsx @@ -1,7 +1,7 @@ import classNames from 'classnames'; import React from 'react'; -type SIZES = 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 10 +type SIZES = 0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 10 const spaces = { '0.5': 'space-y-0.5', diff --git a/app/soapbox/features/compose/components/reply_indicator.tsx b/app/soapbox/features/compose/components/reply_indicator.tsx index f47b0494b..99eb5a43f 100644 --- a/app/soapbox/features/compose/components/reply_indicator.tsx +++ b/app/soapbox/features/compose/components/reply_indicator.tsx @@ -39,6 +39,7 @@ const ReplyIndicator: React.FC = ({ status, hideActions, onCanc id={status.getIn(['account', 'id']) as string} timestamp={status.created_at} showProfileHoverCard={false} + withLinkToProfile={false} /> void }) => { // @ts-ignore: TS thinks `id` is passed to , but it isn't id={suggestion.account} showProfileHoverCard={false} + withLinkToProfile={false} /> ))} diff --git a/app/soapbox/features/ui/components/actions_modal.tsx b/app/soapbox/features/ui/components/actions_modal.tsx index e123149b6..e760df031 100644 --- a/app/soapbox/features/ui/components/actions_modal.tsx +++ b/app/soapbox/features/ui/components/actions_modal.tsx @@ -60,6 +60,7 @@ const ActionsModal: React.FC = ({ status, actions, onClick, onClo key={status.account as string} id={status.account as string} showProfileHoverCard={false} + withLinkToProfile={false} timestamp={status.created_at} /> diff --git a/app/soapbox/features/ui/components/modals/report-modal/report-modal.tsx b/app/soapbox/features/ui/components/modals/report-modal/report-modal.tsx index 39575beb4..cd4f1ff08 100644 --- a/app/soapbox/features/ui/components/modals/report-modal/report-modal.tsx +++ b/app/soapbox/features/ui/components/modals/report-modal/report-modal.tsx @@ -49,6 +49,7 @@ const SelectedStatus = ({ statusId }: { statusId: string }) => { diff --git a/app/soapbox/features/ui/components/profile-dropdown.tsx b/app/soapbox/features/ui/components/profile-dropdown.tsx index 0216f3d39..65bf945bf 100644 --- a/app/soapbox/features/ui/components/profile-dropdown.tsx +++ b/app/soapbox/features/ui/components/profile-dropdown.tsx @@ -58,7 +58,7 @@ const ProfileDropdown: React.FC = ({ account, children }) => { const renderAccount = (account: AccountEntity) => { return ( - + ); };