pmuch finished chat

ZeusWPI · Oct 28, 2015 · df8457d · df8457d
1 parent 818471f
commit df8457d
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 1 deletion.
diff --git a/app/assets/javascripts/components/chat.js b/app/assets/javascripts/components/chat.js
@@ -5,7 +5,7 @@ class ChatMessage extends Component {
     var mb = $( ".messagebox" )[0];
     // Difference yields height of div if scrolled to bottom
     var diff = mb.scrollHeight - mb.scrollTop;
-    this.doScroll = (diff == $( ".messagebox" ).height())
+    this.doScroll = (diff == $( ".messagebox" ).outerHeight())
   }
 
   componentDidMount() {
@@ -96,10 +96,27 @@ class Chat extends Component {
     return (
       <div className="chatpanel">
         <MessageBox messages={this.props.messages}/>
+        <div id="new_messages" className="hide">
+        <span className="glyphicon glyphicon-arrow-down" aria-hidden="true"> </span>
+         MORE MESSAGES
+        <span className="glyphicon glyphicon-arrow-down" aria-hidden="true"> </span>
+        </div>
         <MessageForm onSend={this.props.onSend}/>
       </div>
     );
   }
+
+  componentDidMount() {
+    $( ".messagebox" ).scroll(function() {
+      var diff = this.scrollHeight - this.scrollTop;
+      if(diff == $( ".messagebox" ).outerHeight()) {
+        $( "#new_messages" ).addClass("hide");
+      } else {
+        $( "#new_messages" ).removeClass("hide");
+      }
+    });
+  }
+
 }
 
 export default Chat;
diff --git a/app/assets/stylesheets/chat.scss b/app/assets/stylesheets/chat.scss
@@ -20,5 +20,16 @@
 
 .messagebox {
   height: calc(100% - 34px);
+  padding: 0 0 6px;
   overflow: auto;
 }
+
+#new_messages {
+  position: absolute;
+  bottom: 34px;
+  text-align: center;
+  width: 100%;
+  background-color: rgba(0, 0, 0, 0.6);
+  color: white;
+  border-radius: 15px 15px 0 0;
+}