From 8ee0f4d1e7b37f419cb2a8edf0e8f044004c0503 Mon Sep 17 00:00:00 2001
From: Robin Ward <robin.ward@gmail.com>
Date: Tue, 6 Jan 2015 12:05:11 -0500
Subject: [PATCH] Use javascript to resize the composer properly rather than
 using the type of composer being used.

---
 .../discourse/templates/composer.hbs          | 101 +++++++++---------
 .../discourse/views/composer.js.es6           |  19 ++--
 app/assets/stylesheets/desktop/compose.scss   |   7 --
 3 files changed, 65 insertions(+), 62 deletions(-)

diff --git a/app/assets/javascripts/discourse/templates/composer.hbs b/app/assets/javascripts/discourse/templates/composer.hbs
index 823172cd021..c06b8fcad3c 100644
--- a/app/assets/javascripts/discourse/templates/composer.hbs
+++ b/app/assets/javascripts/discourse/templates/composer.hbs
@@ -18,60 +18,63 @@ so I'm going to stop rendering it until we figure out what's up
 
     {{#if model.viewOpen}}
       <div class='control-row reply-area'>
-        {{plugin-outlet "composer-open"}}
+        <div class='composer-fields'>
+          {{plugin-outlet "composer-open"}}
 
-        <div class='reply-to'>
-          {{{model.actionTitle}}}:
-          {{#if canEdit}}
-            {{#if showEditReason}}
-              <div class="edit-reason-input">
-                {{text-field value=editReason tabindex="7" id="edit-reason" maxlength="255" placeholderKey="composer.edit_reason_placeholder"}}
-              </div>
-            {{else}}
-              <a {{action "displayEditReason"}} class="display-edit-reason">{{i18n 'composer.show_edit_reason'}}</a>
+          <div class='reply-to'>
+            {{{model.actionTitle}}}:
+            {{#if canEdit}}
+              {{#if showEditReason}}
+                <div class="edit-reason-input">
+                  {{text-field value=editReason tabindex="7" id="edit-reason" maxlength="255" placeholderKey="composer.edit_reason_placeholder"}}
+                </div>
+              {{else}}
+                <a {{action "displayEditReason"}} class="display-edit-reason">{{i18n 'composer.show_edit_reason'}}</a>
+              {{/if}}
             {{/if}}
+          </div>
+
+          {{#if model.canEditTitle}}
+            <div class='form-element clearfix'>
+              {{#if model.creatingPrivateMessage}}
+                {{user-selector topicId=controller.controllers.topic.model.id
+                                excludeCurrentUser="true"
+                                id="private-message-users"
+                                includeGroups="true"
+                                class="span8"
+                                placeholderKey="composer.users_placeholder"
+                                tabindex="1"
+                                usernames=model.targetUsernames}}
+                {{#if showWarning}}
+                  <div class='add-warning'>
+                    <label>
+                      {{input type="checkbox" checked=model.isWarning}}
+                      {{i18n "composer.add_warning"}}
+                    </label>
+                  </div>
+                {{/if}}
+              {{/if}}
+
+              <div class="title-input">
+                {{text-field value=model.title tabindex="2" id="reply-title" maxLength=maxTitleLength placeholderKey="composer.title_placeholder"}}
+                {{popupInputTip validation=view.titleValidation shownAt=view.showTitleTip}}
+              </div>
+
+              {{#unless model.privateMessage}}
+                <div class="category-input">
+                  {{category-chooser valueAttribute="id" value=model.categoryId scopedCategoryId=scopedCategoryId tabindex="3"}}
+                  {{popupInputTip validation=view.categoryValidation shownAt=view.showCategoryTip}}
+                </div>
+                {{plugin-outlet "composer-fields"}}
+                {{#if model.archetype.hasOptions}}
+                  <button class='btn' {{action "showOptions"}}>{{i18n 'topic.options'}}</button>
+                {{/if}}
+                {{render "additional-composer-buttons" model}}
+              {{/unless}}
+            </div>
           {{/if}}
         </div>
 
-        {{#if model.canEditTitle}}
-          <div class='form-element clearfix'>
-            {{#if model.creatingPrivateMessage}}
-              {{user-selector topicId=controller.controllers.topic.model.id
-                              excludeCurrentUser="true"
-                              id="private-message-users"
-                              includeGroups="true"
-                              class="span8"
-                              placeholderKey="composer.users_placeholder"
-                              tabindex="1"
-                              usernames=model.targetUsernames}}
-              {{#if showWarning}}
-                <div class='add-warning'>
-                  <label>
-                    {{input type="checkbox" checked=model.isWarning}}
-                    {{i18n "composer.add_warning"}}
-                  </label>
-                </div>
-              {{/if}}
-            {{/if}}
-
-            <div class="title-input">
-              {{text-field value=model.title tabindex="2" id="reply-title" maxLength=maxTitleLength placeholderKey="composer.title_placeholder"}}
-              {{popupInputTip validation=view.titleValidation shownAt=view.showTitleTip}}
-            </div>
-
-            {{#unless model.privateMessage}}
-              <div class="category-input">
-                {{category-chooser valueAttribute="id" value=model.categoryId scopedCategoryId=scopedCategoryId tabindex="3"}}
-                {{popupInputTip validation=view.categoryValidation shownAt=view.showCategoryTip}}
-              </div>
-              {{#if model.archetype.hasOptions}}
-                <button class='btn' {{action "showOptions"}}>{{i18n 'topic.options'}}</button>
-              {{/if}}
-              {{render "additional-composer-buttons" model}}
-            {{/unless}}
-          </div>
-        {{/if}}
-
         <div class='wmd-controls'>
           <div class='textarea-wrapper'>
             <div class='wmd-button-bar' id='wmd-button-bar'></div>
diff --git a/app/assets/javascripts/discourse/views/composer.js.es6 b/app/assets/javascripts/discourse/views/composer.js.es6
index 325e23f13a7..c62e86f20c9 100644
--- a/app/assets/javascripts/discourse/views/composer.js.es6
+++ b/app/assets/javascripts/discourse/views/composer.js.es6
@@ -63,12 +63,18 @@ var ComposerView = Discourse.View.extend(Ember.Evented, {
   resize: function() {
     var self = this;
     Em.run.scheduleOnce('afterRender', function() {
-      if (self.movePanels) {
-        var h = $('#reply-control').height() || 0;
-        self.movePanels.apply(self, [h + "px"]);
+      var h = $('#reply-control').height() || 0;
+      self.movePanels.apply(self, [h + "px"]);
+
+      // Figure out the size of the fields
+      var $fields = self.$('.composer-fields'),
+          pos = $fields.position();
+
+      if (pos) {
+        self.$('.wmd-controls').css('top', $fields.height() + pos.top + 5);
       }
     });
-  }.observes('model.composeState'),
+  }.observes('model.composeState', 'model.action'),
 
   keyUp: function() {
     var controller = this.get('controller');
@@ -103,11 +109,12 @@ var ComposerView = Discourse.View.extend(Ember.Evented, {
   _enableResizing: function() {
     var $replyControl = $('#reply-control'),
         self = this;
+
     $replyControl.DivResizer({
-      resize: this.resize,
+      resize: this.resize.bind(self),
       onDrag: function (sizePx) { self.movePanels.apply(self, [sizePx]); }
     });
-    afterTransition($replyControl, this.resize);
+    afterTransition($replyControl, this.resize.bind(self));
     this.ensureMaximumDimensionForImagesInPreview();
     this.set('controller.view', this);
   }.on('didInsertElement'),
diff --git a/app/assets/stylesheets/desktop/compose.scss b/app/assets/stylesheets/desktop/compose.scss
index 122eccc8ffa..5379939dc72 100644
--- a/app/assets/stylesheets/desktop/compose.scss
+++ b/app/assets/stylesheets/desktop/compose.scss
@@ -330,13 +330,6 @@
   margin-bottom: 10px;
 }
 
-#reply-control.edit-title.private-message {
-  .wmd-controls {
-    transition: top 0.3s ease;
-    top: 140px;
-  }
-}
-
 #reply-control {
   &.hide-preview {
     .wmd-controls {