1 files changed, 93 insertions, 0 deletions
diff --git a/web/react/components/unread_channel_indicators.jsx b/web/react/components/unread_channel_indicators.jsx
new file mode 100644
index 000000000..852e0dbb7
--- /dev/null
+++ b/web/react/components/unread_channel_indicators.jsx
@@ -0,0 +1,93 @@
+// Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+// Indicators for the left sidebar which indicate if there's unread posts in a channel that is not shown
+// because it is either above or below the screen
+export default class UnreadChannelIndicators extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.getFirstLastUnreadChannels = this.getFirstLastUnreadChannels.bind(this);
+        this.onParentUpdate = this.onParentUpdate.bind(this);
+
+        this.state = this.getFirstLastUnreadChannels(props);
+    }
+
+    getFirstLastUnreadChannels(props) {
+        let firstUnreadChannel = null;
+        let lastUnreadChannel = null;
+
+        for (const unreadChannel of props.unreadChannels) {
+            if (!firstUnreadChannel) {
+                firstUnreadChannel = unreadChannel;
+            }
+            lastUnreadChannel = unreadChannel;
+        }
+
+        return {
+            firstUnreadChannel,
+            lastUnreadChannel
+        };
+    }
+
+    onParentUpdate(parentRefs) {
+        const container = $(React.findDOMNode(parentRefs.container));
+        const topUnreadIndicator = $(React.findDOMNode(this.refs.topIndicator));
+        const bottomUnreadIndicator = $(React.findDOMNode(this.refs.bottomIndicator));
+
+        if (this.state.firstUnreadChannel) {
+            var firstUnreadElement = $(React.findDOMNode(parentRefs[this.state.firstUnreadChannel.name]));
+
+            if (firstUnreadElement.position().top + firstUnreadElement.height() < 0) {
+                topUnreadIndicator.css('display', 'initial');
+            } else {
+                topUnreadIndicator.css('display', 'none');
+            }
+        } else {
+            topUnreadIndicator.css('display', 'none');
+        }
+
+        if (this.state.lastUnreadChannel) {
+            var lastUnreadElement = $(React.findDOMNode(parentRefs[this.state.lastUnreadChannel.name]));
+
+            if (lastUnreadElement.position().top > container.height()) {
+                bottomUnreadIndicator.css('display', 'initial');
+            } else {
+                bottomUnreadIndicator.css('display', 'none');
+            }
+        } else {
+            bottomUnreadIndicator.css('display', 'none');
+        }
+    }
+
+    componentWillReceiveProps(nextProps) {
+        this.setState(this.getFirstLastUnreadChannels(nextProps));
+    }
+
+    render() {
+        return (
+            <div>
+                <div
+                    ref='topIndicator'
+                    className='nav-pills__unread-indicator nav-pills__unread-indicator-top'
+                    style={{display: 'none'}}
+                >
+                    {'Unread post(s) above'}
+                </div>
+                <div
+                    ref='bottomIndicator'
+                    className='nav-pills__unread-indicator nav-pills__unread-indicator-bottom'
+                    style={{display: 'none'}}
+                >
+                    {'Unread post(s) below'}
+                </div>
+            </div>
+        );
+    }
+}
+
+UnreadChannelIndicators.propTypes = {
+
+    // a list of the unread channels displayed in the parent
+    unreadChannels: React.PropTypes.array.isRequired
+};