From a832d8837598d6da9f89fe6a80ba585326fe7cfe Mon Sep 17 00:00:00 2001
From: Robin Ward <robin.ward@gmail.com>
Date: Wed, 1 Jun 2016 14:42:00 -0400
Subject: [PATCH] UX: Hide the timeline when the composer is open
---
.../components/composer-editor.js.es6 | 2 +-
.../components/topic-navigation.js.es6 | 23 +++++++++++++---
.../components/topic-progress.js.es6 | 27 +++++--------------
.../components/topic-timeline.js.es6 | 2 +-
.../discourse/controllers/composer.js.es6 | 2 +-
.../templates/components/topic-navigation.hbs | 2 +-
.../javascripts/discourse/templates/topic.hbs | 6 ++---
.../discourse/views/composer.js.es6 | 7 ++++-
.../discourse/views/user-card.js.es6 | 4 +--
.../stylesheets/desktop/topic-timeline.scss | 8 +++++-
10 files changed, 49 insertions(+), 34 deletions(-)
diff --git a/app/assets/javascripts/discourse/components/composer-editor.js.es6 b/app/assets/javascripts/discourse/components/composer-editor.js.es6
index 2639b741f..16f341e4f 100644
--- a/app/assets/javascripts/discourse/components/composer-editor.js.es6
+++ b/app/assets/javascripts/discourse/components/composer-editor.js.es6
@@ -82,7 +82,7 @@ export default Ember.Component.extend({
}
this._bindUploadTarget();
- this.appEvents.trigger('composer:opened');
+ this.appEvents.trigger('composer:will-open');
},
@computed('composer.reply', 'composer.replyLength', 'composer.missingReplyCharacters', 'composer.minimumPostLength', 'lastValidatedAt')
diff --git a/app/assets/javascripts/discourse/components/topic-navigation.js.es6 b/app/assets/javascripts/discourse/components/topic-navigation.js.es6
index dad53134c..945d14420 100644
--- a/app/assets/javascripts/discourse/components/topic-navigation.js.es6
+++ b/app/assets/javascripts/discourse/components/topic-navigation.js.es6
@@ -1,9 +1,22 @@
export default Ember.Component.extend({
+ composerOpen: null,
+ classNameBindings: ['composerOpen'],
showTimeline: null,
+ info: null,
_checkSize() {
- const width = $(window).width();
- this.set('showTimeline', width > 960);
+ const renderTimeline = $(window).width() > 960;
+ this.set('info', { renderTimeline, showTimeline: renderTimeline && !this.get('composerOpen') });
+ },
+
+ composerOpened() {
+ this.set('composerOpen', true);
+ this._checkSize();
+ },
+
+ composerClosed() {
+ this.set('composerOpen', false);
+ this._checkSize();
},
didInsertElement() {
@@ -11,9 +24,11 @@ export default Ember.Component.extend({
if (!this.site.mobileView) {
$(window).on('resize.discourse-topic-navigation', () => this._checkSize());
+ this.appEvents.on('composer:will-open', this, this.composerOpened);
+ this.appEvents.on('composer:will-close', this, this.composerClosed);
this._checkSize();
} else {
- this.set('showTimeline', false);
+ this.set('info', null);
}
},
@@ -21,6 +36,8 @@ export default Ember.Component.extend({
this._super();
if (!this.site.mobileView) {
$(window).off('resize.discourse-topic-navigation');
+ this.appEvents.off('composer:will-open', this, this.composerOpened);
+ this.appEvents.off('composer:will-close', this, this.composerClosed);
}
}
});
diff --git a/app/assets/javascripts/discourse/components/topic-progress.js.es6 b/app/assets/javascripts/discourse/components/topic-progress.js.es6
index 90a75ef1a..5ab62cef8 100644
--- a/app/assets/javascripts/discourse/components/topic-progress.js.es6
+++ b/app/assets/javascripts/discourse/components/topic-progress.js.es6
@@ -9,16 +9,15 @@ 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', 'composerVisible')
- hidden(userWantsToJump, showTimeline, composerVisible) {
- return !userWantsToJump && !composerVisible && showTimeline;
+ @computed('userWantsToJump', 'showTimeline')
+ hidden(userWantsToJump, showTimeline) {
+ return !userWantsToJump && showTimeline;
},
@observes('hidden')
@@ -78,22 +77,11 @@ 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._composerOpened);
- this.appEvents.on('composer:will-close', this, this._composerWillClose);
-
- this.appEvents.on("composer:resized", this, this._dock)
+ this.appEvents.on('composer:will-open', this, this._dock)
+ .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))
@@ -104,9 +92,8 @@ export default Ember.Component.extend({
willDestroyElement() {
this._super();
- 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)
+ this.appEvents.off('composer:will-open', this, this._dock)
+ .off("composer:resized", this, this._dock)
.off('composer:closed', this, this._dock)
.off('topic:scrolled', this, this._dock)
.off('topic:current-post-changed')
diff --git a/app/assets/javascripts/discourse/components/topic-timeline.js.es6 b/app/assets/javascripts/discourse/components/topic-timeline.js.es6
index 7a9cf9d90..f95d48bc2 100644
--- a/app/assets/javascripts/discourse/components/topic-timeline.js.es6
+++ b/app/assets/javascripts/discourse/components/topic-timeline.js.es6
@@ -29,7 +29,7 @@ export default MountWidget.extend(Docking, {
const topicTop = $('.container.posts').offset().top;
const topicBottom = $('#topic-bottom').offset().top;
const $timeline = this.$('.timeline-container');
- const timelineHeight = $timeline.height();
+ const timelineHeight = $timeline.height() || 400;
const footerHeight = $('.timeline-footer-controls').outerHeight(true) || 0;
const prev = this.dockAt;
diff --git a/app/assets/javascripts/discourse/controllers/composer.js.es6 b/app/assets/javascripts/discourse/controllers/composer.js.es6
index 20f6490b1..40b047a11 100644
--- a/app/assets/javascripts/discourse/controllers/composer.js.es6
+++ b/app/assets/javascripts/discourse/controllers/composer.js.es6
@@ -344,7 +344,7 @@ export default Ember.Controller.extend({
}).catch(function(error) {
composer.set('disableDrafts', false);
- self.appEvents.one('composer:opened', () => bootbox.alert(error));
+ self.appEvents.one('composer:will-open', () => bootbox.alert(error));
});
if (this.get('controllers.application.currentRouteName').split('.')[0] === 'topic' &&
diff --git a/app/assets/javascripts/discourse/templates/components/topic-navigation.hbs b/app/assets/javascripts/discourse/templates/components/topic-navigation.hbs
index 0fe77daf7..6491b3415 100644
--- a/app/assets/javascripts/discourse/templates/components/topic-navigation.hbs
+++ b/app/assets/javascripts/discourse/templates/components/topic-navigation.hbs
@@ -1 +1 @@
-{{yield showTimeline}}
+{{yield info}}
diff --git a/app/assets/javascripts/discourse/templates/topic.hbs b/app/assets/javascripts/discourse/templates/topic.hbs
index 7855b0097..a173827ec 100644
--- a/app/assets/javascripts/discourse/templates/topic.hbs
+++ b/app/assets/javascripts/discourse/templates/topic.hbs
@@ -66,8 +66,8 @@
<div class='selected-posts {{unless multiSelect 'hidden'}}'>
{{partial "selected-posts"}}
</div>
- {{#topic-navigation as |showTimeline|}}
- {{#if showTimeline}}
+ {{#topic-navigation as |info|}}
+ {{#if info.renderTimeline}}
{{topic-timeline topic=model
enteredIndex=enteredIndex
loading=model.postStream.loading
@@ -76,7 +76,7 @@
{{topic-admin-menu-button topic=model fixed="true" delegated=topicDelegated}}
{{/if}}
- {{topic-progress topic=model delegated=topicDelegated showTimeline=showTimeline}}
+ {{topic-progress topic=model delegated=topicDelegated showTimeline=info.showTimeline}}
{{/topic-navigation}}
<div class="row">
diff --git a/app/assets/javascripts/discourse/views/composer.js.es6 b/app/assets/javascripts/discourse/views/composer.js.es6
index 4bc6b5499..5d2a803fc 100644
--- a/app/assets/javascripts/discourse/views/composer.js.es6
+++ b/app/assets/javascripts/discourse/views/composer.js.es6
@@ -92,7 +92,12 @@ const ComposerView = Ember.View.extend({
onDrag: sizePx => this.movePanels(sizePx)
});
- afterTransition($replyControl, resize);
+ afterTransition($replyControl, () => {
+ resize();
+ if (this.get('composer.composeState') === Composer.OPEN) {
+ this.appEvents.trigger('composer:opened');
+ }
+ });
positioningWorkaround(this.$());
},
diff --git a/app/assets/javascripts/discourse/views/user-card.js.es6 b/app/assets/javascripts/discourse/views/user-card.js.es6
index 584254c7e..f5e58c630 100644
--- a/app/assets/javascripts/discourse/views/user-card.js.es6
+++ b/app/assets/javascripts/discourse/views/user-card.js.es6
@@ -4,8 +4,8 @@ import CleansUp from 'discourse/mixins/cleans-up';
import afterTransition from 'discourse/lib/after-transition';
const clickOutsideEventName = "mousedown.outside-user-card",
- clickDataExpand = "click.discourse-user-card",
- clickMention = "click.discourse-user-mention";
+ clickDataExpand = "click.discourse-user-card",
+ clickMention = "click.discourse-user-mention";
export default Ember.View.extend(CleansUp, {
elementId: 'user-card',
diff --git a/app/assets/stylesheets/desktop/topic-timeline.scss b/app/assets/stylesheets/desktop/topic-timeline.scss
index 61f3ff04a..9f282d33f 100644
--- a/app/assets/stylesheets/desktop/topic-timeline.scss
+++ b/app/assets/stylesheets/desktop/topic-timeline.scss
@@ -2,6 +2,12 @@
width: 900px;
}
+.composer-open {
+ .topic-timeline {
+ opacity: 0;
+ }
+}
+
.timeline-container {
box-sizing: border-box;
z-index: 999;
@@ -11,7 +17,6 @@
&.timeline-docked {
position: absolute;
-
}
&.timeline-docked-bottom {
@@ -23,6 +28,7 @@
.topic-timeline {
margin-left: 3em;
width: 150px;
+ transition: opacity 0.2s ease-in;
.timeline-controls {
margin-bottom: 1em;