mirrors
/
mastodon-glitch
mirror of https://github.com/glitch-soc/mastodon
3
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Change Content Warning design to match upstream's (#2890)

pull/2891/head
Claire 2024-10-27 16:08:01 +01:00 committed by GitHub
parent eb68d81013
commit 40b3c206e4
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 18 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,6 +1,4 @@
/* Significantly rewritten from upstream to keep the old design for now */ import { StatusBanner, BannerVariant } from './status_banner';
import { FormattedMessage } from 'react-intl';
export const ContentWarning: React.FC<{ export const ContentWarning: React.FC<{
text: string; text: string;
@ -8,26 +6,12 @@ export const ContentWarning: React.FC<{
onClick?: () => void; onClick?: () => void;
icons?: React.ReactNode[]; icons?: React.ReactNode[];
}> = ({ text, expanded, onClick, icons }) => ( }> = ({ text, expanded, onClick, icons }) => (
<p> <StatusBanner
<span dangerouslySetInnerHTML={{ __html: text }} className='translate' />{' '} expanded={expanded}
<button
type='button'
className='status__content__spoiler-link'
onClick={onClick} onClick={onClick}
aria-expanded={expanded} variant={BannerVariant.Warning}
> >
{expanded ? (
<FormattedMessage
id='content_warning.hide'
defaultMessage='Hide post'
/>
) : (
<FormattedMessage
id='content_warning.show_more'
defaultMessage='Show more'
/>
)}
{icons} {icons}
</button> <p dangerouslySetInnerHTML={{ __html: text }} />
</p> </StatusBanner>
); );

2
app/javascript/flavours/glitch/components/status_content.jsx
View File

@ -378,7 +378,7 @@ class StatusContent extends PureComponent {
)).reduce((aggregate, item) => [...aggregate, item, ' '], []); )).reduce((aggregate, item) => [...aggregate, item, ' '], []);
let spoilerIcons = []; let spoilerIcons = [];
if (hidden && mediaIcons) { if (mediaIcons) {
const mediaComponents = { const mediaComponents = {
'link': LinkIcon, 'link': LinkIcon,
'picture-o': ImageIcon, 'picture-o': ImageIcon,

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

@ -1399,9 +1399,9 @@ body > [data-popper-placement] {
} }
.status__content__spoiler-link { .status__content__spoiler-link {
display: inline-flex; // glitch: media icon in spoiler button display: inline-block;
border-radius: 2px; border-radius: 2px;
background: $action-button-color; // glitch: design used in more places background: transparent;
border: 0; border: 0;
color: $inverted-text-color; color: $inverted-text-color;
font-weight: 700; font-weight: 700;
@ -1411,23 +1411,6 @@ body > [data-popper-placement] {
line-height: 20px; line-height: 20px;
cursor: pointer; cursor: pointer;
vertical-align: top; vertical-align: top;
align-items: center; // glitch: content indicator
&:hover {
// glitch: design used in more places
background: lighten($action-button-color, 7%);
text-decoration: none;
}
.status__content__spoiler-icon {
display: inline-block;
margin-inline-start: 5px;
border-inline-start: 1px solid currentColor;
padding: 0;
padding-inline-start: 4px;
width: 16px;
height: 16px;
}
} }
.status__wrapper--filtered { .status__wrapper--filtered {
@ -11683,4 +11666,10 @@ noscript {
color: $secondary-text-color; color: $secondary-text-color;
} }
} }
.status__content__spoiler-icon {
float: inline-end;
width: 20px;
height: 20px;
}
} }