From 7655066967a033249582ebf5cb1711077a1a251b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A9gis=20Hanol?= <regis@hanol.fr>
Date: Wed, 4 Jun 2014 13:03:14 +0200
Subject: [PATCH] BUGFIX: progress bar was hidden when the composer was open

---
 .../discourse/controllers/composer.js.es6     |  3 +-
 .../discourse/controllers/topic_controller.js |  3 --
 .../javascripts/discourse/models/composer.js  |  2 +-
 .../templates/composer.js.handlebars          |  1 -
 .../discourse/templates/topic.js.handlebars   |  2 +
 .../views/composer/composer_messages_view.js  |  4 +-
 .../discourse/views/composer/composer_view.js | 23 +++++-----
 .../javascripts/discourse/views/topic_view.js | 42 +++++++++++++++----
 .../stylesheets/desktop/topic-post.scss       | 14 +++----
 app/assets/stylesheets/desktop/topic.scss     | 40 +++++++++---------
 10 files changed, 77 insertions(+), 57 deletions(-)

diff --git a/app/assets/javascripts/discourse/controllers/composer.js.es6 b/app/assets/javascripts/discourse/controllers/composer.js.es6
index 5aaa5e85e..dea15afa3 100644
--- a/app/assets/javascripts/discourse/controllers/composer.js.es6
+++ b/app/assets/javascripts/discourse/controllers/composer.js.es6
@@ -61,7 +61,8 @@ export default Discourse.Controller.extend({
   },
 
   updateDraftStatus: function() {
-    this.get('model').updateDraftStatus();
+    var c = this.get('model');
+    if (c) { c.updateDraftStatus(); }
   },
 
   appendText: function(text) {
diff --git a/app/assets/javascripts/discourse/controllers/topic_controller.js b/app/assets/javascripts/discourse/controllers/topic_controller.js
index 893e486c9..9189466e7 100644
--- a/app/assets/javascripts/discourse/controllers/topic_controller.js
+++ b/app/assets/javascripts/discourse/controllers/topic_controller.js
@@ -638,7 +638,4 @@ Discourse.TopicController = Discourse.ObjectController.extend(Discourse.Selected
     }
   }
 
-
 });
-
-
diff --git a/app/assets/javascripts/discourse/models/composer.js b/app/assets/javascripts/discourse/models/composer.js
index bce0fc054..30a5f9ec0 100644
--- a/app/assets/javascripts/discourse/models/composer.js
+++ b/app/assets/javascripts/discourse/models/composer.js
@@ -292,7 +292,7 @@ Discourse.Composer = Discourse.Model.extend({
      opts:
        action   - The action we're performing: edit, reply or createTopic
        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
   */
   open: function(opts) {
diff --git a/app/assets/javascripts/discourse/templates/composer.js.handlebars b/app/assets/javascripts/discourse/templates/composer.js.handlebars
index 9aff0cb15..83d35181e 100644
--- a/app/assets/javascripts/discourse/templates/composer.js.handlebars
+++ b/app/assets/javascripts/discourse/templates/composer.js.handlebars
@@ -104,7 +104,6 @@
             {{i18n composer.saved_draft}}
           </div>
         </div>
-
       </div>
     {{/if}}
 
diff --git a/app/assets/javascripts/discourse/templates/topic.js.handlebars b/app/assets/javascripts/discourse/templates/topic.js.handlebars
index d70d5781e..169e5c471 100644
--- a/app/assets/javascripts/discourse/templates/topic.js.handlebars
+++ b/app/assets/javascripts/discourse/templates/topic.js.handlebars
@@ -57,9 +57,11 @@
   <div class="container posts">
 
     {{view Discourse.SelectedPostsView}}
+
     <div class="row">
       <section class="topic-area" id='topic' data-topic-id='{{unbound id}}'>
         <div class='posts-wrapper'>
+
           <div id='topic-progress-wrapper' {{bind-attr class="dockedCounter:docked"}}>
             <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>
diff --git a/app/assets/javascripts/discourse/views/composer/composer_messages_view.js b/app/assets/javascripts/discourse/views/composer/composer_messages_view.js
index c1d3aee68..02d037806 100644
--- a/app/assets/javascripts/discourse/views/composer/composer_messages_view.js
+++ b/app/assets/javascripts/discourse/views/composer/composer_messages_view.js
@@ -26,8 +26,8 @@ Discourse.ComposerMessagesView = Ember.CollectionView.extend({
     },
 
     didInsertElement: function() {
-      var replyControl = $('#reply-control');
-      this.$().css('bottom', (replyControl.height() || 0) + "px").slideDown('fast');
+      var composerHeight = $('#reply-control').height() || 0;
+      this.$().css('bottom', composerHeight + "px").show();
     }
   })
 });
