diff --git a/app/javascript/mastodon/components/media_gallery.jsx b/app/javascript/mastodon/components/media_gallery.jsx
index ed4805b05..9a8f85212 100644
--- a/app/javascript/mastodon/components/media_gallery.jsx
+++ b/app/javascript/mastodon/components/media_gallery.jsx
@@ -1,7 +1,7 @@
import PropTypes from 'prop-types';
import { PureComponent } from 'react';
-import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
+import { FormattedMessage } from 'react-intl';
import classNames from 'classnames';
@@ -10,17 +10,10 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
import { debounce } from 'lodash';
-import VisibilityOffIcon from '@/material-icons/400-24px/visibility_off.svg?react';
import { Blurhash } from 'mastodon/components/blurhash';
import { autoPlayGif, displayMedia, useBlurhash } from '../initial_state';
-import { IconButton } from './icon_button';
-
-const messages = defineMessages({
- toggle_visible: { id: 'media_gallery.toggle_visible', defaultMessage: '{number, plural, one {Hide image} other {Hide images}}' },
-});
-
class Item extends PureComponent {
static propTypes = {
@@ -215,7 +208,6 @@ class MediaGallery extends PureComponent {
size: PropTypes.object,
height: PropTypes.number.isRequired,
onOpenMedia: PropTypes.func.isRequired,
- intl: PropTypes.object.isRequired,
defaultWidth: PropTypes.number,
cacheWidth: PropTypes.func,
visible: PropTypes.bool,
@@ -291,7 +283,7 @@ class MediaGallery extends PureComponent {
}
render () {
- const { media, lang, intl, sensitive, defaultWidth, autoplay } = this.props;
+ const { media, lang, sensitive, defaultWidth, autoplay } = this.props;
const { visible } = this.state;
const width = this.state.width || defaultWidth;
@@ -323,9 +315,7 @@ class MediaGallery extends PureComponent {
</span>
</button>
);
- } else if (visible) {
- spoilerButton = <IconButton title={intl.formatMessage(messages.toggle_visible, { number: size })} icon='eye-slash' iconComponent={VisibilityOffIcon} overlay onClick={this.handleOpen} ariaHidden />;
- } else {
+ } else if (!visible) {
spoilerButton = (
<button type='button' onClick={this.handleOpen} className='spoiler-button__overlay'>
<span className='spoiler-button__overlay__label'>
@@ -338,15 +328,23 @@ class MediaGallery extends PureComponent {
return (
<div className='media-gallery' style={style} ref={this.handleRef}>
- <div className={classNames('spoiler-button', { 'spoiler-button--minified': visible && !uncached, 'spoiler-button--click-thru': uncached })}>
- {spoilerButton}
- </div>
+ {(!visible || uncached) && (
+ <div className={classNames('spoiler-button', { 'spoiler-button--click-thru': uncached })}>
+ {spoilerButton}
+ </div>
+ )}
{children}
+
+ {(visible && !uncached) && (
+ <div className='media-gallery__actions'>
+ <button className='media-gallery__actions__pill' onClick={this.handleOpen}><FormattedMessage id='media_gallery.hide' defaultMessage='Hide' /></button>
+ </div>
+ )}
</div>
);
}
}
-export default injectIntl(MediaGallery);
+export default MediaGallery;
diff --git a/app/javascript/mastodon/locales/en.json b/app/javascript/mastodon/locales/en.json
index 7c1d7f126..39ee7b858 100644
--- a/app/javascript/mastodon/locales/en.json
+++ b/app/javascript/mastodon/locales/en.json
@@ -457,7 +457,7 @@
"lists.subheading": "Your lists",
"load_pending": "{count, plural, one {# new item} other {# new items}}",
"loading_indicator.label": "Loading…",
- "media_gallery.toggle_visible": "{number, plural, one {Hide image} other {Hide images}}",
+ "media_gallery.hide": "Hide",
"moved_to_account_banner.text": "Your account {disabledAccount} is currently disabled because you moved to {movedToAccount}.",
"mute_modal.hide_from_notifications": "Hide from notifications",
"mute_modal.hide_options": "Hide options",
diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index 92d203463..570c006fa 100644
--- a/app/javascript/styles/mastodon/components.scss
+++ b/app/javascript/styles/mastodon/components.scss
@@ -4718,22 +4718,14 @@ a.status-card {
position: absolute;
z-index: 100;
- &--minified {
- display: block;
- inset-inline-start: 4px;
- top: 4px;
- width: auto;
- height: auto;
+ &--hidden {
+ display: none;
}
&--click-thru {
pointer-events: none;
}
- &--hidden {
- display: none;
- }
-
&__overlay {
display: flex;
align-items: center;
@@ -4745,19 +4737,20 @@ a.status-card {
margin: 0;
border: 0;
color: $white;
+ line-height: 20px;
+ font-size: 14px;
&__label {
background-color: rgba($black, 0.45);
backdrop-filter: blur(10px) saturate(180%) contrast(75%) brightness(70%);
- border-radius: 6px;
- padding: 10px 15px;
+ border-radius: 8px;
+ padding: 12px 16px;
display: flex;
align-items: center;
justify-content: center;
- gap: 8px;
+ gap: 4px;
flex-direction: column;
- font-weight: 500;
- font-size: 14px;
+ font-weight: 600;
}
&__action {
@@ -6838,10 +6831,32 @@ a.status-card {
z-index: 9999;
}
-.media-gallery__item__badges {
+.media-gallery__actions {
position: absolute;
bottom: 6px;
- inset-inline-start: 6px;
+ inset-inline-end: 6px;
+ display: flex;
+ gap: 2px;
+ z-index: 2;
+
+ &__pill {
+ display: block;
+ color: $white;
+ border: 0;
+ background: rgba($black, 0.65);
+ backdrop-filter: blur(10px) saturate(180%) contrast(75%) brightness(70%);
+ padding: 3px 12px;
+ border-radius: 99px;
+ font-size: 14px;
+ font-weight: 700;
+ line-height: 20px;
+ }
+}
+
+.media-gallery__item__badges {
+ position: absolute;
+ bottom: 8px;
+ inset-inline-start: 8px;
display: flex;
gap: 2px;
}
@@ -6854,18 +6869,13 @@ a.status-card {
color: $white;
background: rgba($black, 0.65);
backdrop-filter: blur(10px) saturate(180%) contrast(75%) brightness(70%);
- padding: 2px 6px;
+ padding: 3px 8px;
border-radius: 4px;
- font-size: 11px;
+ font-size: 12px;
font-weight: 700;
z-index: 1;
pointer-events: none;
- line-height: 18px;
-
- .icon {
- width: 15px;
- height: 15px;
- }
+ line-height: 20px;
}
.attachment-list {