Use new CW class in more places
This commit is contained in:
		
							parent
							
								
									4d754935a9
								
							
						
					
					
						commit
						7c148ed1cb
					
				| 
						 | 
				
			
			@ -6,7 +6,8 @@ export const ContentWarning: React.FC<{
 | 
			
		|||
  text: string;
 | 
			
		||||
  expanded?: boolean;
 | 
			
		||||
  onClick?: () => void;
 | 
			
		||||
}> = ({ text, expanded, onClick }) => (
 | 
			
		||||
  icons?: React.ReactNode[];
 | 
			
		||||
}> = ({ text, expanded, onClick, icons }) => (
 | 
			
		||||
  <p>
 | 
			
		||||
    <span dangerouslySetInnerHTML={{ __html: text }} className='translate' />{' '}
 | 
			
		||||
    <button
 | 
			
		||||
| 
						 | 
				
			
			@ -20,6 +21,7 @@ export const ContentWarning: React.FC<{
 | 
			
		|||
      ) : (
 | 
			
		||||
        <FormattedMessage id='status.show_more' defaultMessage='Show more' />
 | 
			
		||||
      )}
 | 
			
		||||
      {icons}
 | 
			
		||||
    </button>
 | 
			
		||||
  </p>
 | 
			
		||||
);
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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}
 | 
			
		||||
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
		Loading…
	
		Reference in New Issue