diff --git a/app/assets/javascripts/discourse/views/composer/composer_view.js b/app/assets/javascripts/discourse/views/composer/composer_view.js
index 45acb33c8..1277464ce 100644
--- a/app/assets/javascripts/discourse/views/composer/composer_view.js
+++ b/app/assets/javascripts/discourse/views/composer/composer_view.js
@@ -53,23 +53,26 @@ Discourse.ComposerView = Discourse.View.extend(Ember.Evented, {
     Ember.run.scheduleOnce('afterRender', this, 'refreshPreview');
   }.observes('model.reply', 'model.hidePreview'),
 
-  movePanels: function(sizePx) {
-    $('.composer-popup').css('bottom', sizePx);
-  },
-
   focusIn: function() {
     var controller = this.get('controller');
     if (controller) controller.updateDraftStatus();
   },
 
+  movePanels: function(sizePx) {
+    $('#main-outlet').css('padding-bottom', sizePx);
+    $('.composer-popup').css('bottom', sizePx);
+  },
+
   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() {
-      var replyControl = $('#reply-control');
-      var h = replyControl.height() || 0;
-      var sizePx = "" + h + "px";
-      $('#main-outlet').css('padding-bottom', sizePx);
-      $('.composer-popup').css('bottom', sizePx);
+      var $replyControl = $('#reply-control');
+      // wait for the transitions
+      $replyControl.on("transitionend", function() {
+        var h = $replyControl.height() || 0;
+        var sizePx = "" + h + "px";
+        if (self.movePanels) { self.movePanels(sizePx); }
+      });
     });
   }.observes('model.composeState'),
 
diff --git a/app/assets/javascripts/discourse/views/topic_view.js b/app/assets/javascripts/discourse/views/topic_view.js
index 496b7f911..e596d821f 100644
--- a/app/assets/javascripts/discourse/views/topic_view.js
+++ b/app/assets/javascripts/discourse/views/topic_view.js
@@ -39,7 +39,7 @@ Discourse.TopicView = Discourse.View.extend(Discourse.Scrolling, {
       this._topicProgress = $topicProgress;
       // CAREFUL WITH THIS AXE
       // 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;
     }
 
@@ -155,7 +155,6 @@ Discourse.TopicView = Discourse.View.extend(Discourse.Scrolling, {
     @method scrolled
   **/
   scrolled: function(){
-
     var offset = window.pageYOffset || $('html').scrollTop();
     if (!this.get('docAt')) {
       var title = $('#topic-title');
@@ -172,14 +171,39 @@ Discourse.TopicView = Discourse.View.extend(Discourse.Scrolling, {
       headerController.set('showExtraInfo', topic.get('postStream.firstPostNotLoaded'));
     }
 
-    // Dock the counter if necessary
-    var $lastPost = $('article[data-post-id=' + topic.get('postStream.lastPostId') + "]");
-    var lastPostOffset = $lastPost.offset();
-    if (!lastPostOffset) {
-      this.set('controller.dockedCounter', false);
-      return;
+    // dock the counter if necessary
+    var maximumOffset = $('#topic-footer-buttons').offset(),
+        composerHeight = $('#reply-control').height() || 0,
+        $topicProgressWrapper = $('#topic-progress-wrapper'),
+        style = $topicProgressWrapper.attr('style') || '',
+        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() {
diff --git a/app/assets/stylesheets/desktop/topic-post.scss b/app/assets/stylesheets/desktop/topic-post.scss
index c63e3c8ed..20219683a 100644
--- a/app/assets/stylesheets/desktop/topic-post.scss
+++ b/app/assets/stylesheets/desktop/topic-post.scss
@@ -465,7 +465,11 @@ a.star {
     line-height: 32px;
     color: $primary;
   }
-
+  .btn {
+    margin-bottom: 5px;
+    margin-right: 10px;
+    .fa-star {margin-right: 5px;}
+  }
 }
 
 #suggested-topics {
@@ -497,14 +501,6 @@ button.expand-post {
   margin-top: 10px;
 }
 
-#topic-footer-buttons {
-  .btn {
-    margin-bottom: 5px;
-    margin-right: 10px;
-    .fa-star {margin-right: 5px;}
-  }
-}
-
 .quote-button {
   display: none;
   position: absolute;
diff --git a/app/assets/stylesheets/desktop/topic.scss b/app/assets/stylesheets/desktop/topic.scss
index 6823b5db1..e93d62bc2 100644
--- a/app/assets/stylesheets/desktop/topic.scss
+++ b/app/assets/stylesheets/desktop/topic.scss
@@ -61,21 +61,6 @@
 .private-message-glyph { color: scale-color($primary, $lightness: 75%); }
 .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 {
   position: absolute;
   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 {
   position: relative;
   left: 345px;
@@ -161,12 +165,6 @@ a:hover.reply-new {
   }
 }
 
-#topic-progress-wrapper.docked {
-  position: absolute;
-  bottom: -70px;
-
-}
-
 #suggested-topics .topic-statuses .topic-status {
   padding: 0;
   i {