Add explicit "load more" link to the bottom of StatusList and notifications

This commit is contained in:
Eugen Rochko 2017-01-30 18:04:15 +01:00
parent 02cd2e42b2
commit 404d2050d3
6 changed files with 71 additions and 6 deletions

View File

@ -131,8 +131,8 @@ const Avatar = React.createClass({
return ( return (
<div onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave} style={{ ...this.props.style, width: `${this.props.size}px`, height: `${this.props.size}px`, position: 'relative' }}> <div onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave} style={{ ...this.props.style, width: `${this.props.size}px`, height: `${this.props.size}px`, position: 'relative' }}>
<img ref={this.setImageRef} onLoad={this.handleLoad} src={this.props.src} width={this.props.size} height={this.props.size} alt='' style={{ position: 'absolute', top: '0', left: '0', visibility: hovering ? 'visible' : 'hidden', borderRadius: '4px' }} /> <img ref={this.setImageRef} onLoad={this.handleLoad} src={this.props.src} width={this.props.size} height={this.props.size} alt='' style={{ position: 'absolute', top: '0', left: '0', opacity: hovering ? '1' : '0', borderRadius: '4px' }} />
<canvas ref={this.setCanvasRef} style={{ borderRadius: '4px', width: this.props.size, height: this.props.size, visibility: hovering ? 'hidden' : 'visible' }} /> <canvas ref={this.setCanvasRef} style={{ borderRadius: '4px', width: this.props.size, height: this.props.size, opacity: hovering ? '0' : '1' }} />
</div> </div>
); );
} }

View File

@ -0,0 +1,21 @@
import { FormattedMessage } from 'react-intl';
const loadMoreStyle = {
display: 'block',
color: '#616b86',
textAlign: 'center',
padding: '15px',
textDecoration: 'none'
};
const LoadMore = ({ onClick }) => (
<a href='#' className='load-more' onClick={onClick} style={loadMoreStyle}>
<FormattedMessage id='status.load_more' defaultMessage='Load more' />
</a>
);
LoadMore.propTypes = {
onClick: React.PropTypes.func
};
export default LoadMore;

View File

