diff --git a/app/assets/javascripts/discourse/components/composer-toggles.js.es6 b/app/assets/javascripts/discourse/components/composer-toggles.js.es6
index def2000913f..f618e1ca61d 100644
--- a/app/assets/javascripts/discourse/components/composer-toggles.js.es6
+++ b/app/assets/javascripts/discourse/components/composer-toggles.js.es6
@@ -12,7 +12,9 @@ export default Ember.Component.extend({
 
   @computed("composeState")
   fullscreenTitle(composeState) {
-    return composeState === "fullscreen"
+    return composeState === "draft"
+      ? "composer.open"
+      : composeState === "fullscreen"
       ? "composer.exit_fullscreen"
       : "composer.enter_fullscreen";
   },
@@ -26,7 +28,9 @@ export default Ember.Component.extend({
 
   @computed("composeState")
   fullscreenIcon(composeState) {
-    return composeState === "fullscreen"
+    return composeState === "draft"
+      ? "chevron-up"
+      : composeState === "fullscreen"
       ? "discourse-compress"
       : "discourse-expand";
   }
diff --git a/app/assets/javascripts/discourse/templates/composer.hbs b/app/assets/javascripts/discourse/templates/composer.hbs
index 49a04a05efc..4055f0e51a0 100644
--- a/app/assets/javascripts/discourse/templates/composer.hbs
+++ b/app/assets/javascripts/discourse/templates/composer.hbs
@@ -179,7 +179,7 @@
           </div>
         </div>
 
-        {{else}}
+      {{else}}
         <div class='saving-text'>
           {{#if model.createdPost}}
             {{i18n 'composer.saved'}} <a class='permalink' href="{{unbound createdPost.url}}" {{action "viewNewReply"}}>{{i18n 'composer.view_new_post'}}</a>
@@ -197,7 +197,7 @@
         </div>
 
         {{composer-toggles composeState=model.composeState
-          toggleFullscreen=(action "fullscreenComposer")
+          toggleFullscreen=(action "openIfDraft")
           toggleComposer=(action "toggle")
           toggleToolbar=(action "toggleToolbar")}}
 
diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml
index 201668125fe..194a633a14c 100644
--- a/config/locales/client.en.yml
+++ b/config/locales/client.en.yml
@@ -1437,6 +1437,7 @@ en:
       toggle_direction: "Toggle Direction"
       help: "Markdown Editing Help"
       collapse: "minimize the composer panel"
+      open: "open the composer panel"
       abandon: "close composer and discard draft"
       enter_fullscreen: "enter fullscreen composer"
       exit_fullscreen: "exit fullscreen composer"
diff --git a/test/javascripts/acceptance/composer-test.js.es6 b/test/javascripts/acceptance/composer-test.js.es6
index c878f5c9ce5..898e815bf95 100644
--- a/test/javascripts/acceptance/composer-test.js.es6
+++ b/test/javascripts/acceptance/composer-test.js.es6
@@ -398,6 +398,48 @@ QUnit.test("Composer can toggle whispers", async assert => {
   );
 });
 
+QUnit.test(
+  "Composer can toggle layouts (open, fullscreen and draft)",
+  async assert => {
+    await visit("/t/this-is-a-test-topic/9");
+    await click(".topic-post:eq(0) button.reply");
+
+    assert.ok(
+      find("#reply-control.open").length === 1,
+      "it starts in open state by default"
+    );
+
+    await click(".toggle-fullscreen");
+
+    assert.ok(
+      find("#reply-control.fullscreen").length === 1,
+      "it expands composer to full screen"
+    );
+
+    await click(".toggle-fullscreen");
+
+    assert.ok(
+      find("#reply-control.open").length === 1,
+      "it collapses composer to regular size"
+    );
+
+    await fillIn(".d-editor-input", "This is a dirty reply");
+    await click(".toggler");
+
+    assert.ok(
+      find("#reply-control.draft").length === 1,
+      "it collapses composer to draft bar"
+    );
+
+    await click(".toggle-fullscreen");
+
+    assert.ok(
+      find("#reply-control.open").length === 1,
+      "from draft, it expands composer back to open state"
+    );
+  }
+);
+
 QUnit.test(
   "Composer can toggle between reply and createTopic",
   async assert => {