SWREI/instrumental
0
0
Fork 0
Code Issues Activity

Redesign Content Warning and filters (#32543)

Browse Source
This commit is contained in:
Claire 2024-10-23 11:47:23 +02:00 committed by GitHub
parent 05f23df3b7
commit 393f0a0159
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 33 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/javascript/mastodon/components/content_warning.tsx
View File

@ -8,7 +8,7 @@ export const ContentWarning: React.FC<{
<StatusBanner <StatusBanner
expanded={expanded} expanded={expanded}
onClick={onClick} onClick={onClick}
variant={BannerVariant.Yellow} variant={BannerVariant.Warning}
> >
<p dangerouslySetInnerHTML={{ __html: text }} /> <p dangerouslySetInnerHTML={{ __html: text }} />
</StatusBanner> </StatusBanner>

9
app/javascript/mastodon/components/filter_warning.tsx
View File

@ -10,13 +10,16 @@ export const FilterWarning: React.FC<{
<StatusBanner <StatusBanner
expanded={expanded} expanded={expanded}
onClick={onClick} onClick={onClick}
variant={BannerVariant.Blue} variant={BannerVariant.Filter}
> >
<p> <p>
<FormattedMessage <FormattedMessage
id='filter_warning.matches_filter' id='filter_warning.matches_filter'
defaultMessage='Matches filter “{title}”' defaultMessage='Matches filter “<span>{title}</span>”'
values={{ title }} values={{
title,
span: (chunks) => <span className='filter-name'>{chunks}</span>,
}}
/> />
</p> </p>
</StatusBanner> </StatusBanner>

15
app/javascript/mastodon/components/status_banner.tsx
View File

@ -1,8 +1,8 @@
import { FormattedMessage } from 'react-intl'; import { FormattedMessage } from 'react-intl';
export enum BannerVariant { export enum BannerVariant {
Yellow = 'yellow', Warning = 'warning',
Blue = 'blue', Filter = 'filter',
} }
export const StatusBanner: React.FC<{ export const StatusBanner: React.FC<{
@ -11,9 +11,9 @@ export const StatusBanner: React.FC<{
expanded?: boolean; expanded?: boolean;
onClick?: () => void; onClick?: () => void;
}> = ({ children, variant, expanded, onClick }) => ( }> = ({ children, variant, expanded, onClick }) => (
<div <label
className={ className={
variant === BannerVariant.Yellow variant === BannerVariant.Warning
? 'content-warning' ? 'content-warning'
: 'content-warning content-warning--filter' : 'content-warning content-warning--filter'
} }
@ -26,6 +26,11 @@ export const StatusBanner: React.FC<{
id='content_warning.hide' id='content_warning.hide'
defaultMessage='Hide post' defaultMessage='Hide post'
/> />
) : variant === BannerVariant.Warning ? (
<FormattedMessage
id='content_warning.show_more'
defaultMessage='Show more'
/>
) : ( ) : (
<FormattedMessage <FormattedMessage
id='content_warning.show' id='content_warning.show'
@ -33,5 +38,5 @@ export const StatusBanner: React.FC<{
/> />
)} )}
</button> </button>
</div> </label>
); );

3
app/javascript/mastodon/locales/en.json
View File

@ -197,6 +197,7 @@
"confirmations.unfollow.title": "Unfollow user?", "confirmations.unfollow.title": "Unfollow user?",
"content_warning.hide": "Hide post", "content_warning.hide": "Hide post",
"content_warning.show": "Show anyway", "content_warning.show": "Show anyway",
"content_warning.show_more": "Show more",
"conversation.delete": "Delete conversation", "conversation.delete": "Delete conversation",
"conversation.mark_as_read": "Mark as read", "conversation.mark_as_read": "Mark as read",
"conversation.open": "View conversation", "conversation.open": "View conversation",
@ -305,7 +306,7 @@
"filter_modal.select_filter.subtitle": "Use an existing category or create a new one", "filter_modal.select_filter.subtitle": "Use an existing category or create a new one",
"filter_modal.select_filter.title": "Filter this post", "filter_modal.select_filter.title": "Filter this post",
"filter_modal.title.status": "Filter a post", "filter_modal.title.status": "Filter a post",
"filter_warning.matches_filter": "Matches filter “{title}”", "filter_warning.matches_filter": "Matches filter “<span>{title}</span>”",
"filtered_notifications_banner.pending_requests": "From {count, plural, =0 {no one} one {one person} other {# people}} you may know", "filtered_notifications_banner.pending_requests": "From {count, plural, =0 {no one} one {one person} other {# people}} you may know",
"filtered_notifications_banner.title": "Filtered notifications", "filtered_notifications_banner.title": "Filtered notifications",
"firehose.all": "All", "firehose.all": "All",

41
app/javascript/styles/mastodon/components.scss
View File

@ -11109,19 +11109,21 @@ noscript {
} }
.content-warning { .content-warning {
display: block;
box-sizing: border-box; box-sizing: border-box;
background: rgba($ui-highlight-color, 0.05); background: rgba($ui-highlight-color, 0.05);
color: $secondary-text-color; color: $secondary-text-color;
border-top: 1px solid; border: 1px solid rgba($ui-highlight-color, 0.15);
border-bottom: 1px solid; border-radius: 8px;
border-color: rgba($ui-highlight-color, 0.15);
padding: 8px (5px + 8px); padding: 8px (5px + 8px);
position: relative; position: relative;
font-size: 15px; font-size: 15px;
line-height: 22px; line-height: 22px;
cursor: pointer;
p { p {
margin-bottom: 8px; margin-bottom: 8px;
font-weight: 500;
} }
.link-button { .link-button {
@ -11130,31 +11132,16 @@ noscript {
font-weight: 500; font-weight: 500;
} }
&::before, &--filter {
&::after { color: $darker-text-color;
content: '';
display: block;
position: absolute;
height: 100%;
background: url('../images/warning-stripes.svg') repeat-y;
width: 5px;
top: 0;
}
&::before { p {
border-start-start-radius: 4px; font-weight: normal;
border-end-start-radius: 4px; }
inset-inline-start: 0;
}
&::after { .filter-name {
border-start-end-radius: 4px; font-weight: 500;
border-end-end-radius: 4px; color: $secondary-text-color;
inset-inline-end: 0; }
}
&--filter::before,
&--filter::after {
background-image: url('../images/filter-stripes.svg');
} }
} }