diff --git a/app/assets/javascripts/discourse/controllers/topic-progress.js.es6 b/app/assets/javascripts/discourse/controllers/topic-progress.js.es6 index d24ee08c3..7de0f178b 100644 --- a/app/assets/javascripts/discourse/controllers/topic-progress.js.es6 +++ b/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(){ diff --git a/app/assets/javascripts/discourse/controllers/topic_controller.js b/app/assets/javascripts/discourse/controllers/topic_controller.js index bc8dd7b81..6b1220677 100644 --- a/app/assets/javascripts/discourse/controllers/topic_controller.js +++ b/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')); - }, - - jumpBottom: function() { - Discourse.URL.routeTo(this.get('lastPostUrl')); + this.get('controllers.topic-progress').send('jumpTop'); }, selectAll: function() { diff --git a/app/assets/javascripts/discourse/lib/keyboard_shortcuts.js b/app/assets/javascripts/discourse/lib/keyboard_shortcuts.js index e1f1af80c..3170a21f0 100644 --- a/app/assets/javascripts/discourse/lib/keyboard_shortcuts.js +++ b/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); } }, diff --git a/app/assets/javascripts/discourse/routes/topic_from_params_route.js b/app/assets/javascripts/discourse/routes/topic_from_params_route.js index 667819a07..4dc652ce0 100644 --- a/app/assets/javascripts/discourse/routes/topic_from_params_route.js +++ b/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')) { diff --git a/app/assets/javascripts/discourse/templates/topic-progress.js.handlebars b/app/assets/javascripts/discourse/templates/topic-progress.js.handlebars index 958db65e6..ea0c89e1b 100644 --- a/app/assets/javascripts/discourse/templates/topic-progress.js.handlebars +++ b/app/assets/javascripts/discourse/templates/topic-progress.js.handlebars @@ -1,8 +1,22 @@ +{{#if expanded}} + +{{/if}} diff --git a/app/assets/javascripts/discourse/views/topic-progress.js.es6 b/app/assets/javascripts/discourse/views/topic-progress.js.es6 index de65608b1..2e6492ef6 100644 --- a/app/assets/javascripts/discourse/views/topic-progress.js.es6 +++ b/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'); + } } }); diff --git a/app/assets/stylesheets/desktop/topic.scss b/app/assets/stylesheets/desktop/topic.scss index e93d62bc2..027b92197 100644 --- a/app/assets/stylesheets/desktop/topic.scss +++ b/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 { - padding: 3px 1px 0 0; - cursor: pointer; - z-index: 1000; + i.fa { position: absolute; - top: 2px; - left: 4px; - border: 0; - 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%); - } + right: 8px; + bottom: 9px; + z-index: 1; } h4 { display: inline; diff --git a/app/assets/stylesheets/mobile/topic.scss b/app/assets/stylesheets/mobile/topic.scss index e3aa0327b..ca7088c55 100644 --- a/app/assets/stylesheets/mobile/topic.scss +++ b/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; diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml index 5d8522054..ce9c20e1b 100644 --- a/config/locales/client.en.yml +++ b/config/locales/client.en.yml @@ -771,8 +771,9 @@ en: progress: title: topic progress - jump_top: jump to first post (home key) - jump_bottom: jump to last post (end key) + go_top: "go top" + go_bottom: "go bottom" + go: "go" jump_bottom_with_number: "jump to post %{post_number}" total: total posts current: current post