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

UX: when composer is minimized, let user open composer in regular size instead of full screen
From 67450ba4025e7507d4941bc6f940b28a21d91823 Mon Sep 17 00:00:00 2001
From: Penar Musaraj <pmusaraj@gmail.com>
Date: Fri, 7 Dec 2018 17:45:13 -0500
Subject: [PATCH] UX: when composer is minimized, let user open composer in
 regular size instead of full screen


diff --git a/app/assets/javascripts/discourse/components/composer-toggles.js.es6 b/app/assets/javascripts/discourse/components/composer-toggles.js.es6
index def2000..f618e1c 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 49a04a0..4055f0e 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 2016681..194a633 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 c878f5c..898e815 100644
--- a/test/javascripts/acceptance/composer-test.js.es6
+++ b/test/javascripts/acceptance/composer-test.js.es6
@@ -399,6 +399,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 => {
     await visit("/t/this-is-a-test-topic/9");

GitHub

2 Likes

:+1: