8 files changed, 19 insertions, 12 deletions
diff --git a/web-ui/app/js/dispatchers/right_pane_dispatcher.js b/web-ui/app/js/dispatchers/right_pane_dispatcher.js
index 47339e7d..c342b0b2 100644
--- a/web-ui/app/js/dispatchers/right_pane_dispatcher.js
+++ b/web-ui/app/js/dispatchers/right_pane_dispatcher.js
@@ -23,7 +23,7 @@ define(
     'mail_view/ui/reply_section',
     'mail_view/ui/draft_box',
     'mail_view/ui/no_message_selected_pane',
-    'mail_view/ui/compose_feedback',
+    'mail_view/ui/feedback_box',
     'page/events'
   ],
 
diff --git a/web-ui/app/js/mail_view/ui/compose_feedback.js b/web-ui/app/js/mail_view/ui/feedback_box.js
index 4d506864..85c0dadc 100644
--- a/web-ui/app/js/mail_view/ui/compose_feedback.js
+++ b/web-ui/app/js/mail_view/ui/feedback_box.js
@@ -24,15 +24,17 @@ define(['flight/lib/component', 'views/templates', 'page/events', 'features'],
       this.$node.html(templates.compose.feedback());
     };
 
-    this.openComposeBox = function() {
-      var stage = this.reset('compose-box');
+    this.openFeedbackBox = function() {
+      var stage = this.reset('feedback-box');
       this.attachTo(stage);
+      this.enableFloatlabel('input.floatlabel');
+      this.enableFloatlabel('textarea.floatlabel');
     };
 
     this.after('initialize', function () {
       if (features.isEnabled('feedback')) {
           this.render();
-          this.on(document, events.ui.feedback.open, this.openComposeBox);
+          this.on(document, events.ui.feedback.open, this.openFeedbackBox);
       }
     });
 
diff --git a/web-ui/app/js/page/default.js b/web-ui/app/js/page/default.js
index 83bd975f..37eabaec 100644
--- a/web-ui/app/js/page/default.js
+++ b/web-ui/app/js/page/default.js
@@ -44,7 +44,7 @@ define(
     'page/logout',
     'page/logout_shortcut',
     'feedback/feedback_trigger',
-    'mail_view/ui/compose_feedback',
+    'mail_view/ui/feedback_box',
     'page/version',
   ],
 
@@ -77,7 +77,7 @@ define(
     logout,
     logoutShortcut,
     feedback,
-    compose_feedback,
+    feedbackBox,
     version) {
 
     'use strict';
diff --git a/web-ui/app/js/page/pane_contract_expand.js b/web-ui/app/js/page/pane_contract_expand.js
index 153e38e5..771486ae 100644
--- a/web-ui/app/js/page/pane_contract_expand.js
+++ b/web-ui/app/js/page/pane_contract_expand.js
@@ -42,6 +42,7 @@ define(['flight/lib/component', 'page/events'], function (describeComponent, eve
       this.on(document, events.ui.mail.open, this.contractMiddlePaneExpandRightPane);
       this.on(document, events.dispatchers.rightPane.openComposeBox, this.contractMiddlePaneExpandRightPane);
       this.on(document, events.dispatchers.rightPane.openDraft, this.contractMiddlePaneExpandRightPane);
+      this.on(document, events.ui.feedback.open, this.contractMiddlePaneExpandRightPane);
       this.on(document, events.dispatchers.rightPane.openNoMessageSelected, this.expandMiddlePaneContractRightPane);
       this.expandMiddlePaneContractRightPane();
     });
diff --git a/web-ui/app/scss/_compose.scss b/web-ui/app/scss/_compose.scss
index 01890797..55073b3d 100644
--- a/web-ui/app/scss/_compose.scss
+++ b/web-ui/app/scss/_compose.scss
@@ -23,7 +23,7 @@
 }
 
 // COMPOSE PANE
-#compose-box, #draft-box, #reply-box {
+#compose-box, #draft-box, #reply-box, #feedback-box {
   div.floatlabel {
     position: relative;
   }
diff --git a/web-ui/app/templates/compose/feedback_box.hbs b/web-ui/app/templates/compose/feedback_box.hbs
index 42dbf47d..b10d0da3 100644
--- a/web-ui/app/templates/compose/feedback_box.hbs
+++ b/web-ui/app/templates/compose/feedback_box.hbs
@@ -6,14 +6,11 @@
   <input class="floatlabel" name="subject" type="text" id="subject" value="{{subject}}" placeholder="{{t 'Subject'}}" tabindex="1"/>
 </div>
 <div class="floatlabel">
-  <label class="floatlabel" for="body">Body</label>
+  <label class="floatlabel" for="text-box">Body</label>
   <textarea class="floatlabel" name="body" id="text-box" placeholder="{{t 'Body'}}" tabindex="2">{{body}}</textarea>
 </div>
 
 
 <div class="buttons-group columns">
   <button id="send-button" tabindex="6"><i class="fa fa-send"></i></button>
-  <button id="trash-button" tabindex="7">{{t 'trash-button'}}<i class="fa fa-trash-o"></i></button>
-  <button id="draft-button">{{t 'draft-button'}}<i class="fa fa-pencil"></i></button>
-  <div id="draft-save-status"></div>
 </div>
diff --git a/web-ui/test/spec/dispatchers/right_pane_dispatcher.spec.js b/web-ui/test/spec/dispatchers/right_pane_dispatcher.spec.js
index 1270fc4c..6622cc19 100644
--- a/web-ui/test/spec/dispatchers/right_pane_dispatcher.spec.js
+++ b/web-ui/test/spec/dispatchers/right_pane_dispatcher.spec.js
@@ -54,7 +54,7 @@ describeComponent('dispatchers/right_pane_dispatcher', function () {
       });
 
       it('listens to open feedback event and open feedback box', function () {
-        var feedbackBox = require('mail_view/ui/compose_feedback');
+        var feedbackBox = require('mail_view/ui/feedback_box');
         spyOn(feedbackBox, 'attachTo');
 
         this.component.trigger(document, Pixelated.events.ui.feedback.open);
diff --git a/web-ui/test/spec/page/pane_contract_expand.spec.js b/web-ui/test/spec/page/pane_contract_expand.spec.js
index 4f4ff49b..0320705f 100644
--- a/web-ui/test/spec/page/pane_contract_expand.spec.js
+++ b/web-ui/test/spec/page/pane_contract_expand.spec.js
@@ -44,6 +44,13 @@ describeComponent('page/pane_contract_expand', function () {
       expect($('#right-pane').attr('class')).toEqual(this.component.attr.RIGHT_PANE_EXPAND_CLASSES);
     });
 
+    it('contracts middle pane and expands right pane on open draft', function () {
+      $(document).trigger(Pixelated.events.ui.feedback.open);
+
+      expect($('#middle-pane-container').attr('class')).toEqual(this.component.attr.MIDDLE_PANE_CONTRACT_CLASSES);
+      expect($('#right-pane').attr('class')).toEqual(this.component.attr.RIGHT_PANE_EXPAND_CLASSES);
+    });
+
     it('expands middle pane and contracts right pane on event on open no message selected pane', function () {
       $(document).trigger(Pixelated.events.dispatchers.rightPane.openNoMessageSelected);