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