mirror
/
soapbox
kopia lustrzana https://gitlab.com/soapbox-pub/soapbox
1
0
Forkuj 1
Kod Zgłoszenia Packages Projekty Wydania Wiki Aktywność

Merge branch 'styles-' into 'develop' 

Federation restrictions page styles

See merge request soapbox-pub/soapbox-fe!1622
environments/review-develop-3zknud/deployments/533
marcin mikołajczak 2022-07-11 17:53:47 +00:00
rodzic 70cd4148e6 604ad37c11
commit 30bf4a04b3
5 zmienionych plików z 38 dodań i 107 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

36
app/soapbox/features/federation_restrictions/components/instance_restrictions.js
Wyświetl plik

@ -50,8 +50,8 @@ class InstanceRestrictions extends ImmutablePureComponent {
if (followers_only) {
items.push((
<Text key='followers_only'>
<Icon className='mr-2' src={require('@tabler/icons/lock.svg')} />
<Text key='followers_only' className='flex items-center gap-2' theme='muted'>
<Icon src={require('@tabler/icons/lock.svg')} />
<FormattedMessage
id='federation_restriction.followers_only'
defaultMessage='Hidden except to followers'
@ -60,8 +60,8 @@ class InstanceRestrictions extends ImmutablePureComponent {
));
} else if (federated_timeline_removal) {
items.push((
<Text key='federated_timeline_removal'>
<Icon className='mr-2' src={require('@tabler/icons/lock-open.svg')} />
<Text key='federated_timeline_removal' className='flex items-center gap-2' theme='muted'>
<Icon src={require('@tabler/icons/lock-open.svg')} />
<FormattedMessage
id='federation_restriction.federated_timeline_removal'
defaultMessage='Fediverse timeline removal'
@ -72,8 +72,8 @@ class InstanceRestrictions extends ImmutablePureComponent {
if (fullMediaRemoval) {
items.push((
<Text key='full_media_removal'>
<Icon className='mr-2' src={require('@tabler/icons/photo-off.svg')} />
<Text key='full_media_removal' className='flex items-center gap-2' theme='muted'>
<Icon src={require('@tabler/icons/photo-off.svg')} />
<FormattedMessage
id='federation_restriction.full_media_removal'
defaultMessage='Full media removal'
@ -82,8 +82,8 @@ class InstanceRestrictions extends ImmutablePureComponent {
));
} else if (partialMediaRemoval) {
items.push((
<Text key='partial_media_removal'>
<Icon className='mr-2' src={require('@tabler/icons/photo-off.svg')} />
<Text key='partial_media_removal' className='flex items-center gap-2' theme='muted'>
<Icon src={require('@tabler/icons/photo-off.svg')} />
<FormattedMessage
id='federation_restriction.partial_media_removal'
defaultMessage='Partial media removal'
@ -94,8 +94,8 @@ class InstanceRestrictions extends ImmutablePureComponent {
if (!fullMediaRemoval && media_nsfw) {
items.push((
<Text key='media_nsfw'>
<Icon className='mr-2' id='eye-slash' />
<Text key='media_nsfw' className='flex items-center gap-2' theme='muted'>
<Icon id='eye-slash' />
<FormattedMessage
id='federation_restriction.media_nsfw'
defaultMessage='Attachments marked NSFW'
@ -116,8 +116,8 @@ class InstanceRestrictions extends ImmutablePureComponent {
if (remoteInstance.getIn(['federation', 'reject']) === true) {
return (
<Text>
<Icon className='mr-2' id='times' />
<Text className='flex items-center gap-2' theme='muted'>
<Icon id='times' />
<FormattedMessage
id='remote_instance.federation_panel.restricted_message'
defaultMessage='{siteTitle} blocks all activities from {host}.'
@ -128,7 +128,7 @@ class InstanceRestrictions extends ImmutablePureComponent {
} else if (hasRestrictions(remoteInstance)) {
return [
(
<Text>
<Text theme='muted'>
<FormattedMessage
id='remote_instance.federation_panel.some_restrictions_message'
defaultMessage='{siteTitle} has placed some restrictions on {host}.'
@ -140,8 +140,8 @@ class InstanceRestrictions extends ImmutablePureComponent {
];
} else {
return (
<Text>
<Icon className='mr-2' id='check' />
<Text className='flex items-center gap-2' theme='muted'>
<Icon id='check' />
<FormattedMessage
id='remote_instance.federation_panel.no_restrictions_message'
defaultMessage='{siteTitle} has placed no restrictions on {host}.'
@ -153,7 +153,11 @@ class InstanceRestrictions extends ImmutablePureComponent {
}
render() {
return <div className='instance-restrictions'>{this.renderContent()}</div>;
return (
<div className='py-1 pl-4 mb-4 border-solid border-l-[3px] border-gray-300 dark:border-gray-500'>
{this.renderContent()}
</div>
);
}
}

21
app/soapbox/features/federation_restrictions/components/restricted_instance.tsx
Wyświetl plik

@ -24,20 +24,19 @@ const RestrictedInstance: React.FC<IRestrictedInstance> = ({ host }) => {
};
return (
<div className={classNames('restricted-instance', {
'restricted-instance--reject': remoteInstance.getIn(['federation', 'reject']),
'restricted-instance--expanded': expanded,
})}
>
<a href='#' className='restricted-instance__header' onClick={toggleExpanded}>
<div className='restricted-instance__icon'>
<Icon src={expanded ? require('@tabler/icons/caret-down.svg') : require('@tabler/icons/caret-right.svg')} />
</div>
<div className='restricted-instance__host'>
<div>
<a href='#' className='flex items-center gap-1 py-2.5 no-underline' onClick={toggleExpanded}>
<Icon src={expanded ? require('@tabler/icons/caret-down.svg') : require('@tabler/icons/caret-right.svg')} />
<div className={classNames({ 'line-through': remoteInstance.getIn(['federation', 'reject']) })}>
{remoteInstance.get('host')}
</div>
</a>
<div className='restricted-instance__restrictions'>
<div
className={classNames({
'h-0 overflow-hidden': !expanded,
'h-auto': expanded,
})}
>
<InstanceRestrictions remoteInstance={remoteInstance} />
</div>
</div>

18
app/soapbox/features/federation_restrictions/index.tsx
Wyświetl plik

@ -40,17 +40,15 @@ const FederationRestrictions = () => {
return (
<Column icon='gavel' label={intl.formatMessage(messages.heading)}>
<div className='explanation-box'>
<Accordion
headline={intl.formatMessage(messages.boxTitle)}
expanded={explanationBoxExpanded}
onToggle={toggleExplanationBox}
>
{intl.formatMessage(messages.boxMessage, { siteTitle })}
</Accordion>
</div>
<Accordion
headline={intl.formatMessage(messages.boxTitle)}
expanded={explanationBoxExpanded}
onToggle={toggleExplanationBox}
>
{intl.formatMessage(messages.boxMessage, { siteTitle })}
</Accordion>
<div className='federation-restrictions'>
<div className='pt-4'>
<ScrollableList emptyMessage={intl.formatMessage(emptyMessage, { siteTitle })}>
{hosts.map((host) => <RestrictedInstance key={host} host={host} />)}
</ScrollableList>

1
app/styles/application.scss
Wyświetl plik

@ -67,7 +67,6 @@
@import 'components/backups';
@import 'components/crypto-donate';
@import 'components/remote-timeline';
@import 'components/federation-restrictions';
@import 'components/aliases';
@import 'components/icon';
@import 'components/radio-button';

69
app/styles/components/federation-restrictions.scss
Wyświetl plik

@ -1,69 +0,0 @@
.federation-restrictions {
padding-top: 15px;
.slist .item-list > article {
padding: 0 20px;
&:last-child {
padding-bottom: 15px;
}
}
}
.restricted-instance {
&__header {
padding: 10px 0;
display: flex;
text-decoration: none;
color: var(--primary-text-color);
}
&__icon {
width: 16px;
.svg-icon svg {
stroke-width: 1.3;
}
}
&--expanded &__icon i.fa {
transform: translateX(-3px);
}
&--reject &__host {
text-decoration: line-through;
}
&__restrictions {
height: 0;
overflow: hidden;
}
&--expanded &__restrictions {
height: auto;
}
.instance-restrictions {
padding: 5px 0 5px 15px;
border-left: 3px solid hsla(var(--primary-text-color_hsl), 0.4);
color: var(--primary-text-color--faint);
margin-bottom: 15px;
.federation-restriction {
padding: 7px 0;
font-size: 14px;
}
&__message {
margin-bottom: 10px;
i.fa {
padding-right: 10px;
}
&:last-child {
margin-bottom: 0;
}
}
}
}