Fix several FontAwesome 5 issues

add missing icons, update SvgSprite methods (to fix ruby 2.4 issues), update whisper icon in composer, fix alignment issues

app/assets/javascripts/discourse-common/lib/icon-library.js.es6

@@ -26,12 +26,12 @@ const REPLACEMENTS = {
   "notification.liked_many": "heart",
   "notification.private_message": "far-envelope",
   "notification.invited_to_private_message": "far-envelope",
-  "notification.invited_to_topic": "far-hand-point-right",
+  "notification.invited_to_topic": "hand-point-right",
   "notification.invitee_accepted": "user",
   "notification.moved_post": "sign-out",
   "notification.linked": "link",
   "notification.granted_badge": "certificate",
-  "notification.topic_reminder": "hand-o-right",
+  "notification.topic_reminder": "hand-point-right",
   "notification.watching_first_post": "far-dot-circle",
   "notification.group_message_summary": "group"
 };
@@ -60,6 +60,7 @@ const fa4Replacements = {
   "github-square": "fab-github-square",
   "hacker-news": "fab-hacker-news",
   "hand-grab-o": "far-hand-rock",
+  "hand-o-right": "hand-point-right",
   "id-badge": "far-id-badge",
   "internet-explorer": "fab-internet-explorer",
   "line-chart": "chart-line",

app/assets/javascripts/discourse/controllers/composer.js.es6

@@ -186,15 +186,6 @@ export default Ember.Controller.extend({
     );
   },
 
-  @computed("model.whisper", "model.unlistTopic")
-  whisperOrUnlistTopicText(whisper, unlistTopic) {
-    if (whisper) {
-      return I18n.t("composer.whisper");
-    } else if (unlistTopic) {
-      return I18n.t("composer.unlist");
-    }
-  },
-
   @computed
   isStaffUser() {
     const currentUser = this.currentUser;

app/assets/javascripts/discourse/controllers/invite.js.es6

@@ -206,7 +206,7 @@ export default Ember.Controller.extend(ModalFunctionality, {
           this.set("inviteIcon", "envelope");
           return I18n.t("topic.invite_reply.to_topic_email");
         } else {
-          this.set("inviteIcon", "hand-o-right");
+          this.set("inviteIcon", "hand-point-right");
           return I18n.t("topic.invite_reply.to_topic_username");
         }
       }

app/assets/javascripts/discourse/models/composer.js.es6

@@ -382,8 +382,11 @@ const Composer = RestModel.extend({
     return this.get("titleLength") <= this.siteSettings.max_topic_title_length;
   }.property("minimumTitleLength", "titleLength", "post.static_doc"),
 
-  @computed("action")
-  saveIcon(action) {
+  @computed("action", "whisper")
+  saveIcon(action, whisper) {
+    if (whisper) {
+      return "eye-slash";
+    }
     return SAVE_ICONS[action];
   },
 

app/assets/javascripts/discourse/templates/composer.hbs

@@ -19,8 +19,11 @@
                   {{composer-action-title model=model canWhisper=canWhisper tabindex=8}}
 
                   {{#unless site.mobileView}}
-                    {{#if whisperOrUnlistTopicText}}
-                      <span class='whisper'>({{whisperOrUnlistTopicText}})</span>
+                    {{#if model.whisper}}
+                      <span class='whisper'>{{d-icon 'eye-slash'}}</span>
+                    {{/if}}
+                    {{#if model.unlistTopic}}
+                      <span class='whisper'>({{i18n 'composer.unlist'}})</span>
                     {{/if}}
                     {{#if model.noBump}}
                       <span class="no-bump">{{d-icon "anchor"}}</span>

app/assets/javascripts/discourse/widgets/post-small-action.js.es6

@@ -53,7 +53,7 @@ const icons = {
   removed_group: "minus-circle",
   public_topic: "comment",
   private_topic: "envelope",
-  autobumped: "hand-o-right"
+  autobumped: "hand-point-right"
 };
 
 export function addPostSmallActionIcon(key, icon) {

app/assets/stylesheets/common/base/compose.scss

@@ -101,6 +101,10 @@
       max-width: calc(100% - 60px);
       flex: 1 1 auto;
       white-space: nowrap;
+
+      .d-icon {
+        opacity: 0.8;
+      }
     }
     .composer-action-title {
       display: inline-flex;

app/assets/stylesheets/common/base/topic-post.scss

@@ -28,7 +28,9 @@
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
+    vertical-align: middle;
     a {
+      vertical-align: middle;
       color: dark-light-choose($primary-high, $secondary-low);
     }
   }
@@ -838,11 +840,6 @@ a.mention-group {
       display: none;
     }
   }
-  .names {
-    span {
-      display: block;
-    }
-  }
   .user-title {
     float: left;
     clear: left;

app/assets/stylesheets/common/topic-entrance.scss

@@ -15,8 +15,7 @@
 
     .d-icon {
       display: block;
-      margin-top: 2px;
-      margin-bottom: 2px;
+      margin: 2px auto;
       transform: rotate(90deg);
     }
   }

app/assets/stylesheets/mobile/compose.scss

@@ -172,4 +172,8 @@
   .add-warning {
     margin: 0 0 5px 5px;
   }
+
+  .whisper {
+    margin-right: 5px;
+  }
 }

app/controllers/svg_sprite_controller.rb

@@ -7,9 +7,7 @@ class SvgSpriteController < ApplicationController
 
     RailsMultisite::ConnectionManagement.with_hostname(params[:hostname]) do
 
-      current_version = SvgSprite.version(SvgSprite.all_icons.to_s)
-
-      if current_version != params[:version]
+      if SvgSprite.version != params[:version]
         return redirect_to path(SvgSprite.path)
       end
 

lib/svg_sprite/svg_sprite.rb

@@ -13,9 +13,11 @@ module SvgSprite
     "backward",
     "ban",
     "bars",
+    "bed",
     "bold",
     "book",
     "bookmark",
+    "briefcase",
     "calendar-alt",
     "caret-down",
     "caret-left",
@@ -73,6 +75,7 @@ module SvgSprite
     "far-list-alt",
     "far-smile",
     "far-square",
+    "far-sun",
     "far-thumbs-down",
     "far-thumbs-up",
     "far-trash-alt",
@@ -82,10 +85,12 @@ module SvgSprite
     "file-alt",
     "flag",
     "folder",
+    "folder-open",
     "forward",
     "gavel",
     "globe",
     "globe-americas",
+    "hand-point-right",
     "heading",
     "heart",
     "info-circle",
@@ -96,6 +101,7 @@ module SvgSprite
     "list-ol",
     "list-ul",
     "lock",
+    "magic",
     "microphone-slash",
     "minus",
     "mobile-alt",
@@ -103,6 +109,8 @@ module SvgSprite
     "pencil-alt",
     "plug",
     "plus",
+    "plus-circle",
+    "plus-square",
     "power-off",
     "question",
     "question-circle",
@@ -181,13 +189,14 @@ module SvgSprite
     @svg_subset << '</svg>'
   end
 
-  def self.version(svg_subset)
-    (@svg_subset_cache ||= {})[svg_subset] ||=
-      Digest::SHA1.hexdigest(svg_subset)
+  def self.version
+    icon_subset = all_icons.sort.join('|')
+    (@svg_subset_cache ||= {})[icon_subset] ||=
+      Digest::SHA1.hexdigest(icon_subset)
   end
 
   def self.path
-    "/svg-sprite/#{Discourse.current_hostname}/#{version all_icons.to_s}.svg"
+    "/svg-sprite/#{Discourse.current_hostname}/#{version}.svg"
   end
 
   def self.plugin_icons

spec/components/svg_sprite/svg_sprite_spec.rb

@@ -7,11 +7,11 @@ describe SvgSprite do
     expect(bundle).to match(/angle-double-down/)
   end
 
-  it 'can get a version string' do
-    version1 = SvgSprite.version("heart|caret-down")
-    version2 = SvgSprite.version("heart|caret-down|caret-up")
+  it 'can get a consistent version string' do
+    version1 = SvgSprite.version
+    version2 = SvgSprite.version
 
-    expect(version1).not_to eq(version2)
+    expect(version1).to eq(version2)
   end
 
   it 'includes  Font Awesome 4.7 icons from badges' do

test/javascripts/acceptance/composer-actions-test.js.es6

@@ -88,11 +88,7 @@ QUnit.test("replying to post - toggle_whisper", async assert => {
   await composerActions.expand();
   await composerActions.selectRowByValue("toggle_whisper");
 
-  assert.ok(
-    find(".composer-fields .whisper")
-      .text()
-      .indexOf(I18n.t("composer.whisper")) > 0
-  );
+  assert.ok(find(".composer-fields .whisper .d-icon-eye-slash").length === 1);
 });
 
 QUnit.test("replying to post - reply_as_new_topic", async assert => {

test/javascripts/acceptance/composer-test.js.es6

@@ -375,9 +375,7 @@ QUnit.test("Composer can toggle whispers", async assert => {
   );
 
   assert.ok(
-    find(".composer-fields .whisper")
-      .text()
-      .indexOf(I18n.t("composer.whisper")) > 0,
+    find(".composer-fields .whisper .d-icon-eye-slash").length === 1,
     "it sets the post type to whisper"
   );
 
@@ -387,9 +385,7 @@ QUnit.test("Composer can toggle whispers", async assert => {
   );
 
   assert.ok(
-    find(".composer-fields .whisper")
-      .text()
-      .indexOf(I18n.t("composer.whisper")) <= 0,
+    find(".composer-fields .whisper .d-icon-eye-slash").length === 0,
     "it removes the whisper mode"
   );
 });
@@ -406,9 +402,7 @@ QUnit.test(
     );
 
     assert.ok(
-      find(".composer-fields .whisper")
-        .text()
-        .indexOf(I18n.t("composer.whisper")) > 0,
+      find(".composer-fields .whisper .d-icon-eye-slash").length === 1,
       "it sets the post type to whisper"
     );
 
@@ -417,9 +411,7 @@ QUnit.test(
 
     await click("#create-topic");
     assert.ok(
-      find(".composer-fields .whisper")
-        .text()
-        .indexOf(I18n.t("composer.whisper")) === -1,
+      find(".composer-fields .whisper .d-icon-eye-slash").length === 0,
       "it should reset the state of the composer's model"
     );