diff --git a/app/javascript/mastodon/components/media_gallery.jsx b/app/javascript/mastodon/components/media_gallery.jsx index ed4805b05d..9a8f852128 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 { ); - } else if (visible) { - spoilerButton = ; - } else { + } else if (!visible) { spoilerButton = ( + + )} ); } } -export default injectIntl(MediaGallery); +export default MediaGallery; diff --git a/app/javascript/mastodon/locales/en.json b/app/javascript/mastodon/locales/en.json index 7c1d7f126d..39ee7b858f 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 92d2034633..570c006faa 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 {