Scroll down button: when scrolled up, or new non-visible message

FREEBIE

_locales/en/messages.json

@@ -3,6 +3,18 @@
       "message": "You left the group",
       "description": "Displayed when a user can't send a message because they have left the group"
     },
+    "scrollDown": {
+      "message": "Scroll to bottom of conversation",
+      "description": "Alt text for button to take user down to bottom of conversation, shown when user scrolls up"
+    },
+    "messageBelow": {
+      "message": "New message below",
+      "description": "Alt text for button to take user down to bottom of conversation with a new message out of screen"
+    },
+    "messagesBelow": {
+      "message": "New messages below",
+      "description": "Alt text for button to take user down to bottom of conversation with more than one message out of screen"
+    },
     "unreadMessage": {
       "message": "1 unread message",
       "description": "Text for unread message separator, just one message"

background.html

@@ -42,6 +42,11 @@
       </div>
     </div>
   </script>
+  <script type='text/x-tmpl-mustache' id='scroll-down-button-view'>
+    <button class='text {{ cssClass }}' alt='{{ moreBelow }}'>
+      <div class='icon'></div>
+    </button>
+  </script>
   <script type='text/x-tmpl-mustache' id='last-seen-indicator-view'>
     <div class='text'>
       {{ unreadMessages }}
@@ -636,6 +641,7 @@
 
   <script type='text/javascript' src='js/views/whisper_view.js'></script>
   <script type='text/javascript' src='js/views/last_seen_indicator_view.js'></script>
+  <script type='text/javascript' src='js/views/scroll_down_button_view.js'></script>
   <script type='text/javascript' src='js/views/debug_log_view.js'></script>
   <script type='text/javascript' src='js/views/toast_view.js'></script>
   <script type='text/javascript' src='js/views/attachment_preview_view.js'></script>

images/down.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><g fill="none" fill-rule="evenodd"><path d="M0 0h48v48H0z"/><g stroke="#000" stroke-width="3.78"><path d="M24 6.41v32.814M38.29 23.028L24 39.226 9.706 23.028"/></g></g></svg>

js/views/conversation_view.js

@@ -26,6 +26,7 @@
             this.$('.menu-list').toggle();
         }
     });
+
     var TimerMenuView = MenuView.extend({
         initialize: function() {
             this.render();
@@ -151,10 +152,14 @@
             'click .back': 'resetPanel',
             'click .microphone': 'captureAudio',
             'click .disappearing-messages': 'enableDisappearingMessages',
+            'click .scroll-down-button-view': 'scrollToBottom',
             'focus .send-message': 'focusBottomBar',
             'change .file-input': 'toggleMicrophone',
             'blur .send-message': 'unfocusBottomBar',
             'loadMore .message-list': 'fetchMessages',
+            'newOffscreenMessage .message-list': 'addScrollDownButtonWithCount',
+            'atBottom .message-list': 'hideScrollDownButton',
+            'farFromBottom .message-list': 'addScrollDownButton',
             'close .menu': 'closeMenu',
             'select .message-list .entry': 'messageDetail',
             'force-resize': 'forceUpdateMessageFieldSize',
@@ -218,6 +223,35 @@
             }
         },
 
+        addScrollDownButtonWithCount: function() {
+            this.updateScrollDownButton(1);
+        },
+
+        addScrollDownButton: function() {
+            if (!this.scrollDownButton) {
+                this.updateScrollDownButton();
+            }
+        },
+
+        updateScrollDownButton: function(count) {
+            if (this.scrollDownButton) {
+                this.scrollDownButton.increment(count);
+            } else {
+                this.scrollDownButton = new Whisper.ScrollDownButtonView({count: count});
+                this.scrollDownButton.render();
+                var container = this.$('.discussion-container');
+                console.log('showscrollDownButton', container);
+                container.append(this.scrollDownButton.el);
+            }
+        },
+
+        hideScrollDownButton: function() {
+            if (this.scrollDownButton) {
+                this.scrollDownButton.remove();
+                this.scrollDownButton = null;
+            }
+        },
+
         removeLastSeenIndicator: function() {
             if (this.lastSeenIndicator) {
                 this.lastSeenIndicator.remove();
@@ -225,6 +259,10 @@
             }
         },
 
+        scrollToBottom: function() {
+            this.view.scrollToBottom();
+        },
+
         updateLastSeenIndicator: function() {
             this.removeLastSeenIndicator();
 
@@ -239,6 +277,10 @@
 
                 unreadEl.insertBefore(this.$('#' + oldestUnread.get('id')));
                 var position = unreadEl[0].scrollIntoView(true);
+
+                if (this.view.bottomOffset === 0) {
+                    this.addScrollDownButtonWithCount(unreadCount);
+                }
             }
         },
 

js/views/message_list_view.js

@@ -17,18 +17,24 @@
             if (this.$el.scrollTop() === 0) {
                 this.$el.trigger('loadMore');
             }
