bigbuffet/bigbuffet-rw
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge branch 'remote-timeline-styles' into 'develop'

Browse source 
Remote timeline styles

Closes #1182

See merge request soapbox-pub/soapbox!1952
This commit is contained in:
Alex Gleason 2022-11-26 20:45:31 +00:00
commit 2d97ae399a
3 changed files with 115 additions and 115 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

73
app/soapbox/features/federation-restrictions/components/instance-restrictions.tsx
View file

@ -4,7 +4,7 @@ import React from 'react';
import { FormattedMessage } from 'react-intl'; import { FormattedMessage } from 'react-intl';
import Icon from 'soapbox/components/icon'; 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 { useAppSelector } from 'soapbox/hooks';
import type { Map as ImmutableMap } from 'immutable'; import type { Map as ImmutableMap } from 'immutable';
@ -16,6 +16,23 @@ const hasRestrictions = (remoteInstance: ImmutableMap<string, any>): boolean =>
.reduce((acc: boolean, value: boolean) => acc || value, false); .reduce((acc: boolean, value: boolean) => acc || value, false);
}; };
interface IRestriction {
icon: string,
children: React.ReactNode,
}
const Restriction: React.FC<IRestriction> = ({ icon, children }) => {
return (
<HStack space={3}>
<Icon className='flex-none w-5 h-5' src={icon} />
<Text theme='muted'>
{children}
</Text>
</HStack>
);
};
interface IInstanceRestrictions { interface IInstanceRestrictions {
remoteInstance: ImmutableMap<string, any>, remoteInstance: ImmutableMap<string, any>,
} }
@ -40,57 +57,52 @@ const InstanceRestrictions: React.FC<IInstanceRestrictions> = ({ remoteInstance
if (followers_only) { if (followers_only) {
items.push(( items.push((
<Text key='followers_only' className='flex items-center gap-2' theme='muted'> <Restriction key='followersOnly' icon={require('@tabler/icons/lock.svg')}>
<Icon src={require('@tabler/icons/lock.svg')} />
<FormattedMessage <FormattedMessage
id='federation_restriction.followers_only' id='federation_restriction.followers_only'
defaultMessage='Hidden except to followers' defaultMessage='Hidden except to followers'
/> />
</Text> </Restriction>
)); ));
} else if (federated_timeline_removal) { } else if (federated_timeline_removal) {
items.push(( items.push((
<Text key='federated_timeline_removal' className='flex items-center gap-2' theme='muted'> <Restriction key='federatedTimelineRemoval' icon={require('@tabler/icons/lock-open.svg')}>
<Icon src={require('@tabler/icons/lock-open.svg')} />
<FormattedMessage <FormattedMessage
id='federation_restriction.federated_timeline_removal' id='federation_restriction.federated_timeline_removal'
defaultMessage='Fediverse timeline removal' defaultMessage='Fediverse timeline removal'
/> />
</Text> </Restriction>
)); ));
} }
if (fullMediaRemoval) { if (fullMediaRemoval) {
items.push(( items.push((
<Text key='full_media_removal' className='flex items-center gap-2' theme='muted'> <Restriction key='fullMediaRemoval' icon={require('@tabler/icons/photo-off.svg')}>
<Icon src={require('@tabler/icons/photo-off.svg')} />
<FormattedMessage <FormattedMessage
id='federation_restriction.full_media_removal' id='federation_restriction.full_media_removal'
defaultMessage='Full media removal' defaultMessage='Full media removal'
/> />
</Text> </Restriction>
)); ));
} else if (partialMediaRemoval) { } else if (partialMediaRemoval) {
items.push(( items.push((
<Text key='partial_media_removal' className='flex items-center gap-2' theme='muted'> <Restriction key='partialMediaRemoval' icon={require('@tabler/icons/photo-off.svg')}>
<Icon src={require('@tabler/icons/photo-off.svg')} />
<FormattedMessage <FormattedMessage
id='federation_restriction.partial_media_removal' id='federation_restriction.partial_media_removal'
defaultMessage='Partial media removal' defaultMessage='Partial media removal'
/> />
</Text> </Restriction>
)); ));
} }
if (!fullMediaRemoval && media_nsfw) { if (!fullMediaRemoval && media_nsfw) {
items.push(( items.push((
<Text key='media_nsfw' className='flex items-center gap-2' theme='muted'> <Restriction key='mediaNsfw' icon={require('@tabler/icons/eye-off.svg')}>
<Icon src={require('@tabler/icons/eye-off.svg')} />
<FormattedMessage <FormattedMessage
id='federation_restriction.media_nsfw' id='federation_restriction.media_nsfw'
defaultMessage='Attachments marked NSFW' defaultMessage='Attachments marked NSFW'
/> />
</Text> </Restriction>
)); ));
} }
@ -105,46 +117,45 @@ const InstanceRestrictions: React.FC<IInstanceRestrictions> = ({ remoteInstance
if (remoteInstance.getIn(['federation', 'reject']) === true) { if (remoteInstance.getIn(['federation', 'reject']) === true) {
return ( return (
<Text className='flex items-center gap-2' theme='muted'> <Restriction icon={require('@tabler/icons/shield-x.svg')}>
<Icon src={require('@tabler/icons/x.svg')} />
<FormattedMessage <FormattedMessage
id='remote_instance.federation_panel.restricted_message' id='remote_instance.federation_panel.restricted_message'
defaultMessage='{siteTitle} blocks all activities from {host}.' defaultMessage='{siteTitle} blocks all activities from {host}.'
values={{ host, siteTitle }} values={{ host, siteTitle }}
/> />
</Text> </Restriction>
); );
} else if (hasRestrictions(remoteInstance)) { } else if (hasRestrictions(remoteInstance)) {
return [ return (
( <>
<Text theme='muted'> <Restriction icon={require('@tabler/icons/shield-lock.svg')}>
<FormattedMessage <FormattedMessage
id='remote_instance.federation_panel.some_restrictions_message' id='remote_instance.federation_panel.some_restrictions_message'
defaultMessage='{siteTitle} has placed some restrictions on {host}.' defaultMessage='{siteTitle} has placed some restrictions on {host}.'
values={{ host, siteTitle }} values={{ host, siteTitle }}
/> />
</Text> </Restriction>
),
renderRestrictions(), {renderRestrictions()}
]; </>
);
} else { } else {
return ( return (
<Text className='flex items-center gap-2' theme='muted'> <Restriction icon={require('@tabler/icons/shield-check.svg')}>
<Icon src={require('@tabler/icons/check.svg')} />
<FormattedMessage <FormattedMessage
id='remote_instance.federation_panel.no_restrictions_message' id='remote_instance.federation_panel.no_restrictions_message'
defaultMessage='{siteTitle} has placed no restrictions on {host}.' defaultMessage='{siteTitle} has placed no restrictions on {host}.'
values={{ host, siteTitle }} values={{ host, siteTitle }}
/> />
</Text> </Restriction>
); );
} }
}; };
return ( return (
<div className='py-1 pl-4 mb-4 border-solid border-l-[3px] border-gray-300 dark:border-gray-500'> <Stack space={3}>
{renderContent()} {renderContent()}
</div> </Stack>
); );
}; };

