From 6abc2f5072fef6d8088698b60c7d65fba5e36857 Mon Sep 17 00:00:00 2001
From: Joffrey JAFFEUX <j.jaffeux@gmail.com>
Date: Fri, 17 Jan 2020 18:20:23 +0100
Subject: [PATCH] FIX: applies correct styles to icon and attempts to dry code
 (#8739)

---
 .../components/private-message-glyph.js.es6   |  7 ++++++
 .../components/related-messages.js.es6        | 12 ++--------
 .../components/suggested-topics.js.es6        | 24 +++++++++----------
 .../components/private-message-glyph.hbs      | 16 +++++++++++++
 .../templates/components/related-messages.hbs | 16 +++++++++----
 .../templates/components/suggested-topics.hbs |  8 ++++++-
 .../javascripts/discourse/templates/topic.hbs |  4 +---
 .../widgets/header-topic-info.js.es6          |  6 +++--
 app/assets/stylesheets/common/base/topic.scss | 19 +++++++++++----
 app/assets/stylesheets/desktop/topic.scss     |  4 +---
 10 files changed, 75 insertions(+), 41 deletions(-)
 create mode 100644 app/assets/javascripts/discourse/components/private-message-glyph.js.es6
 create mode 100644 app/assets/javascripts/discourse/templates/components/private-message-glyph.hbs

diff --git a/app/assets/javascripts/discourse/components/private-message-glyph.js.es6 b/app/assets/javascripts/discourse/components/private-message-glyph.js.es6
new file mode 100644
index 00000000000..b57a0290a32
--- /dev/null
+++ b/app/assets/javascripts/discourse/components/private-message-glyph.js.es6
@@ -0,0 +1,7 @@
+import Component from "@ember/component";
+
+export default Component.extend({
+  tagName: null,
+  link: null,
+  label: null
+});
diff --git a/app/assets/javascripts/discourse/components/related-messages.js.es6 b/app/assets/javascripts/discourse/components/related-messages.js.es6
index 5fec6f28ba9..46732424f8d 100644
--- a/app/assets/javascripts/discourse/components/related-messages.js.es6
+++ b/app/assets/javascripts/discourse/components/related-messages.js.es6
@@ -1,6 +1,5 @@
 import discourseComputed from "discourse-common/utils/decorators";
 import Component from "@ember/component";
-import { iconHTML } from "discourse-common/lib/icon-library";
 
 export default Component.extend({
   elementId: "related-messages",
@@ -31,14 +30,7 @@ export default Component.extend({
   },
 
   @discourseComputed("topic")
-  relatedTitle(topic) {
-    const href = this.currentUser && this.currentUser.pmPath(topic);
-    return href
-      ? `<a href="${href}" aria-label="${I18n.t(
-          "user.messages.inbox"
-        )}">${iconHTML("envelope", {
-          class: "private-message-glyph"
-        })}</a><span>${I18n.t("related_messages.title")}</span>`
-      : I18n.t("related_messages.title");
+  relatedTitleLink(topic) {
+    return this.currentUser && this.currentUser.pmPath(topic);
   }
 });
diff --git a/app/assets/javascripts/discourse/components/suggested-topics.js.es6 b/app/assets/javascripts/discourse/components/suggested-topics.js.es6
index c8ea62e827b..566f4e042c8 100644
--- a/app/assets/javascripts/discourse/components/suggested-topics.js.es6
+++ b/app/assets/javascripts/discourse/components/suggested-topics.js.es6
@@ -2,24 +2,24 @@ import discourseComputed from "discourse-common/utils/decorators";
 import { get } from "@ember/object";
 import Component from "@ember/component";
 import { categoryBadgeHTML } from "discourse/helpers/category-link";
-import { iconHTML } from "discourse-common/lib/icon-library";
 import Site from "discourse/models/site";
+import { computed } from "@ember/object";
 
 export default Component.extend({
   elementId: "suggested-topics",
   classNames: ["suggested-topics"],
 
-  @discourseComputed("topic")
-  suggestedTitle(topic) {
-    const href = this.currentUser && this.currentUser.pmPath(topic);
-    return topic.get("isPrivateMessage") && href
-      ? `<a href="${href}" aria-label="${I18n.t(
-          "user.messages.inbox"
-        )}>${iconHTML("envelope", {
-          class: "private-message-glyph"
-        })}</a><span>${I18n.t("suggested_topics.pm_title")}</span>`
-      : I18n.t("suggested_topics.title");
-  },
+  suggestedTitleLabel: computed("topic", function() {
+    if (this.currentUser && this.currentUser.pmPath(this.topic)) {
+      return "suggested_topics.pm_title";
+    } else {
+      return "suggested_topics.title";
+    }
+  }),
+
+  suggestedTitleLink: computed("topic", function() {
+    return this.currentUser && this.currentUser.pmPath(this.topic);
+  }),
 
   @discourseComputed("topic", "topicTrackingState.messageCount")
   browseMoreMessage(topic) {
diff --git a/app/assets/javascripts/discourse/templates/components/private-message-glyph.hbs b/app/assets/javascripts/discourse/templates/components/private-message-glyph.hbs
new file mode 100644
index 00000000000..a549f99cdeb
--- /dev/null
+++ b/app/assets/javascripts/discourse/templates/components/private-message-glyph.hbs
@@ -0,0 +1,16 @@
+{{#if link}}
+  <a href={{link}} aria-label={{i18n "user.messages.inbox"}} class="private-message-glyph-wrapper">
+    {{d-icon "envelope" class="private-message-glyph"}}
+  </a>
+  {{#if label}}
+    <span>{{i18n label}}</span>
+  {{/if}}
+{{else}}
+  {{#if label}}
+    <span>{{i18n label}}</span>
+  {{else}}
+    <span class="private-message-glyph-wrapper">
+      {{d-icon "envelope" class="private-message-glyph"}}
+    </span>
+  {{/if}}
+{{/if}}
diff --git a/app/assets/javascripts/discourse/templates/components/related-messages.hbs b/app/assets/javascripts/discourse/templates/components/related-messages.hbs
index dde8deaea1c..d645549fce0 100644
--- a/app/assets/javascripts/discourse/templates/components/related-messages.hbs
+++ b/app/assets/javascripts/discourse/templates/components/related-messages.hbs
@@ -1,9 +1,15 @@
-<h3 class="suggested-topics-title">{{{relatedTitle}}}</h3>
+<h3 class="suggested-topics-title">
+  {{private-message-glyph
+    link=relatedTitleLink
+    label="related_messages.title"
+  }}
+</h3>
+
 <div class="topics">
-{{basic-topic-list
-  hideCategory="true"
-  showPosters="true"
-  topics=topic.relatedMessages}}
+  {{basic-topic-list
+    hideCategory="true"
+    showPosters="true"
+    topics=topic.relatedMessages}}
 </div>
 
 {{#if targetUser}}
diff --git a/app/assets/javascripts/discourse/templates/components/suggested-topics.hbs b/app/assets/javascripts/discourse/templates/components/suggested-topics.hbs
index e70cfec46af..2078f417384 100644
--- a/app/assets/javascripts/discourse/templates/components/suggested-topics.hbs
+++ b/app/assets/javascripts/discourse/templates/components/suggested-topics.hbs
@@ -1,4 +1,10 @@
-<h3 class="suggested-topics-title">{{{suggestedTitle}}}</h3>
+<h3 class="suggested-topics-title">
+  {{private-message-glyph
+    link=suggestedTitleLink
+    label=suggestedTitleLabel
+  }}
+</h3>
+
 <div class="topics">
   {{#if topic.isPrivateMessage}}
     {{basic-topic-list
diff --git a/app/assets/javascripts/discourse/templates/topic.hbs b/app/assets/javascripts/discourse/templates/topic.hbs
index 0a7671bf64e..7286972ca9e 100644
--- a/app/assets/javascripts/discourse/templates/topic.hbs
+++ b/app/assets/javascripts/discourse/templates/topic.hbs
@@ -17,9 +17,7 @@
       {{#topic-title cancelled=(action "cancelEditingTopic") save=(action "finishedEditingTopic") model=model}}
         {{#if editingTopic}}
           <div class="edit-topic-title">
-          {{#if model.isPrivateMessage}}
-            <span class="private-message-glyph">{{d-icon "envelope"}}</span>
-          {{/if}}
+            {{private-message-glyph isVisible=model.isPrivateMessage}}
             {{text-field id="edit-title" value=buffered.title maxlength=siteSettings.max_topic_title_length autofocus="true"}}
 
             {{#if showCategoryChooser}}
diff --git a/app/assets/javascripts/discourse/widgets/header-topic-info.js.es6 b/app/assets/javascripts/discourse/widgets/header-topic-info.js.es6
index 02edb15cbe6..2e73b3253bd 100644
--- a/app/assets/javascripts/discourse/widgets/header-topic-info.js.es6
+++ b/app/assets/javascripts/discourse/widgets/header-topic-info.js.es6
@@ -69,8 +69,10 @@ export default createWidget("header-topic-info", {
         heading.push(
           h(
             "a.private-message-glyph-wrapper",
-            { attributes: { href } },
-            h("span.private-message-glyph", iconNode("envelope"))
+            {
+              attributes: { href, "aria-label": I18n.t("user.messages.inbox") }
+            },
+            iconNode("envelope", { class: "private-message-glyph" })
           )
         );
       }
diff --git a/app/assets/stylesheets/common/base/topic.scss b/app/assets/stylesheets/common/base/topic.scss
index 3d915475608..e1864df2dcf 100644
--- a/app/assets/stylesheets/common/base/topic.scss
+++ b/app/assets/stylesheets/common/base/topic.scss
@@ -128,18 +128,27 @@ a.badge-category {
   }
 }
 
+.private-message-glyph {
+  color: dark-light-choose($primary-low-mid, $secondary-high);
+}
+
+.private-message-glyph-wrapper {
+  float: left;
+
+  .private-message-glyph {
+    margin: 0 5px 0 0;
+    display: inline-block;
+  }
+}
+
 .private_message {
   #topic-title {
-    .private-message-glyph {
-      display: inline-block;
-      color: dark-light-choose($primary-low-mid, $secondary-high);
-    }
     .edit-topic-title {
       position: relative;
       .private-message-glyph {
         position: absolute;
         left: 0.75em;
-        top: 5px;
+        top: 6px;
       }
       #edit-title {
         width: calc(100% - 50px);
diff --git a/app/assets/stylesheets/desktop/topic.scss b/app/assets/stylesheets/desktop/topic.scss
index a46b5eb48f1..87d74169a8b 100644
--- a/app/assets/stylesheets/desktop/topic.scss
+++ b/app/assets/stylesheets/desktop/topic.scss
@@ -33,9 +33,7 @@
       color: $primary;
     }
   }
-  .private-message-glyph {
-    display: none;
-  }
+
   .remove-featured-link {
     float: right;
     text-transform: lowercase;