FIX: applies correct styles to icon and attempts to dry code (#8739)

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
+});

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

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

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

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

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

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

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

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);

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;