From b8bbac31e5ccba25d338e24b6f54504abe5efbe4 Mon Sep 17 00:00:00 2001 From: Justin Date: Thu, 29 Sep 2022 10:44:06 -0400 Subject: [PATCH] Improve 'In Review' UX --- .../truthsocial-status-in-moderation.json | 2 +- app/soapbox/components/media_gallery.js | Bin 23694 -> 22003 bytes app/soapbox/components/status-media.tsx | 1 - app/soapbox/components/status.tsx | 17 +++- .../__tests__/moderation-overlay.test.tsx | 19 ++++ .../statuses/moderation-overlay.tsx | 93 ++++++++++++++++++ app/soapbox/features/status/index.tsx | 12 ++- app/soapbox/utils/status.ts | 4 +- 8 files changed, 139 insertions(+), 9 deletions(-) create mode 100644 app/soapbox/components/statuses/__tests__/moderation-overlay.test.tsx create mode 100644 app/soapbox/components/statuses/moderation-overlay.tsx diff --git a/app/soapbox/__fixtures__/truthsocial-status-in-moderation.json b/app/soapbox/__fixtures__/truthsocial-status-in-moderation.json index e9402876ff..7613ebd930 100644 --- a/app/soapbox/__fixtures__/truthsocial-status-in-moderation.json +++ b/app/soapbox/__fixtures__/truthsocial-status-in-moderation.json @@ -82,4 +82,4 @@ "emojis": [], "card": null, "poll": null -} +} \ No newline at end of file diff --git a/app/soapbox/components/media_gallery.js b/app/soapbox/components/media_gallery.js index 22ed2473d88ebeb28bb704693db1b1a9dc08e0c4..7bbbbd5b71802403af3fd866505b050a3e904cf1 100644 GIT binary patch delta 151 zcmV;I0BHY?xdHR50kDAqv%LXf9|I_R3X@wQI0Ahsv!o$k0+Z?oH?v(N94C{IB^9%u zODqDD)J=+$ehLVa>rP^mO-TonJRUK#=}<8N33Fv`b7^#Gc4f0MQV;?UVrMO9a$$Kb zI503TH#H!WK~#N{Ayxhfb7^{IJtuQ*CzG*Q7?bZ-5tENj43im75tC9-Qj@Y+6|-Yn FD*`wWHV^;+ delta 1178 zcmah|J#Q015Y-t$h?Nf<5)6?-CW`RditP&#UrOXi2vG#d;P?_zhIPEQSMhytyXVAl zPKbhrf`Tn5C=e1|8p4T!jt&|M#BZRZ;}5WVXU8N#;&k$zXXm|n^Jeb%zV_mi_Wr51 z(1AMPhK-$yy>rL5YP1eM)Lh#H#GbGU6}A{a|`#BR1U)F2agwdK_1pq~zMpTH7Hk zZ(=9doqdQBS)f*#v?$rmMjXNSd$(hQSzw-NVz({EiqD5>4br`|jCfs~AEefX8=}Oc z;^alyE+-a;b*oBTi0BaL%iI`$Q%49w;YxF_#C{Q;91?DHqxtR=L6y|7*W^XQ z7_O57T5C`Sjx7yqUq`&YGOTJkf>X^X(#-l1WcVCTWPn0U47i)X8eA+!iH zJ(FIR$1ek*N!zx)_9R$b^&*qFv z>ZwO@^-HT#fLt$+23 zsq)`SQ{uC6Rv=^el#Y)MPqAj?P7U?x{b-m!O34tV8>hvAkyJ!)*OI|kV=ndw%aL_& diff --git a/app/soapbox/components/status-media.tsx b/app/soapbox/components/status-media.tsx index d64d88e4b7..2721d726bc 100644 --- a/app/soapbox/components/status-media.tsx +++ b/app/soapbox/components/status-media.tsx @@ -144,7 +144,6 @@ const StatusMedia: React.FC = ({ = (props) => { const accountAction = props.accountAction || reblogElement; + const inReview = status.visibility === 'self'; + return (
= (props) => { />
-
+
+ {inReview ? ( + + ) : null} + {!group && actualStatus.group && (
Posted in {String(actualStatus.getIn(['group', 'title']))} @@ -385,8 +396,8 @@ const Status: React.FC = (props) => { )}
-
- +
+ ); }; diff --git a/app/soapbox/components/statuses/__tests__/moderation-overlay.test.tsx b/app/soapbox/components/statuses/__tests__/moderation-overlay.test.tsx new file mode 100644 index 0000000000..a94923c558 --- /dev/null +++ b/app/soapbox/components/statuses/__tests__/moderation-overlay.test.tsx @@ -0,0 +1,19 @@ +import React from 'react'; + +import { fireEvent, render, screen } from '../../../jest/test-helpers'; +import ModerationOverlay from '../moderation-overlay'; + +describe('', () => { + it('defaults to enabled', () => { + render(); + expect(screen.getByTestId('moderation-overlay')).toHaveTextContent('Content Under Review'); + }); + + it('can be toggled', () => { + render(); + + fireEvent.click(screen.getByTestId('button')); + expect(screen.getByTestId('moderation-overlay')).not.toHaveTextContent('Content Under Review'); + expect(screen.getByTestId('moderation-overlay')).toHaveTextContent('Hide'); + }); +}); diff --git a/app/soapbox/components/statuses/moderation-overlay.tsx b/app/soapbox/components/statuses/moderation-overlay.tsx new file mode 100644 index 0000000000..6d572eb3ab --- /dev/null +++ b/app/soapbox/components/statuses/moderation-overlay.tsx @@ -0,0 +1,93 @@ +import classNames from 'clsx'; +import React, { useState } from 'react'; +import { defineMessages, useIntl } from 'react-intl'; + +import { useSoapboxConfig } from 'soapbox/hooks'; + +import { Button, HStack, Text } from '../ui'; + +const messages = defineMessages({ + hide: { id: 'moderation_overlay.hide', defaultMessage: 'Hide' }, + title: { id: 'moderation_overlay.title', defaultMessage: 'Content Under Review' }, + subtitle: { id: 'moderation_overlay.subtitle', defaultMessage: 'This Post has been sent to Moderation for review and is only visible to you. If you believe this is an error please contact Support.' }, + contact: { id: 'moderation_overlay.contact', defaultMessage: 'Contact' }, + show: { id: 'moderation_overlay.show', defaultMessage: 'Show Content' }, +}); + +const ModerationOverlay = () => { + const intl = useIntl(); + + const { links } = useSoapboxConfig(); + + const [visible, setVisible] = useState(false); + + const toggleVisibility = (event: React.MouseEvent) => { + event.stopPropagation(); + + setVisible((prevValue) => !prevValue); + }; + + return ( +
+ {visible ? ( + + + )} + + + +
+ )} + + ); +}; + +export default ModerationOverlay; \ No newline at end of file diff --git a/app/soapbox/features/status/index.tsx b/app/soapbox/features/status/index.tsx index 81cb0a1525..c5130b759e 100644 --- a/app/soapbox/features/status/index.tsx +++ b/app/soapbox/features/status/index.tsx @@ -29,6 +29,7 @@ import MissingIndicator from 'soapbox/components/missing_indicator'; import PullToRefresh from 'soapbox/components/pull-to-refresh'; import ScrollableList from 'soapbox/components/scrollable_list'; import StatusActionBar from 'soapbox/components/status-action-bar'; +import ModerationOverlay from 'soapbox/components/statuses/moderation-overlay'; import SubNavigation from 'soapbox/components/sub_navigation'; import Tombstone from 'soapbox/components/tombstone'; import { Column, Stack } from 'soapbox/components/ui'; @@ -134,6 +135,7 @@ const Thread: React.FC = (props) => { const me = useAppSelector(state => state.me); const status = useAppSelector(state => getStatus(state, { id: props.params.statusId })); const displayMedia = settings.get('displayMedia') as DisplayMedia; + const inReview = status?.visibility === 'self'; const { ancestorsIds, descendantsIds } = useAppSelector(state => { let ancestorsIds = ImmutableOrderedSet(); @@ -459,11 +461,19 @@ const Thread: React.FC = (props) => {
+ {inReview ? ( + + ) : null} +