20
app/soapbox/features/remote-timeline/index.tsx
View file

@ -5,8 +5,8 @@ import { useHistory } from 'react-router-dom';
import { connectRemoteStream } from 'soapbox/actions/streaming'; import { connectRemoteStream } from 'soapbox/actions/streaming';
import { expandRemoteTimeline } from 'soapbox/actions/timelines'; import { expandRemoteTimeline } from 'soapbox/actions/timelines';
import IconButton from 'soapbox/components/icon-button'; import IconButton from 'soapbox/components/icon-button';
import { HStack, Text } from 'soapbox/components/ui'; import SubNavigation from 'soapbox/components/sub-navigation';
import Column from 'soapbox/features/ui/components/column'; import { Column, HStack, Text } from 'soapbox/components/ui';
import { useAppDispatch, useSettings } from 'soapbox/hooks'; import { useAppDispatch, useSettings } from 'soapbox/hooks';
import Timeline from '../ui/components/timeline'; import Timeline from '../ui/components/timeline';
@ -14,7 +14,7 @@ import Timeline from '../ui/components/timeline';
import PinnedHostsPicker from './components/pinned-hosts-picker'; import PinnedHostsPicker from './components/pinned-hosts-picker';
const messages = defineMessages({ const messages = defineMessages({
title: { id: 'column.remote', defaultMessage: 'Federated timeline' }, heading: { id: 'column.remote', defaultMessage: 'Federated timeline' },
}); });
interface IRemoteTimeline { interface IRemoteTimeline {
@ -65,9 +65,14 @@ const RemoteTimeline: React.FC<IRemoteTimeline> = ({ params }) => {
}, [onlyMedia]); }, [onlyMedia]);
return ( return (
<Column label={intl.formatMessage(messages.title)} heading={instance} transparent withHeader={false}> <Column label={intl.formatMessage(messages.heading)} transparent withHeader={false}>
<div className='px-4 pt-4 sm:p-0'>
<SubNavigation message={instance} />
{instance && <PinnedHostsPicker host={instance} />} {instance && <PinnedHostsPicker host={instance} />}
{!pinned && <HStack className='mb-4 px-2' space={2}>
{!pinned && (
<HStack className='mb-4 px-2' space={2}>
<IconButton iconClassName='h-5 w-5' src={require('@tabler/icons/x.svg')} onClick={handleCloseClick} /> <IconButton iconClassName='h-5 w-5' src={require('@tabler/icons/x.svg')} onClick={handleCloseClick} />
<Text> <Text>
<FormattedMessage <FormattedMessage
@ -76,7 +81,10 @@ const RemoteTimeline: React.FC<IRemoteTimeline> = ({ params }) => {
values={{ instance }} values={{ instance }}
/> />
</Text> </Text>
</HStack>} </HStack>
)}
</div>
<Timeline <Timeline
scrollKey={`${timelineId}_${instance}_timeline`} scrollKey={`${timelineId}_${instance}_timeline`}
timelineId={`${timelineId}${onlyMedia ? ':media' : ''}:${instance}`} timelineId={`${timelineId}${onlyMedia ? ':media' : ''}:${instance}`}

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>
); );
}; };