+            if (this.bottomOffset === 0) {
+                this.$el.trigger('atBottom');
+            } else if (this.bottomOffset > this.outerHeight) {
+                this.$el.trigger('farFromBottom');
+            }
         },
         measureScrollPosition: function() {
             if (this.el.scrollHeight === 0) { // hidden
                 return;
             }
-            this.scrollPosition = this.$el.scrollTop() + this.$el.outerHeight();
+            this.outerHeight = this.$el.outerHeight();
+            this.scrollPosition = this.$el.scrollTop() + this.outerHeight;
             this.scrollHeight = this.el.scrollHeight;
             this.shouldStickToBottom = this.scrollPosition === this.scrollHeight;
             if (this.shouldStickToBottom) {
                 this.bottomOffset = 0;
             } else {
-                this.bottomOffset = this.scrollHeight - this.$el.scrollTop();
+                this.bottomOffset = this.scrollHeight - this.$el.scrollTop() - this.$el.outerHeight();
             }
         },
         resetScrollPosition: function() {
@@ -36,10 +42,13 @@
         },
         scrollToBottomIfNeeded: function() {
             if (this.bottomOffset === 0) {
-                this.$el.scrollTop(this.el.scrollHeight);
-                this.measureScrollPosition();
+                this.scrollToBottom();
             }
         },
+        scrollToBottom: function() {
+            this.$el.scrollTop(this.el.scrollHeight);
+            this.measureScrollPosition();
+        },
         addOne: function(model) {
             var view;
             if (model.isExpirationTimerUpdate()) {
@@ -54,6 +63,10 @@
 
             var index = this.collection.indexOf(model);
             this.measureScrollPosition();
+            if (model.get('unread') && this.bottomOffset > 0) {
+                this.$el.trigger('newOffscreenMessage');
+            }
+
             if (index === this.collection.length - 1) {
                 // add to the bottom.
                 this.$el.append(view.el);

js/views/scroll_down_button_view.js

@@ -0,0 +1,39 @@
+/*
+ * vim: ts=4:sw=4:expandtab
+ */
+(function () {
+    'use strict';
+    window.Whisper = window.Whisper || {};
+
+    Whisper.ScrollDownButtonView = Whisper.View.extend({
+        className: 'scroll-down-button-view',
+        templateName: 'scroll-down-button-view',
+
+        initialize: function(options) {
+          options = options || {};
+          this.count = options.count || 0;
+        },
+
+        increment: function(count) {
+            count = count || 0;
+            this.count += count;
+            this.render();
+        },
+
+        render_attributes: function() {
+            var cssClass = this.count > 0 ? 'new-messages' : '';
+
+            var moreBelow = i18n('scrollDown');
+            if (this.count > 1) {
+                moreBelow = i18n('messagesBelow');
+            } else if (this.count === 1) {
+                moreBelow = i18n('messageBelow');
+            }
+
+            return {
+                cssClass: cssClass,
+                moreBelow: moreBelow
+            };
+        }
+    });
+})();

stylesheets/_conversation.scss

@@ -696,3 +696,31 @@ li.entry .error-icon-container {
     background-color: $grey_l2;
   }
 }
+
+.discussion-container .scroll-down-button-view {
+  position: absolute;
+  right: 20px;
+  bottom: 10px;
+
+  button {
+    height: 44px;
+    width: 44px;
+    border-radius: 22px;
+    text-align: center;
+    background-color: $grey_l;
+    border: none;
+
+    .icon {
+      @include color-svg('/images/down.svg', $grey_l3);
+      height: 100%;
+      width: 100%;
+    }
+
+    &.new-messages  {
+      background-color: $grey_l4;
+      .icon {
+        @include color-svg('/images/down.svg', black);
+      }
+    }
+  }
+}

stylesheets/android-dark.scss

@@ -207,4 +207,21 @@ $text-dark: #CCCCCC;
     margin: 2em;
     background-color: $grey-dark_l2;
   }
+
+  .discussion-container .scroll-down-button-view {
+    button {
+      background-color: $grey_l4;
+
+      .icon {
+        @include color-svg('/images/down.svg', black);
+      }
+
+      &.new-messages  {
+        background-color: $grey_l2;
+        .icon {
+          @include color-svg('/images/down.svg', $grey_l4);
+        }
+      }
+    }
+  }
 }

stylesheets/manifest.css

