UX: Show post count in jump to post modal

app/assets/javascripts/discourse/components/topic-navigation.js.es6

@@ -1,4 +1,5 @@
 import { observes } from 'ember-addons/ember-computed-decorators';
+import showModal from 'discourse/lib/show-modal';
 
 export default Ember.Component.extend({
   composerOpen: null,
@@ -93,19 +94,13 @@ export default Ember.Component.extend({
   },
 
   keyboardTrigger(e) {
-    if(e.type === "jump") {
-      bootbox.prompt(I18n.t('topic.progress.jump_prompt_long'), postIndex => {
-        if (postIndex === null) { return; }
-        this.sendAction('jumpToIndex', postIndex);
+    if (e.type === "jump") {
+      const controller = showModal('jump-to-post');
+      controller.setProperties({
+        topic: this.get('topic'),
+        postNumber: 1,
+        jumpToIndex: this.attrs.jumpToIndex
       });
-
-      // this is insanely hacky, for some reason shown event never fires,
-      // something is bust in bootbox
-      // TODO upgrade bootbox to see if this hack can be removed
-      setTimeout(()=>{
-        $('.bootbox.modal').trigger('shown');
-      },50);
-
     }
   },
 

app/assets/javascripts/discourse/controllers/jump-to-post.js.es6

@@ -0,0 +1,18 @@
+import ModalFunctionality from 'discourse/mixins/modal-functionality';
+
+export default Ember.Controller.extend(ModalFunctionality, {
+  model: null,
+  postNumber: null,
+
+  actions: {
+    jump() {
+      let where = parseInt(this.get('postNumber'));
+      if (where < 1) { where = 1; }
+      const max = this.get('topic.postStream.filteredPostsCount');
+      if (where > max) { where = max; }
+
+      this.jumpToIndex(where);
+      this.send('closeModal');
+    }
+  }
+});

app/assets/javascripts/discourse/templates/modal/jump-to-post.hbs

@@ -0,0 +1,11 @@
+{{#d-modal-body title="topic.progress.jump_prompt_long"}}
+  {{text-field value=postNumber insert-newline="jump"}}
+  <span class='input-hint-text'>
+    {{i18n "topic.progress.jump_prompt_of" count=topic.postStream.filteredPostsCount}}
+  </span>
+{{/d-modal-body}}
+
+<div class='modal-footer'>
+  {{d-button class="btn-primary" action="jump" label="composer.modal_ok"}}
+  {{d-button class="btn-danger" action="closeModal" label="composer.modal_cancel"}}
+</div>

app/assets/javascripts/discourse/templates/topic.hbs

@@ -70,7 +70,7 @@
         {{partial "selected-posts"}}
       </div>
 
-      {{#topic-navigation jumpToIndex="jumpToIndex" as |info|}}
+      {{#topic-navigation topic=model jumpToIndex=(action "jumpToIndex") as |info|}}
         {{#if info.renderAdminMenuButton}}
           {{topic-admin-menu-button
             topic=model

app/assets/stylesheets/common/base/modal.scss

@@ -11,6 +11,11 @@
 
 }
 
+.input-hint-text {
+  margin-left: 0.5em;
+  color: dark-light-diff($secondary, $primary, 30%, -35%);
+}
+
 .modal-backdrop {
   position: fixed;
   top: 0;

config/locales/client.en.yml

@@ -1478,6 +1478,7 @@ en:
         go: "go"
         jump_bottom: "jump to last post"
         jump_prompt: "jump to post"
+        jump_prompt_of: "of %{count} posts"
         jump_prompt_long: "What post would you like to jump to?"
         jump_bottom_with_number: "jump to post %{post_number}"
         total: total posts