kopia lustrzana https://gitlab.com/soapbox-pub/soapbox
RemoteTimeline: improve styles, icons
rodzic
7a3d027ccc
commit
bbb41533b7
|
@ -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<string, any>): boolean =>
|
|||
.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 {
|
||||
remoteInstance: ImmutableMap<string, any>,
|
||||
}
|
||||
|
@ -40,57 +57,52 @@ const InstanceRestrictions: React.FC<IInstanceRestrictions> = ({ remoteInstance
|
|||
|
||||
if (followers_only) {
|
||||
items.push((
|
||||
<Text key='followers_only' className='flex items-center gap-2' theme='muted'>
|
||||
<Icon src={require('@tabler/icons/lock.svg')} />
|
||||
<Restriction key='followersOnly' icon={require('@tabler/icons/lock.svg')}>
|
||||
<FormattedMessage
|
||||
id='federation_restriction.followers_only'
|
||||
defaultMessage='Hidden except to followers'
|
||||
/>
|
||||
</Text>
|
||||
</Restriction>
|
||||
));
|
||||
} else if (federated_timeline_removal) {
|
||||
items.push((
|
||||
<Text key='federated_timeline_removal' className='flex items-center gap-2' theme='muted'>
|
||||
<Icon src={require('@tabler/icons/lock-open.svg')} />
|
||||
<Restriction key='federatedTimelineRemoval' icon={require('@tabler/icons/lock-open.svg')}>
|
||||
<FormattedMessage
|
||||
id='federation_restriction.federated_timeline_removal'
|
||||
defaultMessage='Fediverse timeline removal'
|
||||
/>
|
||||
</Text>
|
||||
</Restriction>
|
||||
));
|
||||
}
|
||||
|
||||
if (fullMediaRemoval) {
|
||||
items.push((
|
||||
<Text key='full_media_removal' className='flex items-center gap-2' theme='muted'>
|
||||
<Icon src={require('@tabler/icons/photo-off.svg')} />
|
||||
<Restriction key='fullMediaRemoval' icon={require('@tabler/icons/photo-off.svg')}>
|
||||
<FormattedMessage
|
||||
id='federation_restriction.full_media_removal'
|
||||
defaultMessage='Full media removal'
|
||||
/>
|
||||
</Text>
|
||||
</Restriction>
|
||||
));
|
||||
} else if (partialMediaRemoval) {
|
||||
items.push((
|
||||
<Text key='partial_media_removal' className='flex items-center gap-2' theme='muted'>
|
||||
<Icon src={require('@tabler/icons/photo-off.svg')} />
|
||||
<Restriction key='partialMediaRemoval' icon={require('@tabler/icons/photo-off.svg')}>
|
||||
<FormattedMessage
|
||||
id='federation_restriction.partial_media_removal'
|
||||
defaultMessage='Partial media removal'
|
||||
/>
|
||||
</Text>
|
||||
</Restriction>
|
||||
));
|
||||
}
|
||||
|
||||
if (!fullMediaRemoval && media_nsfw) {
|
||||
items.push((
|
||||
<Text key='media_nsfw' className='flex items-center gap-2' theme='muted'>
|
||||
<Icon src={require('@tabler/icons/eye-off.svg')} />
|
||||
<Restriction key='mediaNsfw' icon={require('@tabler/icons/eye-off.svg')}>
|
||||
<FormattedMessage
|
||||
id='federation_restriction.media_nsfw'
|
||||
defaultMessage='Attachments marked NSFW'
|
||||
/>
|
||||
</Text>
|
||||
</Restriction>
|
||||
));
|
||||
}
|
||||
|
||||
|
@ -105,46 +117,45 @@ const InstanceRestrictions: React.FC<IInstanceRestrictions> = ({ remoteInstance
|
|||
|
||||
if (remoteInstance.getIn(['federation', 'reject']) === true) {
|
||||
return (
|
||||
<Text className='flex items-center gap-2' theme='muted'>
|
||||
<Icon src={require('@tabler/icons/x.svg')} />
|
||||
<Restriction icon={require('@tabler/icons/shield-x.svg')}>
|
||||
<FormattedMessage
|
||||
id='remote_instance.federation_panel.restricted_message'
|
||||
defaultMessage='{siteTitle} blocks all activities from {host}.'
|
||||
values={{ host, siteTitle }}
|
||||
/>
|
||||
</Text>
|
||||
</Restriction>
|
||||
);
|
||||
} else if (hasRestrictions(remoteInstance)) {
|
||||
return [
|
||||
(
|
||||
<Text theme='muted'>
|
||||
return (
|
||||
<>
|
||||
<Restriction icon={require('@tabler/icons/shield-lock.svg')}>
|
||||
<FormattedMessage
|
||||
id='remote_instance.federation_panel.some_restrictions_message'
|
||||
defaultMessage='{siteTitle} has placed some restrictions on {host}.'
|
||||
values={{ host, siteTitle }}
|
||||
/>
|
||||
</Text>
|
||||
),
|
||||
renderRestrictions(),
|
||||
];
|
||||
</Restriction>
|
||||
|
||||
{renderRestrictions()}
|
||||
</>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<Text className='flex items-center gap-2' theme='muted'>
|
||||
<Icon src={require('@tabler/icons/check.svg')} />
|
||||
<Restriction icon={require('@tabler/icons/shield-check.svg')}>
|
||||
<FormattedMessage
|
||||
id='remote_instance.federation_panel.no_restrictions_message'
|
||||
defaultMessage='{siteTitle} has placed no restrictions on {host}.'
|
||||
values={{ host, siteTitle }}
|
||||
/>
|
||||
</Text>
|
||||
</Restriction>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
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()}
|
||||
</div>
|
||||
</Stack>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
@ -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<IRemoteTimeline> = ({ params }) => {
|
|||
}, [onlyMedia]);
|
||||
|
||||
return (
|
||||
<Column label={intl.formatMessage(messages.title)} heading={instance} transparent withHeader={false}>
|
||||
{instance && <PinnedHostsPicker host={instance} />}
|
||||
{!pinned && <HStack className='mb-4 px-2' space={2}>
|
||||
<IconButton iconClassName='h-5 w-5' src={require('@tabler/icons/x.svg')} onClick={handleCloseClick} />
|
||||
<Text>
|
||||
<FormattedMessage
|
||||
id='remote_timeline.filter_message'
|
||||
defaultMessage='You are viewing the timeline of {instance}.'
|
||||
values={{ instance }}
|
||||
/>
|
||||
</Text>
|
||||
</HStack>}
|
||||
<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} />}
|
||||
|
||||
{!pinned && (
|
||||
<HStack className='mb-4 px-2' space={2}>
|
||||
<IconButton iconClassName='h-5 w-5' src={require('@tabler/icons/x.svg')} onClick={handleCloseClick} />
|
||||
<Text>
|
||||
<FormattedMessage
|
||||
id='remote_timeline.filter_message'
|
||||
defaultMessage='You are viewing the timeline of {instance}.'
|
||||
values={{ instance }}
|
||||
/>
|
||||
</Text>
|
||||
</HStack>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<Timeline
|
||||
scrollKey={`${timelineId}_${instance}_timeline`}
|
||||
timelineId={`${timelineId}${onlyMedia ? ':media' : ''}:${instance}`}
|
||||
|
|
Ładowanie…
Reference in New Issue