sforkowany z mirror/soapbox
PendingStatus: display placeholder attachments
Signed-off-by: marcin mikołajczak <git@mkljczk.pl>strip-front-mentions
rodzic
829744dcce
commit
6cc20ff42a
|
@ -0,0 +1,96 @@
|
|||
import React from 'react';
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||
import { Map as ImmutableMap } from 'immutable';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
export default class PlaceholderMediaGallery extends React.Component {
|
||||
|
||||
static propTypes = {
|
||||
media: ImmutablePropTypes.map.isRequired,
|
||||
defaultWidth: PropTypes.number,
|
||||
}
|
||||
|
||||
state = {
|
||||
width: this.props.defaultWidth,
|
||||
};
|
||||
|
||||
handleRef = (node) => {
|
||||
if (node) {
|
||||
this.setState({
|
||||
width: node.offsetWidth,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
getSizeData = size => {
|
||||
const { defaultWidth } = this.props;
|
||||
const width = this.state.width || defaultWidth;
|
||||
|
||||
const style = {};
|
||||
let itemsDimensions = [];
|
||||
|
||||
if (size === 1) {
|
||||
style.height = width * 9 / 16;
|
||||
|
||||
itemsDimensions = [
|
||||
{ w: '100%', h: '100%' },
|
||||
];
|
||||
} else if (size === 2) {
|
||||
style.height = width / 2;
|
||||
|
||||
itemsDimensions = [
|
||||
{ w: '50%', h: '100%', r: '2px' },
|
||||
{ w: '50%', h: '100%', l: '2px' },
|
||||
];
|
||||
} else if (size === 3) {
|
||||
style.height = width;
|
||||
|
||||
itemsDimensions = [
|
||||
{ w: '50%', h: '50%', b: '2px', r: '2px' },
|
||||
{ w: '50%', h: '50%', b: '2px', l: '2px' },
|
||||
{ w: '100%', h: '50%', t: '2px' },
|
||||
];
|
||||
} else if (size >= 4) {
|
||||
style.height = width;
|
||||
|
||||
itemsDimensions = [
|
||||
{ w: '50%', h: '50%', b: '2px', r: '2px' },
|
||||
{ w: '50%', h: '50%', b: '2px', l: '2px' },
|
||||
{ w: '50%', h: '50%', t: '2px', r: '2px' },
|
||||
{ w: '50%', h: '50%', t: '2px', l: '2px' },
|
||||
];
|
||||
}
|
||||
|
||||
return ImmutableMap({
|
||||
style,
|
||||
itemsDimensions,
|
||||
size,
|
||||
width,
|
||||
});
|
||||
}
|
||||
|
||||
renderItem = (dimensions, i) => {
|
||||
const width = dimensions.w;
|
||||
const height = dimensions.h;
|
||||
const top = dimensions.t || 'auto';
|
||||
const right = dimensions.r || 'auto';
|
||||
const bottom = dimensions.b || 'auto';
|
||||
const left = dimensions.l || 'auto';
|
||||
const float = dimensions.float || 'left';
|
||||
const position = dimensions.pos || 'relative';
|
||||
|
||||
return <div key={i} className='media-gallery__item' style={{ position, float, left, top, right, bottom, height, width }} />;
|
||||
}
|
||||
|
||||
render() {
|
||||
const { media } = this.props;
|
||||
const sizeData = this.getSizeData(media.size);
|
||||
|
||||
return (
|
||||
<div className='media-gallery media-gallery--placeholder' style={sizeData.get('style')} ref={this.handleRef}>
|
||||
{media.take(4).map((_, i) => this.renderItem(sizeData.get('itemsDimensions')[i], i))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
|
@ -13,7 +13,7 @@ export default class PlaceholderStatusContent extends React.Component {
|
|||
const { maxLength, minLength } = this.props;
|
||||
const length = randomIntFromInterval(maxLength, minLength);
|
||||
|
||||
return(
|
||||
return (
|
||||
<div className='status__content status__content--placeholder' tabIndex='0' key='content'>
|
||||
{generateText(length)}
|
||||
</div>
|
||||
|
|
|
@ -10,9 +10,9 @@ import { Link, NavLink } from 'react-router-dom';
|
|||
import { getDomain } from 'soapbox/utils/accounts';
|
||||
import Avatar from 'soapbox/components/avatar';
|
||||
import DisplayName from 'soapbox/components/display_name';
|
||||
import AttachmentThumbs from 'soapbox/components/attachment_thumbs';
|
||||
import PollPreview from './poll_preview';
|
||||
import PlaceholderCard from 'soapbox/features/placeholder/components/placeholder_card';
|
||||
import PlaceholderMediaGallery from '../../placeholder/components/placeholder_media_gallery';
|
||||
|
||||
const shouldHaveCard = pendingStatus => {
|
||||
return Boolean(pendingStatus.get('content').match(/https?:\/\/\S*/));
|
||||
|
@ -34,8 +34,7 @@ class PendingStatus extends ImmutablePureComponent {
|
|||
|
||||
if (status.get('media_attachments') && !status.get('media_attachments').isEmpty()) {
|
||||
return (
|
||||
<AttachmentThumbs
|
||||
compact
|
||||
<PlaceholderMediaGallery
|
||||
media={status.get('media_attachments')}
|
||||
/>
|
||||
);
|
||||
|
|
|
@ -22,7 +22,7 @@ export const buildStatus = (state, pendingStatus, idempotencyKey) => {
|
|||
in_reply_to_account_id: null,
|
||||
in_reply_to_id: pendingStatus.get('in_reply_to_id'),
|
||||
language: null,
|
||||
media_attachments: [], // TODO: render pending thumbs
|
||||
media_attachments: pendingStatus.get('media_ids').map(id => ({ id })),
|
||||
mentions: [],
|
||||
muted: false,
|
||||
pinned: false,
|
||||
|
|
|
@ -1,7 +1,8 @@
|
|||
.placeholder-status,
|
||||
.placeholder-hashtag,
|
||||
.notification--placeholder,
|
||||
.status-card--placeholder {
|
||||
.status-card--placeholder,
|
||||
.media-gallery--placeholder {
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
|
@ -120,3 +121,11 @@
|
|||
opacity: 0.1;
|
||||
}
|
||||
}
|
||||
|
||||
.media-gallery.media-gallery--placeholder {
|
||||
background: none;
|
||||
|
||||
.media-gallery__item {
|
||||
background-color: var(--brand-color--faint);
|
||||
}
|
||||
}
|
||||
|
|
Ładowanie…
Reference in New Issue