Fix chat scrolling

clientapp/helpers/chatHelpers.js

@@ -2,20 +2,11 @@
 "use strict";
 
 var _ = require('underscore');
-var raf = require('raf-component');
 
 
 module.exports = {
     initializeScroll: function () {
-        var check = _.bind(_.throttle(this.handleScroll, 100), this);
         var self = this;
-
-        function animate() {
-            self.rafID = raf(animate);
-            check();
-        }
-        animate();
-
         this.pinnedToBottom = true;
         this.lastScrollTop = 0;
     },
@@ -29,7 +20,6 @@ module.exports = {
     scrollPageUnload: function () {
         this.savePosition();
         this.trimOldChats();
-        raf.cancel(this.rafID);
     },
     savePosition: function () {
         this.lastScrollPosition = this.pinnedToBottom ? '' : this.$scrollContainer.scrollTop();
@@ -46,7 +36,7 @@ module.exports = {
             }, 500);
         }
     },
-    handleScroll: function (e) {
+    handleScroll: _.debounce(function (e) {
         var scrollTop = this.$scrollContainer[0].scrollTop;
         var direction = scrollTop >= this.lastScrollTop ? 'down' : 'up';
         if (direction === 'up' && !this.isBottom()) {
@@ -55,7 +45,7 @@ module.exports = {
             this.handleAtBottom();
         }
         this.lastScrollTop = scrollTop;
-    },
+    }, 500),
     scrollIfPinned: function (animate) {
         if (this.pinnedToBottom) this.scrollToBottom(animate);
     },

clientapp/pages/chat.js

@@ -39,7 +39,7 @@ module.exports = BasePage.extend(chatHelpers).extend({
         formattedTZO: 'header .tzo'
     },
     classBindings: {
-        onCall: '.conversation'
+        onCall: '.messages'
     },
     show: function (animation) {
         BasePage.prototype.show.apply(this, [animation]);

clientapp/templates.js

@@ -129,7 +129,7 @@ exports.includes.mucListItem = function anonymous(locals) {
 exports.includes.mucWrappedMessage = function anonymous(locals) {
     var buf = [];
     with (locals || {}) {
-        buf.push('<li><div class="sender"><div class="name">' + jade.escape(null == (jade.interp = message.from.resource) ? "" : jade.interp) + '</div><a href="#" class="messageAvatar"><!--img(src=message.sender.avatar, alt=message.sender.displayName, data-placement="below")--></a></div><div class="messageWrapper"><div' + jade.attrs({
+        buf.push('<li><div class="sender"><div class="name">' + jade.escape(null == (jade.interp = message.from.resource) ? "" : jade.interp) + '</div></div><div class="messageWrapper"><div' + jade.attrs({
             id: "chat" + message.cid,
             "class": "message" + " " + message.classList
         }, {

clientapp/templates/includes/mucWrappedMessage.jade

@@ -1,7 +1,5 @@
 li
   .sender
     .name=message.from.resource
-    a.messageAvatar(href='#')
-      //img(src=message.sender.avatar, alt=message.sender.displayName, data-placement="below")
   .messageWrapper
     include mucBareMessage

package.json

@@ -22,8 +22,7 @@
         "human-view": "1.2.0",
         "templatizer": "0.1.2",
         "underscore": "1.5.1",
-        "raf-component": "1.1.1",
-        "stanza.io": "2.9.2",
+        "stanza.io": "2.9.3",
         "notify.js": "0.0.3",
         "wildemitter": "0.0.5",
         "attachmediastream": "1.0.1",

public/css/components/layout.styl

@@ -31,8 +31,3 @@ a
   left: 201px
   height: 100%
   borderbox()
-
-  .scroll-container
-    height: 100%
-    overflow-y: auto
-    -webkit-overflow-scrolling: touch

public/css/otalk.css

@@ -198,11 +198,6 @@ a:active {
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
 }
-#pages .scroll-container {
-  height: 100%;
-  overflow-y: auto;
-  -webkit-overflow-scrolling: touch;
-}
 input[type=text],
 input[type=email],
 input[type=password],
@@ -869,9 +864,10 @@ button.secondary:hover:not(:disabled) {
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
+  overflow-y: auto;
+  overflow-x: hidden;
 }
 .conversation {
-  position: relative;
   bottom: 0px;
   left: 0px;
   right: 0px;
@@ -995,16 +991,18 @@ button.secondary:hover:not(:disabled) {
 .messages {
   margin: 0px;
   padding: 0px;
-  padding-top: 130px;
   overflow-y: auto;
   overflow-x: hidden;
-  position: relative;
-  bottom: 75px;
+  position: absolute;
+  top: 0px;
+  bottom: 0px;
+  padding-top: 55px;
+  padding-bottom: 55px;
   width: 100%;
-  display: table;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
+  -webkit-overflow-scrolling: touch;
 }
 .messages li {
   position: relative;
@@ -1048,19 +1046,20 @@ button.secondary:hover:not(:disabled) {
   color: #565656;
   padding: 5px;
   text-align: right;
-  background-color: #f7f7f7;
-  border-top: 1px solid #e1e1e1;
+  border-top: 1px solid #eee;
   white-space: nowrap;
+  vertical-align: middle;
 }
 .messages .sender .name {
   padding-left: 10px;
+  vertical-align: middle;
 }
 .messages .messageWrapper {
   display: table-cell;
   padding: 5px;
   border-top: 1px solid #eee;
   width: 99%;
-  vertical-align: top;
+  vertical-align: middle;
 }
 .messages .message {
   font-size: 12px;
@@ -1260,7 +1259,6 @@ button.secondary:hover:not(:disabled) {
   }
 }
 #wrapper {
-  position: relative !important;
   transition: all 1s;
 }
 #calls {

public/css/pages/callbar.styl

@@ -4,7 +4,6 @@
 $callHeight = 80px
 
 #wrapper
-  position: relative !important 
   transition: all 1s
 
   //&.hasActiveCall

public/css/pages/chat.styl

@@ -4,9 +4,10 @@
 .page.chat
   padding-top: 0px
   borderbox()
+  overflow-y: auto
+  overflow-x: hidden
 
 .conversation
-  position: relative
   bottom: 0px
   left: 0px
   right: 0px
@@ -115,14 +116,16 @@
 .messages
   margin: 0px
   padding: 0px
-  padding-top: 130px
   overflow-y: auto
   overflow-x: hidden
-  position: relative
-  bottom: 75px
+  position: absolute
+  top: 0px
+  bottom: 0px
+  padding-top: 55px
+  padding-bottom: 55px
   width: 100%
-  display: table
   borderbox()
+  -webkit-overflow-scrolling: touch
 
   li
     position: relative
@@ -157,19 +160,20 @@
     color: $gray
     padding: 5px
     text-align: right
-    background-color: #f7f7f7
-    border-top: 1px solid #e1e1e1
+    border-top: 1px solid #eee
     white-space: nowrap
+    vertical-align: middle
 
     .name
       padding-left: 10px
+      vertical-align: middle
 
   .messageWrapper
     display: table-cell
     padding: 5px
     border-top: 1px solid #eee
     width: 99%
-    vertical-align: top
+    vertical-align: middle
 
   .message
     font-size: $font-size-small

public/x-manifest.cache

@@ -1,5 +1,5 @@
 CACHE MANIFEST
-# 0.0.1 1387474672583
+# 0.0.1 1387496053745
 
 CACHE:
 /app.js