From bbb41533b71a6052d90f56799a9ec981bed0badd Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Sat, 26 Nov 2022 13:18:11 -0600 Subject: [PATCH 1/2] RemoteTimeline: improve styles, icons --- .../components/instance-restrictions.tsx | 73 +++++++++++-------- .../features/remote-timeline/index.tsx | 38 ++++++---- 2 files changed, 65 insertions(+), 46 deletions(-) diff --git a/app/soapbox/features/federation-restrictions/components/instance-restrictions.tsx b/app/soapbox/features/federation-restrictions/components/instance-restrictions.tsx index ac86039fd..a912f3f4d 100644 --- a/app/soapbox/features/federation-restrictions/components/instance-restrictions.tsx +++ b/app/soapbox/features/federation-restrictions/components/instance-restrictions.tsx @@ -4,7 +4,7 @@ import React from 'react'; import { FormattedMessage } from 'react-intl'; import Icon from 'soapbox/components/icon'; -import { Text } from 'soapbox/components/ui'; +import { HStack, Stack, Text } from 'soapbox/components/ui'; import { useAppSelector } from 'soapbox/hooks'; import type { Map as ImmutableMap } from 'immutable'; @@ -16,6 +16,23 @@ const hasRestrictions = (remoteInstance: ImmutableMap): boolean => .reduce((acc: boolean, value: boolean) => acc || value, false); }; +interface IRestriction { + icon: string, + children: React.ReactNode, +} + +const Restriction: React.FC = ({ icon, children }) => { + return ( + + + + + {children} + + + ); +}; + interface IInstanceRestrictions { remoteInstance: ImmutableMap, } @@ -40,57 +57,52 @@ const InstanceRestrictions: React.FC = ({ remoteInstance if (followers_only) { items.push(( - - + - + )); } else if (federated_timeline_removal) { items.push(( - - + - + )); } if (fullMediaRemoval) { items.push(( - - + - + )); } else if (partialMediaRemoval) { items.push(( - - + - + )); } if (!fullMediaRemoval && media_nsfw) { items.push(( - - + - + )); } @@ -105,46 +117,45 @@ const InstanceRestrictions: React.FC = ({ remoteInstance if (remoteInstance.getIn(['federation', 'reject']) === true) { return ( - - + - + ); } else if (hasRestrictions(remoteInstance)) { - return [ - ( - + return ( + <> + - - ), - renderRestrictions(), - ]; + + + {renderRestrictions()} + + ); } else { return ( - - + - + ); } }; return ( -
+ {renderContent()} -
+ ); }; diff --git a/app/soapbox/features/remote-timeline/index.tsx b/app/soapbox/features/remote-timeline/index.tsx index 7ab185be9..a6963df48 100644 --- a/app/soapbox/features/remote-timeline/index.tsx +++ b/app/soapbox/features/remote-timeline/index.tsx @@ -5,8 +5,8 @@ import { useHistory } from 'react-router-dom'; import { connectRemoteStream } from 'soapbox/actions/streaming'; import { expandRemoteTimeline } from 'soapbox/actions/timelines'; import IconButton from 'soapbox/components/icon-button'; -import { HStack, Text } from 'soapbox/components/ui'; -import Column from 'soapbox/features/ui/components/column'; +import SubNavigation from 'soapbox/components/sub-navigation'; +import { Column, HStack, Text } from 'soapbox/components/ui'; import { useAppDispatch, useSettings } from 'soapbox/hooks'; import Timeline from '../ui/components/timeline'; @@ -14,7 +14,7 @@ import Timeline from '../ui/components/timeline'; import PinnedHostsPicker from './components/pinned-hosts-picker'; const messages = defineMessages({ - title: { id: 'column.remote', defaultMessage: 'Federated timeline' }, + heading: { id: 'column.remote', defaultMessage: 'Federated timeline' }, }); interface IRemoteTimeline { @@ -65,18 +65,26 @@ const RemoteTimeline: React.FC = ({ params }) => { }, [onlyMedia]); return ( - - {instance && } - {!pinned && - - - - - } + +
+ + + {instance && } + + {!pinned && ( + + + + + + + )} +
+ Date: Sat, 26 Nov 2022 13:28:51 -0600 Subject: [PATCH 2/2] Redesign EditFederationModal --- .../modals/edit-federation-modal.tsx | 119 ++++++++---------- 1 file changed, 50 insertions(+), 69 deletions(-) diff --git a/app/soapbox/features/ui/components/modals/edit-federation-modal.tsx b/app/soapbox/features/ui/components/modals/edit-federation-modal.tsx index 9dbde1f79..2d3e15872 100644 --- a/app/soapbox/features/ui/components/modals/edit-federation-modal.tsx +++ b/app/soapbox/features/ui/components/modals/edit-federation-modal.tsx @@ -1,17 +1,15 @@ 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 Toggle from 'react-toggle'; import { updateMrf } from 'soapbox/actions/mrf'; import snackbar from 'soapbox/actions/snackbar'; -import { HStack, Modal, Stack, Text } from 'soapbox/components/ui'; -import { SimpleForm } from 'soapbox/features/forms'; +import List, { ListItem } from 'soapbox/components/list'; +import { Modal } from 'soapbox/components/ui'; import { useAppSelector, useAppDispatch } from 'soapbox/hooks'; import { makeGetRemoteInstance } from 'soapbox/selectors'; -const getRemoteInstance = makeGetRemoteInstance(); - const messages = defineMessages({ mediaRemoval: { id: 'edit_federation.media_removal', defaultMessage: 'Strip media' }, forceNsfw: { id: 'edit_federation.force_nsfw', defaultMessage: 'Force attachments to be marked sensitive' }, @@ -31,6 +29,7 @@ const EditFederationModal: React.FC = ({ host, onClose }) const intl = useIntl(); const dispatch = useAppDispatch(); + const getRemoteInstance = useCallback(makeGetRemoteInstance(), []); const remoteInstance = useAppSelector(state => getRemoteInstance(state, host)); const [data, setData] = useState(ImmutableMap()); @@ -82,74 +81,56 @@ const EditFederationModal: React.FC = ({ host, onClose }) confirmationAction={handleSubmit} confirmationText={intl.formatMessage(messages.save)} > - - - - + + }> + + - - - - - - + }> + + - - - - - - + }> + + - - - - - - + }> + + - - - - - - - - - - - - - + }> + + + ); };