From 2eb08aced9a4314e7b3cf7cbc6cb8c2833c7c641 Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Fri, 16 Sep 2022 12:24:33 -0500 Subject: [PATCH 1/5] Create OutlineBox component Visual container for QuotedStatus and Accounts in some scenarios --- app/soapbox/components/outline-box.tsx | 18 ++++++ app/soapbox/components/quoted-status.tsx | 60 ++++++++++--------- .../account-moderation-modal.tsx | 5 +- 3 files changed, 53 insertions(+), 30 deletions(-) create mode 100644 app/soapbox/components/outline-box.tsx diff --git a/app/soapbox/components/outline-box.tsx b/app/soapbox/components/outline-box.tsx new file mode 100644 index 000000000..91ad1c57d --- /dev/null +++ b/app/soapbox/components/outline-box.tsx @@ -0,0 +1,18 @@ +import classNames from 'clsx'; +import React from 'react'; + +interface IOutlineBox { + children: React.ReactNode, + className?: string, +} + +/** Wraps children in a container with an outline. */ +const OutlineBox: React.FC = ({ children, className }) => { + return ( +
+ {children} +
+ ); +}; + +export default OutlineBox; \ No newline at end of file diff --git a/app/soapbox/components/quoted-status.tsx b/app/soapbox/components/quoted-status.tsx index a8809bedf..9a758225b 100644 --- a/app/soapbox/components/quoted-status.tsx +++ b/app/soapbox/components/quoted-status.tsx @@ -9,6 +9,8 @@ import AccountContainer from 'soapbox/containers/account_container'; import { useSettings } from 'soapbox/hooks'; import { defaultMediaVisibility } from 'soapbox/utils/status'; +import OutlineBox from './outline-box'; + import type { Account as AccountEntity, Status as StatusEntity } from 'soapbox/types/entities'; const messages = defineMessages({ @@ -123,38 +125,40 @@ const QuotedStatus: React.FC = ({ status, onCancel, compose }) => } return ( - - + + - {renderReplyMentions()} + {renderReplyMentions()} - + - - + + + ); }; diff --git a/app/soapbox/features/ui/components/modals/account-moderation-modal/account-moderation-modal.tsx b/app/soapbox/features/ui/components/modals/account-moderation-modal/account-moderation-modal.tsx index 8f91e1d3c..8c9f3df06 100644 --- a/app/soapbox/features/ui/components/modals/account-moderation-modal/account-moderation-modal.tsx +++ b/app/soapbox/features/ui/components/modals/account-moderation-modal/account-moderation-modal.tsx @@ -13,6 +13,7 @@ import snackbar from 'soapbox/actions/snackbar'; import Account from 'soapbox/components/account'; import List, { ListItem } from 'soapbox/components/list'; import MissingIndicator from 'soapbox/components/missing_indicator'; +import OutlineBox from 'soapbox/components/outline-box'; import { Button, Text, HStack, Modal, Stack, Toggle } from 'soapbox/components/ui'; import { useAppDispatch, useAppSelector, useFeatures, useOwnAccount } from 'soapbox/hooks'; import { makeGetAccount } from 'soapbox/selectors'; @@ -109,14 +110,14 @@ const AccountModerationModal: React.FC = ({ onClose, ac onClose={handleClose} > -
+ -
+ {(ownAccount.admin && isLocal(account)) && ( From 06a0ca704ccd53ca03c4537e37953e26b8c11e33 Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Fri, 16 Sep 2022 12:37:28 -0500 Subject: [PATCH 2/5] Improve styles of ConfirmationModal, fix account deletion modal --- app/soapbox/actions/moderation.tsx | 39 ++++++++++++------- .../ui/components/confirmation_modal.tsx | 32 +++++++-------- app/styles/components/modal.scss | 8 ---- 3 files changed, 42 insertions(+), 37 deletions(-) diff --git a/app/soapbox/actions/moderation.tsx b/app/soapbox/actions/moderation.tsx index ea5861eca..08f8fb9a2 100644 --- a/app/soapbox/actions/moderation.tsx +++ b/app/soapbox/actions/moderation.tsx @@ -9,6 +9,8 @@ import AccountContainer from 'soapbox/containers/account_container'; import { isLocal } from 'soapbox/utils/accounts'; import type { AppDispatch, RootState } from 'soapbox/store'; +import { Stack, Text } from 'soapbox/components/ui'; +import OutlineBox from 'soapbox/components/outline-box'; const messages = defineMessages({ deactivateUserHeading: { id: 'confirmations.admin.deactivate_user.heading', defaultMessage: 'Deactivate @{acct}' }, @@ -43,10 +45,22 @@ const deactivateUserModal = (intl: IntlShape, accountId: string, afterConfirm = const acct = state.accounts.get(accountId)!.acct; const name = state.accounts.get(accountId)!.username; + const message = ( + + + + + + + {intl.formatMessage(messages.deactivateUserPrompt, { acct })} + + + ); + dispatch(openModal('CONFIRM', { icon: require('@tabler/icons/user-off.svg'), heading: intl.formatMessage(messages.deactivateUserHeading, { acct }), - message: intl.formatMessage(messages.deactivateUserPrompt, { acct }), + message, confirm: intl.formatMessage(messages.deactivateUserConfirm, { name }), onConfirm: () => { dispatch(deactivateUsers([accountId])).then(() => { @@ -64,22 +78,21 @@ const deleteUserModal = (intl: IntlShape, accountId: string, afterConfirm = () = const account = state.accounts.get(accountId)!; const acct = account.acct; const name = account.username; - const favicon = account.pleroma.get('favicon'); const local = isLocal(account); - const message = (<> - - {intl.formatMessage(messages.deleteUserPrompt, { acct })} - ); + const message = ( + + + + - const confirm = (<> - {favicon && -
- -
} - {intl.formatMessage(messages.deleteUserConfirm, { name })} - ); + + {intl.formatMessage(messages.deleteUserPrompt, { acct })} + + + ); + const confirm = intl.formatMessage(messages.deleteUserConfirm, { name }); const checkbox = local ? intl.formatMessage(messages.deleteLocalUserCheckbox) : false; dispatch(openModal('CONFIRM', { diff --git a/app/soapbox/features/ui/components/confirmation_modal.tsx b/app/soapbox/features/ui/components/confirmation_modal.tsx index fefe57396..f21478d9e 100644 --- a/app/soapbox/features/ui/components/confirmation_modal.tsx +++ b/app/soapbox/features/ui/components/confirmation_modal.tsx @@ -1,8 +1,8 @@ import React, { useState } from 'react'; import { FormattedMessage } from 'react-intl'; -import { Modal, Text } from 'soapbox/components/ui'; -import { SimpleForm, FieldsGroup, Checkbox } from 'soapbox/features/forms'; +import List, { ListItem } from 'soapbox/components/list'; +import { Modal, Stack, Text, Toggle } from 'soapbox/components/ui'; interface IConfirmationModal { heading: React.ReactNode, @@ -60,23 +60,23 @@ const ConfirmationModal: React.FC = ({ secondaryText={secondary} secondaryAction={onSecondary && handleSecondary} > - - {message} - + + + {message} + -
- {checkbox &&
- - - + + - - -
} -
+ + + )} + ); }; diff --git a/app/styles/components/modal.scss b/app/styles/components/modal.scss index 6d4e3d611..435c07c65 100644 --- a/app/styles/components/modal.scss +++ b/app/styles/components/modal.scss @@ -331,14 +331,6 @@ } } -.confirmation-modal__checkbox { - padding: 0 30px; - - .simple_form { - margin-top: -14px; - } -} - .reply-mentions-modal__accounts { display: block; flex-direction: row; From 7fe97e807599a8059ecfbca58acae1f34be4eed0 Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Fri, 16 Sep 2022 12:44:11 -0500 Subject: [PATCH 3/5] QuotedStatus: move testId to highest component --- app/soapbox/components/quoted-status.tsx | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/app/soapbox/components/quoted-status.tsx b/app/soapbox/components/quoted-status.tsx index 9a758225b..d7ecfaf05 100644 --- a/app/soapbox/components/quoted-status.tsx +++ b/app/soapbox/components/quoted-status.tsx @@ -125,12 +125,13 @@ const QuotedStatus: React.FC = ({ status, onCancel, compose }) => } return ( - From 5297227501afe141a16eb1df39d719b043ca9fde Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Fri, 16 Sep 2022 13:30:55 -0500 Subject: [PATCH 4/5] My god is the everlasting sky! Your god lives beneath him. --- app/soapbox/actions/moderation.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/soapbox/actions/moderation.tsx b/app/soapbox/actions/moderation.tsx index 08f8fb9a2..bf0ccf332 100644 --- a/app/soapbox/actions/moderation.tsx +++ b/app/soapbox/actions/moderation.tsx @@ -5,12 +5,12 @@ import { fetchAccountByUsername } from 'soapbox/actions/accounts'; import { deactivateUsers, deleteUsers, deleteStatus, toggleStatusSensitivity } from 'soapbox/actions/admin'; import { openModal } from 'soapbox/actions/modals'; import snackbar from 'soapbox/actions/snackbar'; +import OutlineBox from 'soapbox/components/outline-box'; +import { Stack, Text } from 'soapbox/components/ui'; import AccountContainer from 'soapbox/containers/account_container'; import { isLocal } from 'soapbox/utils/accounts'; import type { AppDispatch, RootState } from 'soapbox/store'; -import { Stack, Text } from 'soapbox/components/ui'; -import OutlineBox from 'soapbox/components/outline-box'; const messages = defineMessages({ deactivateUserHeading: { id: 'confirmations.admin.deactivate_user.heading', defaultMessage: 'Deactivate @{acct}' }, From ca4a5370c15c5a475b09c60289bec96ae8bde755 Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Fri, 16 Sep 2022 13:34:53 -0500 Subject: [PATCH 5/5] OutlineBox: allow passing div props through --- app/soapbox/components/outline-box.tsx | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/app/soapbox/components/outline-box.tsx b/app/soapbox/components/outline-box.tsx index 91ad1c57d..41a13bf49 100644 --- a/app/soapbox/components/outline-box.tsx +++ b/app/soapbox/components/outline-box.tsx @@ -1,15 +1,18 @@ import classNames from 'clsx'; import React from 'react'; -interface IOutlineBox { +interface IOutlineBox extends React.HTMLAttributes { children: React.ReactNode, className?: string, } /** Wraps children in a container with an outline. */ -const OutlineBox: React.FC = ({ children, className }) => { +const OutlineBox: React.FC = ({ children, className, ...rest }) => { return ( -
+
{children}
);