@@ -1506,6 +1506,30 @@ li.entry .error-icon-container {
     margin: 1em;
     background-color: #d9d9d9; }
 
+.discussion-container .scroll-down-button-view {
+  position: absolute;
+  right: 20px;
+  bottom: 10px; }
+  .discussion-container .scroll-down-button-view button {
+    height: 44px;
+    width: 44px;
+    border-radius: 22px;
+    text-align: center;
+    background-color: #f3f3f3;
+    border: none; }
+    .discussion-container .scroll-down-button-view button .icon {
+      -webkit-mask: url("/images/down.svg") no-repeat center;
+      -webkit-mask-size: 100%;
+      background-color: silver;
+      height: 100%;
+      width: 100%; }
+    .discussion-container .scroll-down-button-view button.new-messages {
+      background-color: #8d8d8d; }
+      .discussion-container .scroll-down-button-view button.new-messages .icon {
+        -webkit-mask: url("/images/down.svg") no-repeat center;
+        -webkit-mask-size: 100%;
+        background-color: black; }
+
 .ios #header {
   height: 64px;
   border-bottom: 1px solid rgba(0, 0, 0, 0.05);
@@ -2113,5 +2137,17 @@ li.entry .error-icon-container {
   .android-dark .message-list .last-seen-indicator-view .text {
     margin: 2em;
     background-color: #292929; }
+  .android-dark .discussion-container .scroll-down-button-view button {
+    background-color: #8d8d8d; }
+    .android-dark .discussion-container .scroll-down-button-view button .icon {
+      -webkit-mask: url("/images/down.svg") no-repeat center;
+      -webkit-mask-size: 100%;
+      background-color: black; }
+    .android-dark .discussion-container .scroll-down-button-view button.new-messages {
+      background-color: #d9d9d9; }
+      .android-dark .discussion-container .scroll-down-button-view button.new-messages .icon {
+        -webkit-mask: url("/images/down.svg") no-repeat center;
+        -webkit-mask-size: 100%;
+        background-color: #8d8d8d; }
 
 /*# sourceMappingURL=manifest.css.map */

test/index.html

@@ -16,6 +16,11 @@
   </div>
   <div id="render-ios" class='index' style="width: 800; height: 500; margin:10px; border: solid 1px black;">
   </div>
+  <script type='text/x-tmpl-mustache' id='scroll-down-button-view'>
+    <button class='text {{ cssClass }}' alt='{{ moreBelow }}'>
+      <div class='icon'></div>
+    </button>
+  </script>
   <script type='text/x-tmpl-mustache' id='last-seen-indicator-view'>
     <div class='text'>
       {{ unreadMessages }}
@@ -570,8 +575,8 @@
   <script type='text/javascript' src='../js/views/identicon_svg_view.js' data-cover></script>
   <script type='text/javascript' src='../js/views/settings_view.js' data-cover></script>
   <script type='text/javascript' src='../js/views/last_seen_indicator_view.js' data-cover></script>
+  <script type='text/javascript' src='../js/views/scroll_down_button_view.js' data-cover></script>
 
-  <script type="text/javascript" src="libphonenumber_util_test.js"></script>
   <script type="text/javascript" src="views/whisper_view_test.js"></script>
   <script type="text/javascript" src="views/group_update_view_test.js"></script>
   <script type="text/javascript" src="views/message_view_test.js"></script>
@@ -581,8 +586,12 @@
   <script type="text/javascript" src="views/conversation_search_view_test.js"></script>
   <script type="text/javascript" src="views/network_status_view_test.js"></script>
   <script type="text/javascript" src="views/last_seen_indicator_view_test.js"></script>
+  <script type='text/javascript' src='views/scroll_down_button_view_test.js'></script>
+
   <script type="text/javascript" src="models/conversations_test.js"></script>
   <script type="text/javascript" src="models/messages_test.js"></script>
+
+  <script type="text/javascript" src="libphonenumber_util_test.js"></script>
   <script type="text/javascript" src="storage_test.js"></script>
   <script type="text/javascript" src="keychange_listener_test.js"></script>
   <script type="text/javascript" src="emoji_util_test.js"></script>

test/views/last_seen_indicator_view_test.js

@@ -2,7 +2,7 @@
  * vim: ts=4:sw=4:expandtab
  */
 describe('LastSeenIndicatorView', function() {
-    // TODO: in electron branch, wheere we have access to real i18n, test rendered HTML
+    // TODO: in electron branch, where we have access to real i18n, test rendered HTML
 
     it('renders provided count', function() {
         var view = new Whisper.LastSeenIndicatorView({count: 10});

test/views/scroll_down_button_view_test.js

@@ -0,0 +1,40 @@
+/*
+ * vim: ts=4:sw=4:expandtab
+ */
+describe('ScrollDownButtonView', function() {
+    // TODO: in electron branch, where we have access to real i18n, uncomment assertions against real strings
+
+    it('renders with count = 0', function() {
+        var view = new Whisper.ScrollDownButtonView();
+        view.render();
+        assert.equal(view.count, 0);
+        // assert.match(view.$el.html(), /Scroll to bottom/);
+    });
+
+    it('renders with count = 1', function() {
+        var view = new Whisper.ScrollDownButtonView({count: 1});
+        view.render();
+        assert.equal(view.count, 1);
+        assert.match(view.$el.html(), /new-messages/);
+        // assert.match(view.$el.html(), /New message below/);
+    });
+
+    it('renders with count = 2', function() {
+        var view = new Whisper.ScrollDownButtonView({count: 2});
+        view.render();
+        assert.equal(view.count, 2);
+
+        assert.match(view.$el.html(), /new-messages/);
+        // assert.match(view.$el.html(), /New messages below/);
+    });
+
+    it('increments count and re-renders', function() {
+        var view = new Whisper.ScrollDownButtonView();
+        view.render();
+        assert.equal(view.count, 0);
+        assert.notMatch(view.$el.html(), /new-messages/);
+        view.increment(1);
+        assert.equal(view.count, 1);
+        assert.match(view.$el.html(), /new-messages/);
+    });
+});