mirror of
https://github.com/codeninjasllc/discourse.git
synced 2024-11-27 17:46:05 -05:00
FEATURE: New expandable progress bar with jump buttons and jump to
arbitrary post.
This commit is contained in:
Robin Ward
parent
33e9bc68fc
commit
d37195796f
9 changed files with 156 additions and 68 deletions
|
|
@ -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(){
|
||||
|
|
|
|||
|
|
@ -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() {
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -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')) {
|
||||
|
|
|
|||
|
|
@ -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'> </div>
|
||||
</nav>
|
||||
|
|
|
|||
|
|
@ -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');
|
||||
}
|
||||
}
|
||||
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Reference in a new issue