From 024b16150467f04b6fe2694c8305537ea685b116 Mon Sep 17 00:00:00 2001 From: Chewbacca Date: Thu, 5 Jan 2023 13:44:05 -0500 Subject: [PATCH 1/6] Move status info to above Account --- app/soapbox/components/status.tsx | 149 ++++++++---------- .../components/statuses/status-info.tsx | 38 +++++ .../notifications/components/notification.tsx | 20 ++- .../status/components/detailed-status.tsx | 12 +- 4 files changed, 132 insertions(+), 87 deletions(-) create mode 100644 app/soapbox/components/statuses/status-info.tsx diff --git a/app/soapbox/components/status.tsx b/app/soapbox/components/status.tsx index baf22e30e..bfbd1b4dc 100644 --- a/app/soapbox/components/status.tsx +++ b/app/soapbox/components/status.tsx @@ -2,7 +2,7 @@ import classNames from 'clsx'; import React, { useEffect, useRef, useState } from 'react'; import { HotKeys } from 'react-hotkeys'; import { useIntl, FormattedMessage, defineMessages } from 'react-intl'; -import { NavLink, useHistory } from 'react-router-dom'; +import { Link, useHistory } from 'react-router-dom'; import { mentionCompose, replyCompose } from 'soapbox/actions/compose'; import { toggleFavourite, toggleReblog } from 'soapbox/actions/interactions'; @@ -16,12 +16,14 @@ import { useAppDispatch, useSettings } from 'soapbox/hooks'; import { defaultMediaVisibility, textForScreenReader, getActualStatus } from 'soapbox/utils/status'; import EventPreview from './event-preview'; +import RelativeTimestamp from './relative-timestamp'; import StatusActionBar from './status-action-bar'; import StatusContent from './status-content'; import StatusMedia from './status-media'; import StatusReplyMentions from './status-reply-mentions'; import SensitiveContentOverlay from './statuses/sensitive-content-overlay'; -import { Card, HStack, Stack, Text } from './ui'; +import StatusInfo from './statuses/status-info'; +import { Card, Stack, Text } from './ui'; import type { Account as AccountEntity, @@ -37,6 +39,7 @@ const messages = defineMessages({ export interface IStatus { id?: string, + avatarSize?: number, status: StatusEntity, onClick?: () => void, muted?: boolean, @@ -56,6 +59,7 @@ export interface IStatus { const Status: React.FC = (props) => { const { status, + avatarSize = 42, focusable = true, hoverable = true, onClick, @@ -84,7 +88,7 @@ const Status: React.FC = (props) => { const [minHeight, setMinHeight] = useState(208); const actualStatus = getActualStatus(status); - + const isReblog = status.reblog && typeof status.reblog === 'object'; const statusUrl = `/@${actualStatus.getIn(['account', 'acct'])}/posts/${actualStatus.id}`; // Track height changes we know about to compensate scrolling. @@ -201,8 +205,49 @@ const Status: React.FC = (props) => { firstEmoji?.focus(); }; + const renderStatusInfo = () => { + if (isReblog) { + return ( + } + text={ + + + + ), + }} + /> + } + /> + ); + } else if (featured) { + return ( + } + text={ + + + + } + /> + ); + } + }; + if (!status) return null; - let rebloggedByText, reblogElement, reblogElementMobile; if (hidden) { return ( @@ -228,55 +273,8 @@ const Status: React.FC = (props) => { ); } + let rebloggedByText; if (status.reblog && typeof status.reblog === 'object') { - const displayNameHtml = { __html: String(status.getIn(['account', 'display_name_html'])) }; - - reblogElement = ( - event.stopPropagation()} - className='hidden sm:flex items-center text-gray-700 dark:text-gray-600 text-xs font-medium space-x-1 rtl:space-x-reverse hover:underline' - > - - - - - - , - }} - /> - - - ); - - reblogElementMobile = ( -
- event.stopPropagation()} - className='flex items-center text-gray-700 dark:text-gray-600 text-xs font-medium space-x-1 hover:underline' - > - - - - - - , - }} - /> - - -
- ); - rebloggedByText = intl.formatMessage( messages.reblogged_by, { name: String(status.getIn(['account', 'acct'])) }, @@ -312,7 +310,13 @@ const Status: React.FC = (props) => { react: handleHotkeyReact, }; - const accountAction = props.accountAction || reblogElement; + const timestampEl = ( + event.stopPropagation()}> + + + ); + + const accountAction = props.accountAction || timestampEl; const isUnderReview = actualStatus.visibility === 'self'; const isSensitive = actualStatus.hidden; @@ -328,21 +332,9 @@ const Status: React.FC = (props) => { onClick={handleClick} role='link' > - {featured && ( -
- - - - - - - -
- )} - = (props) => { })} data-id={status.id} > - {reblogElementMobile} + {renderStatusInfo()} -
- -
+
diff --git a/app/soapbox/components/statuses/status-info.tsx b/app/soapbox/components/statuses/status-info.tsx new file mode 100644 index 000000000..55d0452ec --- /dev/null +++ b/app/soapbox/components/statuses/status-info.tsx @@ -0,0 +1,38 @@ +import React from 'react'; +import { Link } from 'react-router-dom'; + +interface IStatusInfo { + avatarSize: number + to?: string + icon: React.ReactNode + text: React.ReactNode +} + +const StatusInfo = (props: IStatusInfo) => { + const { avatarSize, to, icon, text } = props; + + const onClick = (event: React.MouseEvent) => { + event.stopPropagation(); + }; + + const Container = to ? Link : 'div'; + const containerProps: any = to ? { onClick, to } : {}; + + return ( + +
+ {icon} +
+ + {text} + + ); +}; + +export default StatusInfo; \ No newline at end of file diff --git a/app/soapbox/features/notifications/components/notification.tsx b/app/soapbox/features/notifications/components/notification.tsx index 4bb67a322..8a3d26d20 100644 --- a/app/soapbox/features/notifications/components/notification.tsx +++ b/app/soapbox/features/notifications/components/notification.tsx @@ -151,6 +151,8 @@ const buildMessage = ( }); }; +const avatarSize = 48; + interface INotificaton { hidden?: boolean, notification: NotificationEntity, @@ -290,7 +292,7 @@ const Notification: React.FC = (props) => {