From 6a864d126df4528926a985eb80ff81b8db7690c7 Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Thu, 3 Nov 2022 14:57:33 -0500 Subject: [PATCH] Refactor spacing of statuses --- app/soapbox/components/quoted-status.tsx | 99 +++++------------- app/soapbox/components/status-content.css | Bin 1478 -> 1476 bytes app/soapbox/components/status.tsx | 46 ++++---- .../status/components/detailed-status.tsx | 20 ++-- app/styles/components/media-gallery.scss | 1 - app/styles/components/reply-mentions.scss | 1 - app/styles/components/status.scss | 5 - app/styles/components/video-player.scss | 1 - 8 files changed, 62 insertions(+), 111 deletions(-) diff --git a/app/soapbox/components/quoted-status.tsx b/app/soapbox/components/quoted-status.tsx index 098a4ecb2d..9755e7120a 100644 --- a/app/soapbox/components/quoted-status.tsx +++ b/app/soapbox/components/quoted-status.tsx @@ -1,15 +1,17 @@ import classNames from 'clsx'; -import React, { useState } from 'react'; -import { defineMessages, useIntl, FormattedMessage, FormattedList } from 'react-intl'; +import React, { MouseEventHandler, useState } from 'react'; +import { defineMessages, useIntl } from 'react-intl'; import { useHistory } from 'react-router-dom'; import StatusMedia from 'soapbox/components/status-media'; -import { Stack, Text } from 'soapbox/components/ui'; +import { Stack } from 'soapbox/components/ui'; import AccountContainer from 'soapbox/containers/account_container'; import { useSettings } from 'soapbox/hooks'; import { defaultMediaVisibility } from 'soapbox/utils/status'; import OutlineBox from './outline-box'; +import StatusReplyMentions from './status-reply-mentions'; +import StatusContent from './status_content'; import SensitiveContentOverlay from './statuses/sensitive-content-overlay'; import type { Account as AccountEntity, Status as StatusEntity } from 'soapbox/types/entities'; @@ -37,7 +39,7 @@ const QuotedStatus: React.FC = ({ status, onCancel, compose }) => const [showMedia, setShowMedia] = useState(defaultMediaVisibility(status, displayMedia)); - const handleExpandClick = (e: React.MouseEvent) => { + const handleExpandClick: MouseEventHandler = (e) => { if (!status) return; const account = status.account as AccountEntity; @@ -58,57 +60,6 @@ const QuotedStatus: React.FC = ({ status, onCancel, compose }) => setShowMedia(!showMedia); }; - const renderReplyMentions = () => { - if (!status?.in_reply_to_id) { - return null; - } - - const account = status.account as AccountEntity; - const to = status.mentions || []; - - if (to.size === 0) { - if (status.in_reply_to_account_id === account.id) { - return ( -
- -
- ); - } else { - return ( -
- -
- ); - } - } - - const accounts = to.slice(0, 2).map(account => <>@{account.username}).toArray(); - - if (to.size > 2) { - accounts.push( - , - ); - } - - return ( -
- , - }} - /> -
- ); - }; - if (!status) { return null; } @@ -128,7 +79,7 @@ const QuotedStatus: React.FC = ({ status, onCancel, compose }) => return ( @@ -145,16 +96,13 @@ const QuotedStatus: React.FC = ({ status, onCancel, compose }) => withLinkToProfile={!compose} /> - {renderReplyMentions()} + - - - - {status.hidden && ( + + {(status.hidden) && ( = ({ status, onCancel, compose }) => /> )} - + + + + {(status.media_attachments.size > 0) && ( + + )} + diff --git a/app/soapbox/components/status-content.css b/app/soapbox/components/status-content.css index 7c1317d16bb7dbcdc56eee2bdd66429cac7c159a..997df73f4d30f1ea42cc52b9be1f7b6c3511187d 100644 GIT binary patch delta 48 zcmX@ceS~|00;9=9Mc2uJOrjHO?=YHx7?blEXE2&<=3pvj1PatJ{{(W%SOORUbF>bI delta 51 zcmX@YeT;j80;B0fMOP+0)5#MVMJHC@VFWWK=Q7S = (props) => { hidden, featured, unread, - group, hideActionBar, variant = 'rounded', withDismiss, @@ -349,6 +348,8 @@ const Status: React.FC = (props) => {
+ + = (props) => { /> )} - {!group && actualStatus.group && ( -
- Posted in {String(actualStatus.getIn(['group', 'title']))} -
- )} + + - + {(quote || actualStatus.media_attachments.size > 0) && ( + + - - - - - {quote} + {quote} + + )} + {!hideActionBar && ( diff --git a/app/soapbox/features/status/components/detailed-status.tsx b/app/soapbox/features/status/components/detailed-status.tsx index 91fde11277..28c2d020c1 100644 --- a/app/soapbox/features/status/components/detailed-status.tsx +++ b/app/soapbox/features/status/components/detailed-status.tsx @@ -100,15 +100,21 @@ const DetailedStatus: React.FC = ({ /> )} - + + - + {(quote || actualStatus.media_attachments.size > 0) && ( + + - {quote} + {quote} + + )} + diff --git a/app/styles/components/media-gallery.scss b/app/styles/components/media-gallery.scss index 311af3b646..e9bb144252 100644 --- a/app/styles/components/media-gallery.scss +++ b/app/styles/components/media-gallery.scss @@ -1,6 +1,5 @@ .media-gallery { box-sizing: border-box; - margin-top: 8px; overflow: hidden; border-radius: 10px; position: relative; diff --git a/app/styles/components/reply-mentions.scss b/app/styles/components/reply-mentions.scss index 39b70a585a..e767e5a03a 100644 --- a/app/styles/components/reply-mentions.scss +++ b/app/styles/components/reply-mentions.scss @@ -10,7 +10,6 @@ .detailed-status { .reply-mentions { display: block; - margin: 4px 0 0 0; span { cursor: pointer; diff --git a/app/styles/components/status.scss b/app/styles/components/status.scss index a8c8e4561f..4a2c57d3eb 100644 --- a/app/styles/components/status.scss +++ b/app/styles/components/status.scss @@ -14,11 +14,6 @@ opacity: 1; animation: fade 150ms linear; - .video-player, - .audio-player { - margin-top: 8px; - } - &.light { .display-name { strong { diff --git a/app/styles/components/video-player.scss b/app/styles/components/video-player.scss index ada5b26f5f..b4e87e9b60 100644 --- a/app/styles/components/video-player.scss +++ b/app/styles/components/video-player.scss @@ -7,7 +7,6 @@ flex-direction: column; height: 100%; justify-content: center; - margin-top: 8px; position: relative; text-align: center; z-index: 100;