UX: Composer actions menu header should display the icon of selected action (#12449)

UX: Composer actions menu header should display the icon of selected action (#12449)

See a video of the change in the PR: UX: Composer actions menu should display the icon of selected action by OsamaSayegh · Pull Request #12449 · discourse/discourse · GitHub.

diff --git a/app/assets/javascripts/discourse/app/controllers/composer.js b/app/assets/javascripts/discourse/app/controllers/composer.js
index 53fffb5..b7cdcf7 100644
--- a/app/assets/javascripts/discourse/app/controllers/composer.js
+++ b/app/assets/javascripts/discourse/app/controllers/composer.js
@@ -226,21 +226,31 @@ export default Controller.extend({
 
   isWhispering: or("replyingToWhisper", "model.whisper"),
 
-  @discourseComputed("model.action", "isWhispering")
-  saveIcon(modelAction, isWhispering) {
+  @discourseComputed("model.action", "isWhispering", "model.privateMessage")
+  saveIcon(modelAction, isWhispering, privateMessage) {
     if (isWhispering) {
       return "far-eye-slash";
     }
+    if (privateMessage) {
+      return "envelope";
+    }
 
     return SAVE_ICONS[modelAction];
   },
 
-  @discourseComputed("model.action", "isWhispering", "model.editConflict")
-  saveLabel(modelAction, isWhispering, editConflict) {
+  @discourseComputed(
+    "model.action",
+    "isWhispering",
+    "model.editConflict",
+    "model.privateMessage"
+  )
+  saveLabel(modelAction, isWhispering, editConflict, privateMessage) {
     if (editConflict) {
       return "composer.overwrite_edit";
     } else if (isWhispering) {
       return "composer.create_whisper";
+    } else if (privateMessage) {
+      return "composer.create_pm";
     }
 
     return SAVE_LABELS[modelAction];
diff --git a/app/assets/javascripts/discourse/app/templates/components/composer-action-title.hbs b/app/assets/javascripts/discourse/app/templates/components/composer-action-title.hbs
index 1551e4a..2924226 100644
--- a/app/assets/javascripts/discourse/app/templates/components/composer-action-title.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/composer-action-title.hbs
@@ -8,6 +8,8 @@
   tabindex=tabindex
   topic=model.topic
   post=model.post
+  whisper=model.whisper
+  noBump=model.noBump
 }}
 
 <span class="action-title">
diff --git a/app/assets/javascripts/discourse/app/templates/composer.hbs b/app/assets/javascripts/discourse/app/templates/composer.hbs
index dac189f..9a04fcc 100644
--- a/app/assets/javascripts/discourse/app/templates/composer.hbs
+++ b/app/assets/javascripts/discourse/app/templates/composer.hbs
@@ -25,14 +25,13 @@
                 {{plugin-outlet name="composer-action-after" noTags=true args=(hash model=model)}}
 
                 {{#unless site.mobileView}}
-                  {{#if isWhispering}}
-                    <span class="whisper">{{d-icon "far-eye-slash"}}</span>
-                  {{/if}}
                   {{#if model.unlistTopic}}
                     <span class="unlist">({{i18n "composer.unlist"}})</span>
                   {{/if}}
-                  {{#if model.noBump}}
-                    <span class="no-bump">{{d-icon "anchor"}}</span>
+                  {{#if isWhispering}}
+                    {{#if model.noBump}}
+                      <span class="no-bump">{{d-icon "anchor"}}</span>
+                    {{/if}}
                   {{/if}}
                 {{/unless}}
 
diff --git a/app/assets/javascripts/discourse/tests/acceptance/composer-actions-test.js b/app/assets/javascripts/discourse/tests/acceptance/composer-actions-test.js
index a9f4ff0..36cf8cc 100644
--- a/app/assets/javascripts/discourse/tests/acceptance/composer-actions-test.js
+++ b/app/assets/javascripts/discourse/tests/acceptance/composer-actions-test.js
@@ -110,11 +110,25 @@ acceptance("Composer Actions", function (needs) {
       "test replying as whisper to topic when initially not a whisper"
     );
 
+    assert.ok(
+      queryAll(".composer-actions svg.d-icon-far-eye-slash").length === 0,
+      "whisper icon is not visible"
+    );
+    assert.ok(
+      queryAll(".composer-actions svg.d-icon-share").length === 1,
+      "reply icon is visible"
+    );
+
     await composerActions.expand();
     await composerActions.selectRowByValue("toggle_whisper");
 
     assert.ok(
-      queryAll(".composer-fields .whisper .d-icon-far-eye-slash").length === 1
+      queryAll(".composer-actions svg.d-icon-far-eye-slash").length === 1,
+      "whisper icon is visible"
+    );
+    assert.ok(
+      queryAll(".composer-actions svg.d-icon-share").length === 0,
+      "reply icon is not visible"
     );
   });
 
@@ -277,25 +291,75 @@ acceptance("Composer Actions", function (needs) {
     await click("article#post_3 button.reply");
 
     assert.ok(
-      queryAll(".composer-fields .no-bump").length === 0,
-      "no-bump text is not visible"
+      queryAll(".composer-actions svg.d-icon-anchor").length === 0,
+      "no-bump icon is not visible"
+    );
+    assert.ok(
+      queryAll(".composer-actions svg.d-icon-share").length === 1,
+      "reply icon is visible"
     );
 
     await composerActions.expand();
     await composerActions.selectRowByValue("toggle_topic_bump");
 
     assert.ok(
-      queryAll(".composer-fields .no-bump").length === 1,
+      queryAll(".composer-actions svg.d-icon-anchor").length === 1,
       "no-bump icon is visible"
     );
+    assert.ok(
+      queryAll(".composer-actions svg.d-icon-share").length === 0,
+      "reply icon is not visible"
+    );
 
     await composerActions.expand();
     await composerActions.selectRowByValue("toggle_topic_bump");
 
     assert.ok(
-      queryAll(".composer-fields .no-bump").length === 0,
+      queryAll(".composer-actions svg.d-icon-anchor").length === 0,
+      "no-bump icon is not visible"
+    );
+    assert.ok(
+      queryAll(".composer-actions svg.d-icon-share").length === 1,
+      "reply icon is visible"
+    );
+  });
+
+  test("replying to post - whisper and no bump", async function (assert) {
+    const composerActions = selectKit(".composer-actions");
+
+    await visit("/t/internationalization-localization/280");
+    await click("article#post_3 button.reply");
+
+    assert.ok(
+      queryAll(".composer-actions svg.d-icon-far-eye-slash").length === 0,
+      "whisper icon is not visible"
+    );
+    assert.ok(
+      queryAll(".composer-fields .whisper .d-icon-anchor").length === 0,
       "no-bump icon is not visible"
     );
+    assert.ok(
+      queryAll(".composer-actions svg.d-icon-share").length === 1,
+      "reply icon is visible"
+    );
+
+    await composerActions.expand();
+    await composerActions.selectRowByValue("toggle_topic_bump");
+    await composerActions.expand();
+    await composerActions.selectRowByValue("toggle_whisper");
+
+    assert.ok(
+      queryAll(".composer-actions svg.d-icon-far-eye-slash").length === 1,
+      "whisper icon is visible"
+    );
+    assert.ok(
+      queryAll(".composer-fields .no-bump .d-icon-anchor").length === 1,
+      "no-bump icon is visible"
+    );
+    assert.ok(
+      queryAll(".composer-actions svg.d-icon-share").length === 0,
+      "reply icon is not visible"
+    );
   });
 
   test("replying to post as staff", async function (assert) {
@@ -428,6 +492,10 @@ acceptance("Composer Actions With New Topic Draft", function (needs) {
         queryAll("#reply-control .btn-primary.create .d-button-label").text(),
         I18n.t("composer.create_shared_draft")
       );
+      assert.ok(
+        queryAll(".composer-actions svg.d-icon-far-clipboard").length === 1,
+        "shared draft icon is visible"
+      );
 
       assert.ok(queryAll("#reply-control.composing-shared-draft").length === 1);
       await click(".modal-footer .btn.btn-default");
diff --git a/app/assets/javascripts/discourse/tests/acceptance/composer-test.js b/app/assets/javascripts/discourse/tests/acceptance/composer-test.js
index 8ff8735..f135a9d 100644
--- a/app/assets/javascripts/discourse/tests/acceptance/composer-test.js
+++ b/app/assets/javascripts/discourse/tests/acceptance/composer-test.js
@@ -460,7 +460,7 @@ acceptance("Composer", function (needs) {
     await menu.selectRowByValue("toggleWhisper");
 
     assert.ok(
-      queryAll(".composer-fields .whisper .d-icon-far-eye-slash").length === 1,

[... diff too long, it was truncated ...]

GitHub sha: c9923a3e

1 Like

This commit appears in #12449 which was approved by pmusaraj. It was merged by OsamaSayegh.

This commit has been mentioned on Discourse Meta. There might be relevant details there:

This commit has been mentioned on Discourse Meta. There might be relevant details there: