From db5e7fd6b68c2f57813164eae347b6e2f4d99337 Mon Sep 17 00:00:00 2001
From: lilia <liliakai@gmail.com>
Date: Thu, 29 Jan 2015 20:59:08 -1000
Subject: [PATCH] Fix list view scrolling

Resize handlers are ugly. But not as ugly as scroll handlers. :p
Normalized some whitespace along the way.
---
 conversation.html              |  2 +-
 js/views/conversation_view.js  |  1 +
 js/views/inbox_view.js         |  1 +
 js/views/list_view.js          | 64 ++++++++++++++++++++--------------
 js/views/message_list_view.js  | 36 +++++++++----------
 stylesheets/_conversation.scss |  7 ++--
 stylesheets/_global.scss       |  1 -
 stylesheets/_index.scss        |  4 +++
 stylesheets/manifest.css       | 13 ++++---
 9 files changed, 75 insertions(+), 54 deletions(-)

diff --git a/conversation.html b/conversation.html
index 96f497c3d2d5..29d78f3aac84 100644
--- a/conversation.html
+++ b/conversation.html
@@ -32,7 +32,7 @@
 
             <div class='discussion-container'></div>
 
-            <div class="bottom-bar">
+            <div class="bottom-bar" id='footer'>
                 <form class='send'>
                     <div class='attachments'>
                         <div class='paperclip'></div>
diff --git a/js/views/conversation_view.js b/js/views/conversation_view.js
index bb0f87e935c8..74fe4f8afd1d 100644
--- a/js/views/conversation_view.js
+++ b/js/views/conversation_view.js
@@ -42,6 +42,7 @@
             if (this.model.id) {
                 this.model.fetchMessages({reset: true});
             }
+            window.addEventListener('resize', this.view.resize.bind(this.view));
         },
 
         events: {
diff --git a/js/views/inbox_view.js b/js/views/inbox_view.js
index caf6280e3ac2..d7d346c65e6e 100644
--- a/js/views/inbox_view.js
+++ b/js/views/inbox_view.js
@@ -45,6 +45,7 @@
                     this.conversations.get(message.conversationId).fetchMessages();
                 }.bind(this));
             }.bind(this));
+            window.addEventListener('resize', this.inbox.resize.bind(this.inbox));
         },
         events: {
             'keyup': 'keyup',
diff --git a/js/views/list_view.js b/js/views/list_view.js
index 1c59b905494d..96cee04515e4 100644
--- a/js/views/list_view.js
+++ b/js/views/list_view.js
@@ -16,33 +16,45 @@
 var Whisper = Whisper || {};
 
 (function () {
-  'use strict';
+    'use strict';
 
-  /*
-   * Generic list view that watches a given collection, wraps its members in
-   * a given child view and adds the child view elements to its own element.
-   */
-  Whisper.ListView = Backbone.View.extend({
-    tagName: 'ul',
-    itemView: Backbone.View,
-    initialize: function() {
-      this.listenTo(this.collection, 'change', this.render); // auto update
-      this.listenTo(this.collection, 'add', this.addOne);
-      this.listenTo(this.collection, 'reset', this.addAll);
-      this.listenTo(this.collection, 'all', this.render);
-    },
+    /*
+    * Generic list view that watches a given collection, wraps its members in
+    * a given child view and adds the child view elements to its own element.
+    */
+    Whisper.ListView = Backbone.View.extend({
+        tagName: 'ul',
+        itemView: Backbone.View,
+        initialize: function() {
+            this.listenTo(this.collection, 'change', this.render); // auto update
+            this.listenTo(this.collection, 'add', this.addOne);
+            this.listenTo(this.collection, 'reset', this.addAll);
+            this.listenTo(this.collection, 'all', this.render);
+        },
 
-    addOne: function(model) {
-      if (this.itemView) {
-        var view = new this.itemView({model: model});
-        this.$el.append(view.render().el);
-        this.$el.trigger('add');
-      }
-    },
+        addOne: function(model) {
+        if (this.itemView) {
+                var view = new this.itemView({model: model});
+                this.$el.append(view.render().el);
+                this.$el.trigger('add');
+            }
+        },
 
-    addAll: function() {
-      this.$el.html('');
-      this.collection.each(this.addOne, this);
-    }
-  });
+        addAll: function() {
+            this.$el.html('');
+            this.collection.each(this.addOne, this);
+            this.resize();
+        },
+
+        resize: function() {
+            var height = window.innerHeight - $('#header').height() - $('#footer').height();
+            if (this.$el.height() > height) {
+                this.$el.css('height', height + 'px');
+                this.$el.css('overflow-y', 'scroll');
+            } else {
+                this.$el.css('height', 'auto');
+                this.$el.css('overflow-y', 'auto');
+            }
+        }
+    });
 })();
diff --git a/js/views/message_list_view.js b/js/views/message_list_view.js
index dc23d87f596c..9b18dc362b23 100644
--- a/js/views/message_list_view.js
+++ b/js/views/message_list_view.js
@@ -16,23 +16,23 @@
 var Whisper = Whisper || {};
 
 (function () {
-  'use strict';
+    'use strict';
 
-  Whisper.MessageListView = Whisper.ListView.extend({
-    tagName: 'ul',
-    className: 'message-list',
-    itemView: Whisper.MessageView,
-    events: {
-      'add': 'scrollToBottom',
-      'update *': 'scrollToBottom'
-    },
-    scrollToBottom: function() {
-        // TODO: Avoid scrolling if user has manually scrolled up?
-        this.$el.scrollTop(this.el.scrollHeight);
-    },
-    addAll: function() {
-      Whisper.ListView.prototype.addAll.apply(this, arguments); // super()
-      this.scrollToBottom();
-    },
-  });
+    Whisper.MessageListView = Whisper.ListView.extend({
+        tagName: 'ul',
+        className: 'message-list',
+        itemView: Whisper.MessageView,
+        events: {
+            'add': 'scrollToBottom',
+            'update *': 'scrollToBottom'
+        },
+        scrollToBottom: function() {
+            // TODO: Avoid scrolling if user has manually scrolled up?
+            this.$el.scrollTop(this.el.scrollHeight);
+        },
+        addAll: function() {
+            Whisper.ListView.prototype.addAll.apply(this, arguments); // super()
+            this.scrollToBottom();
+        }
+    });
 })();
diff --git a/stylesheets/_conversation.scss b/stylesheets/_conversation.scss
index 7d4751a6e699..474f43f782e5 100644
--- a/stylesheets/_conversation.scss
+++ b/stylesheets/_conversation.scss
@@ -66,10 +66,11 @@ button {
 
 
 .message-list {
-  margin: 36px + 16px 0;
-  padding: 0;
+  max-height: 100%;
+  margin: 0;
+  padding: 1em 0;
   list-style: none;
-  font-weight: 300;
+  overflow-y: scroll;
 
   li {
     margin: 0 8px 16px;
diff --git a/stylesheets/_global.scss b/stylesheets/_global.scss
index 7bfb08b6e353..50ebe4454ff0 100644
--- a/stylesheets/_global.scss
+++ b/stylesheets/_global.scss
@@ -1,6 +1,5 @@
 * {
   box-sizing: border-box;
-  max-height: 100%;
 }
 
 body {
diff --git a/stylesheets/_index.scss b/stylesheets/_index.scss
index c9a087f70ee3..a55ea35517b9 100644
--- a/stylesheets/_index.scss
+++ b/stylesheets/_index.scss
@@ -2,6 +2,10 @@
   margin-top: 36px;
 }
 
+#contacts {
+  overflow-y: scroll;
+}
+
 .loading .gutter {
   // TODO: spinner
 }
diff --git a/stylesheets/manifest.css b/stylesheets/manifest.css
index 00d30e38436a..793f5a331258 100644
--- a/stylesheets/manifest.css
+++ b/stylesheets/manifest.css
@@ -3,8 +3,7 @@
   font-family: 'Roboto';
   src: url("/fonts/Roboto-Regular.ttf") format("truetype"); }
 * {
-  box-sizing: border-box;
-  max-height: 100%; }
+  box-sizing: border-box; }
 
 body {
   height: 100%;
@@ -26,6 +25,9 @@ body {
 .gutter {
   margin-top: 36px; }
 
+#contacts {
+  overflow-y: scroll; }
+
 .contact .checkbox {
   display: none; }
 
@@ -194,10 +196,11 @@ button {
   content: "✓"; }
 
 .message-list {
-  margin: 52px 0;
-  padding: 0;
+  max-height: 100%;
+  margin: 0;
+  padding: 1em 0;
   list-style: none;
-  font-weight: 300; }
+  overflow-y: scroll; }
   .message-list li {
     margin: 0 8px 16px; }
     .message-list li::after {