moon
/
soapbox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Redesign EditFederationModal

This commit is contained in:
Alex Gleason 2022-11-26 13:28:51 -06:00
parent bbb41533b7
commit 3b1eaaddfc
No known key found for this signature in database
GPG Key ID: 7211D1F99744FBB7
1 changed files with 50 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
app/soapbox/features/ui/components/modals/edit-federation-modal.tsx
View File

@ -1,17 +1,15 @@
import { Map as ImmutableMap } from 'immutable'; import { Map as ImmutableMap } from 'immutable';
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect, useCallback } from 'react';
import { defineMessages, FormattedMessage, useIntl } from 'react-intl'; import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
import Toggle from 'react-toggle'; import Toggle from 'react-toggle';
import { updateMrf } from 'soapbox/actions/mrf'; import { updateMrf } from 'soapbox/actions/mrf';
import snackbar from 'soapbox/actions/snackbar'; import snackbar from 'soapbox/actions/snackbar';
import { HStack, Modal, Stack, Text } from 'soapbox/components/ui'; import List, { ListItem } from 'soapbox/components/list';
import { SimpleForm } from 'soapbox/features/forms'; import { Modal } from 'soapbox/components/ui';
import { useAppSelector, useAppDispatch } from 'soapbox/hooks'; import { useAppSelector, useAppDispatch } from 'soapbox/hooks';
import { makeGetRemoteInstance } from 'soapbox/selectors'; import { makeGetRemoteInstance } from 'soapbox/selectors';
const getRemoteInstance = makeGetRemoteInstance();
const messages = defineMessages({ const messages = defineMessages({
mediaRemoval: { id: 'edit_federation.media_removal', defaultMessage: 'Strip media' }, mediaRemoval: { id: 'edit_federation.media_removal', defaultMessage: 'Strip media' },
forceNsfw: { id: 'edit_federation.force_nsfw', defaultMessage: 'Force attachments to be marked sensitive' }, forceNsfw: { id: 'edit_federation.force_nsfw', defaultMessage: 'Force attachments to be marked sensitive' },
@ -31,6 +29,7 @@ const EditFederationModal: React.FC<IEditFederationModal> = ({ host, onClose })
const intl = useIntl(); const intl = useIntl();
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
const getRemoteInstance = useCallback(makeGetRemoteInstance(), []);
const remoteInstance = useAppSelector(state => getRemoteInstance(state, host)); const remoteInstance = useAppSelector(state => getRemoteInstance(state, host));
const [data, setData] = useState(ImmutableMap<string, any>()); const [data, setData] = useState(ImmutableMap<string, any>());
@ -82,21 +81,17 @@ const EditFederationModal: React.FC<IEditFederationModal> = ({ host, onClose })
confirmationAction={handleSubmit} confirmationAction={handleSubmit}
confirmationText={intl.formatMessage(messages.save)} confirmationText={intl.formatMessage(messages.save)}
> >
<SimpleForm onSubmit={handleSubmit}> <List>
<Stack space={2}> <ListItem label={<FormattedMessage id='edit_federation.reject' defaultMessage='Reject all activities' />}>
<HStack space={2} alignItems='center'>
<Toggle <Toggle
checked={reject} checked={reject}
onChange={handleDataChange('reject')} onChange={handleDataChange('reject')}
icons={false} icons={false}
id='reject' id='reject'
/> />
</ListItem>
<Text theme='muted' tag='label' size='sm' htmlFor='reject'> <ListItem label={<FormattedMessage id='edit_federation.media_removal' defaultMessage='Strip media' />}>
<FormattedMessage id='edit_federation.reject' defaultMessage='Reject all activities' />
</Text>
</HStack>
<HStack space={2} alignItems='center'>
<Toggle <Toggle
checked={fullMediaRemoval} checked={fullMediaRemoval}
onChange={handleMediaRemoval} onChange={handleMediaRemoval}
@ -104,12 +99,9 @@ const EditFederationModal: React.FC<IEditFederationModal> = ({ host, onClose })
id='media_removal' id='media_removal'
disabled={reject} disabled={reject}
/> />
</ListItem>
<Text theme='muted' tag='label' size='sm' htmlFor='media_removal'> <ListItem label={<FormattedMessage id='edit_federation.force_nsfw' defaultMessage='Force attachments to be marked sensitive' />}>
<FormattedMessage id='edit_federation.media_removal' defaultMessage='Strip media' />
</Text>
</HStack>
<HStack space={2} alignItems='center'>
<Toggle <Toggle
checked={media_nsfw} checked={media_nsfw}
onChange={handleDataChange('media_nsfw')} onChange={handleDataChange('media_nsfw')}
@ -117,12 +109,9 @@ const EditFederationModal: React.FC<IEditFederationModal> = ({ host, onClose })
id='media_nsfw' id='media_nsfw'
disabled={reject || media_removal} disabled={reject || media_removal}
/> />
</ListItem>
<Text theme='muted' tag='label' size='sm' htmlFor='media_nsfw'> <ListItem label={<FormattedMessage id='edit_federation.followers_only' defaultMessage='Hide posts except to followers' />}>
<FormattedMessage id='edit_federation.force_nsfw' defaultMessage='Force attachments to be marked sensitive' />
</Text>
</HStack>
<HStack space={2} alignItems='center'>
<Toggle <Toggle
checked={followers_only} checked={followers_only}
onChange={handleDataChange('followers_only')} onChange={handleDataChange('followers_only')}
@ -130,12 +119,9 @@ const EditFederationModal: React.FC<IEditFederationModal> = ({ host, onClose })
id='followers_only' id='followers_only'
disabled={reject} disabled={reject}
/> />
</ListItem>
<Text theme='muted' tag='label' size='sm' htmlFor='followers_only'> <ListItem label={<FormattedMessage id='edit_federation.unlisted' defaultMessage='Force posts unlisted' />}>
<FormattedMessage id='edit_federation.followers_only' defaultMessage='Hide posts except to followers' />
</Text>
</HStack>
<HStack space={2} alignItems='center'>
<Toggle <Toggle
checked={federated_timeline_removal} checked={federated_timeline_removal}
onChange={handleDataChange('federated_timeline_removal')} onChange={handleDataChange('federated_timeline_removal')}
@ -143,13 +129,8 @@ const EditFederationModal: React.FC<IEditFederationModal> = ({ host, onClose })
id='federated_timeline_removal' id='federated_timeline_removal'
disabled={reject || followers_only} disabled={reject || followers_only}
/> />
</ListItem>
<Text theme='muted' tag='label' size='sm' htmlFor='federated_timeline_removal'> </List>
<FormattedMessage id='edit_federation.unlisted' defaultMessage='Force posts unlisted' />
</Text>
</HStack>
</Stack>
</SimpleForm>
</Modal> </Modal>
); );
}; };