BUGFIX: progress bar was hidden when the composer was open

This commit is contained in:
Régis Hanol 2014-06-04 13:03:14 +02:00
parent fc8eef6d98
commit 7655066967
10 changed files with 77 additions and 57 deletions

View file

@ -61,7 +61,8 @@ export default Discourse.Controller.extend({
}, },
updateDraftStatus: function() { updateDraftStatus: function() {
this.get('model').updateDraftStatus(); var c = this.get('model');
if (c) { c.updateDraftStatus(); }
}, },
appendText: function(text) { appendText: function(text) {

View file

@ -638,7 +638,4 @@ Discourse.TopicController = Discourse.ObjectController.extend(Discourse.Selected
} }
} }
}); });

View file

@ -292,7 +292,7 @@ Discourse.Composer = Discourse.Model.extend({
opts: opts:
action - The action we're performing: edit, reply or createTopic action - The action we're performing: edit, reply or createTopic
post - The post we're replying to, if present post - The post we're replying to, if present
topic - The topic we're replying to, if present topic - The topic we're replying to, if present
quote - If we're opening a reply from a quote, the quote we're making quote - If we're opening a reply from a quote, the quote we're making
*/ */
open: function(opts) { open: function(opts) {

View file

@ -104,7 +104,6 @@
{{i18n composer.saved_draft}} {{i18n composer.saved_draft}}
</div> </div>
</div> </div>
</div> </div>
{{/if}} {{/if}}

View file

@ -57,9 +57,11 @@
<div class="container posts"> <div class="container posts">
{{view Discourse.SelectedPostsView}} {{view Discourse.SelectedPostsView}}
<div class="row"> <div class="row">
<section class="topic-area" id='topic' data-topic-id='{{unbound id}}'> <section class="topic-area" id='topic' data-topic-id='{{unbound id}}'>
<div class='posts-wrapper'> <div class='posts-wrapper'>
<div id='topic-progress-wrapper' {{bind-attr class="dockedCounter:docked"}}> <div id='topic-progress-wrapper' {{bind-attr class="dockedCounter:docked"}}>
<nav id='topic-progress' title="{{i18n topic.progress.title}}" {{bind-attr class="hideProgress:hidden"}}> <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> <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>

View file

@ -26,8 +26,8 @@ Discourse.ComposerMessagesView = Ember.CollectionView.extend({
}, },
didInsertElement: function() { didInsertElement: function() {
var replyControl = $('#reply-control'); var composerHeight = $('#reply-control').height() || 0;
this.$().css('bottom', (replyControl.height() || 0) + "px").slideDown('fast'); this.$().css('bottom', composerHeight + "px").show();
} }
}) })
}); });

View file

@ -53,23 +53,26 @@ Discourse.ComposerView = Discourse.View.extend(Ember.Evented, {
Ember.run.scheduleOnce('afterRender', this, 'refreshPreview'); Ember.run.scheduleOnce('afterRender', this, 'refreshPreview');
}.observes('model.reply', 'model.hidePreview'), }.observes('model.reply', 'model.hidePreview'),
movePanels: function(sizePx) {
$('.composer-popup').css('bottom', sizePx);
},
focusIn: function() { focusIn: function() {
var controller = this.get('controller'); var controller = this.get('controller');
if (controller) controller.updateDraftStatus(); if (controller) controller.updateDraftStatus();
}, },
movePanels: function(sizePx) {
$('#main-outlet').css('padding-bottom', sizePx);
$('.composer-popup').css('bottom', sizePx);
},
resize: function() { resize: function() {
// this still needs to wait on animations, need a clean way to do that var self = this;
return Em.run.schedule('afterRender', function() { return Em.run.schedule('afterRender', function() {
var replyControl = $('#reply-control'); var $replyControl = $('#reply-control');
var h = replyControl.height() || 0; // wait for the transitions
var sizePx = "" + h + "px"; $replyControl.on("transitionend", function() {
$('#main-outlet').css('padding-bottom', sizePx); var h = $replyControl.height() || 0;
$('.composer-popup').css('bottom', sizePx); var sizePx = "" + h + "px";
if (self.movePanels) { self.movePanels(sizePx); }
});
}); });
}.observes('model.composeState'), }.observes('model.composeState'),

View file

