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

[Glitch] Add "not available" label on unknown media attachments 

Port d344289431 to glitch-soc

Signed-off-by: Thibaut Girka <thib@sitedethib.com>
pull/1211/head
Eugen Rochko 2019-09-01 19:43:35 +02:00 committed by Thibaut Girka
parent 5088eb8388
commit 23c513846a
2 changed files with 19 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
app/javascript/flavours/glitch/components/media_gallery.js
View File

@ -330,6 +330,7 @@ export default class MediaGallery extends React.PureComponent {
const { media, intl, sensitive, letterbox, fullwidth, defaultWidth } = this.props; const { media, intl, sensitive, letterbox, fullwidth, defaultWidth } = this.props;
const { visible } = this.state; const { visible } = this.state;
const size = media.take(4).size; const size = media.take(4).size;
const uncached = media.every(attachment => attachment.get('type') === 'unknown');
const width = this.state.width || defaultWidth; const width = this.state.width || defaultWidth;
@ -350,10 +351,16 @@ export default class MediaGallery extends React.PureComponent {
if (this.isStandaloneEligible()) { if (this.isStandaloneEligible()) {
children = <Item standalone onClick={this.handleClick} attachment={media.get(0)} displayWidth={width} visible={visible} />; children = <Item standalone onClick={this.handleClick} attachment={media.get(0)} displayWidth={width} visible={visible} />;
} else { } else {
children = media.take(4).map((attachment, i) => <Item key={attachment.get('id')} onClick={this.handleClick} attachment={attachment} index={i} size={size} letterbox={letterbox} displayWidth={width} visible={visible} />); children = media.take(4).map((attachment, i) => <Item key={attachment.get('id')} onClick={this.handleClick} attachment={attachment} index={i} size={size} letterbox={letterbox} displayWidth={width} visible={visible || uncached} />);
} }
if (visible) { if (uncached) {
spoilerButton = (
<button type='button' disabled className='spoiler-button__overlay'>
<span className='spoiler-button__overlay__label'><FormattedMessage id='status.uncached_media_warning' defaultMessage='Not available' /></span>
</button>
);
} else if (visible) {
spoilerButton = <IconButton title={intl.formatMessage(messages.toggle_visible)} icon='eye-slash' overlay onClick={this.handleOpen} />; spoilerButton = <IconButton title={intl.formatMessage(messages.toggle_visible)} icon='eye-slash' overlay onClick={this.handleOpen} />;
} else { } else {
spoilerButton = ( spoilerButton = (
@ -365,7 +372,7 @@ export default class MediaGallery extends React.PureComponent {
return ( return (
<div className={computedClass} style={style} ref={this.handleRef}> <div className={computedClass} style={style} ref={this.handleRef}>
<div className={classNames('spoiler-button', { 'spoiler-button--minified': visible })}> <div className={classNames('spoiler-button', { 'spoiler-button--minified': visible && !uncached })}>
{spoilerButton} {spoilerButton}
{visible && sensitive && ( {visible && sensitive && (
<span className='sensitive-marker'> <span className='sensitive-marker'>

8
app/javascript/flavours/glitch/styles/components/index.scss
View File

@ -1267,6 +1267,14 @@
background: rgba($base-overlay-background, 0.8); background: rgba($base-overlay-background, 0.8);
} }
} }
&:disabled {
cursor: not-allowed;
.spoiler-button__overlay__label {
background: rgba($base-overlay-background, 0.5);
}
}
} }
} }