mirror of
https://git.kescher.at/CatCatNya/catstodon.git
synced 2024-11-25 17:51:36 +01:00
[Glitch] Change design of hide media button in web UI
Port 3929e3c6d2
to glitch-soc
Signed-off-by: Claire <claire.github-309c@sitedethib.com>
This commit is contained in:
parent
10e2b87774
commit
abe1717215
2 changed files with 50 additions and 42 deletions
|
@ -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 'flavours/glitch/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 = {
|
||||
|
@ -220,7 +213,6 @@ class MediaGallery extends PureComponent {
|
|||
lang: PropTypes.string,
|
||||
size: PropTypes.object,
|
||||
onOpenMedia: PropTypes.func.isRequired,
|
||||
intl: PropTypes.object.isRequired,
|
||||
defaultWidth: PropTypes.number,
|
||||
cacheWidth: PropTypes.func,
|
||||
visible: PropTypes.bool,
|
||||
|
@ -309,7 +301,7 @@ class MediaGallery extends PureComponent {
|
|||
}
|
||||
|
||||
render () {
|
||||
const { media, lang, intl, sensitive, letterbox, fullwidth, defaultWidth, autoplay } = this.props;
|
||||
const { media, lang, sensitive, letterbox, fullwidth, defaultWidth, autoplay } = this.props;
|
||||
const { visible } = this.state;
|
||||
const size = media.size;
|
||||
const uncached = media.every(attachment => attachment.get('type') === 'unknown');
|
||||
|
@ -343,9 +335,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'>
|
||||
|
@ -358,15 +348,23 @@ class MediaGallery extends PureComponent {
|
|||
|
||||
return (
|
||||
<div className={computedClass} 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;
|
||||
|
|
|
@ -5050,22 +5050,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;
|
||||
|
@ -5077,19 +5069,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 {
|
||||
|
@ -7336,10 +7329,32 @@ img.modal-warning {
|
|||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
@ -7352,18 +7367,13 @@ img.modal-warning {
|
|||
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 {
|
||||
|
|
Loading…
Reference in a new issue