mirror of
https://git.kescher.at/CatCatNya/catstodon.git
synced 2024-11-25 17:51:36 +01:00
Merge pull request #2852 from ClearlyClaire/glitch-soc/features/grouped-notifications-cw
Add content warning support to grouped notifications
This commit is contained in:
Claire
GitHub
commit
6ac6d86525
6 changed files with 231 additions and 63 deletions
|
|
@ -0,0 +1,27 @@
|
|||
/* Significantly rewritten from upstream to keep the old design for now */
|
||||
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
|
||||
export const ContentWarning: React.FC<{
|
||||
text: string;
|
||||
expanded?: boolean;
|
||||
onClick?: () => void;
|
||||
icons?: React.ReactNode[];
|
||||
}> = ({ text, expanded, onClick, icons }) => (
|
||||
<p>
|
||||
<span dangerouslySetInnerHTML={{ __html: text }} className='translate' />{' '}
|
||||
<button
|
||||
type='button'
|
||||
className='status__content__spoiler-link'
|
||||
onClick={onClick}
|
||||
aria-expanded={expanded}
|
||||
>
|
||||
{expanded ? (
|
||||
<FormattedMessage id='status.show_less' defaultMessage='Show less' />
|
||||
) : (
|
||||
<FormattedMessage id='status.show_more' defaultMessage='Show more' />
|
||||
)}
|
||||
{icons}
|
||||
</button>
|
||||
</p>
|
||||
);
|
||||
23
app/javascript/flavours/glitch/components/filter_warning.tsx
Normal file
23
app/javascript/flavours/glitch/components/filter_warning.tsx
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
import { FormattedMessage } from 'react-intl';
|
||||
|
||||
import { StatusBanner, BannerVariant } from './status_banner';
|
||||
|
||||
export const FilterWarning: React.FC<{
|
||||
title: string;
|
||||
expanded?: boolean;
|
||||
onClick?: () => void;
|
||||
}> = ({ title, expanded, onClick }) => (
|
||||
<StatusBanner
|
||||
expanded={expanded}
|
||||
onClick={onClick}
|
||||
variant={BannerVariant.Blue}
|
||||
>
|
||||
<p>
|
||||
<FormattedMessage
|
||||
id='filter_warning.matches_filter'
|
||||
defaultMessage='Matches filter “{title}”'
|
||||
values={{ title }}
|
||||
/>
|
||||
</p>
|
||||
</StatusBanner>
|
||||
);
|
||||
37
app/javascript/flavours/glitch/components/status_banner.tsx
Normal file
37
app/javascript/flavours/glitch/components/status_banner.tsx
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
import { FormattedMessage } from 'react-intl';
|
||||
|
||||
export enum BannerVariant {
|
||||
Yellow = 'yellow',
|
||||
Blue = 'blue',
|
||||
}
|
||||
|
||||
export const StatusBanner: React.FC<{
|
||||
children: React.ReactNode;
|
||||
variant: BannerVariant;
|
||||
expanded?: boolean;
|
||||
onClick?: () => void;
|
||||
}> = ({ children, variant, expanded, onClick }) => (
|
||||
<div
|
||||
className={
|
||||
variant === BannerVariant.Yellow
|
||||
? 'content-warning'
|
||||
: 'content-warning content-warning--filter'
|
||||
}
|
||||
>
|
||||
{children}
|
||||
|
||||
<button className='link-button' onClick={onClick}>
|
||||
{expanded ? (
|
||||
<FormattedMessage
|
||||
id='content_warning.hide'
|
||||
defaultMessage='Hide post'
|
||||
/>
|
||||
) : (
|
||||
<FormattedMessage
|
||||
id='content_warning.show'
|
||||
defaultMessage='Show anyway'
|
||||
/>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
|
|
@ -14,6 +14,7 @@ import InsertChartIcon from '@/material-icons/400-24px/insert_chart.svg?react';
|
|||
import LinkIcon from '@/material-icons/400-24px/link.svg?react';
|
||||
import MovieIcon from '@/material-icons/400-24px/movie.svg?react';
|
||||
import MusicNoteIcon from '@/material-icons/400-24px/music_note.svg?react';
|
||||
import { ContentWarning } from 'flavours/glitch/components/content_warning';
|
||||
import { Icon } from 'flavours/glitch/components/icon';
|
||||
import { identityContextPropShape, withIdentity } from 'flavours/glitch/identity_context';
|
||||
import { autoPlayGif, languages as preloadedLanguages } from 'flavours/glitch/initial_state';
|
||||
|
|
@ -350,7 +351,7 @@ class StatusContent extends PureComponent {
|
|||
const renderTranslate = this.props.onTranslate && this.props.identity.signedIn && ['public', 'unlisted'].includes(status.get('visibility')) && status.get('search_index').trim().length > 0 && targetLanguages?.includes(contentLocale);
|
||||
|
||||
const content = { __html: statusContent ?? getStatusContent(status) };
|
||||
const spoilerContent = { __html: status.getIn(['translation', 'spoilerHtml']) || status.get('spoilerHtml') };
|
||||
const spoilerHtml = status.getIn(['translation', 'spoilerHtml']) || status.get('spoilerHtml');
|
||||
const language = status.getIn(['translation', 'language']) || status.get('language');
|
||||
const classNames = classnames('status__content', {
|
||||
'status__content--with-action': parseClick && !disabled,
|
||||
|
|
@ -375,45 +376,26 @@ class StatusContent extends PureComponent {
|
|||
</Permalink>
|
||||
)).reduce((aggregate, item) => [...aggregate, item, ' '], []);
|
||||
|
||||
let toggleText = null;
|
||||
if (hidden) {
|
||||
toggleText = [
|
||||
<FormattedMessage
|
||||
id='status.show_more'
|
||||
defaultMessage='Show more'
|
||||
key='0'
|
||||
/>,
|
||||
];
|
||||
if (mediaIcons) {
|
||||
const mediaComponents = {
|
||||
'link': LinkIcon,
|
||||
'picture-o': ImageIcon,
|
||||
'tasks': InsertChartIcon,
|
||||
'video-camera': MovieIcon,
|
||||
'music': MusicNoteIcon,
|
||||
};
|
||||
let spoilerIcons = [];
|
||||
if (hidden && mediaIcons) {
|
||||
const mediaComponents = {
|
||||
'link': LinkIcon,
|
||||
'picture-o': ImageIcon,
|
||||
'tasks': InsertChartIcon,
|
||||
'video-camera': MovieIcon,
|
||||
'music': MusicNoteIcon,
|
||||
};
|
||||
|
||||
mediaIcons.forEach((mediaIcon, idx) => {
|
||||
toggleText.push(
|
||||
<Icon
|
||||
fixedWidth
|
||||
className='status__content__spoiler-icon'
|
||||
id={mediaIcon}
|
||||
icon={mediaComponents[mediaIcon]}
|
||||
aria-hidden='true'
|
||||
key={`icon-${idx}`}
|
||||
/>,
|
||||
);
|
||||
});
|
||||
}
|
||||
} else {
|
||||
toggleText = (
|
||||
<FormattedMessage
|
||||
id='status.show_less'
|
||||
defaultMessage='Show less'
|
||||
key='0'
|
||||
spoilerIcons = mediaIcons.map((mediaIcon) => (
|
||||
<Icon
|
||||
fixedWidth
|
||||
className='status__content__spoiler-icon'
|
||||
id={mediaIcon}
|
||||
icon={mediaComponents[mediaIcon]}
|
||||
aria-hidden='true'
|
||||
key={`icon-${mediaIcon}`}
|
||||
/>
|
||||
);
|
||||
));
|
||||
}
|
||||
|
||||
if (hidden) {
|
||||
|
|
@ -422,15 +404,7 @@ class StatusContent extends PureComponent {
|
|||
|
||||
return (
|
||||
<div className={classNames} tabIndex={0} onMouseDown={this.handleMouseDown} onMouseUp={this.handleMouseUp}>
|
||||
<p
|
||||
style={{ marginBottom: hidden && status.get('mentions').isEmpty() ? '0px' : null }}
|
||||
>
|
||||
<span dangerouslySetInnerHTML={spoilerContent} className='translate' lang={language} />
|
||||
{' '}
|
||||
<button type='button' className='status__content__spoiler-link' onClick={this.handleSpoilerClick} aria-expanded={!hidden}>
|
||||
{toggleText}
|
||||
</button>
|
||||
</p>
|
||||
<ContentWarning text={spoilerHtml} expanded={!hidden} onClick={this.handleSpoilerClick} icons={spoilerIcons} />
|
||||
|
||||
{mentionsPlaceholder}
|
||||
|
||||
|
|
|
|||
|
|
@ -8,11 +8,13 @@ import type { List as ImmutableList, RecordOf } from 'immutable';
|
|||
|
||||
import BarChart4BarsIcon from '@/material-icons/400-24px/bar_chart_4_bars.svg?react';
|
||||
import PhotoLibraryIcon from '@/material-icons/400-24px/photo_library.svg?react';
|
||||
import { toggleStatusSpoilers } from 'flavours/glitch/actions/statuses';
|
||||
import { Avatar } from 'flavours/glitch/components/avatar';
|
||||
import { ContentWarning } from 'flavours/glitch/components/content_warning';
|
||||
import { DisplayName } from 'flavours/glitch/components/display_name';
|
||||
import { Icon } from 'flavours/glitch/components/icon';
|
||||
import type { Status } from 'flavours/glitch/models/status';
|
||||
import { useAppSelector } from 'flavours/glitch/store';
|
||||
import { useAppSelector, useAppDispatch } from 'flavours/glitch/store';
|
||||
|
||||
import { EmbeddedStatusContent } from './embedded_status_content';
|
||||
|
||||
|
|
@ -23,6 +25,7 @@ export const EmbeddedStatus: React.FC<{ statusId: string }> = ({
|
|||
}) => {
|
||||
const history = useHistory();
|
||||
const clickCoordinatesRef = useRef<[number, number] | null>();
|
||||
const dispatch = useAppDispatch();
|
||||
|
||||
const status = useAppSelector(
|
||||
(state) => state.statuses.get(statusId) as Status | undefined,
|
||||
|
|
@ -96,15 +99,21 @@ export const EmbeddedStatus: React.FC<{ statusId: string }> = ({
|
|||
[],
|
||||
);
|
||||
|
||||
const handleContentWarningClick = useCallback(() => {
|
||||
dispatch(toggleStatusSpoilers(statusId));
|
||||
}, [dispatch, statusId]);
|
||||
|
||||
if (!status) {
|
||||
return null;
|
||||
}
|
||||
|
||||
// Assign status attributes to variables with a forced type, as status is not yet properly typed
|
||||
const contentHtml = status.get('contentHtml') as string;
|
||||
const contentWarning = status.get('spoilerHtml') as string;
|
||||
const poll = status.get('poll');
|
||||
const language = status.get('language') as string;
|
||||
const mentions = status.get('mentions') as ImmutableList<Mention>;
|
||||
const expanded = !status.get('hidden') || !contentWarning;
|
||||
const mediaAttachmentsSize = (
|
||||
status.get('media_attachments') as ImmutableList<unknown>
|
||||
).size;
|
||||
|
|
@ -124,14 +133,24 @@ export const EmbeddedStatus: React.FC<{ statusId: string }> = ({
|
|||
<DisplayName account={account} />
|
||||
</div>
|
||||
|
||||
<EmbeddedStatusContent
|
||||
className='notification-group__embedded-status__content reply-indicator__content translate'
|
||||
content={contentHtml}
|
||||
language={language}
|
||||
mentions={mentions}
|
||||
/>
|
||||
{contentWarning && (
|
||||
<ContentWarning
|
||||
text={contentWarning}
|
||||
onClick={handleContentWarningClick}
|
||||
expanded={expanded}
|
||||
/>
|
||||
)}
|
||||
|
||||
{(poll || mediaAttachmentsSize > 0) && (
|
||||
{(!contentWarning || expanded) && (
|
||||
<EmbeddedStatusContent
|
||||
className='notification-group__embedded-status__content reply-indicator__content translate'
|
||||
content={contentHtml}
|
||||
language={language}
|
||||
mentions={mentions}
|
||||
/>
|
||||
)}
|
||||
|
||||
{expanded && (poll || mediaAttachmentsSize > 0) && (
|
||||
<div className='notification-group__embedded-status__attachments reply-indicator__attachments'>
|
||||
{!!poll && (
|
||||
<>
|
||||
|
|
|
|||
|
|
@ -620,7 +620,7 @@ body > [data-popper-placement] {
|
|||
|
||||
.spoiler-input__input {
|
||||
padding: 12px 12px - 5px;
|
||||
background: mix($ui-base-color, $ui-highlight-color, 85%);
|
||||
background: rgba($ui-highlight-color, 0.05);
|
||||
color: $highlight-text-color;
|
||||
}
|
||||
|
||||
|
|
@ -1365,7 +1365,7 @@ body > [data-popper-placement] {
|
|||
.status__content__spoiler-link {
|
||||
display: inline-flex; // glitch: media icon in spoiler button
|
||||
border-radius: 2px;
|
||||
background: transparent;
|
||||
background: $action-button-color; // glitch: design used in more places
|
||||
border: 0;
|
||||
color: $inverted-text-color;
|
||||
font-weight: 700;
|
||||
|
|
@ -1378,7 +1378,8 @@ body > [data-popper-placement] {
|
|||
align-items: center; // glitch: content indicator
|
||||
|
||||
&:hover {
|
||||
background: lighten($ui-base-color, 33%);
|
||||
// glitch: design used in more places
|
||||
background: lighten($action-button-color, 7%);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
|
@ -1447,6 +1448,14 @@ body > [data-popper-placement] {
|
|||
}
|
||||
}
|
||||
|
||||
.content-warning {
|
||||
margin-bottom: 10px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.media-gallery,
|
||||
.video-player,
|
||||
.audio-player,
|
||||
|
|
@ -1771,6 +1780,14 @@ body > [data-popper-placement] {
|
|||
.media-gallery__item-thumbnail {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.content-warning {
|
||||
margin-bottom: 16px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.status__prepend {
|
||||
|
|
@ -11185,39 +11202,59 @@ noscript {
|
|||
}
|
||||
|
||||
&__embedded-status {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
cursor: pointer;
|
||||
|
||||
&__account {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
margin-bottom: 8px;
|
||||
color: $dark-text-color;
|
||||
font-size: 15px;
|
||||
line-height: 22px;
|
||||
|
||||
bdi {
|
||||
color: inherit;
|
||||
color: $darker-text-color;
|
||||
}
|
||||
}
|
||||
|
||||
.account__avatar {
|
||||
opacity: 0.5;
|
||||
/* glitch: used for CWs */
|
||||
p {
|
||||
font-size: 15px;
|
||||
color: $darker-text-color;
|
||||
}
|
||||
|
||||
&__content {
|
||||
display: -webkit-box;
|
||||
font-size: 15px;
|
||||
line-height: 22px;
|
||||
color: $dark-text-color;
|
||||
color: $darker-text-color;
|
||||
-webkit-line-clamp: 4;
|
||||
-webkit-box-orient: vertical;
|
||||
max-height: 4 * 22px;
|
||||
overflow: hidden;
|
||||
|
||||
p {
|
||||
display: none;
|
||||
|
||||
&:first-child {
|
||||
display: initial;
|
||||
}
|
||||
}
|
||||
|
||||
p,
|
||||
a {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
.reply-indicator__attachments {
|
||||
font-size: 15px;
|
||||
line-height: 22px;
|
||||
color: $dark-text-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -11492,3 +11529,54 @@ noscript {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content-warning {
|
||||
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);
|
||||
padding: 8px (5px + 8px);
|
||||
position: relative;
|
||||
font-size: 15px;
|
||||
line-height: 22px;
|
||||
|
||||
p {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.link-button {
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
background: url('~images/warning-stripes.svg') repeat-y;
|
||||
width: 5px;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
&::before {
|
||||
border-start-start-radius: 4px;
|
||||
border-end-start-radius: 4px;
|
||||
inset-inline-start: 0;
|
||||
}
|
||||
|
||||
&::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');
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue