bigbuffet/bigbuffet-rw
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Indicate > 4 attachments, fixes #591

Browse source
This commit is contained in:
Alex Gleason 2021-05-17 17:38:36 -05:00
parent 51e52dcfb6
commit 4db03cc3c9
No known key found for this signature in database
GPG key ID: 7211D1F99744FBB7
2 changed files with 32 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
app/soapbox/components/media_gallery.js
View file

@ -15,6 +15,7 @@ import { getSettings } from 'soapbox/actions/settings';
import Icon from 'soapbox/components/icon'; import Icon from 'soapbox/components/icon';
import StillImage from 'soapbox/components/still_image'; import StillImage from 'soapbox/components/still_image';
const ATTACHMENT_LIMIT = 4;
const MAX_FILENAME_LENGTH = 45; const MAX_FILENAME_LENGTH = 45;
const messages = defineMessages({ const messages = defineMessages({
@ -38,6 +39,8 @@ class Item extends React.PureComponent {
visible: PropTypes.bool.isRequired, visible: PropTypes.bool.isRequired,
dimensions: PropTypes.object, dimensions: PropTypes.object,
autoPlayGif: PropTypes.bool, autoPlayGif: PropTypes.bool,
last: PropTypes.bool,
total: PropTypes.number,
}; };
static defaultProps = { static defaultProps = {
@ -121,7 +124,7 @@ class Item extends React.PureComponent {
} }
render() { render() {
const { attachment, standalone, visible, dimensions, autoPlayGif } = this.props; const { attachment, standalone, visible, dimensions, autoPlayGif, last, total } = this.props;
let width = 100; let width = 100;
let height = '100%'; let height = '100%';
@ -222,6 +225,11 @@ class Item extends React.PureComponent {
return ( return (
<div className={classNames('media-gallery__item', `media-gallery__item--${attachment.get('type')}`, { standalone })} key={attachment.get('id')} style={{ position, float, left, top, right, bottom, height, width: `${width}%` }}> <div className={classNames('media-gallery__item', `media-gallery__item--${attachment.get('type')}`, { standalone })} key={attachment.get('id')} style={{ position, float, left, top, right, bottom, height, width: `${width}%` }}>
{last && total > ATTACHMENT_LIMIT && (
<div className='media-gallery__item-overflow'>
+{total - ATTACHMENT_LIMIT + 1}
</div>
)}
<canvas width={32} height={32} ref={this.setCanvasRef} className={classNames('media-gallery__preview', { 'media-gallery__preview--hidden': visible && this.state.loaded })} /> <canvas width={32} height={32} ref={this.setCanvasRef} className={classNames('media-gallery__preview', { 'media-gallery__preview--hidden': visible && this.state.loaded })} />
{visible && thumbnail} {visible && thumbnail}
</div> </div>
@ -537,7 +545,7 @@ class MediaGallery extends React.PureComponent {
const sizeData = this.getSizeData(media.size); const sizeData = this.getSizeData(media.size);
let children, spoilerButton; let children, spoilerButton;
children = media.take(4).map((attachment, i) => ( children = media.take(ATTACHMENT_LIMIT).map((attachment, i) => (
<Item <Item
key={attachment.get('id')} key={attachment.get('id')}
onClick={this.handleClick} onClick={this.handleClick}
@ -547,6 +555,8 @@ class MediaGallery extends React.PureComponent {
displayWidth={sizeData.get('width')} displayWidth={sizeData.get('width')}
visible={visible} visible={visible}
dimensions={sizeData.get('itemsDimensions')[i]} dimensions={sizeData.get('itemsDimensions')[i]}
last={i === ATTACHMENT_LIMIT - 1}
total={media.size}
/> />
)); ));

20
app/styles/components/media-gallery.scss
View file

@ -25,6 +25,26 @@
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
font-size: 100px; font-size: 100px;
} }
&-overflow {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(255, 255, 255, 0.75);
z-index: 2;
color: #333;
text-align: center;
font-weight: bold;
font-size: 50px;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
}
} }
.media-gallery__item-thumbnail { .media-gallery__item-thumbnail {