UX: when composer is minimized, let user open composer in regular size instead of full screen

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";
   }

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")}}
 

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"

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 => {