+
+
+ ),
+ }}
+ />
+ }
+ />
+ );
+ } else if (featured) {
+ return (
+ }
+ text={
+
+
+
+ }
+ />
+ );
+ } else if (showGroup && group) {
+ return (
+ }
+ text={
+
+
+ ) }}
+ />
+
+ }
+ />
+ );
+ }
+ };
+
if (!status) return null;
- let rebloggedByText, reblogElement, reblogElementMobile;
if (hidden) {
return (
- {actualStatus.getIn(['account', 'display_name']) || actualStatus.getIn(['account', 'username'])}
- {actualStatus.content}
+ <>
+ {actualStatus.getIn(['account', 'display_name']) || actualStatus.getIn(['account', 'username'])}
+ {actualStatus.content}
+
);
}
@@ -229,55 +298,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 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'])) },
@@ -313,8 +335,6 @@ const Status: React.FC = (props) => {
react: handleHotkeyReact,
};
- const accountAction = props.accountAction || reblogElement;
-
const isUnderReview = actualStatus.visibility === 'self';
const isSensitive = actualStatus.hidden;
@@ -326,24 +346,12 @@ const Status: React.FC = (props) => {
data-featured={featured ? 'true' : null}
aria-label={textForScreenReader(intl, actualStatus, rebloggedByText)}
ref={node}
- onMouseUp={handleClick}
+ onClick={handleClick}
role='link'
>
- {featured && (
-
-
-
-
-
-
-
-
-
- )}
-
= (props) => {
})}
data-id={status.id}
>
- {reblogElementMobile}
+ {renderStatusInfo()}
-
+
@@ -383,30 +391,32 @@ const Status: React.FC
= (props) => {
/>
)}
-
-
+ {actualStatus.event ? : (
+
+
-
+
- {(quote || actualStatus.card || actualStatus.media_attachments.size > 0) && (
-
-
+ {(quote || actualStatus.card || actualStatus.media_attachments.size > 0) && (
+
+
- {quote}
-
- )}
-
+ {quote}
+
+ )}
+
+ )}
{(!hideActionBar && !isUnderReview) && (
diff --git a/app/soapbox/components/statuses/__tests__/sensitive-content-overlay.test.tsx b/app/soapbox/components/statuses/__tests__/sensitive-content-overlay.test.tsx
index 4b2823840..ad677856e 100644
--- a/app/soapbox/components/statuses/__tests__/sensitive-content-overlay.test.tsx
+++ b/app/soapbox/components/statuses/__tests__/sensitive-content-overlay.test.tsx
@@ -20,6 +20,11 @@ describe('', () => {
expect(screen.getByTestId('sensitive-overlay')).toHaveTextContent('Sensitive content');
});
+ it('does not allow user to delete the status', () => {
+ render();
+ expect(screen.queryAllByTestId('icon-button')).toHaveLength(0);
+ });
+
it('can be toggled', () => {
render();
@@ -43,6 +48,11 @@ describe('', () => {
expect(screen.getByTestId('sensitive-overlay')).toHaveTextContent('Content Under Review');
});
+ it('allows the user to delete the status', () => {
+ render();
+ expect(screen.getByTestId('icon-button')).toBeInTheDocument();
+ });
+
it('can be toggled', () => {
render();
diff --git a/app/soapbox/components/statuses/sensitive-content-overlay.tsx b/app/soapbox/components/statuses/sensitive-content-overlay.tsx
index 59faef161..ed8891535 100644
--- a/app/soapbox/components/statuses/sensitive-content-overlay.tsx
+++ b/app/soapbox/components/statuses/sensitive-content-overlay.tsx
@@ -1,8 +1,11 @@
import classNames from 'clsx';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
import { defineMessages, useIntl } from 'react-intl';
-import { useSettings, useSoapboxConfig } from 'soapbox/hooks';
+import { openModal } from 'soapbox/actions/modals';
+import { deleteStatus } from 'soapbox/actions/statuses';
+import DropdownMenu from 'soapbox/containers/dropdown-menu-container';
+import { useAppDispatch, useOwnAccount, useSettings, useSoapboxConfig } from 'soapbox/hooks';
import { defaultMediaVisibility } from 'soapbox/utils/status';
import { Button, HStack, Text } from '../ui';
@@ -10,6 +13,10 @@ import { Button, HStack, Text } from '../ui';
import type { Status as StatusEntity } from 'soapbox/types/entities';
const messages = defineMessages({
+ delete: { id: 'status.delete', defaultMessage: 'Delete' },
+ deleteConfirm: { id: 'confirmations.delete.confirm', defaultMessage: 'Delete' },
+ deleteHeading: { id: 'confirmations.delete.heading', defaultMessage: 'Delete post' },
+ deleteMessage: { id: 'confirmations.delete.message', defaultMessage: 'Are you sure you want to delete this post?' },
hide: { id: 'moderation_overlay.hide', defaultMessage: 'Hide content' },
sensitiveTitle: { id: 'status.sensitive_warning', defaultMessage: 'Sensitive content' },
underReviewTitle: { id: 'moderation_overlay.title', defaultMessage: 'Content Under Review' },
@@ -27,15 +34,17 @@ interface ISensitiveContentOverlay {
const SensitiveContentOverlay = React.forwardRef((props, ref) => {
const { onToggleVisibility, status } = props;
- const isUnderReview = status.visibility === 'self';
-
- const settings = useSettings();
- const displayMedia = settings.get('displayMedia') as string;
+ const account = useOwnAccount();
+ const dispatch = useAppDispatch();
const intl = useIntl();
-
+ const settings = useSettings();
const { links } = useSoapboxConfig();
+ const isUnderReview = status.visibility === 'self';
+ const isOwnStatus = status.getIn(['account', 'id']) === account?.id;
+ const displayMedia = settings.get('displayMedia') as string;
+
const [visible, setVisible] = useState(defaultMediaVisibility(status, displayMedia));
const toggleVisibility = (event: React.MouseEvent) => {
@@ -48,6 +57,32 @@ const SensitiveContentOverlay = React.forwardRef {
+ const deleteModal = settings.get('deleteModal');
+ if (!deleteModal) {
+ dispatch(deleteStatus(status.id, false));
+ } else {
+ dispatch(openModal('CONFIRM', {
+ icon: require('@tabler/icons/trash.svg'),
+ heading: intl.formatMessage(messages.deleteHeading),
+ message: intl.formatMessage(messages.deleteMessage),
+ confirm: intl.formatMessage(messages.deleteConfirm),
+ onConfirm: () => dispatch(deleteStatus(status.id, false)),
+ }));
+ }
+ };
+
+ const menu = useMemo(() => {
+ return [
+ {
+ text: intl.formatMessage(messages.delete),
+ action: handleDeleteStatus,
+ icon: require('@tabler/icons/trash.svg'),
+ destructive: true,
+ },
+ ];
+ }, []);
+
useEffect(() => {
if (typeof props.visible !== 'undefined') {
setVisible(!!props.visible);
@@ -57,7 +92,7 @@ const SensitiveContentOverlay = React.forwardRef
) : (
-
-
-
- {intl.formatMessage(isUnderReview ? messages.underReviewTitle : messages.sensitiveTitle)}
-
+
)}
+ {icon}
+
+
+ {text}
+
+ );
+};
+
+export default StatusInfo;
\ No newline at end of file
diff --git a/app/soapbox/components/still-image.tsx b/app/soapbox/components/still-image.tsx
index 24e212ce5..1f4f1a261 100644
--- a/app/soapbox/components/still-image.tsx
+++ b/app/soapbox/components/still-image.tsx
@@ -12,10 +12,14 @@ interface IStillImage {
src: string,
/** Extra CSS styles on the outer element. */
style?: React.CSSProperties,
+ /** Whether to display the image contained vs filled in its container. */
+ letterboxed?: boolean,
+ /** Whether to show the file extension in the corner. */
+ showExt?: boolean,
}
/** Renders images on a canvas, only playing GIFs if autoPlayGif is enabled. */
-const StillImage: React.FC
= ({ alt, className, src, style }) => {
+const StillImage: React.FC = ({ alt, className, src, style, letterboxed = false, showExt = false }) => {
const settings = useSettings();
const autoPlayGif = settings.get('autoPlayGif');
@@ -34,10 +38,56 @@ const StillImage: React.FC = ({ alt, className, src, style }) => {
}
};
+ /** ClassNames shared between the `![]()
` and `