diff --git a/app/javascript/mastodon/components/domain.tsx b/app/javascript/mastodon/components/domain.tsx index ed5e8e7e4c..aa64f0f8c3 100644 --- a/app/javascript/mastodon/components/domain.tsx +++ b/app/javascript/mastodon/components/domain.tsx @@ -3,6 +3,8 @@ import { useCallback } from 'react'; import { defineMessages, useIntl } from 'react-intl'; import LockOpenIcon from '@/material-icons/400-24px/lock_open.svg?react'; +import { unblockDomain } from 'mastodon/actions/domain_blocks'; +import { useAppDispatch } from 'mastodon/store'; import { IconButton } from './icon_button'; @@ -13,17 +15,15 @@ const messages = defineMessages({ }, }); -interface Props { +export const Domain: React.FC<{ domain: string; - onUnblockDomain: (domain: string) => void; -} - -export const Domain: React.FC = ({ domain, onUnblockDomain }) => { +}> = ({ domain }) => { const intl = useIntl(); + const dispatch = useAppDispatch(); const handleDomainUnblock = useCallback(() => { - onUnblockDomain(domain); - }, [domain, onUnblockDomain]); + dispatch(unblockDomain(domain)); + }, [dispatch, domain]); return (
diff --git a/app/javascript/mastodon/components/follow_button.tsx b/app/javascript/mastodon/components/follow_button.tsx index ecc4e1ee17..4272797a86 100644 --- a/app/javascript/mastodon/components/follow_button.tsx +++ b/app/javascript/mastodon/components/follow_button.tsx @@ -1,18 +1,15 @@ import { useCallback, useEffect } from 'react'; -import { useIntl, defineMessages, FormattedMessage } from 'react-intl'; +import { useIntl, defineMessages } from 'react-intl'; import { useIdentity } from '@/mastodon/identity_context'; -import { - fetchRelationships, - followAccount, - unfollowAccount, -} from 'mastodon/actions/accounts'; +import { fetchRelationships, followAccount } from 'mastodon/actions/accounts'; import { openModal } from 'mastodon/actions/modal'; import { Button } from 'mastodon/components/button'; import { LoadingIndicator } from 'mastodon/components/loading_indicator'; import { me } from 'mastodon/initial_state'; import { useAppDispatch, useAppSelector } from 'mastodon/store'; +import { confirmUnfollow } from 'mastodon/utils/confirmations'; const messages = defineMessages({ unfollow: { id: 'account.unfollow', defaultMessage: 'Unfollow' }, @@ -60,25 +57,8 @@ export const FollowButton: React.FC<{ if (accountId === me) { return; - } else if (relationship.following || relationship.requested) { - dispatch( - openModal({ - modalType: 'CONFIRM', - modalProps: { - message: ( - @{account?.acct} }} - /> - ), - confirm: intl.formatMessage(messages.unfollow), - onConfirm: () => { - dispatch(unfollowAccount(accountId)); - }, - }, - }), - ); + } else if (account && (relationship.following || relationship.requested)) { + confirmUnfollow(dispatch, intl, account); } else { dispatch(followAccount(accountId)); } diff --git a/app/javascript/mastodon/containers/account_container.jsx b/app/javascript/mastodon/containers/account_container.jsx index f171fcc2fe..be108094a4 100644 --- a/app/javascript/mastodon/containers/account_container.jsx +++ b/app/javascript/mastodon/containers/account_container.jsx @@ -1,24 +1,20 @@ -import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; +import { injectIntl } from 'react-intl'; import { connect } from 'react-redux'; +import { confirmUnfollow } from 'mastodon/utils/confirmations'; + import { followAccount, - unfollowAccount, blockAccount, unblockAccount, muteAccount, unmuteAccount, } from '../actions/accounts'; -import { openModal } from '../actions/modal'; import { initMuteModal } from '../actions/mutes'; import Account from '../components/account'; import { makeGetAccount } from '../selectors'; -const messages = defineMessages({ - unfollowConfirm: { id: 'confirmations.unfollow.confirm', defaultMessage: 'Unfollow' }, -}); - const makeMapStateToProps = () => { const getAccount = makeGetAccount(); @@ -33,14 +29,7 @@ const mapDispatchToProps = (dispatch, { intl }) => ({ onFollow (account) { if (account.getIn(['relationship', 'following']) || account.getIn(['relationship', 'requested'])) { - dispatch(openModal({ - modalType: 'CONFIRM', - modalProps: { - message: @{account.get('acct')} }} />, - confirm: intl.formatMessage(messages.unfollowConfirm), - onConfirm: () => dispatch(unfollowAccount(account.get('id'))), - }, - })); + confirmUnfollow(dispatch, intl, account); } else { dispatch(followAccount(account.get('id'))); } diff --git a/app/javascript/mastodon/containers/domain_container.jsx b/app/javascript/mastodon/containers/domain_container.jsx deleted file mode 100644 index c719a5775c..0000000000 --- a/app/javascript/mastodon/containers/domain_container.jsx +++ /dev/null @@ -1,36 +0,0 @@ -import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; - -import { connect } from 'react-redux'; - -import { blockDomain, unblockDomain } from '../actions/domain_blocks'; -import { openModal } from '../actions/modal'; -import { Domain } from '../components/domain'; - -const messages = defineMessages({ - blockDomainConfirm: { id: 'confirmations.domain_block.confirm', defaultMessage: 'Block entire domain' }, -}); - -const makeMapStateToProps = () => { - const mapStateToProps = () => ({}); - - return mapStateToProps; -}; - -const mapDispatchToProps = (dispatch, { intl }) => ({ - onBlockDomain (domain) { - dispatch(openModal({ - modalType: 'CONFIRM', - modalProps: { - message: {domain} }} />, - confirm: intl.formatMessage(messages.blockDomainConfirm), - onConfirm: () => dispatch(blockDomain(domain)), - }, - })); - }, - - onUnblockDomain (domain) { - dispatch(unblockDomain(domain)); - }, -}); - -export default injectIntl(connect(makeMapStateToProps, mapDispatchToProps)(Domain)); diff --git a/app/javascript/mastodon/containers/status_container.jsx b/app/javascript/mastodon/containers/status_container.jsx index 4a9b525777..936749cd89 100644 --- a/app/javascript/mastodon/containers/status_container.jsx +++ b/app/javascript/mastodon/containers/status_container.jsx @@ -1,7 +1,9 @@ -import { defineMessages, injectIntl } from 'react-intl'; +import { injectIntl } from 'react-intl'; import { connect } from 'react-redux'; +import { confirmDeleteStatus, confirmReply, confirmEdit } from 'mastodon/utils/confirmations'; + import { unmuteAccount, unblockAccount, @@ -49,18 +51,6 @@ import Status from '../components/status'; import { boostModal, deleteModal } from '../initial_state'; import { makeGetStatus, makeGetPictureInPicture } from '../selectors'; -const messages = defineMessages({ - deleteConfirm: { id: 'confirmations.delete.confirm', defaultMessage: 'Delete' }, - deleteMessage: { id: 'confirmations.delete.message', defaultMessage: 'Are you sure you want to delete this status?' }, - redraftConfirm: { id: 'confirmations.redraft.confirm', defaultMessage: 'Delete & redraft' }, - redraftMessage: { id: 'confirmations.redraft.message', defaultMessage: 'Are you sure you want to delete this status and re-draft it? Favorites and boosts will be lost, and replies to the original post will be orphaned.' }, - replyConfirm: { id: 'confirmations.reply.confirm', defaultMessage: 'Reply' }, - replyMessage: { id: 'confirmations.reply.message', defaultMessage: 'Replying now will overwrite the message you are currently composing. Are you sure you want to proceed?' }, - editConfirm: { id: 'confirmations.edit.confirm', defaultMessage: 'Edit' }, - editMessage: { id: 'confirmations.edit.message', defaultMessage: 'Editing now will overwrite the message you are currently composing. Are you sure you want to proceed?' }, - blockDomainConfirm: { id: 'confirmations.domain_block.confirm', defaultMessage: 'Block entire domain' }, -}); - const makeMapStateToProps = () => { const getStatus = makeGetStatus(); const getPictureInPicture = makeGetPictureInPicture(); @@ -81,13 +71,7 @@ const mapDispatchToProps = (dispatch, { intl, contextType }) => ({ let state = getState(); if (state.getIn(['compose', 'text']).trim().length !== 0) { - dispatch(openModal({ - modalType: 'CONFIRM', - modalProps: { - message: intl.formatMessage(messages.replyMessage), - confirm: intl.formatMessage(messages.replyConfirm), - onConfirm: () => dispatch(replyCompose(status, router)) }, - })); + confirmReply(dispatch, intl, router, status); } else { dispatch(replyCompose(status, router)); } @@ -148,14 +132,7 @@ const mapDispatchToProps = (dispatch, { intl, contextType }) => ({ if (!deleteModal) { dispatch(deleteStatus(status.get('id'), history, withRedraft)); } else { - dispatch(openModal({ - modalType: 'CONFIRM', - modalProps: { - message: intl.formatMessage(withRedraft ? messages.redraftMessage : messages.deleteMessage), - confirm: intl.formatMessage(withRedraft ? messages.redraftConfirm : messages.deleteConfirm), - onConfirm: () => dispatch(deleteStatus(status.get('id'), history, withRedraft)), - }, - })); + confirmDeleteStatus(dispatch, intl, history, status.get('id'), withRedraft); } }, @@ -163,14 +140,7 @@ const mapDispatchToProps = (dispatch, { intl, contextType }) => ({ dispatch((_, getState) => { let state = getState(); if (state.getIn(['compose', 'text']).trim().length !== 0) { - dispatch(openModal({ - modalType: 'CONFIRM', - modalProps: { - message: intl.formatMessage(messages.editMessage), - confirm: intl.formatMessage(messages.editConfirm), - onConfirm: () => dispatch(editStatus(status.get('id'), history)), - }, - })); + confirmEdit(dispatch, intl, history, status.get('id')); } else { dispatch(editStatus(status.get('id'), history)); } diff --git a/app/javascript/mastodon/features/account_timeline/containers/header_container.jsx b/app/javascript/mastodon/features/account_timeline/containers/header_container.jsx index d55d8c58e4..d25083f08a 100644 --- a/app/javascript/mastodon/features/account_timeline/containers/header_container.jsx +++ b/app/javascript/mastodon/features/account_timeline/containers/header_container.jsx @@ -1,12 +1,12 @@ -import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; +import { injectIntl } from 'react-intl'; import { connect } from 'react-redux'; import { openURL } from 'mastodon/actions/search'; +import { confirmUnfollow } from 'mastodon/utils/confirmations'; import { followAccount, - unfollowAccount, unblockAccount, unmuteAccount, pinAccount, @@ -24,11 +24,6 @@ import { initReport } from '../../../actions/reports'; import { makeGetAccount, getAccountHidden } from '../../../selectors'; import Header from '../components/header'; -const messages = defineMessages({ - unfollowConfirm: { id: 'confirmations.unfollow.confirm', defaultMessage: 'Unfollow' }, - blockDomainConfirm: { id: 'confirmations.domain_block.confirm', defaultMessage: 'Block entire domain' }, -}); - const makeMapStateToProps = () => { const getAccount = makeGetAccount(); @@ -45,14 +40,7 @@ const mapDispatchToProps = (dispatch, { intl }) => ({ onFollow (account) { if (account.getIn(['relationship', 'following']) || account.getIn(['relationship', 'requested'])) { - dispatch(openModal({ - modalType: 'CONFIRM', - modalProps: { - message: @{account.get('acct')} }} />, - confirm: intl.formatMessage(messages.unfollowConfirm), - onConfirm: () => dispatch(unfollowAccount(account.get('id'))), - }, - })); + confirmUnfollow(dispatch, intl, account); } else { dispatch(followAccount(account.get('id'))); } diff --git a/app/javascript/mastodon/features/compose/components/action_bar.jsx b/app/javascript/mastodon/features/compose/components/action_bar.jsx index be52eac11e..42cd1886bf 100644 --- a/app/javascript/mastodon/features/compose/components/action_bar.jsx +++ b/app/javascript/mastodon/features/compose/components/action_bar.jsx @@ -5,9 +5,8 @@ import { defineMessages, useIntl } from 'react-intl'; import { useDispatch } from 'react-redux'; import MoreHorizIcon from '@/material-icons/400-24px/more_horiz.svg?react'; -import { openModal } from 'mastodon/actions/modal'; import DropdownMenuContainer from 'mastodon/containers/dropdown_menu_container'; -import { logOut } from 'mastodon/utils/log_out'; +import { confirmLogOut } from 'mastodon/utils/confirmations'; const messages = defineMessages({ edit_profile: { id: 'account.edit_profile', defaultMessage: 'Edit profile' }, @@ -23,8 +22,6 @@ const messages = defineMessages({ filters: { id: 'navigation_bar.filters', defaultMessage: 'Muted words' }, logout: { id: 'navigation_bar.logout', defaultMessage: 'Logout' }, bookmarks: { id: 'navigation_bar.bookmarks', defaultMessage: 'Bookmarks' }, - logoutMessage: { id: 'confirmations.logout.message', defaultMessage: 'Are you sure you want to log out?' }, - logoutConfirm: { id: 'confirmations.logout.confirm', defaultMessage: 'Log out' }, }); export const ActionBar = () => { @@ -32,15 +29,7 @@ export const ActionBar = () => { const intl = useIntl(); const handleLogoutClick = useCallback(() => { - dispatch(openModal({ - modalType: 'CONFIRM', - modalProps: { - message: intl.formatMessage(messages.logoutMessage), - confirm: intl.formatMessage(messages.logoutConfirm), - closeWhenConfirm: false, - onConfirm: () => logOut(), - }, - })); + confirmLogOut(dispatch, intl); }, [dispatch, intl]); let menu = []; diff --git a/app/javascript/mastodon/features/compose/index.jsx b/app/javascript/mastodon/features/compose/index.jsx index 83c741fd19..6ef5414fac 100644 --- a/app/javascript/mastodon/features/compose/index.jsx +++ b/app/javascript/mastodon/features/compose/index.jsx @@ -18,10 +18,9 @@ import MenuIcon from '@/material-icons/400-24px/menu.svg?react'; import NotificationsIcon from '@/material-icons/400-24px/notifications-fill.svg?react'; import PublicIcon from '@/material-icons/400-24px/public.svg?react'; import SettingsIcon from '@/material-icons/400-24px/settings-fill.svg?react'; -import { openModal } from 'mastodon/actions/modal'; import Column from 'mastodon/components/column'; import { Icon } from 'mastodon/components/icon'; -import { logOut } from 'mastodon/utils/log_out'; +import { confirmLogOut } from 'mastodon/utils/confirmations'; import elephantUIPlane from '../../../images/elephant_ui_plane.svg'; import { changeComposing, mountCompose, unmountCompose } from '../../actions/compose'; @@ -42,8 +41,6 @@ const messages = defineMessages({ preferences: { id: 'navigation_bar.preferences', defaultMessage: 'Preferences' }, logout: { id: 'navigation_bar.logout', defaultMessage: 'Logout' }, compose: { id: 'navigation_bar.compose', defaultMessage: 'Compose new post' }, - logoutMessage: { id: 'confirmations.logout.message', defaultMessage: 'Are you sure you want to log out?' }, - logoutConfirm: { id: 'confirmations.logout.confirm', defaultMessage: 'Log out' }, }); const mapStateToProps = (state, ownProps) => ({ @@ -77,15 +74,7 @@ class Compose extends PureComponent { e.preventDefault(); e.stopPropagation(); - dispatch(openModal({ - modalType: 'CONFIRM', - modalProps: { - message: intl.formatMessage(messages.logoutMessage), - confirm: intl.formatMessage(messages.logoutConfirm), - closeWhenConfirm: false, - onConfirm: () => logOut(), - }, - })); + confirmLogOut(dispatch, intl); return false; }; diff --git a/app/javascript/mastodon/features/direct_timeline/components/conversation.jsx b/app/javascript/mastodon/features/direct_timeline/components/conversation.jsx index a2b72f7162..0f85d1fe77 100644 --- a/app/javascript/mastodon/features/direct_timeline/components/conversation.jsx +++ b/app/javascript/mastodon/features/direct_timeline/components/conversation.jsx @@ -17,7 +17,6 @@ import MoreHorizIcon from '@/material-icons/400-24px/more_horiz.svg?react'; import ReplyIcon from '@/material-icons/400-24px/reply.svg?react'; import { replyCompose } from 'mastodon/actions/compose'; import { markConversationRead, deleteConversation } from 'mastodon/actions/conversations'; -import { openModal } from 'mastodon/actions/modal'; import { muteStatus, unmuteStatus, revealStatus, hideStatus } from 'mastodon/actions/statuses'; import AttachmentList from 'mastodon/components/attachment_list'; import AvatarComposite from 'mastodon/components/avatar_composite'; @@ -27,6 +26,7 @@ import StatusContent from 'mastodon/components/status_content'; import DropdownMenuContainer from 'mastodon/containers/dropdown_menu_container'; import { autoPlayGif } from 'mastodon/initial_state'; import { makeGetStatus } from 'mastodon/selectors'; +import { confirmReply } from 'mastodon/utils/confirmations'; const messages = defineMessages({ more: { id: 'status.more', defaultMessage: 'More' }, @@ -36,8 +36,6 @@ const messages = defineMessages({ delete: { id: 'conversation.delete', defaultMessage: 'Delete conversation' }, muteConversation: { id: 'status.mute_conversation', defaultMessage: 'Mute conversation' }, unmuteConversation: { id: 'status.unmute_conversation', defaultMessage: 'Unmute conversation' }, - replyConfirm: { id: 'confirmations.reply.confirm', defaultMessage: 'Reply' }, - replyMessage: { id: 'confirmations.reply.message', defaultMessage: 'Replying now will overwrite the message you are currently composing. Are you sure you want to proceed?' }, }); const getAccounts = createSelector( @@ -103,14 +101,7 @@ export const Conversation = ({ conversation, scrollKey, onMoveUp, onMoveDown }) let state = getState(); if (state.getIn(['compose', 'text']).trim().length !== 0) { - dispatch(openModal({ - modalType: 'CONFIRM', - modalProps: { - message: intl.formatMessage(messages.replyMessage), - confirm: intl.formatMessage(messages.replyConfirm), - onConfirm: () => dispatch(replyCompose(lastStatus, history)), - }, - })); + confirmReply(dispatch, intl, history, lastStatus); } else { dispatch(replyCompose(lastStatus, history)); } diff --git a/app/javascript/mastodon/features/directory/components/account_card.tsx b/app/javascript/mastodon/features/directory/components/account_card.tsx index 7201f6135b..d1f84ced24 100644 --- a/app/javascript/mastodon/features/directory/components/account_card.tsx +++ b/app/javascript/mastodon/features/directory/components/account_card.tsx @@ -8,11 +8,9 @@ import { Link } from 'react-router-dom'; import { followAccount, - unfollowAccount, unblockAccount, unmuteAccount, } from 'mastodon/actions/accounts'; -import { openModal } from 'mastodon/actions/modal'; import { Avatar } from 'mastodon/components/avatar'; import { Button } from 'mastodon/components/button'; import { DisplayName } from 'mastodon/components/display_name'; @@ -21,6 +19,7 @@ import { autoPlayGif, me } from 'mastodon/initial_state'; import type { Account } from 'mastodon/models/account'; import { makeGetAccount } from 'mastodon/selectors'; import { useAppDispatch, useAppSelector } from 'mastodon/store'; +import { confirmUnfollow } from 'mastodon/utils/confirmations'; const messages = defineMessages({ unfollow: { id: 'account.unfollow', defaultMessage: 'Unfollow' }, @@ -29,20 +28,12 @@ const messages = defineMessages({ id: 'account.cancel_follow_request', defaultMessage: 'Withdraw follow request', }, - cancelFollowRequestConfirm: { - id: 'confirmations.cancel_follow_request.confirm', - defaultMessage: 'Withdraw request', - }, requested: { id: 'account.requested', defaultMessage: 'Awaiting approval. Click to cancel follow request', }, unblock: { id: 'account.unblock_short', defaultMessage: 'Unblock' }, unmute: { id: 'account.unmute_short', defaultMessage: 'Unmute' }, - unfollowConfirm: { - id: 'confirmations.unfollow.confirm', - defaultMessage: 'Unfollow', - }, edit_profile: { id: 'account.edit_profile', defaultMessage: 'Edit profile' }, }); @@ -89,44 +80,11 @@ export const AccountCard: React.FC<{ accountId: string }> = ({ accountId }) => { const handleFollow = useCallback(() => { if (!account) return; - if (account.getIn(['relationship', 'following'])) { - dispatch( - openModal({ - modalType: 'CONFIRM', - modalProps: { - message: ( - @{account.get('acct')} }} - /> - ), - confirm: intl.formatMessage(messages.unfollowConfirm), - onConfirm: () => { - dispatch(unfollowAccount(account.get('id'))); - }, - }, - }), - ); - } else if (account.getIn(['relationship', 'requested'])) { - dispatch( - openModal({ - modalType: 'CONFIRM', - modalProps: { - message: ( - @{account.get('acct')} }} - /> - ), - confirm: intl.formatMessage(messages.cancelFollowRequestConfirm), - onConfirm: () => { - dispatch(unfollowAccount(account.get('id'))); - }, - }, - }), - ); + if ( + account.getIn(['relationship', 'following']) || + account.getIn(['relationship', 'requested']) + ) { + confirmUnfollow(dispatch, intl, account as Account); } else { dispatch(followAccount(account.get('id'))); } diff --git a/app/javascript/mastodon/features/domain_blocks/index.jsx b/app/javascript/mastodon/features/domain_blocks/index.jsx index 964eada9c1..3656596806 100644 --- a/app/javascript/mastodon/features/domain_blocks/index.jsx +++ b/app/javascript/mastodon/features/domain_blocks/index.jsx @@ -11,16 +11,15 @@ import { connect } from 'react-redux'; import { debounce } from 'lodash'; import BlockIcon from '@/material-icons/400-24px/block-fill.svg?react'; +import { Domain } from 'mastodon/components/domain'; import { fetchDomainBlocks, expandDomainBlocks } from '../../actions/domain_blocks'; import { LoadingIndicator } from '../../components/loading_indicator'; import ScrollableList from '../../components/scrollable_list'; -import DomainContainer from '../../containers/domain_container'; import Column from '../ui/components/column'; const messages = defineMessages({ heading: { id: 'column.domain_blocks', defaultMessage: 'Blocked domains' }, - unblockDomain: { id: 'account.unblock_domain', defaultMessage: 'Unblock domain {domain}' }, }); const mapStateToProps = state => ({ @@ -70,7 +69,7 @@ class Blocks extends ImmutablePureComponent { bindToDocument={!multiColumn} > {domains.map(domain => - , + , )} diff --git a/app/javascript/mastodon/features/list_timeline/index.jsx b/app/javascript/mastodon/features/list_timeline/index.jsx index f640e503c2..c625c22a7f 100644 --- a/app/javascript/mastodon/features/list_timeline/index.jsx +++ b/app/javascript/mastodon/features/list_timeline/index.jsx @@ -15,7 +15,7 @@ import DeleteIcon from '@/material-icons/400-24px/delete.svg?react'; import EditIcon from '@/material-icons/400-24px/edit.svg?react'; import ListAltIcon from '@/material-icons/400-24px/list_alt.svg?react'; import { addColumn, removeColumn, moveColumn } from 'mastodon/actions/columns'; -import { fetchList, deleteList, updateList } from 'mastodon/actions/lists'; +import { fetchList, updateList } from 'mastodon/actions/lists'; import { openModal } from 'mastodon/actions/modal'; import { connectListStream } from 'mastodon/actions/streaming'; import { expandListTimeline } from 'mastodon/actions/timelines'; @@ -26,6 +26,7 @@ import { LoadingIndicator } from 'mastodon/components/loading_indicator'; import { RadioButton } from 'mastodon/components/radio_button'; import BundleColumnError from 'mastodon/features/ui/components/bundle_column_error'; import StatusListContainer from 'mastodon/features/ui/containers/status_list_container'; +import { confirmDeleteList } from 'mastodon/utils/confirmations'; import { WithRouterPropTypes } from 'mastodon/utils/react_router'; const messages = defineMessages({ @@ -128,22 +129,7 @@ class ListTimeline extends PureComponent { const { dispatch, columnId, intl } = this.props; const { id } = this.props.params; - dispatch(openModal({ - modalType: 'CONFIRM', - modalProps: { - message: intl.formatMessage(messages.deleteMessage), - confirm: intl.formatMessage(messages.deleteConfirm), - onConfirm: () => { - dispatch(deleteList(id)); - - if (columnId) { - dispatch(removeColumn(columnId)); - } else { - this.props.history.push('/lists'); - } - }, - }, - })); + confirmDeleteList(dispatch, intl, this.props.history, id, columnId); }; handleRepliesPolicyChange = ({ target }) => { diff --git a/app/javascript/mastodon/features/notifications/containers/column_settings_container.js b/app/javascript/mastodon/features/notifications/containers/column_settings_container.js index 94383d0bb5..0a4fc6a538 100644 --- a/app/javascript/mastodon/features/notifications/containers/column_settings_container.js +++ b/app/javascript/mastodon/features/notifications/containers/column_settings_container.js @@ -2,17 +2,16 @@ import { defineMessages, injectIntl } from 'react-intl'; import { connect } from 'react-redux'; +import { confirmClearNotifications } from 'mastodon/utils/confirmations'; + import { showAlert } from '../../../actions/alerts'; -import { openModal } from '../../../actions/modal'; import { updateNotificationsPolicy } from '../../../actions/notification_policies'; -import { setFilter, clearNotifications, requestBrowserPermission } from '../../../actions/notifications'; +import { setFilter, requestBrowserPermission } from '../../../actions/notifications'; import { changeAlerts as changePushNotifications } from '../../../actions/push_notifications'; import { changeSetting } from '../../../actions/settings'; import ColumnSettings from '../components/column_settings'; const messages = defineMessages({ - clearMessage: { id: 'notifications.clear_confirmation', defaultMessage: 'Are you sure you want to permanently clear all your notifications?' }, - clearConfirm: { id: 'notifications.clear', defaultMessage: 'Clear notifications' }, permissionDenied: { id: 'notifications.permission_denied_alert', defaultMessage: 'Desktop notifications can\'t be enabled, as browser permission has been denied before' }, }); @@ -64,14 +63,7 @@ const mapDispatchToProps = (dispatch, { intl }) => ({ }, onClear () { - dispatch(openModal({ - modalType: 'CONFIRM', - modalProps: { - message: intl.formatMessage(messages.clearMessage), - confirm: intl.formatMessage(messages.clearConfirm), - onConfirm: () => dispatch(clearNotifications()), - }, - })); + confirmClearNotifications(dispatch, intl); }, onRequestNotificationPermission () { diff --git a/app/javascript/mastodon/features/picture_in_picture/components/footer.jsx b/app/javascript/mastodon/features/picture_in_picture/components/footer.jsx index ba0642da28..e7e87bb092 100644 --- a/app/javascript/mastodon/features/picture_in_picture/components/footer.jsx +++ b/app/javascript/mastodon/features/picture_in_picture/components/footer.jsx @@ -21,6 +21,7 @@ import { IconButton } from 'mastodon/components/icon_button'; import { identityContextPropShape, withIdentity } from 'mastodon/identity_context'; import { me, boostModal } from 'mastodon/initial_state'; import { makeGetStatus } from 'mastodon/selectors'; +import { confirmReply } from 'mastodon/utils/confirmations'; import { WithRouterPropTypes } from 'mastodon/utils/react_router'; const messages = defineMessages({ @@ -31,8 +32,6 @@ const messages = defineMessages({ cancel_reblog_private: { id: 'status.cancel_reblog_private', defaultMessage: 'Unboost' }, cannot_reblog: { id: 'status.cannot_reblog', defaultMessage: 'This post cannot be boosted' }, favourite: { id: 'status.favourite', defaultMessage: 'Favorite' }, - replyConfirm: { id: 'confirmations.reply.confirm', defaultMessage: 'Reply' }, - replyMessage: { id: 'confirmations.reply.message', defaultMessage: 'Replying now will overwrite the message you are currently composing. Are you sure you want to proceed?' }, open: { id: 'status.open', defaultMessage: 'Expand this status' }, }); @@ -71,19 +70,13 @@ class Footer extends ImmutablePureComponent { }; handleReplyClick = () => { - const { dispatch, askReplyConfirmation, status, intl } = this.props; + const { dispatch, askReplyConfirmation, status, intl, history, onClose } = this.props; const { signedIn } = this.props.identity; if (signedIn) { if (askReplyConfirmation) { - dispatch(openModal({ - modalType: 'CONFIRM', - modalProps: { - message: intl.formatMessage(messages.replyMessage), - confirm: intl.formatMessage(messages.replyConfirm), - onConfirm: this._performReply, - }, - })); + onClose(true); + confirmReply(dispatch, intl, history, status); } else { this._performReply(); } diff --git a/app/javascript/mastodon/features/status/containers/detailed_status_container.js b/app/javascript/mastodon/features/status/containers/detailed_status_container.js index c3d4fec4db..38ded82128 100644 --- a/app/javascript/mastodon/features/status/containers/detailed_status_container.js +++ b/app/javascript/mastodon/features/status/containers/detailed_status_container.js @@ -1,7 +1,9 @@ -import { defineMessages, injectIntl } from 'react-intl'; +import { injectIntl } from 'react-intl'; import { connect } from 'react-redux'; +import { confirmDeleteStatus, confirmReply } from 'mastodon/utils/confirmations'; + import { showAlertForError } from '../../../actions/alerts'; import { initBlockModal } from '../../../actions/blocks'; import { @@ -31,15 +33,6 @@ import { boostModal, deleteModal } from '../../../initial_state'; import { makeGetStatus, makeGetPictureInPicture } from '../../../selectors'; import DetailedStatus from '../components/detailed_status'; -const messages = defineMessages({ - deleteConfirm: { id: 'confirmations.delete.confirm', defaultMessage: 'Delete' }, - deleteMessage: { id: 'confirmations.delete.message', defaultMessage: 'Are you sure you want to delete this status?' }, - redraftConfirm: { id: 'confirmations.redraft.confirm', defaultMessage: 'Delete & redraft' }, - redraftMessage: { id: 'confirmations.redraft.message', defaultMessage: 'Are you sure you want to delete this status and re-draft it? Favorites and boosts will be lost, and replies to the original post will be orphaned.' }, - replyConfirm: { id: 'confirmations.reply.confirm', defaultMessage: 'Reply' }, - replyMessage: { id: 'confirmations.reply.message', defaultMessage: 'Replying now will overwrite the message you are currently composing. Are you sure you want to proceed?' }, -}); - const makeMapStateToProps = () => { const getStatus = makeGetStatus(); const getPictureInPicture = makeGetPictureInPicture(); @@ -59,14 +52,7 @@ const mapDispatchToProps = (dispatch, { intl }) => ({ dispatch((_, getState) => { let state = getState(); if (state.getIn(['compose', 'text']).trim().length !== 0) { - dispatch(openModal({ - modalType: 'CONFIRM', - modalProps: { - message: intl.formatMessage(messages.replyMessage), - confirm: intl.formatMessage(messages.replyConfirm), - onConfirm: () => dispatch(replyCompose(status, router)), - }, - })); + confirmReply(dispatch, intl, router, status); } else { dispatch(replyCompose(status, router)); } @@ -119,14 +105,7 @@ const mapDispatchToProps = (dispatch, { intl }) => ({ if (!deleteModal) { dispatch(deleteStatus(status.get('id'), history, withRedraft)); } else { - dispatch(openModal({ - modalType: 'CONFIRM', - modalProps: { - message: intl.formatMessage(withRedraft ? messages.redraftMessage : messages.deleteMessage), - confirm: intl.formatMessage(withRedraft ? messages.redraftConfirm : messages.deleteConfirm), - onConfirm: () => dispatch(deleteStatus(status.get('id'), history, withRedraft)), - }, - })); + confirmDeleteStatus(dispatch, intl, history, status.get('id'), withRedraft); } }, diff --git a/app/javascript/mastodon/features/status/index.jsx b/app/javascript/mastodon/features/status/index.jsx index 7f37cb50d2..9885a5cbbe 100644 --- a/app/javascript/mastodon/features/status/index.jsx +++ b/app/javascript/mastodon/features/status/index.jsx @@ -21,6 +21,7 @@ import { LoadingIndicator } from 'mastodon/components/loading_indicator'; import ScrollContainer from 'mastodon/containers/scroll_container'; import BundleColumnError from 'mastodon/features/ui/components/bundle_column_error'; import { identityContextPropShape, withIdentity } from 'mastodon/identity_context'; +import { confirmDeleteStatus, confirmReply, confirmEdit } from 'mastodon/utils/confirmations'; import { WithRouterPropTypes } from 'mastodon/utils/react_router'; import { @@ -74,17 +75,10 @@ import DetailedStatus from './components/detailed_status'; const messages = defineMessages({ - deleteConfirm: { id: 'confirmations.delete.confirm', defaultMessage: 'Delete' }, - deleteMessage: { id: 'confirmations.delete.message', defaultMessage: 'Are you sure you want to delete this status?' }, - redraftConfirm: { id: 'confirmations.redraft.confirm', defaultMessage: 'Delete & redraft' }, - redraftMessage: { id: 'confirmations.redraft.message', defaultMessage: 'Are you sure you want to delete this status and re-draft it? Favorites and boosts will be lost, and replies to the original post will be orphaned.' }, revealAll: { id: 'status.show_more_all', defaultMessage: 'Show more for all' }, hideAll: { id: 'status.show_less_all', defaultMessage: 'Show less for all' }, statusTitleWithAttachments: { id: 'status.title.with_attachments', defaultMessage: '{user} posted {attachmentCount, plural, one {an attachment} other {# attachments}}' }, detailedStatus: { id: 'status.detailed_status', defaultMessage: 'Detailed conversation view' }, - replyConfirm: { id: 'confirmations.reply.confirm', defaultMessage: 'Reply' }, - replyMessage: { id: 'confirmations.reply.message', defaultMessage: 'Replying now will overwrite the message you are currently composing. Are you sure you want to proceed?' }, - blockDomainConfirm: { id: 'confirmations.domain_block.confirm', defaultMessage: 'Block entire domain' }, }); const makeMapStateToProps = () => { @@ -275,14 +269,7 @@ class Status extends ImmutablePureComponent { if (signedIn) { if (askReplyConfirmation) { - dispatch(openModal({ - modalType: 'CONFIRM', - modalProps: { - message: intl.formatMessage(messages.replyMessage), - confirm: intl.formatMessage(messages.replyConfirm), - onConfirm: () => dispatch(replyCompose(status, this.props.history)), - }, - })); + confirmReply(dispatch, intl, this.props.history, status); } else { dispatch(replyCompose(status, this.props.history)); } @@ -342,19 +329,18 @@ class Status extends ImmutablePureComponent { if (!deleteModal) { dispatch(deleteStatus(status.get('id'), history, withRedraft)); } else { - dispatch(openModal({ - modalType: 'CONFIRM', - modalProps: { - message: intl.formatMessage(withRedraft ? messages.redraftMessage : messages.deleteMessage), - confirm: intl.formatMessage(withRedraft ? messages.redraftConfirm : messages.deleteConfirm), - onConfirm: () => dispatch(deleteStatus(status.get('id'), history, withRedraft)), - }, - })); + confirmDeleteStatus(dispatch, intl, history, status.get('id'), withRedraft); } }; handleEditClick = (status, history) => { - this.props.dispatch(editStatus(status.get('id'), history)); + const { dispatch, intl, askReplyConfirmation } = this.props; + + if (askReplyConfirmation) { + confirmEdit(dispatch, intl, history, status.get('id')); + } else { + dispatch(editStatus(status.get('id'), history)); + } }; handleDirectClick = (account, router) => { diff --git a/app/javascript/mastodon/features/ui/components/confirmation_modal.jsx b/app/javascript/mastodon/features/ui/components/confirmation_modal.jsx deleted file mode 100644 index 5080c0bf85..0000000000 --- a/app/javascript/mastodon/features/ui/components/confirmation_modal.jsx +++ /dev/null @@ -1,65 +0,0 @@ -import PropTypes from 'prop-types'; -import { PureComponent } from 'react'; - -import { injectIntl, FormattedMessage } from 'react-intl'; - -import { Button } from '../../../components/button'; - -class ConfirmationModal extends PureComponent { - - static propTypes = { - message: PropTypes.node.isRequired, - confirm: PropTypes.string.isRequired, - onClose: PropTypes.func.isRequired, - onConfirm: PropTypes.func.isRequired, - secondary: PropTypes.string, - onSecondary: PropTypes.func, - closeWhenConfirm: PropTypes.bool, - intl: PropTypes.object.isRequired, - }; - - static defaultProps = { - closeWhenConfirm: true, - }; - - handleClick = () => { - if (this.props.closeWhenConfirm) { - this.props.onClose(); - } - this.props.onConfirm(); - }; - - handleSecondary = () => { - this.props.onClose(); - this.props.onSecondary(); - }; - - handleCancel = () => { - this.props.onClose(); - }; - - render () { - const { message, confirm, secondary } = this.props; - - return ( -
-
- {message} -
- -
- - {secondary !== undefined && ( -
-
- ); - } - -} - -export default injectIntl(ConfirmationModal); diff --git a/app/javascript/mastodon/features/ui/components/confirmation_modal.tsx b/app/javascript/mastodon/features/ui/components/confirmation_modal.tsx new file mode 100644 index 0000000000..39f58527bb --- /dev/null +++ b/app/javascript/mastodon/features/ui/components/confirmation_modal.tsx @@ -0,0 +1,74 @@ +import { useCallback } from 'react'; + +import { FormattedMessage } from 'react-intl'; + +import { Button } from 'mastodon/components/button'; + +export const ConfirmationModal: React.FC<{ + title: React.ReactNode; + message: React.ReactNode; + confirm: React.ReactNode; + secondary: React.ReactNode; + onSecondary: () => void; + onClose: () => void; + onConfirm: () => void; + closeWhenConfirm?: boolean; +}> = ({ + title, + message, + confirm, + onClose, + onConfirm, + secondary, + onSecondary, + closeWhenConfirm = true, +}) => { + const handleClick = useCallback(() => { + if (closeWhenConfirm) { + onClose(); + } + + onConfirm(); + }, [onClose, onConfirm, closeWhenConfirm]); + + const handleSecondary = useCallback(() => { + onClose(); + onSecondary(); + }, [onClose, onSecondary]); + + const handleCancel = useCallback(() => { + onClose(); + }, [onClose]); + + return ( +
+
+
+

{title}

+

{message}

+
+
+ +
+
+ {secondary && ( + <> + + +
+ + )} + + + + +
+
+
+ ); +}; diff --git a/app/javascript/mastodon/features/ui/components/disabled_account_banner.jsx b/app/javascript/mastodon/features/ui/components/disabled_account_banner.jsx index 6a71bb2465..087a71f865 100644 --- a/app/javascript/mastodon/features/ui/components/disabled_account_banner.jsx +++ b/app/javascript/mastodon/features/ui/components/disabled_account_banner.jsx @@ -1,20 +1,14 @@ import PropTypes from 'prop-types'; import { PureComponent } from 'react'; -import { FormattedMessage, defineMessages, injectIntl } from 'react-intl'; +import { FormattedMessage, injectIntl } from 'react-intl'; import { Link } from 'react-router-dom'; import { connect } from 'react-redux'; -import { openModal } from 'mastodon/actions/modal'; import { disabledAccountId, movedToAccountId, domain } from 'mastodon/initial_state'; -import { logOut } from 'mastodon/utils/log_out'; - -const messages = defineMessages({ - logoutMessage: { id: 'confirmations.logout.message', defaultMessage: 'Are you sure you want to log out?' }, - logoutConfirm: { id: 'confirmations.logout.confirm', defaultMessage: 'Log out' }, -}); +import { confirmLogOut } from 'mastodon/utils/confirmations'; const mapStateToProps = (state) => ({ disabledAcct: state.getIn(['accounts', disabledAccountId, 'acct']), @@ -23,15 +17,7 @@ const mapStateToProps = (state) => ({ const mapDispatchToProps = (dispatch, { intl }) => ({ onLogout () { - dispatch(openModal({ - modalType: 'CONFIRM', - modalProps: { - message: intl.formatMessage(messages.logoutMessage), - confirm: intl.formatMessage(messages.logoutConfirm), - closeWhenConfirm: false, - onConfirm: () => logOut(), - }, - })); + confirmLogOut(dispatch, intl); }, }); diff --git a/app/javascript/mastodon/features/ui/components/link_footer.jsx b/app/javascript/mastodon/features/ui/components/link_footer.jsx index 08af6fa444..a2032e1aad 100644 --- a/app/javascript/mastodon/features/ui/components/link_footer.jsx +++ b/app/javascript/mastodon/features/ui/components/link_footer.jsx @@ -1,34 +1,20 @@ import PropTypes from 'prop-types'; import { PureComponent } from 'react'; -import { FormattedMessage, defineMessages, injectIntl } from 'react-intl'; +import { FormattedMessage, injectIntl } from 'react-intl'; import { Link } from 'react-router-dom'; import { connect } from 'react-redux'; -import { openModal } from 'mastodon/actions/modal'; import { identityContextPropShape, withIdentity } from 'mastodon/identity_context'; import { domain, version, source_url, statusPageUrl, profile_directory as profileDirectory } from 'mastodon/initial_state'; import { PERMISSION_INVITE_USERS } from 'mastodon/permissions'; -import { logOut } from 'mastodon/utils/log_out'; - -const messages = defineMessages({ - logoutMessage: { id: 'confirmations.logout.message', defaultMessage: 'Are you sure you want to log out?' }, - logoutConfirm: { id: 'confirmations.logout.confirm', defaultMessage: 'Log out' }, -}); +import { confirmLogOut } from 'mastodon/utils/confirmations'; const mapDispatchToProps = (dispatch, { intl }) => ({ onLogout () { - dispatch(openModal({ - modalType: 'CONFIRM', - modalProps: { - message: intl.formatMessage(messages.logoutMessage), - confirm: intl.formatMessage(messages.logoutConfirm), - closeWhenConfirm: false, - onConfirm: () => logOut(), - }, - })); + confirmLogOut(dispatch, intl); }, }); diff --git a/app/javascript/mastodon/features/ui/components/modal_root.jsx b/app/javascript/mastodon/features/ui/components/modal_root.jsx index 404b53c742..9da0600eaa 100644 --- a/app/javascript/mastodon/features/ui/components/modal_root.jsx +++ b/app/javascript/mastodon/features/ui/components/modal_root.jsx @@ -26,7 +26,7 @@ import ActionsModal from './actions_modal'; import AudioModal from './audio_modal'; import { BoostModal } from './boost_modal'; import BundleModalError from './bundle_modal_error'; -import ConfirmationModal from './confirmation_modal'; +import { ConfirmationModal } from './confirmation_modal'; import FocalPointModal from './focal_point_modal'; import ImageModal from './image_modal'; import MediaModal from './media_modal'; diff --git a/app/javascript/mastodon/locales/en.json b/app/javascript/mastodon/locales/en.json index 13296e1d20..4d54fe290a 100644 --- a/app/javascript/mastodon/locales/en.json +++ b/app/javascript/mastodon/locales/en.json @@ -169,27 +169,30 @@ "compose_form.spoiler_placeholder": "Content warning (optional)", "confirmation_modal.cancel": "Cancel", "confirmations.block.confirm": "Block", - "confirmations.cancel_follow_request.confirm": "Withdraw request", - "confirmations.cancel_follow_request.message": "Are you sure you want to withdraw your request to follow {name}?", "confirmations.delete.confirm": "Delete", "confirmations.delete.message": "Are you sure you want to delete this post?", + "confirmations.delete.title": "Delete post?", "confirmations.delete_list.confirm": "Delete", "confirmations.delete_list.message": "Are you sure you want to permanently delete this list?", + "confirmations.delete_list.title": "Delete list?", "confirmations.discard_edit_media.confirm": "Discard", "confirmations.discard_edit_media.message": "You have unsaved changes to the media description or preview, discard them anyway?", - "confirmations.domain_block.confirm": "Block server", - "confirmations.domain_block.message": "Are you really, really sure you want to block the entire {domain}? In most cases a few targeted blocks or mutes are sufficient and preferable. You will not see content from that domain in any public timelines or your notifications. Your followers from that domain will be removed.", "confirmations.edit.confirm": "Edit", "confirmations.edit.message": "Editing now will overwrite the message you are currently composing. Are you sure you want to proceed?", + "confirmations.edit.title": "Overwrite post?", "confirmations.logout.confirm": "Log out", "confirmations.logout.message": "Are you sure you want to log out?", + "confirmations.logout.title": "Log out?", "confirmations.mute.confirm": "Mute", "confirmations.redraft.confirm": "Delete & redraft", "confirmations.redraft.message": "Are you sure you want to delete this post and re-draft it? Favorites and boosts will be lost, and replies to the original post will be orphaned.", + "confirmations.redraft.title": "Delete & redraft post?", "confirmations.reply.confirm": "Reply", "confirmations.reply.message": "Replying now will overwrite the message you are currently composing. Are you sure you want to proceed?", + "confirmations.reply.title": "Overwrite post?", "confirmations.unfollow.confirm": "Unfollow", "confirmations.unfollow.message": "Are you sure you want to unfollow {name}?", + "confirmations.unfollow.title": "Unfollow user?", "conversation.delete": "Delete conversation", "conversation.mark_as_read": "Mark as read", "conversation.open": "View conversation", @@ -500,6 +503,7 @@ "notification_requests.title": "Filtered notifications", "notifications.clear": "Clear notifications", "notifications.clear_confirmation": "Are you sure you want to permanently clear all your notifications?", + "notifications.clear_title": "Clear notifications?", "notifications.column_settings.admin.report": "New reports:", "notifications.column_settings.admin.sign_up": "New sign-ups:", "notifications.column_settings.alert": "Desktop notifications", diff --git a/app/javascript/mastodon/utils/confirmations.tsx b/app/javascript/mastodon/utils/confirmations.tsx new file mode 100644 index 0000000000..31bc598037 --- /dev/null +++ b/app/javascript/mastodon/utils/confirmations.tsx @@ -0,0 +1,270 @@ +import { defineMessages, FormattedMessage } from 'react-intl'; +import type { IntlShape } from 'react-intl'; + +import type { History } from 'history'; + +import { unfollowAccount } from 'mastodon/actions/accounts'; +import { removeColumn } from 'mastodon/actions/columns'; +import { replyCompose } from 'mastodon/actions/compose'; +import { deleteList } from 'mastodon/actions/lists'; +import { openModal } from 'mastodon/actions/modal'; +import { clearNotifications } from 'mastodon/actions/notifications'; +import { deleteStatus, editStatus } from 'mastodon/actions/statuses'; +import type { Account } from 'mastodon/models/account'; +import type { Status } from 'mastodon/models/status'; +import type { AppDispatch } from 'mastodon/store'; +import { logOut } from 'mastodon/utils/log_out'; + +const messages = defineMessages({ + deleteAndRedraftTitle: { + id: 'confirmations.redraft.title', + defaultMessage: 'Delete & redraft post?', + }, + deleteAndRedraftMessage: { + id: 'confirmations.redraft.message', + defaultMessage: + 'Are you sure you want to delete this status and re-draft it? Favorites and boosts will be lost, and replies to the original post will be orphaned.', + }, + deleteAndRedraftConfirm: { + id: 'confirmations.redraft.confirm', + defaultMessage: 'Delete & redraft', + }, + deleteTitle: { + id: 'confirmations.delete.title', + defaultMessage: 'Delete post?', + }, + deleteMessage: { + id: 'confirmations.delete.message', + defaultMessage: 'Are you sure you want to delete this status?', + }, + deleteConfirm: { + id: 'confirmations.delete.confirm', + defaultMessage: 'Delete', + }, + deleteListTitle: { + id: 'confirmations.delete_list.title', + defaultMessage: 'Delete list?', + }, + deleteListMessage: { + id: 'confirmations.delete_list.message', + defaultMessage: 'Are you sure you want to permanently delete this list?', + }, + deleteListConfirm: { + id: 'confirmations.delete_list.confirm', + defaultMessage: 'Delete', + }, + replyTitle: { + id: 'confirmations.reply.title', + defaultMessage: 'Overwrite post?', + }, + replyConfirm: { id: 'confirmations.reply.confirm', defaultMessage: 'Reply' }, + replyMessage: { + id: 'confirmations.reply.message', + defaultMessage: + 'Replying now will overwrite the message you are currently composing. Are you sure you want to proceed?', + }, + editTitle: { + id: 'confirmations.edit.title', + defaultMessage: 'Overwrite post?', + }, + editConfirm: { id: 'confirmations.edit.confirm', defaultMessage: 'Edit' }, + editMessage: { + id: 'confirmations.edit.message', + defaultMessage: + 'Editing now will overwrite the message you are currently composing. Are you sure you want to proceed?', + }, + logoutTitle: { id: 'confirmations.logout.title', defaultMessage: 'Log out?' }, + logoutMessage: { + id: 'confirmations.logout.message', + defaultMessage: 'Are you sure you want to log out?', + }, + logoutConfirm: { + id: 'confirmations.logout.confirm', + defaultMessage: 'Log out', + }, + clearTitle: { + id: 'notifications.clear_title', + defaultMessage: 'Clear notifications?', + }, + clearMessage: { + id: 'notifications.clear_confirmation', + defaultMessage: + 'Are you sure you want to permanently clear all your notifications?', + }, + clearConfirm: { + id: 'notifications.clear', + defaultMessage: 'Clear notifications', + }, + unfollowTitle: { + id: 'confirmations.unfollow.title', + defaultMessage: 'Unfollow user?', + }, + unfollowConfirm: { + id: 'confirmations.unfollow.confirm', + defaultMessage: 'Unfollow', + }, +}); + +export const confirmDeleteStatus = ( + dispatch: AppDispatch, + intl: IntlShape, + history: History, + statusId: string, + withRedraft: boolean, +) => { + dispatch( + openModal({ + modalType: 'CONFIRM', + modalProps: { + title: intl.formatMessage( + withRedraft ? messages.deleteAndRedraftTitle : messages.deleteTitle, + ), + message: intl.formatMessage( + withRedraft + ? messages.deleteAndRedraftMessage + : messages.deleteMessage, + ), + confirm: intl.formatMessage( + withRedraft + ? messages.deleteAndRedraftConfirm + : messages.deleteConfirm, + ), + onConfirm: () => { + dispatch(deleteStatus(statusId, history, withRedraft)); + }, + }, + }), + ); +}; + +export const confirmDeleteList = ( + dispatch: AppDispatch, + intl: IntlShape, + history: History, + listId: string, + columnId: string, +) => { + dispatch( + openModal({ + modalType: 'CONFIRM', + modalProps: { + title: intl.formatMessage(messages.deleteListTitle), + message: intl.formatMessage(messages.deleteListMessage), + confirm: intl.formatMessage(messages.deleteListConfirm), + onConfirm: () => { + dispatch(deleteList(listId)); + + if (columnId) { + dispatch(removeColumn(columnId)); + } else { + history.push('/lists'); + } + }, + }, + }), + ); +}; + +export const confirmReply = ( + dispatch: AppDispatch, + intl: IntlShape, + history: History, + status: Status, +) => { + dispatch( + openModal({ + modalType: 'CONFIRM', + modalProps: { + title: intl.formatMessage(messages.replyTitle), + message: intl.formatMessage(messages.replyMessage), + confirm: intl.formatMessage(messages.replyConfirm), + onConfirm: () => { + dispatch(replyCompose(status, history)); + }, + }, + }), + ); +}; + +export const confirmEdit = ( + dispatch: AppDispatch, + intl: IntlShape, + history: History, + statusId: string, +) => { + dispatch( + openModal({ + modalType: 'CONFIRM', + modalProps: { + title: intl.formatMessage(messages.editTitle), + message: intl.formatMessage(messages.editMessage), + confirm: intl.formatMessage(messages.editConfirm), + onConfirm: () => { + dispatch(editStatus(statusId, history)); + }, + }, + }), + ); +}; + +export const confirmUnfollow = ( + dispatch: AppDispatch, + intl: IntlShape, + account: Account, +) => { + dispatch( + openModal({ + modalType: 'CONFIRM', + modalProps: { + title: intl.formatMessage(messages.unfollowTitle), + message: ( + @{account.acct} }} + /> + ), + confirm: intl.formatMessage(messages.unfollowConfirm), + onConfirm: () => { + dispatch(unfollowAccount(account.id)); + }, + }, + }), + ); +}; + +export const confirmClearNotifications = ( + dispatch: AppDispatch, + intl: IntlShape, +) => { + dispatch( + openModal({ + modalType: 'CONFIRM', + modalProps: { + title: intl.formatMessage(messages.clearTitle), + message: intl.formatMessage(messages.clearMessage), + confirm: intl.formatMessage(messages.clearConfirm), + onConfirm: () => { + dispatch(clearNotifications()); + }, + }, + }), + ); +}; + +export const confirmLogOut = (dispatch: AppDispatch, intl: IntlShape) => { + dispatch( + openModal({ + modalType: 'CONFIRM', + modalProps: { + title: intl.formatMessage(messages.logoutTitle), + message: intl.formatMessage(messages.logoutMessage), + confirm: intl.formatMessage(messages.logoutConfirm), + closeWhenConfirm: false, + onConfirm: () => { + logOut(); + }, + }, + }), + ); +}; diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index 12eac79b98..df60cb2ba3 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -6063,6 +6063,25 @@ a.status-card { } } + &__confirmation { + font-size: 14px; + line-height: 20px; + color: $darker-text-color; + + h1 { + font-size: 16px; + line-height: 24px; + color: $primary-text-color; + font-weight: 500; + margin-bottom: 8px; + } + + strong { + font-weight: 700; + color: $primary-text-color; + } + } + &__bullet-points { display: flex; flex-direction: column; @@ -6148,11 +6167,8 @@ a.status-card { } .boost-modal, -.confirmation-modal, .report-modal, .actions-modal, -.mute-modal, -.block-modal, .compare-history-modal { background: lighten($ui-secondary-color, 8%); color: $inverted-text-color; @@ -6174,10 +6190,7 @@ a.status-card { } } -.boost-modal__action-bar, -.confirmation-modal__action-bar, -.mute-modal__action-bar, -.block-modal__action-bar { +.boost-modal__action-bar { display: flex; justify-content: space-between; align-items: center; @@ -6200,16 +6213,6 @@ a.status-card { } } -.mute-modal, -.block-modal { - line-height: 24px; -} - -.mute-modal .react-toggle, -.block-modal .react-toggle { - vertical-align: middle; -} - .report-modal { width: 90vw; max-width: 700px; @@ -6604,34 +6607,6 @@ a.status-card { } } -.confirmation-modal__action-bar, -.mute-modal__action-bar, -.block-modal__action-bar { - .confirmation-modal__secondary-button { - flex-shrink: 1; - } -} - -.confirmation-modal__secondary-button, -.confirmation-modal__cancel-button, -.mute-modal__cancel-button, -.block-modal__cancel-button { - background-color: transparent; - color: $lighter-text-color; - font-size: 14px; - font-weight: 500; - - &:hover, - &:focus, - &:active { - color: darken($lighter-text-color, 4%); - background-color: transparent; - } -} - -.confirmation-modal__container, -.mute-modal__container, -.block-modal__container, .report-modal__target { padding: 30px; font-size: 16px; @@ -6665,31 +6640,10 @@ a.status-card { } } -.confirmation-modal__container, .report-modal__target { text-align: center; } -.block-modal, -.mute-modal { - &__explanation { - margin-top: 20px; - } - - .setting-toggle { - margin-top: 20px; - margin-bottom: 24px; - display: flex; - align-items: center; - - &__label { - color: $inverted-text-color; - margin: 0; - margin-inline-start: 8px; - } - } -} - .report-modal__target { padding: 15px;