Fix glitch-soc CW media icons

This commit is contained in:
Claire 2024-01-13 23:48:37 +01:00
parent 46128f25b6
commit 6333900006
2 changed files with 16 additions and 3 deletions

View File

@ -9,6 +9,12 @@ import { withRouter } from 'react-router-dom';
import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePropTypes from 'react-immutable-proptypes';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { ReactComponent as ImageIcon } from '@material-symbols/svg-600/outlined/image.svg';
import { ReactComponent as InsertChartIcon } from '@material-symbols/svg-600/outlined/insert_chart.svg';
import { ReactComponent as LinkIcon } from '@material-symbols/svg-600/outlined/link.svg';
import { ReactComponent as MovieIcon } from '@material-symbols/svg-600/outlined/movie.svg';
import { ReactComponent as MusicNoteIcon } from '@material-symbols/svg-600/outlined/music_note.svg';
import { Icon } from 'flavours/glitch/components/icon'; import { Icon } from 'flavours/glitch/components/icon';
import { autoPlayGif, languages as preloadedLanguages } from 'flavours/glitch/initial_state'; import { autoPlayGif, languages as preloadedLanguages } from 'flavours/glitch/initial_state';
import { decode as decodeIDNA } from 'flavours/glitch/utils/idna'; import { decode as decodeIDNA } from 'flavours/glitch/utils/idna';
@ -381,12 +387,21 @@ class StatusContent extends PureComponent {
/>, />,
]; ];
if (mediaIcons) { if (mediaIcons) {
const mediaComponents = {
'link': LinkIcon,
'picture-o': ImageIcon,
'tasks': InsertChartIcon,
'video-camera': MovieIcon,
'music': MusicNoteIcon,
};
mediaIcons.forEach((mediaIcon, idx) => { mediaIcons.forEach((mediaIcon, idx) => {
toggleText.push( toggleText.push(
<Icon <Icon
fixedWidth fixedWidth
className='status__content__spoiler-icon' className='status__content__spoiler-icon'
id={mediaIcon} id={mediaIcon}
icon={mediaComponents[mediaIcon]}
aria-hidden='true' aria-hidden='true'
key={`icon-${idx}`} key={`icon-${idx}`}
/>, />,

View File

@ -136,7 +136,7 @@
} }
.status__content__spoiler-link { .status__content__spoiler-link {
display: inline-block; display: inline-flex;
border-radius: 2px; border-radius: 2px;
background: lighten($ui-base-color, 30%); background: lighten($ui-base-color, 30%);
border: 0; border: 0;
@ -160,8 +160,6 @@
border-inline-start: 1px solid currentColor; border-inline-start: 1px solid currentColor;
padding: 0; padding: 0;
padding-inline-start: 4px; padding-inline-start: 4px;
font-size: 16px;
vertical-align: -2px;
} }
} }