FEATURE: New expandable progress bar with jump buttons and jump to

arbitrary post.

app/assets/javascripts/discourse/controllers/topic-progress.js.es6

@@ -1,6 +1,48 @@
 export default Ember.ObjectController.extend({
   needs: ['topic'],
   progressPosition: null,
+  expanded: false,
+
+  actions: {
+    toggleExpansion: function() {
+      this.toggleProperty('expanded');
+      if (this.get('expanded')) {
+        this.set('toPostNumber', this.get('progressPosition'));
+      }
+    },
+
+    jumpPost: function() {
+      var postNumber = parseInt(this.get('toPostNumber'), 10);
+
+      // Validate the post number first
+      if (isNaN(postNumber) || postNumber < 1) {
+        postNumber = 1;
+      }
+      if (postNumber > this.get('highest_post_number')) {
+        postNumber = this.get('highest_post_number');
+      }
+      this.set('toPostNumber', postNumber);
+      this.jumpTo(this.get('model').urlForPostNumber(postNumber));
+    },
+
+    jumpTop: function() {
+      this.jumpTo(this.get('firstPostUrl'));
+    },
+
+    jumpBottom: function() {
+      this.jumpTo(this.get('lastPostUrl'));
+    }
+  },
+
+  // Route and close the expansion
+  jumpTo: function(url) {
+    this.set('expanded', false);
+    Discourse.URL.routeTo(url);
+  },
+
+  chevronClass: function() {
+    return this.get('expanded') ? 'fa-chevron-down' : 'fa-chevron-up';
+  }.property('expanded'),
 
   streamPercentage: function() {
     if (!this.get('postStream.loaded')) { return 0; }
@@ -10,7 +52,7 @@ export default Ember.ObjectController.extend({
   }.property('postStream.loaded', 'progressPosition', 'postStream.filteredPostsCount'),
 
   jumpTopDisabled: function() {
-    return (this.get('progressPosition') < 2);
+    return this.get('progressPosition') <= 3;
   }.property('progressPosition'),
 
   filteredPostCountChanged: function(){

app/assets/javascripts/discourse/controllers/topic_controller.js

@@ -166,11 +166,7 @@ Discourse.TopicController = Discourse.ObjectController.extend(Discourse.Selected
     },
 
     jumpTop: function() {
-      Discourse.URL.routeTo(this.get('firstPostUrl'));
+      this.get('controllers.topic-progress').send('jumpTop');
-    },
-
-    jumpBottom: function() {
-      Discourse.URL.routeTo(this.get('lastPostUrl'));
     },
 
     selectAll: function() {

app/assets/javascripts/discourse/lib/keyboard_shortcuts.js

@@ -84,7 +84,7 @@ Discourse.KeyboardShortcuts = Ember.Object.createWithMixins({
 
   _jumpTo: function(direction) {
     if ($('.container.posts').length) {
-      this.container.lookup('controller:topic').send(direction);
+      this.container.lookup('controller:topic-progress').send(direction);
     }
   },
 

app/assets/javascripts/discourse/routes/topic_from_params_route.js

@@ -31,7 +31,10 @@ Discourse.TopicFromParamsRoute = Discourse.Route.extend({
         highlightOnInsert: closest
       });
 
-      topicProgressController.set('progressPosition', closest);
+      topicProgressController.setProperties({
+        progressPosition: closest,
+        expanded: false
+      });
       Discourse.TopicView.jumpToPost(closest);
 
       if (topic.present('draft')) {

app/assets/javascripts/discourse/templates/topic-progress.js.handlebars

@@ -1,8 +1,22 @@
+{{#if expanded}}
+  <nav id='topic-progress-expanded'>
+    <button {{action jumpTop}} {{bind-attr disabled=jumpTopDisabled}} class='btn full'>
+      <i class="fa fa-arrow-circle-up"></i>
+      {{i18n topic.progress.go_top}}
+    </button>
+    <div class='jump-form'>
+      {{input value=toPostNumber}} <button {{action jumpPost}} class='btn'>{{i18n topic.progress.go}}</button>
+    </div>
+    <button {{action jumpBottom}} {{bind-attr disabled=jumpBottomDisabled}} class='btn full jump-bottom'>
+      <i class="fa fa-arrow-circle-down"></i>
+      {{i18n topic.progress.go_bottom}}
+    </button>
+  </nav>
+{{/if}}
 <nav id='topic-progress' title="{{i18n topic.progress.title}}" {{bind-attr class="hideProgress:hidden"}}>
-  <button id='jump-top' title="{{i18n topic.progress.jump_top}}" {{bind-attr disabled="jumpTopDisabled"}} {{action jumpTop}}><i class="fa fa-arrow-circle-up"></i></button>
   <div class='nums'>
     <h4>{{progressPosition}}</h4><span {{bind-attr class="hugeNumberOfPosts:hidden"}}> <span>{{i18n of_value}}</span> <h4>{{postStream.filteredPostsCount}}</h4></span>
   </div>
-  <button id='jump-bottom' {{bind-attr title="jumpToBottomTitle"}} {{bind-attr disabled="jumpBottomDisabled"}} {{action jumpBottom}}><i class="fa fa-arrow-circle-down"></i></button>
+  <i {{bind-attr class=":fa chevronClass"}}></i>
   <div class='bg'>&nbsp;</div>
 </nav>

app/assets/javascripts/discourse/views/topic-progress.js.es6

@@ -1,5 +1,7 @@
 export default Ember.View.extend({
   elementId: 'topic-progress-wrapper',
+  docked: false,
+  classNameBindings: ['docked'],
 
   _inserted: function() {
     // This get seems counter intuitive, but it's to trigger the observer on
@@ -71,6 +73,13 @@ export default Ember.View.extend({
         $topicProgressWrapper.css('bottom', '');
       }
     }
+    this.set('docked', isDocked);
+  },
+
+  click: function(e) {
+    if ($(e.target).parents('#topic-progress').length) {
+      this.get('controller').send('toggleExpansion');
+    }
   }
 
 });

app/assets/stylesheets/desktop/topic.scss

@@ -103,6 +103,39 @@ a:hover.reply-new {
   }
 }
 
+#topic-progress-expanded {
+  border: 1px solid scale-color-diff();
+  padding: 5px;
+  background: $secondary;
+  @include box-shadow(0 0px 2px rgba($primary, .2));
+
+  position: relative;
+  left: 345px;
+  width: 118px;
+  padding: 5px;
+
+  button.full {
+    width: 100%;
+    margin-bottom: 5px;
+  }
+  .jump-form {
+    input[type="text"] {
+      float: left;
+      width: 45px;
+      height: 20px;
+      text-align: center;
+      margin-bottom: 0;
+    }
+    button.btn {
+      float: right;
+      width: 55px;
+    }
+  }
+  button.btn.jump-bottom {
+    margin: 5px 0 0 0;
+  }
+}
+
 #topic-progress {
   position: relative;
   left: 345px;
@@ -115,6 +148,9 @@ a:hover.reply-new {
   width: 130px;
   height: 34px;
 
+  &:hover {
+    cursor: pointer;
+  }
   .nums {
     position: relative;
     top: 9px;
@@ -122,32 +158,11 @@ a:hover.reply-new {
     text-align: center;
     z-index: 1;
   }
-  button {
+  i.fa {
-    padding: 3px 1px 0 0;
-    cursor: pointer;
-    z-index: 1000;
     position: absolute;
-    top: 2px;
+    right: 8px;
-    left: 4px;
+    bottom: 9px;
-    border: 0;
+    z-index: 1;
-    background: none;
-    color: scale-color($primary, $lightness: 50%);
-    width: 50%;
-    text-align: left;
-    height: 30px;
-    margin: 0;
-    i {
-      font-size: 18px;
-    }
-    &:nth-of-type(2) {
-      right: 4px;
-      left: auto;
-      text-align: right;
-    }
-    &:disabled {
-    cursor: default;
-    color: scale-color($primary, $lightness: 50%);
-    }
   }
   h4 {
     display: inline;

app/assets/stylesheets/mobile/topic.scss

@@ -56,10 +56,41 @@
   outline: 1px solid transparent;
 }
 
+#topic-progress-expanded {
+  border: 1px solid scale-color-diff();
+  padding: 5px;
+  background: $secondary;
+  @include box-shadow(0 0px 2px rgba($primary, .2));
+
+  position: absolute;
+  bottom: 34px;
+  width: 118px;
+  padding: 5px;
+
+  button.full {
+    width: 100%;
+    margin-bottom: 5px;
+  }
+  .jump-form {
+    input[type="text"] {
+      float: left;
+      width: 45px;
+      height: 20px;
+      text-align: center;
+    }
+    button.btn {
+      float: right !important;
+      width: 55px;
+    }
+  }
+  button.btn.jump-bottom {
+    margin-top: 5px;
+    margin-bottom: 0;
+  }
+}
+
 #topic-progress {
-
   box-shadow: 0 0 3px rbga($primary, .7);
-
   position: relative;
   &.hidden {
     display: none;
@@ -76,40 +107,17 @@
     text-align: center;
     z-index: 1;
   }
-  button {
-    padding: 0 1px;
-    cursor: pointer;
-    z-index: 1000;
-    position: absolute;
-    top: 8px;
-    left: 4px;
-    border: 0;
-    background: none;
-    color: scale-color($primary, $lightness: 50%);
-
-    width: 60px;
-    text-align: left;
-    i {
-      font-size: 18px;
-    }
-    &:nth-of-type(2) {
-      right: 4px;
-      left: auto;
-      text-align: right;
-    }
-
-
-    &:disabled {
-
-      cursor: default;
-    color: scale-color($primary, $lightness: 50%);
-    }
-  }
   h4 {
     display: inline;
     font-size: 18px;
     line-height: 15px;
   }
+  i.fa {
+    position: absolute;
+    right: 8px;
+    bottom: 9px;
+    z-index: 1;
+  }
   .bg {
     position: absolute;
     top: 0;

config/locales/client.en.yml

@@ -771,8 +771,9 @@ en:
 
       progress:
         title: topic progress
-        jump_top: jump to first post (home key)
+        go_top: "go top"
-        jump_bottom: jump to last post (end key)
+        go_bottom: "go bottom"
+        go: "go"
         jump_bottom_with_number: "jump to post %{post_number}"
         total: total posts
         current: current post