UX: Hide the timeline when the composer is open

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')

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);
     }
   }
 });

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')

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;

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' &&

app/assets/javascripts/discourse/templates/components/topic-navigation.hbs

@@ -1 +1 @@
-{{yield showTimeline}}
+{{yield info}}

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">

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.$());
   },
 

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;