mirror of https://framagit.org/tykayn/mastodon.git
gallery counting
This commit is contained in:
parent
4b62c4447f
commit
4522b0c3a8
|
@ -77,6 +77,9 @@ export default class Gallery extends ImmutablePureComponent {
|
|||
};
|
||||
|
||||
render() {
|
||||
|
||||
console.log('gallery props', this.props);
|
||||
|
||||
const { statusIds, featuredStatusIds, shouldUpdateScroll, onLoadMore, timelineId, ...other } = this.props;
|
||||
const { isLoading, isPartial } = other;
|
||||
|
||||
|
|
|
@ -25,12 +25,14 @@ class Item extends React.PureComponent {
|
|||
displayWidth: PropTypes.number,
|
||||
visible: PropTypes.bool.isRequired,
|
||||
autoplay: PropTypes.bool,
|
||||
allMaxWidth: PropTypes.bool,
|
||||
};
|
||||
|
||||
static defaultProps = {
|
||||
standalone: false,
|
||||
index: 0,
|
||||
size: 1,
|
||||
allMaxWidth: false,
|
||||
};
|
||||
|
||||
state = {
|
||||
|
@ -79,7 +81,7 @@ class Item extends React.PureComponent {
|
|||
}
|
||||
|
||||
render () {
|
||||
const { attachment, index, size, standalone, displayWidth, visible } = this.props;
|
||||
const { attachment, index, size, standalone, displayWidth, visible, allMaxWidth } = this.props;
|
||||
|
||||
let width = 50;
|
||||
let height = 100;
|
||||
|
@ -88,6 +90,8 @@ class Item extends React.PureComponent {
|
|||
let bottom = 'auto';
|
||||
let right = 'auto';
|
||||
|
||||
if(!allMaxWidth){
|
||||
|
||||
if (size === 1) {
|
||||
width = 100;
|
||||
}
|
||||
|
@ -130,6 +134,11 @@ class Item extends React.PureComponent {
|
|||
}
|
||||
}
|
||||
|
||||
}
|
||||
else{
|
||||
width = 100;
|
||||
}
|
||||
|
||||
let thumbnail = '';
|
||||
|
||||
if (attachment.get('type') === 'unknown') {
|
||||
|
@ -144,7 +153,8 @@ class Item extends React.PureComponent {
|
|||
</a>
|
||||
</div>
|
||||
);
|
||||
} else if (attachment.get('type') === 'image') {
|
||||
}
|
||||
else if (attachment.get('type') === 'image') {
|
||||
const previewUrl = attachment.get('preview_url');
|
||||
const previewWidth = attachment.getIn(['meta', 'small', 'width']);
|
||||
|
||||
|
@ -224,6 +234,7 @@ export default @injectIntl
|
|||
class MediaGallery extends React.PureComponent {
|
||||
|
||||
static propTypes = {
|
||||
bigGalleryStyle: PropTypes.bool,
|
||||
sensitive: PropTypes.bool,
|
||||
standalone: PropTypes.bool,
|
||||
media: ImmutablePropTypes.list.isRequired,
|
||||
|
@ -240,6 +251,7 @@ class MediaGallery extends React.PureComponent {
|
|||
|
||||
static defaultProps = {
|
||||
standalone: false,
|
||||
bigGalleryStyle:false,
|
||||
};
|
||||
|
||||
state = {
|
||||
|
@ -305,12 +317,15 @@ class MediaGallery extends React.PureComponent {
|
|||
}
|
||||
|
||||
isFullSizeEligible() {
|
||||
const { media } = this.props;
|
||||
const { media, bigGalleryStyle } = this.props;
|
||||
if(bigGalleryStyle){
|
||||
return true;
|
||||
}
|
||||
return media.size === 1 && media.getIn([0, 'meta', 'small', 'aspect']);
|
||||
}
|
||||
|
||||
render () {
|
||||
const { media, intl, sensitive, height, defaultWidth, standalone, autoplay } = this.props;
|
||||
const { media, intl, sensitive, height, defaultWidth, standalone, autoplay, bigGalleryStyle } = this.props;
|
||||
const { visible } = this.state;
|
||||
|
||||
const width = this.state.width || defaultWidth;
|
||||
|
@ -335,7 +350,12 @@ class MediaGallery extends React.PureComponent {
|
|||
if (standalone && this.isFullSizeEligible()) {
|
||||
children = <Item standalone autoplay={autoplay} onClick={this.handleClick} attachment={media.get(0)} displayWidth={width} visible={visible} />;
|
||||
} else {
|
||||
children = media.take(4).map((attachment, i) => <Item key={attachment.get('id')} autoplay={autoplay} onClick={this.handleClick} attachment={attachment} index={i} size={size} displayWidth={width} visible={visible || uncached} />);
|
||||
children = media.take(4).map((attachment, i) =>{
|
||||
console.log('width', width);
|
||||
return (
|
||||
<Item key={attachment.get('id')} autoplay={autoplay} onClick={this.handleClick} attachment={attachment} index={i} size={size} displayWidth={width} visible={visible || uncached} />
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
if (uncached) {
|
||||
|
@ -354,13 +374,18 @@ class MediaGallery extends React.PureComponent {
|
|||
);
|
||||
}
|
||||
|
||||
console.log('style', style)
|
||||
|
||||
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>
|
||||
|
||||
<div className='count_medias text-right'>
|
||||
{size} médias <i className='fa fa-picture'></i>
|
||||
</div>
|
||||
{children}
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -287,6 +287,7 @@ class Status extends ImmutablePureComponent {
|
|||
|
||||
let { status, account, ...other } = this.props;
|
||||
|
||||
|
||||
if (status === null) {
|
||||
return null;
|
||||
}
|
||||
|
|
|
@ -15,11 +15,10 @@ const messages = defineMessages({
|
|||
});
|
||||
|
||||
const mapStateToProps = (state, { columnId }) => {
|
||||
const uuid = columnId;
|
||||
const columns = state.getIn(['settings', 'columns']);
|
||||
const index = columns.findIndex(c => c.get('uuid') === uuid);
|
||||
const onlyMedia = (columnId && index >= 0) ? columns.get(index).getIn(['params', 'other', 'onlyMedia']) : state.getIn(['settings', 'community', 'other', 'onlyMedia']);
|
||||
const timelineState = state.getIn(['timelines', `community${onlyMedia ? ':media' : ''}`]);
|
||||
console.log('columnId', columnId);
|
||||
|
||||
const onlyMedia = true;
|
||||
const timelineState = state.getIn(['timelines', `gallery${onlyMedia ? ':media' : ''}`]);
|
||||
|
||||
return {
|
||||
hasUnread: !!timelineState && timelineState.get('unread') > 0,
|
||||
|
@ -36,7 +35,7 @@ class GalleryTimeline extends React.PureComponent {
|
|||
};
|
||||
|
||||
static defaultProps = {
|
||||
onlyMedia: false,
|
||||
onlyMedia: true, // we are in a gallery, we only want medias
|
||||
};
|
||||
|
||||
static propTypes = {
|
||||
|
@ -120,9 +119,8 @@ class GalleryTimeline extends React.PureComponent {
|
|||
pinned={pinned}
|
||||
multiColumn={multiColumn}
|
||||
>
|
||||
<ColumnSettingsContainer columnId={columnId} />
|
||||
{/*<ColumnSettingsContainer columnId={columnId} />*/}
|
||||
</ColumnHeader>
|
||||
|
||||
<StatusListContainer
|
||||
trackScroll={!pinned}
|
||||
scrollKey={`community_timeline-${columnId}`}
|
||||
|
|
|
@ -11,6 +11,7 @@ const makeGetStatusIds = (pending = false) => createSelector([
|
|||
(state, { type }) => state.getIn(['timelines', type, pending ? 'pendingItems' : 'items'], ImmutableList()),
|
||||
(state) => state.get('statuses'),
|
||||
], (columnSettings, statusIds, statuses) => {
|
||||
|
||||
return statusIds.filter(id => {
|
||||
if (id === null) return true;
|
||||
|
||||
|
@ -35,6 +36,7 @@ const makeMapStateToProps = () => {
|
|||
const getStatusIds = makeGetStatusIds();
|
||||
const getPendingStatusIds = makeGetStatusIds(true);
|
||||
|
||||
|
||||
const mapStateToProps = (state, { timelineId }) => ({
|
||||
statusIds: getStatusIds(state, { type: timelineId }),
|
||||
isLoading: state.getIn(['timelines', timelineId, 'isLoading'], true),
|
||||
|
|
|
@ -60,7 +60,6 @@ import { previewState as previewVideoState } from './components/video_modal';
|
|||
// Dummy import, to make sure that <Status /> ends up in the application bundle.
|
||||
// Without this it ends up in ~8 very commonly used bundles.
|
||||
import '../../components/status';
|
||||
import GalleryTk from './components/bliss/gallery-tk';
|
||||
|
||||
const messages = defineMessages({
|
||||
beforeUnload: { id: 'ui.beforeunload', defaultMessage: 'Your draft will be lost if you leave Mastodon.' },
|
||||
|
@ -149,6 +148,7 @@ class SwitchingColumnsArea extends React.PureComponent {
|
|||
|
||||
render () {
|
||||
const { children, mobile } = this.props;
|
||||
console.log('children', children)
|
||||
const redirect = mobile ? <Redirect from='/' to='/timelines/home' exact /> : <Redirect from='/' to='/getting-started' exact />;
|
||||
|
||||
return (
|
||||
|
|
|
@ -17,6 +17,7 @@
|
|||
@import 'bliss/forms';
|
||||
@import 'bliss/accounts';
|
||||
@import 'bliss/statuses';
|
||||
@import 'bliss/gallery';
|
||||
@import 'bliss/boost';
|
||||
@import 'bliss/components';
|
||||
@import 'bliss/polls';
|
||||
|
|
|
@ -0,0 +1,4 @@
|
|||
.count_medias{
|
||||
text-align: right;
|
||||
|
||||
}
|
Loading…
Reference in New Issue