github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2024-11-23 22:26:26 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

UX: Show the progress widget when the composer is expanded

Browse Source
This commit is contained in:
Robin Ward 2016-05-31 16:55:56 -04:00
parent 27b499f4dd
commit 70df75c381
No known key found for this signature in database
GPG Key ID: 0E091E2B4ED1B83D
4 changed files with 32 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
app/assets/javascripts/discourse/components/composer-editor.js.es6
View File

@ -341,6 +341,7 @@ export default Ember.Component.extend({
@on('willDestroyElement')
_composerClosed() {
this.appEvents.trigger('composer:will-close');
Ember.run.next(() => {
$('#main-outlet').css('padding-bottom', 0);
// need to wait a bit for the "slide down" transition of the composer

43
app/assets/javascripts/discourse/components/topic-progress.js.es6
View File

@ -9,15 +9,16 @@ export default Ember.Component.extend({
progressPosition: null,
postStream: Ember.computed.alias('topic.postStream'),
userWantsToJump: null,
composerVisible: null,
init() {
this._super();
(this.get('delegated') || []).forEach(m => this.set(m, m));
},
@computed('userWantsToJump', 'showTimeline')
hidden(userWantsToJump, showTimeline) {
return !userWantsToJump && showTimeline;
@computed('userWantsToJump', 'showTimeline', 'composerVisible')
hidden(userWantsToJump, showTimeline, composerVisible) {
return !userWantsToJump && !composerVisible && showTimeline;
},
@observes('hidden')
@ -77,11 +78,23 @@ export default Ember.Component.extend({
Ember.run.scheduleOnce('afterRender', this, this._updateProgressBar);
},
_composerOpened() {
this.set('composerVisible', true);
this._dock();
},
_composerWillClose() {
this.set('composerVisible', false);
},
didInsertElement() {
this._super();
this.appEvents.on("composer:opened", this, this._dock)
.on("composer:resized", this, this._dock)
.on("composer:closed", this, this._dock)
this.appEvents.on('composer:opened', this, this._composerOpened);
this.appEvents.on('composer:will-close', this, this._composerWillClose);
this.appEvents.on("composer:resized", this, this._dock)
.on('composer:closed', this, this._dock)
.on("topic:scrolled", this, this._dock)
.on('topic:current-post-changed', postNumber => this.set('progressPosition', postNumber))
.on('topic-progress:keyboard-trigger', this, this.keyboardTrigger);
@ -91,9 +104,10 @@ export default Ember.Component.extend({
willDestroyElement() {
this._super();
this.appEvents.off("composer:opened", this, this._dock)
.off("composer:resized", this, this._dock)
.off("composer:closed", this, this._dock)
this.appEvents.off('composer:opened', this, this._composerOpened);
this.appEvents.off('composer:will-close', this, this._composerWillClose);
this.appEvents.off("composer:resized", this, this._dock)
.off('composer:closed', this, this._dock)
.off('topic:scrolled', this, this._dock)
.off('topic:current-post-changed')
.off('topic-progress:keyboard-trigger');
@ -111,9 +125,14 @@ export default Ember.Component.extend({
const totalWidth = this._totalWidth;
const progressWidth = this.get('streamPercentage') * totalWidth;
$topicProgress.find('.bg')
.css("border-right-width", (progressWidth === totalWidth) ? "0px" : "1px")
.width(progressWidth);
const borderSize = (progressWidth === totalWidth) ? "0px" : "1px";
const $bg = $topicProgress.find('.bg');
if ($bg.length === 0) {
const style = `border-right-width: ${borderSize}; width: ${progressWidth}px`;
$topicProgress.append(`<div class='bg' style="${style}">&nbsp;</div>`);
} else {
$bg.css("border-right-width", borderSize).width(progressWidth);
}
},
_dock() {

1
app/assets/javascripts/discourse/templates/components/topic-progress.hbs
View File

@ -24,6 +24,5 @@
<h4>{{postStream.filteredPostsCount}}</h4></span>
</div>
<i class="fa {{unless expanded 'fa-sort'}}"></i>
<div class='bg'>&nbsp;</div>
</nav>
{{/unless}}

1
app/assets/stylesheets/desktop/topic.scss
View File

@ -183,7 +183,6 @@
border-right: 1px solid dark-light-diff($tertiary, $secondary, 85%, -65%);
background-color: dark-light-diff($tertiary, $secondary, 85%, -65%);
transition: width .75s;
}
}