When there are 2000 or more posts, only show the post number on the progress bar

Author: nlalonde

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

@@ -293,6 +293,14 @@ Discourse.TopicController = Discourse.ObjectController.extend(Discourse.Selected
     return false;
   }.property('postStream.loaded', 'currentPost', 'postStream.filteredPostsCount'),
 
+  hugeNumberOfPosts: function() {
+    return (this.get('postStream.filteredPostsCount') >= 1000);
+  }.property('postStream.filteredPostsCount'),
+
+  progressPositionTitle: function() {
+    return I18n.t("topic.progress.position", {current: this.get('progressPosition'), total: this.get('highest_post_number')});
+  }.property('progressPosition', 'highest_post_number'),
+
   deselectPost: function(post) {
     this.get('selectedPosts').removeObject(post);
 

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

@@ -51,8 +51,8 @@
           <div id='topic-progress-wrapper' {{bindAttr class="dockedCounter:docked"}}>
             <nav id='topic-progress' title="{{i18n topic.progress.title}}" {{bindAttr class="hideProgress:hidden"}}>
               <button id='jump-top' title="{{i18n topic.progress.jump_top}}" {{bindAttr disabled="jumpTopDisabled"}} {{action jumpTop}}><i class="icon-circle-arrow-up"></i></button>
-              <div class='nums'>
-                <h4 title="{{i18n topic.progress.current}}">{{progressPosition}}</h4> <span>{{i18n of_value}}</span> <h4>{{highest_post_number}}</h4>
+              <div class='nums' {{bindAttr title="progressPositionTitle"}}>
+                <h4>{{progressPosition}}</h4><span {{bindAttr class="hugeNumberOfPosts:hidden"}}> <span>{{i18n of_value}}</span> <h4>{{highest_post_number}}</h4></span>
               </div>
               <button id='jump-bottom' title="{{i18n topic.progress.jump_bottom}}" {{bindAttr disabled="jumpBottomDisabled"}} {{action jumpBottom}}><i class="icon-circle-arrow-down"></i></button>
               <div class='bg'>&nbsp;</div>

app/assets/stylesheets/desktop/topic.scss

@@ -132,8 +132,8 @@ a:hover.reply-new {
     border: 0;
     background: none;
     color: #666;
-    width: 50%;
     text-align: left;
+    width: 30px;
     height: 30px;
     margin: 0;
     i {

config/locales/client.en.yml

@@ -674,6 +674,7 @@ en:
         jump_bottom: jump to last post
         total: total posts
         current: current post
+        position: "post %{current} of %{total}"
 
       notifications:
         title: ''