From 09dc922b3b13506e00f3bbead3d93a275769405e Mon Sep 17 00:00:00 2001 From: Penar Musaraj Date: Wed, 7 Nov 2018 22:20:53 -0500 Subject: [PATCH] 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 --- .../discourse-common/lib/icon-library.js.es6 | 5 +++-- .../discourse/controllers/composer.js.es6 | 9 --------- .../discourse/controllers/invite.js.es6 | 2 +- .../discourse/models/composer.js.es6 | 7 +++++-- .../discourse/templates/composer.hbs | 7 +++++-- .../discourse/widgets/post-small-action.js.es6 | 2 +- app/assets/stylesheets/common/base/compose.scss | 4 ++++ .../stylesheets/common/base/topic-post.scss | 7 ++----- .../stylesheets/common/topic-entrance.scss | 3 +-- app/assets/stylesheets/mobile/compose.scss | 4 ++++ app/controllers/svg_sprite_controller.rb | 4 +--- lib/svg_sprite/svg_sprite.rb | 17 +++++++++++++---- spec/components/svg_sprite/svg_sprite_spec.rb | 8 ++++---- .../acceptance/composer-actions-test.js.es6 | 6 +----- .../javascripts/acceptance/composer-test.js.es6 | 16 ++++------------ 15 files changed, 49 insertions(+), 52 deletions(-) diff --git a/app/assets/javascripts/discourse-common/lib/icon-library.js.es6 b/app/assets/javascripts/discourse-common/lib/icon-library.js.es6 index 52afe24eb06..bbf9d67eb89 100644 --- a/app/assets/javascripts/discourse-common/lib/icon-library.js.es6 +++ b/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", diff --git a/app/assets/javascripts/discourse/controllers/composer.js.es6 b/app/assets/javascripts/discourse/controllers/composer.js.es6 index 25927a467f3..7beec81dc30 100644 --- a/app/assets/javascripts/discourse/controllers/composer.js.es6 +++ b/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; diff --git a/app/assets/javascripts/discourse/controllers/invite.js.es6 b/app/assets/javascripts/discourse/controllers/invite.js.es6 index 1b750a18659..b9f05daed37 100644 --- a/app/assets/javascripts/discourse/controllers/invite.js.es6 +++ b/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"); } } diff --git a/app/assets/javascripts/discourse/models/composer.js.es6 b/app/assets/javascripts/discourse/models/composer.js.es6 index aae9a31055f..56503d534fd 100644 --- a/app/assets/javascripts/discourse/models/composer.js.es6 +++ b/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]; }, diff --git a/app/assets/javascripts/discourse/templates/composer.hbs b/app/assets/javascripts/discourse/templates/composer.hbs index d60ed2e804d..af718bedb6a 100644 --- a/app/assets/javascripts/discourse/templates/composer.hbs +++ b/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}} - ({{whisperOrUnlistTopicText}}) + {{#if model.whisper}} + {{d-icon 'eye-slash'}} + {{/if}} + {{#if model.unlistTopic}} + ({{i18n 'composer.unlist'}}) {{/if}} {{#if model.noBump}} {{d-icon "anchor"}} diff --git a/app/assets/javascripts/discourse/widgets/post-small-action.js.es6 b/app/assets/javascripts/discourse/widgets/post-small-action.js.es6 index 41b717bd774..aa40582ea70 100644 --- a/app/assets/javascripts/discourse/widgets/post-small-action.js.es6 +++ b/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) { diff --git a/app/assets/stylesheets/common/base/compose.scss b/app/assets/stylesheets/common/base/compose.scss index 8b81509bc32..f1c7f8b9445 100644 --- a/app/assets/stylesheets/common/base/compose.scss +++ b/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; diff --git a/app/assets/stylesheets/common/base/topic-post.scss b/app/assets/stylesheets/common/base/topic-post.scss index 2efa261c1a2..a7385927c8e 100644 --- a/app/assets/stylesheets/common/base/topic-post.scss +++ b/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; diff --git a/app/assets/stylesheets/common/topic-entrance.scss b/app/assets/stylesheets/common/topic-entrance.scss index d93d3548384..63765d15948 100644 --- a/app/assets/stylesheets/common/topic-entrance.scss +++ b/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); } } diff --git a/app/assets/stylesheets/mobile/compose.scss b/app/assets/stylesheets/mobile/compose.scss index 450d568e403..14c5e8ede2e 100644 --- a/app/assets/stylesheets/mobile/compose.scss +++ b/app/assets/stylesheets/mobile/compose.scss @@ -172,4 +172,8 @@ .add-warning { margin: 0 0 5px 5px; } + + .whisper { + margin-right: 5px; + } } diff --git a/app/controllers/svg_sprite_controller.rb b/app/controllers/svg_sprite_controller.rb index a685718910e..6d4000d794b 100644 --- a/app/controllers/svg_sprite_controller.rb +++ b/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 diff --git a/lib/svg_sprite/svg_sprite.rb b/lib/svg_sprite/svg_sprite.rb index f39a8f5f81f..9038b626987 100644 --- a/lib/svg_sprite/svg_sprite.rb +++ b/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 << '' 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 diff --git a/spec/components/svg_sprite/svg_sprite_spec.rb b/spec/components/svg_sprite/svg_sprite_spec.rb index dc8a47a2a19..0a6eebaf453 100644 --- a/spec/components/svg_sprite/svg_sprite_spec.rb +++ b/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 diff --git a/test/javascripts/acceptance/composer-actions-test.js.es6 b/test/javascripts/acceptance/composer-actions-test.js.es6 index 6c84b8778d8..af745854480 100644 --- a/test/javascripts/acceptance/composer-actions-test.js.es6 +++ b/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 => { diff --git a/test/javascripts/acceptance/composer-test.js.es6 b/test/javascripts/acceptance/composer-test.js.es6 index 34e7ae5f339..c1fa34b3471 100644 --- a/test/javascripts/acceptance/composer-test.js.es6 +++ b/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" );