@ -39,7 +39,7 @@ Discourse.TopicView = Discourse.View.extend(Discourse.Scrolling, {
this._topicProgress = $topicProgress; this._topicProgress = $topicProgress;
// CAREFUL WITH THIS AXE // CAREFUL WITH THIS AXE
// offsetWidth will cause a reflow, this ensures it only happens once // offsetWidth will cause a reflow, this ensures it only happens once
// in future it may make sense to move this offscreen to to the measurement // in future it may make sense to move this offscreen to do the measurement
Discourse.TopicView._progressWidth = Discourse.TopicView._progressWidth || $topicProgress[0].offsetWidth; Discourse.TopicView._progressWidth = Discourse.TopicView._progressWidth || $topicProgress[0].offsetWidth;
} }
@ -155,7 +155,6 @@ Discourse.TopicView = Discourse.View.extend(Discourse.Scrolling, {
@method scrolled @method scrolled
**/ **/
scrolled: function(){ scrolled: function(){
var offset = window.pageYOffset || $('html').scrollTop(); var offset = window.pageYOffset || $('html').scrollTop();
if (!this.get('docAt')) { if (!this.get('docAt')) {
var title = $('#topic-title'); var title = $('#topic-title');
@ -172,14 +171,39 @@ Discourse.TopicView = Discourse.View.extend(Discourse.Scrolling, {
headerController.set('showExtraInfo', topic.get('postStream.firstPostNotLoaded')); headerController.set('showExtraInfo', topic.get('postStream.firstPostNotLoaded'));
} }
// Dock the counter if necessary // dock the counter if necessary
var $lastPost = $('article[data-post-id=' + topic.get('postStream.lastPostId') + "]"); var maximumOffset = $('#topic-footer-buttons').offset(),
var lastPostOffset = $lastPost.offset(); composerHeight = $('#reply-control').height() || 0,
if (!lastPostOffset) { $topicProgressWrapper = $('#topic-progress-wrapper'),
this.set('controller.dockedCounter', false); style = $topicProgressWrapper.attr('style') || '',
return; isDocked = false;
if (maximumOffset) {
var threshold = maximumOffset.top,
windowHeight = $(window).height(),
topicProgressHeight = $('#topic-progress').height();
isDocked = offset >= threshold - windowHeight + topicProgressHeight + composerHeight;
} }
this.set('controller.dockedCounter', (offset >= (lastPostOffset.top + $lastPost.height()) - $(window).height()));
if (composerHeight > 0) {
if (isDocked) {
if (style.indexOf('bottom') >= 0) {
$topicProgressWrapper.css('bottom', '');
}
} else {
var height = composerHeight + "px";
if ($topicProgressWrapper.css('bottom') !== height) {
$topicProgressWrapper.css('bottom', height);
}
}
} else {
if (style.indexOf('bottom') >= 0) {
$topicProgressWrapper.css('bottom', '');
}
}
this.set("controller.dockedCounter", isDocked);
}, },
topicTrackingState: function() { topicTrackingState: function() {

View file

@ -465,7 +465,11 @@ a.star {
line-height: 32px; line-height: 32px;
color: $primary; color: $primary;
} }
.btn {
margin-bottom: 5px;
margin-right: 10px;
.fa-star {margin-right: 5px;}
}
} }
#suggested-topics { #suggested-topics {
@ -497,14 +501,6 @@ button.expand-post {
margin-top: 10px; margin-top: 10px;
} }
#topic-footer-buttons {
.btn {
margin-bottom: 5px;
margin-right: 10px;
.fa-star {margin-right: 5px;}
}
}
.quote-button { .quote-button {
display: none; display: none;
position: absolute; position: absolute;

View file

@ -61,21 +61,6 @@
.private-message-glyph { color: scale-color($primary, $lightness: 75%); } .private-message-glyph { color: scale-color($primary, $lightness: 75%); }
.private_message #topic-title .private-message-glyph { display: inline; } .private_message #topic-title .private-message-glyph { display: inline; }
#topic-closing-info {
border-top: 1px solid scale-color-diff();
padding-top: 10px;
height: 20px;
}
#topic-progress-wrapper {
position: fixed;
right: 50%;
width: 0;
bottom: 0;
z-index: 500;
outline: 1px solid transparent;
}
a.reply-new { a.reply-new {
position: absolute; position: absolute;
margin-top: -2px; margin-top: -2px;
@ -99,6 +84,25 @@ a:hover.reply-new {
} }
} }
#topic-closing-info {
border-top: 1px solid scale-color-diff();
padding-top: 10px;
height: 20px;
}
#topic-progress-wrapper {
position: fixed;
right: 50%;
width: 0;
bottom: 0;
z-index: 500;
outline: 1px solid transparent;
&.docked {
position: absolute;
bottom: -70px;
}
}
#topic-progress { #topic-progress {
position: relative; position: relative;
left: 345px; left: 345px;
@ -161,12 +165,6 @@ a:hover.reply-new {
} }
} }
#topic-progress-wrapper.docked {
position: absolute;
bottom: -70px;
}
#suggested-topics .topic-statuses .topic-status { #suggested-topics .topic-statuses .topic-status {
padding: 0; padding: 0;
i { i {