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

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
index ee9fc7255..f912d9a99 100644
--- 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
new file mode 100644
index 000000000..1866fc100
--- /dev/null
+++ 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
index df5f0f2c2..21adfd578 100644
--- 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
index 69cc013f2..8223a312c 100644
--- 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
index b4593aaff..d3300acd5 100644
--- 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
index a09021a12..6810fae12 100644
--- 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%);
+  }
+}