djsundog/tootlab-mastodon
1
0
Fork 0
mirror of https://github.com/glitch-soc/mastodon.git synced 2024-11-23 08:34:13 -05:00
Code Issues Packages Projects Releases Wiki Activity

[Glitch] Redesign Content Warning and filters

Browse Source 
Port 393f0a0159 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
This commit is contained in:
Claire 2024-10-23 11:47:23 +02:00
parent e8d23f6bcb
commit 1d3d549e96
5 changed files with 38 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
app/javascript/flavours/glitch/components/content_warning.tsx
View File

@ -17,9 +17,15 @@ export const ContentWarning: React.FC<{
aria-expanded={expanded}
>
{expanded ? (
<FormattedMessage id='status.show_less' defaultMessage='Show less' />
<FormattedMessage
id='content_warning.hide'
defaultMessage='Hide post'
/>
) : (
<FormattedMessage id='status.show_more' defaultMessage='Show more' />
<FormattedMessage
id='content_warning.show_more'
defaultMessage='Show more'
/>
)}
{icons}
</button>

9
app/javascript/flavours/glitch/components/filter_warning.tsx
View File

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

15
app/javascript/flavours/glitch/components/status_banner.tsx
View File

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

2
app/javascript/flavours/glitch/locales/en.json
View File

@ -154,7 +154,5 @@
"status.is_poll": "This toot is a poll",
"status.local_only": "Only visible from your instance",
"status.show_filter_reason": "Show anyway",
"status.show_less": "Show less",
"status.show_more": "Show more",
"status.uncollapse": "Uncollapse"
}

41
app/javascript/flavours/glitch/styles/components.scss
View File

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