mirror
/
soapbox
kopia lustrzana https://gitlab.com/soapbox-pub/soapbox
1
0
Forkuj 1
Kod Zgłoszenia Packages Projekty Wydania Wiki Aktywność

Merge branch 'status-visibility-fixes' into 'develop' 

Status visibility fixes

Closes #1156 and #1154

See merge request soapbox-pub/soapbox!1860
environments/review-develop-3zknud/deployments/1269
Alex Gleason 2022-11-04 04:04:54 +00:00
rodzic 3d25dc7f3c 6a864d126d
commit 63bdf6ad38
8 zmienionych plików z 81 dodań i 120 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

104
app/soapbox/components/quoted-status.tsx
Wyświetl plik

@ -1,15 +1,18 @@
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';
@ -36,7 +39,7 @@ const QuotedStatus: React.FC<IQuotedStatus> = ({ status, onCancel, compose }) =>
const [showMedia, setShowMedia] = useState<boolean>(defaultMediaVisibility(status, displayMedia));
const handleExpandClick = (e: React.MouseEvent<HTMLDivElement>) => {
const handleExpandClick: MouseEventHandler<HTMLDivElement> = (e) => {
if (!status) return;
const account = status.account as AccountEntity;
@ -57,57 +60,6 @@ const QuotedStatus: React.FC<IQuotedStatus> = ({ 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 (
<div className='reply-mentions'>
<FormattedMessage
id='reply_mentions.reply'
defaultMessage='Replying to {accounts}'
values={{
accounts: `@${account.username}`,
}}
/>
</div>
);
} else {
return (
<div className='reply-mentions'>
<FormattedMessage id='reply_mentions.reply_empty' defaultMessage='Replying to post' />
</div>
);
}
}
const accounts = to.slice(0, 2).map(account => <>@{account.username}</>).toArray();
if (to.size > 2) {
accounts.push(
<FormattedMessage id='reply_mentions.more' defaultMessage='{count} more' values={{ count: to.size - 2 }} />,
);
}
return (
<div className='reply-mentions'>
<FormattedMessage
id='reply_mentions.reply'
defaultMessage='Replying to {accounts}'
values={{
accounts: <FormattedList type='conjunction' value={accounts} />,
}}
/>
</div>
);
};
if (!status) {
return null;
}
@ -127,7 +79,7 @@ const QuotedStatus: React.FC<IQuotedStatus> = ({ status, onCancel, compose }) =>
return (
<OutlineBox
data-testid='quoted-status'
className={classNames('mt-3 cursor-pointer', {
className={classNames('cursor-pointer', {
'hover:bg-gray-100 dark:hover:bg-gray-800': !compose,
})}
>
@ -144,20 +96,36 @@ const QuotedStatus: React.FC<IQuotedStatus> = ({ status, onCancel, compose }) =>
withLinkToProfile={!compose}
/>
{renderReplyMentions()}
<StatusReplyMentions status={status} hoverable={false} />
<Text
className='break-words status__content status__content--quote'
size='sm'
dangerouslySetInnerHTML={{ __html: status.contentHtml }}
/>
<Stack className={classNames('relative', {
'min-h-[220px]': status.hidden,
})}
>
{(status.hidden) && (
<SensitiveContentOverlay
status={status}
visible={showMedia}
onToggleVisibility={handleToggleMediaVisibility}
/>
)}
<StatusMedia
status={status}
muted={compose}
showMedia={showMedia}
onToggleVisibility={handleToggleMediaVisibility}
/>
<Stack space={4}>
<StatusContent
status={status}
collapsable
/>
{(status.media_attachments.size > 0) && (
<StatusMedia
status={status}
muted={compose}
showMedia={showMedia}
onToggleVisibility={handleToggleMediaVisibility}
/>
)}
</Stack>
</Stack>
</Stack>
</OutlineBox>
);

12
app/soapbox/components/status-content.css
Wyświetl plik

@ -1,9 +1,9 @@
.status-content p {
@apply mb-5 whitespace-pre-wrap;
@apply mb-4 whitespace-pre-wrap;
}
.status-content p:last-child {
@apply mb-0.5;
@apply mb-0;
}
.status-content a {
@ -20,7 +20,7 @@
.status-content ul,
.status-content ol {
@apply pl-10 mb-5;
@apply pl-10 mb-4;
}
.status-content ul {
@ -32,7 +32,7 @@
}
.status-content blockquote {
@apply py-1 pl-4 mb-5 border-l-4 border-solid border-gray-400 text-gray-500 dark:text-gray-400;
@apply py-1 pl-4 mb-4 border-l-4 border-solid border-gray-400 text-gray-500 dark:text-gray-400;
}
.status-content code {
@ -51,7 +51,7 @@
/* Code block */
.status-content pre {
@apply py-2 px-3 mb-5 leading-6 overflow-x-auto rounded-md break-all;
@apply py-2 px-3 mb-4 leading-6 overflow-x-auto rounded-md break-all;
}
.status-content pre:last-child {
@ -60,7 +60,7 @@
/* Markdown images */
.status-content img:not(.emojione):not([width][height]) {
@apply w-full h-72 object-contain rounded-lg overflow-hidden my-5 block;
@apply w-full h-72 object-contain rounded-lg overflow-hidden my-4 block;
}
/* User setting to underline links */

52
app/soapbox/components/status.tsx
Wyświetl plik

@ -65,7 +65,6 @@ const Status: React.FC<IStatus> = (props) => {
hidden,
featured,
unread,
group,
hideActionBar,
variant = 'rounded',
withDismiss,
@ -296,8 +295,8 @@ const Status: React.FC<IStatus> = (props) => {
const accountAction = props.accountAction || reblogElement;
const inReview = status.visibility === 'self';
const isSensitive = status.hidden;
const inReview = actualStatus.visibility === 'self';
const isSensitive = actualStatus.hidden;
return (
<HotKeys handlers={handlers} data-testid='status'>
@ -349,6 +348,8 @@ const Status: React.FC<IStatus> = (props) => {
</div>
<div className='status__content-wrapper'>
<StatusReplyMentions status={actualStatus} hoverable={hoverable} />
<Stack
className={
classNames('relative', {
@ -356,40 +357,35 @@ const Status: React.FC<IStatus> = (props) => {
})
}
>
{(inReview || isSensitive) ? (
{(inReview || isSensitive) && (
<SensitiveContentOverlay
status={status}
visible={showMedia}
onToggleVisibility={handleToggleMediaVisibility}
/>
) : null}
{!group && actualStatus.group && (
<div className='status__meta'>
Posted in <NavLink to={`/groups/${actualStatus.getIn(['group', 'id'])}`}>{String(actualStatus.getIn(['group', 'title']))}</NavLink>
</div>
)}
<StatusReplyMentions
status={actualStatus}
hoverable={hoverable}
/>
<Stack space={4}>
<StatusContent
status={actualStatus}
onClick={handleClick}
collapsable
/>
<StatusContent
status={actualStatus}
onClick={handleClick}
collapsable
/>
{(quote || actualStatus.media_attachments.size > 0) && (
<Stack space={4}>
<StatusMedia
status={actualStatus}
muted={muted}
onClick={handleClick}
showMedia={showMedia}
onToggleVisibility={handleToggleMediaVisibility}
/>
<StatusMedia
status={actualStatus}
muted={muted}
onClick={handleClick}
showMedia={showMedia}
onToggleVisibility={handleToggleMediaVisibility}
/>
{quote}
{quote}
</Stack>
)}
</Stack>
</Stack>
{!hideActionBar && (

25
app/soapbox/features/status/components/detailed-status.tsx
Wyświetl plik

@ -29,7 +29,6 @@ interface IDetailedStatus {
const DetailedStatus: React.FC<IDetailedStatus> = ({
status,
onToggleHidden,
onOpenCompareHistoryModal,
onToggleMediaVisibility,
showMedia,
@ -93,23 +92,29 @@ const DetailedStatus: React.FC<IDetailedStatus> = ({
})
}
>
{(isUnderReview || isSensitive) ? (
{(isUnderReview || isSensitive) && (
<SensitiveContentOverlay
status={status}
visible={showMedia}
onToggleVisibility={onToggleMediaVisibility}
/>
) : null}
)}
<StatusContent status={actualStatus} />
<Stack space={4}>
<StatusContent status={actualStatus} />
<StatusMedia
status={actualStatus}
showMedia={showMedia}
onToggleVisibility={onToggleMediaVisibility}
/>
{(quote || actualStatus.media_attachments.size > 0) && (
<Stack space={4}>
<StatusMedia
status={actualStatus}
showMedia={showMedia}
onToggleVisibility={onToggleMediaVisibility}
/>
{quote}
{quote}
</Stack>
)}
</Stack>
</Stack>
<HStack justifyContent='between' alignItems='center' className='py-2' wrap>

1
app/styles/components/media-gallery.scss
Wyświetl plik

@ -1,6 +1,5 @@
.media-gallery {
box-sizing: border-box;
margin-top: 8px;
overflow: hidden;
border-radius: 10px;
position: relative;

1
app/styles/components/reply-mentions.scss
Wyświetl plik

@ -10,7 +10,6 @@
.detailed-status {
.reply-mentions {
display: block;
margin: 4px 0 0 0;
span {
cursor: pointer;

5
app/styles/components/status.scss
Wyświetl plik

@ -14,11 +14,6 @@
opacity: 1;
animation: fade 150ms linear;
.video-player,
.audio-player {
margin-top: 8px;
}
&.light {
.display-name {
strong {

1
app/styles/components/video-player.scss
Wyświetl plik

@ -7,7 +7,6 @@
flex-direction: column;
height: 100%;
justify-content: center;
margin-top: 8px;
position: relative;
text-align: center;
z-index: 100;