diff --git a/app/assets/javascripts/discourse/components/composer-editor.js.es6 b/app/assets/javascripts/discourse/components/composer-editor.js.es6 index 2639b741f91..16f341e4fbe 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 dad53134c18..945d14420e0 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 90a75ef1a6d..5ab62cef8f9 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 7a9cf9d904f..f95d48bc2a4 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 20f6490b146..40b047a1184 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 0fe77daf7eb..6491b3415a2 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 7855b009722..a173827ec85 100644 --- a/app/assets/javascripts/discourse/templates/topic.hbs +++ b/app/assets/javascripts/discourse/templates/topic.hbs @@ -66,8 +66,8 @@
{{partial "selected-posts"}}
- {{#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}}
diff --git a/app/assets/javascripts/discourse/views/composer.js.es6 b/app/assets/javascripts/discourse/views/composer.js.es6 index 4bc6b5499d6..5d2a803fc50 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 584254c7e5e..f5e58c630eb 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 61f3ff04a91..9f282d33f98 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;