commit: 404d2050d3e96a05ec15e43f64cd24d5fca9e394
parent: 02cd2e42b245d7d81e4664729552fd94bb62b6d7
Author: Eugen Rochko <eugen@zeonfederated.com>
Date: Mon, 30 Jan 2017 18:04:15 +0100
Add explicit "load more" link to the bottom of StatusList and notifications
Diffstat:
6 files changed, 71 insertions(+), 6 deletions(-)
diff --git a/app/assets/javascripts/components/components/avatar.jsx b/app/assets/javascripts/components/components/avatar.jsx
@@ -131,8 +131,8 @@ const Avatar = React.createClass({
return (
<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' }} />
- <canvas ref={this.setCanvasRef} style={{ borderRadius: '4px', width: this.props.size, height: this.props.size, visibility: hovering ? 'hidden' : 'visible' }} />
+ <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, opacity: hovering ? '0' : '1' }} />
</div>
);
}
diff --git a/app/assets/javascripts/components/components/load_more.jsx b/app/assets/javascripts/components/components/load_more.jsx
@@ -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;
diff --git a/app/assets/javascripts/components/components/status.jsx b/app/assets/javascripts/components/components/status.jsx
@@ -73,7 +73,7 @@ const Status = React.createClass({
return (
<div style={{ cursor: 'default' }}>
<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> }} />
</div>
diff --git a/app/assets/javascripts/components/components/status_list.jsx b/app/assets/javascripts/components/components/status_list.jsx
@@ -3,6 +3,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
import PureRenderMixin from 'react-addons-pure-render-mixin';
import { ScrollContainer } from 'react-router-scroll';
import StatusContainer from '../containers/status_container';
+import LoadMore from './load_more';
const StatusList = React.createClass({
@@ -63,8 +64,19 @@ const StatusList = React.createClass({
this.node = c;
},
+ handleLoadMore (e) {
+ e.preventDefault();
+ this.props.onScrollToBottom();
+ },
+
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 = (
<div className='scrollable' ref={this.setRef}>
@@ -72,6 +84,8 @@ const StatusList = React.createClass({
{statusIds.map((statusId) => {
return <StatusContainer key={statusId} id={statusId} />;
})}
+
+ {loadMore}
</div>
</div>
);
diff --git a/app/assets/javascripts/components/features/notifications/index.jsx b/app/assets/javascripts/components/features/notifications/index.jsx
@@ -9,6 +9,7 @@ import { defineMessages, injectIntl } from 'react-intl';
import ColumnSettingsContainer from './containers/column_settings_container';
import { createSelector } from 'reselect';
import Immutable from 'immutable';
+import LoadMore from '../../components/load_more';
const messages = defineMessages({
title: { id: 'column.notifications', defaultMessage: 'Notifications' }
@@ -45,19 +46,42 @@ const Notifications = React.createClass({
handleScroll (e) {
const { scrollTop, scrollHeight, clientHeight } = e.target;
const offset = scrollHeight - scrollTop - clientHeight;
+ this._oldScrollPosition = scrollHeight - scrollTop;
if (250 > offset && !this.props.isLoading) {
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 () {
- 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 = (
- <div className='scrollable' onScroll={this.handleScroll}>
+ <div className='scrollable' onScroll={this.handleScroll} ref={this.setRef}>
<div>
{notifications.map(item => <NotificationContainer key={item.get('id')} notification={item} accountId={item.get('account')} />)}
+ {loadMore}
</div>
</div>
);
diff --git a/app/assets/stylesheets/components.scss b/app/assets/stylesheets/components.scss
@@ -743,3 +743,9 @@ button.active i.fa-retweet {
background: lighten($color1, 6%);
}
}
+
+.load-more {
+ &:hover {
+ background: lighten($color1, 6%);
+ }
+}
