Change Content Warning design to match upstream's (#2890)
parent
eb68d81013
commit
40b3c206e4
|
@ -1,6 +1,4 @@
|
|||
/* Significantly rewritten from upstream to keep the old design for now */
|
||||
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
import { StatusBanner, BannerVariant } from './status_banner';
|
||||
|
||||
export const ContentWarning: React.FC<{
|
||||
text: string;
|
||||
|
@ -8,26 +6,12 @@ export const ContentWarning: React.FC<{
|
|||
onClick?: () => void;
|
||||
icons?: React.ReactNode[];
|
||||
}> = ({ text, expanded, onClick, icons }) => (
|
||||
<p>
|
||||
<span dangerouslySetInnerHTML={{ __html: text }} className='translate' />{' '}
|
||||
<button
|
||||
type='button'
|
||||
className='status__content__spoiler-link'
|
||||
<StatusBanner
|
||||
expanded={expanded}
|
||||
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}
|
||||
</button>
|
||||
</p>
|
||||
<p dangerouslySetInnerHTML={{ __html: text }} />
|
||||
</StatusBanner>
|
||||
);
|
||||
|
|
|
@ -378,7 +378,7 @@ class StatusContent extends PureComponent {
|
|||
)).reduce((aggregate, item) => [...aggregate, item, ' '], []);
|
||||
|
||||
let spoilerIcons = [];
|
||||
if (hidden && mediaIcons) {
|
||||
if (mediaIcons) {
|
||||
const mediaComponents = {
|
||||
'link': LinkIcon,
|
||||
'picture-o': ImageIcon,
|
||||
|
|
|
@ -1399,9 +1399,9 @@ body > [data-popper-placement] {
|
|||
}
|
||||
|
||||
.status__content__spoiler-link {
|
||||
display: inline-flex; // glitch: media icon in spoiler button
|
||||
display: inline-block;
|
||||
border-radius: 2px;
|
||||
background: $action-button-color; // glitch: design used in more places
|
||||
background: transparent;
|
||||
border: 0;
|
||||
color: $inverted-text-color;
|
||||
font-weight: 700;
|
||||
|
@ -1411,23 +1411,6 @@ body > [data-popper-placement] {
|
|||
line-height: 20px;
|
||||
cursor: pointer;
|
||||
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 {
|
||||
|
@ -11683,4 +11666,10 @@ noscript {
|
|||
color: $secondary-text-color;
|
||||
}
|
||||
}
|
||||
|
||||
.status__content__spoiler-icon {
|
||||
float: inline-end;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue