From f5cbaf56092f9a46217ec8d122d5276fe4f55992 Mon Sep 17 00:00:00 2001
From: Robin Ward <robin.ward@gmail.com>
Date: Tue, 1 Sep 2015 17:33:37 -0400
Subject: [PATCH] Have menu panels show up on top of the composer, stop
 composer at header

---
 .../discourse/views/composer.js.es6           | 38 ++++++++++---------
 .../stylesheets/common/base/menu-panel.scss   |  4 ++
 app/assets/stylesheets/desktop/compose.scss   |  2 +-
 vendor/assets/javascripts/div_resizer.js      |  7 +++-
 4 files changed, 32 insertions(+), 19 deletions(-)

diff --git a/app/assets/javascripts/discourse/views/composer.js.es6 b/app/assets/javascripts/discourse/views/composer.js.es6
index 22ab46f0fc6..a8b49480180 100644
--- a/app/assets/javascripts/discourse/views/composer.js.es6
+++ b/app/assets/javascripts/discourse/views/composer.js.es6
@@ -60,23 +60,22 @@ const ComposerView = Ember.View.extend(Ember.Evented, {
   },
 
   resize: function() {
-    const self = this;
-    Ember.run.scheduleOnce('afterRender', function() {
-      const h = $('#reply-control').height() || 0;
-      self.movePanels.apply(self, [h + "px"]);
+    Ember.run.scheduleOnce('afterRender', () => {
+      let h = $('#reply-control').height() || 0;
+      this.movePanels(h + "px");
 
       // Figure out the size of the fields
-      const $fields = self.$('.composer-fields');
+      const $fields = this.$('.composer-fields');
       let pos = $fields.position();
 
       if (pos) {
-        self.$('.wmd-controls').css('top', $fields.height() + pos.top + 5);
+        this.$('.wmd-controls').css('top', $fields.height() + pos.top + 5);
       }
 
       // get the submit panel height
-      pos = self.$('.submit-panel').position();
+      pos = this.$('.submit-panel').position();
       if (pos) {
-        self.$('.wmd-controls').css('bottom', h - pos.top + 7);
+        this.$('.wmd-controls').css('bottom', h - pos.top + 7);
       }
 
     });
@@ -117,20 +116,25 @@ const ComposerView = Ember.View.extend(Ember.Evented, {
   },
 
   _enableResizing: function() {
-    const $replyControl = $('#reply-control'),
-        self = this;
+    const $replyControl = $('#reply-control');
 
-    const resizer = function() {
-      Ember.run(function() {
-        self.resize();
-      });
+    const runResize = () => {
+      Ember.run(() => this.resize());
     };
 
     $replyControl.DivResizer({
-      resize: resizer,
-      onDrag(sizePx) { self.movePanels.apply(self, [sizePx]); }
+      maxHeight(winHeight) {
+        const $header = $('header.d-header');
+        const headerOffset = $header.offset();
+        const headerOffsetTop = (headerOffset) ? headerOffset.top : 0;
+        const headerHeight = parseInt($header.height() + headerOffsetTop - $(window).scrollTop() + 5);
+        return winHeight - headerHeight;
+      },
+      resize: runResize,
+      onDrag: (sizePx) => this.movePanels(sizePx)
     });
-    afterTransition($replyControl, resizer);
+
+    afterTransition($replyControl, runResize);
     this.set('controller.view', this);
 
     positioningWorkaround(this.$());
diff --git a/app/assets/stylesheets/common/base/menu-panel.scss b/app/assets/stylesheets/common/base/menu-panel.scss
index bf718f19ad4..84ea5e6475f 100644
--- a/app/assets/stylesheets/common/base/menu-panel.scss
+++ b/app/assets/stylesheets/common/base/menu-panel.scss
@@ -24,6 +24,10 @@
   padding: 0.5em;
   width: 300px;
 
+  hr {
+    margin: 3px 0;
+  }
+
   .panel-header {
     position: absolute;
     right: 20px;
diff --git a/app/assets/stylesheets/desktop/compose.scss b/app/assets/stylesheets/desktop/compose.scss
index 9ba434f9040..714910492f7 100644
--- a/app/assets/stylesheets/desktop/compose.scss
+++ b/app/assets/stylesheets/desktop/compose.scss
@@ -112,7 +112,7 @@
   }
   transition: height 0.4s ease;
   width: 100%;
-  z-index: 1039;
+  z-index: 999;
   height: 0;
   background-color: dark-light-diff($primary, $secondary, 90%, -60%);
   bottom: 0;
diff --git a/vendor/assets/javascripts/div_resizer.js b/vendor/assets/javascripts/div_resizer.js
index fbcca76beb8..07a99144f87 100644
--- a/vendor/assets/javascripts/div_resizer.js
+++ b/vendor/assets/javascripts/div_resizer.js
@@ -42,7 +42,12 @@ performDrag = function(e, opts) {
   thisMousePos = mousePosition(e).y;
   size = originalDivHeight + (originalPos - thisMousePos);
   lastMousePos = thisMousePos;
-  size = Math.min(size, $(window).height());
+
+  var maxHeight = $(window).height();
+  if (opts.maxHeight) {
+    maxHeight = opts.maxHeight(maxHeight);
+  }
+  size = Math.min(size, maxHeight);
   size = Math.max(min, size);
   sizePx = size + "px";
   if (typeof opts.onDrag === "function") {