@ -73,7 +73,7 @@ const Status = React.createClass({
return ( return (
<div style={{ cursor: 'default' }}> <div style={{ cursor: 'default' }}>
<div style={{ marginLeft: '68px', color: '#616b86', padding: '8px 0', paddingBottom: '2px', fontSize: '14px', position: 'relative' }}> <div style={{ marginLeft: '68px', color: '#616b86', padding: '8px 0', paddingBottom: '2px', fontSize: '14px', position: 'relative' }}>
<div style={{ position: 'absolute', 'left': '-26px'}}><i className='fa fa-fw fa-retweet'></i></div> <div style={{ position: 'absolute', 'left': '-26px'}}><i className='fa fa-fw fa-retweet' /></div>
<FormattedMessage id='status.reblogged_by' defaultMessage='{name} reblogged' values={{ name: <a onClick={this.handleAccountClick.bind(this, status.getIn(['account', 'id']))} href={status.getIn(['account', 'url'])} className='status__display-name muted'><strong style={{ color: '#616b86'}} dangerouslySetInnerHTML={displayNameHTML} /></a> }} /> <FormattedMessage id='status.reblogged_by' defaultMessage='{name} reblogged' values={{ name: <a onClick={this.handleAccountClick.bind(this, status.getIn(['account', 'id']))} href={status.getIn(['account', 'url'])} className='status__display-name muted'><strong style={{ color: '#616b86'}} dangerouslySetInnerHTML={displayNameHTML} /></a> }} />
</div> </div>

View File

@ -3,6 +3,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
import PureRenderMixin from 'react-addons-pure-render-mixin'; import PureRenderMixin from 'react-addons-pure-render-mixin';
import { ScrollContainer } from 'react-router-scroll'; import { ScrollContainer } from 'react-router-scroll';
import StatusContainer from '../containers/status_container'; import StatusContainer from '../containers/status_container';
import LoadMore from './load_more';
const StatusList = React.createClass({ const StatusList = React.createClass({
@ -63,8 +64,19 @@ const StatusList = React.createClass({
this.node = c; this.node = c;
}, },
handleLoadMore (e) {
e.preventDefault();
this.props.onScrollToBottom();
},
render () { render () {
const { statusIds, onScrollToBottom, trackScroll } = this.props; const { statusIds, onScrollToBottom, trackScroll, isLoading } = this.props;
let loadMore = '';
if (!isLoading && statusIds.size > 0) {
loadMore = <LoadMore onClick={this.handleLoadMore} />;
}
const scrollableArea = ( const scrollableArea = (
<div className='scrollable' ref={this.setRef}> <div className='scrollable' ref={this.setRef}>
@ -72,6 +84,8 @@ const StatusList = React.createClass({
{statusIds.map((statusId) => { {statusIds.map((statusId) => {
return <StatusContainer key={statusId} id={statusId} />; return <StatusContainer key={statusId} id={statusId} />;
})} })}
{loadMore}
</div> </div>
</div> </div>
); );

View File

@ -9,6 +9,7 @@ import { defineMessages, injectIntl } from 'react-intl';
import ColumnSettingsContainer from './containers/column_settings_container'; import ColumnSettingsContainer from './containers/column_settings_container';
import { createSelector } from 'reselect'; import { createSelector } from 'reselect';
import Immutable from 'immutable'; import Immutable from 'immutable';
import LoadMore from '../../components/load_more';
const messages = defineMessages({ const messages = defineMessages({
title: { id: 'column.notifications', defaultMessage: 'Notifications' } title: { id: 'column.notifications', defaultMessage: 'Notifications' }
@ -45,19 +46,42 @@ const Notifications = React.createClass({
handleScroll (e) { handleScroll (e) {
const { scrollTop, scrollHeight, clientHeight } = e.target; const { scrollTop, scrollHeight, clientHeight } = e.target;
const offset = scrollHeight - scrollTop - clientHeight; const offset = scrollHeight - scrollTop - clientHeight;
this._oldScrollPosition = scrollHeight - scrollTop;
if (250 > offset && !this.props.isLoading) { if (250 > offset && !this.props.isLoading) {
this.props.dispatch(expandNotifications()); this.props.dispatch(expandNotifications());
} }
}, },
componentDidUpdate (prevProps) {
if (this.node.scrollTop > 0 && (prevProps.notifications.size < this.props.notifications.size && prevProps.notifications.first() !== this.props.notifications.first() && !!this._oldScrollPosition)) {
this.node.scrollTop = this.node.scrollHeight - this._oldScrollPosition;
}
},
handleLoadMore (e) {
e.preventDefault();
this.props.dispatch(expandNotifications());
},
setRef (c) {
this.node = c;
},
render () { render () {
const { intl, notifications, trackScroll } = this.props; const { intl, notifications, trackScroll, isLoading } = this.props;
let loadMore = '';
if (!isLoading && notifications.size > 0) {
loadMore = <LoadMore onClick={this.handleLoadMore} />;
}
const scrollableArea = ( const scrollableArea = (
<div className='scrollable' onScroll={this.handleScroll}> <div className='scrollable' onScroll={this.handleScroll} ref={this.setRef}>
<div> <div>
{notifications.map(item => <NotificationContainer key={item.get('id')} notification={item} accountId={item.get('account')} />)} {notifications.map(item => <NotificationContainer key={item.get('id')} notification={item} accountId={item.get('account')} />)}
{loadMore}
</div> </div>
</div> </div>
); );

View File

@ -743,3 +743,9 @@ button.active i.fa-retweet {
background: lighten($color1, 6%); background: lighten($color1, 6%);
} }
} }
.load-more {
&:hover {
background: lighten($color1, 6%);
}
}