Switching to fa5

.eslintrc.yml

@@ -0,0 +1,17 @@
+env:
+  browser: true
+  jquery: true
+extends: 'eslint:recommended'
+rules:
+  indent:
+    - error
+    - 2
+  linebreak-style:
+    - error
+    - unix
+  quotes:
+    - error
+    - single
+  semi:
+    - error
+    - always

.stylelintrc

@@ -1,5 +0,0 @@
-{
-  "rules": {
-    "value-no-vendor-prefix": true
-  }
-}

app/helpers/additionals_tag_helper.rb

@@ -73,7 +73,7 @@ module AdditionalsTagHelper
     else
       content_tag('span',
                   link_to(safe_join(tag_name), additionals_tag_url(tag.name)),
-                  class: 'tag-label-color',
+                  class: 'additionals-tag-label-color',
                   style: "background-color: #{additionals_tag_color(tag.name)}")
     end
   end

app/models/additionals_font_awesome.rb

@@ -0,0 +1,101 @@
+class AdditionalsFontAwesome
+  include Redmine::I18n
+
+  class << self
+    def load_icons(type)
+      data = YAML.safe_load(ERB.new(IO.read(Rails.root.join('plugins',
+                                                            'additionals',
+                                                            'config',
+                                                            "fa_#{type}.yml"))).result) || {}
+      data['icons']
+    end
+
+    def font_weight(key)
+      case key
+      when :fas
+        900
+      else
+        'normal'
+      end
+    end
+
+    def font_family(key)
+      case key
+      when :fab
+        'Font Awesome\ 5 Brands'
+      else
+        'Font Awesome\ 5 Free'
+      end
+    end
+
+    def key2name(key)
+      'fa-' + key.tr('_', '-')
+    end
+
+    def key2value(key, type)
+      "fa#{type}-" + key
+    end
+
+    def classes(value)
+      info = value_info(value)
+      return '' if info.blank?
+      info[:classes]
+    end
+
+    def json_values(type)
+      FONTAWESOME_ICONS[type].collect { |fa_symbol, _v| { id: key2value(fa_symbol, type[-1]), text: key2name(fa_symbol) } }
+    end
+
+    def select_values(type)
+      FONTAWESOME_ICONS[type].collect { |fa_symbol, _v| [key2name(fa_symbol), key2value(fa_symbol, type[-1])] }
+    end
+
+    def search_unicode(type, name)
+      return unless FONTAWESOME_ICONS.key?(type)
+      code = FONTAWESOME_ICONS[type][name]
+      "&#x#{code}".html_safe if code.present?
+    end
+
+    def json_for_select
+      values = []
+      values << { text: l(:label_fontawesome_regular), children: json_values(:far) }
+      values << { text: l(:label_fontawesome_solid), children: json_values(:fas) }
+      values << { text: l(:label_fontawesome_brands), children: json_values(:fab) }
+
+      values.to_json
+    end
+
+    # show only one value as current selected
+    # (all other options are retrieved by select2
+    def active_option_for_select(selected)
+      info = value_info(selected)
+      return [] if info.blank?
+      [[info[:name], selected]]
+    end
+
+    def options_for_select
+      values = []
+      values << [l(:label_fontawesome_regular), select_values(:far)]
+      values << [l(:label_fontawesome_solid), select_values(:fas)]
+      values << [l(:label_fontawesome_brands), select_values(:fab)]
+      values
+    end
+
+    def value_info(value, options = {})
+      info = {}
+      return [] if value.blank?
+      values = value.split('-')
+      return [] unless values.count == 2
+      info[:type] = values[0].to_sym
+      info[:name] = key2name(values[1])
+      info[:classes] = "#{info[:type]} #{info[:name]}"
+      info[:font_weight] = font_weight(info[:type])
+      info[:font_family] = font_family(info[:type])
+      if options[:with_unicode]
+        info[:unicode] = search_unicode(info[:type], values[1])
+        return [] if info[:unicode].blank?
+      end
+      info
+    end
+  end
+end

assets/javascripts/additionals_delay_ajax_indicator.js

@@ -1,14 +1,14 @@
 function delayAjaxIndicator() {
   $(document).off('ajaxSend').bind('ajaxSend', function(event, xhr, settings) {
-  if ($('.ajax-loading').length === 0 && settings.contentType != 'application/octet-stream') {
-    $('#ajax-indicator').stop(true, false).delay(300).show(0);
-  }
+    if ($('.ajax-loading').length === 0 && settings.contentType != 'application/octet-stream') {
+      $('#ajax-indicator').stop(true, false).delay(300).show(0);
+    }
   });
 
   $(document).off('ajaxStop').bind('ajaxStop', function() {
     $('#ajax-indicator').hide(0);
   });
 
-};
+}
 
-$(document).ready(delayAjaxIndicator)
+$(document).ready(delayAjaxIndicator);

assets/javascripts/additionals_to_select2.js

@@ -3,12 +3,12 @@ var oldAdditionalsToggleFilter = window.toggleFilter;
 window.toggleFilter = function(field) {
   oldAdditionalsToggleFilter(field);
   return additionals_transform_to_select2(field);
-}
+};
 
 function filterAdditionalsFormatState (opt) {
   var $opt = $('<span>' + opt.name_with_icon + '</span>');
   return $opt;
-};
+}
 
 function additionals_transform_to_select2(field){
   field_format = availableFilters[field]['field_format'];

assets/javascripts/noreferrer.js

@@ -1,6 +1,6 @@
 $(function() {
-	var handleNoReferrer = function() {
-		this.rel = 'noreferrer';
-	}
-	$('a.external').each(handleNoReferrer);
+  var handleNoReferrer = function() {
+    this.rel = 'noreferrer';
+  };
+  $('a.external').each(handleNoReferrer);
 });

assets/javascripts/tooltips.js

@@ -5,12 +5,12 @@
 $(function() {
   $(document).tooltip({
     position: {
-      my: "center bottom-20",
-      at: "center top",
+      my: 'center bottom-20',
+      at: 'center top',
       using: function(position, feedback) {
         $(this).css(position);
-        $("<div>")
-          .addClass("tooltip-arrow")
+        $('<div>')
+          .addClass('tooltip-arrow')
           .addClass(feedback.vertical)
           .addClass(feedback.horizontal)
           .appendTo(this);

assets/stylesheets/additionals.css

@@ -1,13 +1,11 @@
-/* ICONS */
-#admin-menu a.additionals::before {
-  font-size: 1.3em;
-  padding-right: 4px;
-}
+/* stylelint-disable font-family-no-missing-generic-family-keyword */
 
 #admin-menu a.additionals::before {
-  font-family: FontAwesome;
-  font-weight: normal;
-  content: "\f085"; /* fa-cogs */
+  font-family: Font Awesome\ 5 Free;
+  font-size: 1.1em;
+  font-weight: 900;
+  content: "\f085"; /* fas fa-cogs */
+  padding-right: 4px;
 }
 
 #admin-menu a.additionals {
@@ -158,17 +156,17 @@ ul.tags {
   padding: 0;
 }
 
-span.tag-label-color {
+span.additionals-tag-label-color {
   display: inline-block;
   margin-bottom: 5px !important;
 }
 
-td.tags span.tag-label-color {
+td.tags span.additionals-tag-label-color {
   display: inline-block;
   margin: 2px !important;
 }
 
-.tag-label-color {
+.additionals-tag-label-color {
   padding: 2px 4px;
   color: #fff;
   text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.5);
@@ -177,11 +175,11 @@ td.tags span.tag-label-color {
   border-radius: 2px;
 }
 
-.tag-label-color a::before {
-  font-family: FontAwesome;
-  font-size: 1em;
-  font-weight: normal;
-  content: "\f02b"; /* fa-tag */
+.additionals-tag-label-color a::before {
+  font-family: Font Awesome\ 5 Free;
+  font-size: 0.9em;
+  font-weight: 900;
+  content: "\f02b"; /* fas fa-tag */
   padding-right: 3px;
   color: #fff;
 }
@@ -198,7 +196,7 @@ div.tags .tag-pass-7 { font-size: 1.4em; }
 div.tags .tag-pass-8 { font-size: 1.5em; }
 
 .tag-count { font-size: 0.75em; }
-.tag-label-color a { color: white; }
+.additionals-tag-label-color a { color: white; }
 
 .tagit.ui-widget {
   font-size: 1em;

lib/additionals.rb

@@ -52,14 +52,6 @@ module Additionals
                                                             'settings.yml'))).result) || {}
       data.symbolize_keys
     end
-
-    def load_fontawesome_icons
-      data = YAML.safe_load(ERB.new(IO.read(Rails.root.join('plugins',
-                                                            'additionals',
-                                                            'config',
-                                                            'fontawesome_icons.yml'))).result) || {}
-      data['icons']
-    end
   end
 end
 
@@ -104,6 +96,12 @@ if ActiveRecord::Base.connection.table_exists?(:settings)
                                reddit slideshare tradingview twitter user vimeo youtube])
   end
 
+  Rails.application.config.after_initialize do
+    FONTAWESOME_ICONS = { fab: AdditionalsFontAwesome.load_icons(:fab),
+                          far: AdditionalsFontAwesome.load_icons(:far),
+                          fas: AdditionalsFontAwesome.load_icons(:fas) }.freeze
+  end
+
   # include deface overwrites
   Rails.application.paths['app/overrides'] ||= []
   additionals_overwrite_dir = "#{Redmine::Plugin.directory}/additionals/app/overrides".freeze

lib/additionals/helpers.rb

@@ -260,7 +260,7 @@ module Additionals
     end
 
     def additionals_load_font_awesome
-      additionals_include_css('font-awesome.min')
+      additionals_include_css('fontawesome-all.min')
     end
 
     def additionals_load_angular_gantt
@@ -314,13 +314,6 @@ module Additionals
       additionals_include_js('zeroclipboard_min')
     end
 
-    def font_awesome_get_from_info
-      s = []
-      s << l(:label_set_icon_from)
-      s << link_to('http://fontawesome.io/icons/', 'http://fontawesome.io/icons/', class: 'external')
-      safe_join(s, ' ')
-    end
-
     def user_with_avatar(user, options = {})
       return if user.nil?
       options[:size] = 14 if options[:size].nil?
@@ -335,21 +328,31 @@ module Additionals
       safe_join(s)
     end
 
-    # obsolete, because it conflicts with redmine_bootstrap_kit
-    def fa_icon(name, options = {})
-      font_awesome_icon(name, options)
+    def fontawesome_info_url
+      s = []
+      s << l(:label_set_icon_from)
+      s << link_to('https://fontawesome.com/icons?m=free', 'https://fontawesome.com/icons?m=free', class: 'external')
+      safe_join(s, ' ')
     end
 
+    # name = TYPE-FA_NAME, eg. fas-car
+    #                          fas-cloud_upload_alt
+    #                          far-id_card
+    #                          fab-font_awesome
+    # options = class
+    #           pre_text
+    #           post_text
+    #           title
     def font_awesome_icon(name, options = {})
+      info = AdditionalsFontAwesome.value_info(name)
+      return '' if info.blank?
       post_text = ''
-      classes = ['fa']
-      classes << name
 
       options['aria-hidden'] = 'true'
       options[:class] = if options[:class].present?
-                          classes.join(' ') + ' ' + options[:class]
+                          info[:classes] + ' ' + options[:class]
                         else
-                          classes.join(' ')
+                          info[:classes]
                         end
 
       s = []

lib/additionals/wiki_macros/reddit_macro.rb

@@ -12,18 +12,18 @@ module Additionals
 
         case name[0..1]
         when 'r/'
-          link_to(font_awesome_icon('fa-reddit', post_text: name),
+          link_to(font_awesome_icon('fab-reddit', post_text: name),
                   "https://www.reddit.com/#{name}",
                   class: 'external reddit',
                   title: l(:label_reddit_subject))
         when 'u/'
-          link_to(font_awesome_icon('fa-reddit-square', post_text: name),
+          link_to(font_awesome_icon('fab-reddit_square', post_text: name),
                   "https://www.reddit.com/username/#{name[2..-1]}",
                   class: 'external reddit',
                   title: l(:label_reddit_user_account))
         else
           name = 'r/' + name
-          link_to(font_awesome_icon('fa-reddit', post_text: name),
+          link_to(font_awesome_icon('fab-reddit', post_text: name),
                   "https://www.reddit.com/#{name}",
                   class: 'external reddit',
                   title: l(:label_reddit_subject))

lib/additionals/wiki_macros/twitter_macro.rb

@@ -11,17 +11,17 @@ module Additionals
         name = args[0].strip
         case name[0]
         when '@'
-          link_to(font_awesome_icon('fa-twitter', post_text: name),
+          link_to(font_awesome_icon('fab-twitter', post_text: name),
                   "https://twitter.com/#{name[1..-1]}",
                   class: 'external twitter',
                   title: l(:label_twitter_account))
         when '#'
-          link_to(font_awesome_icon('fa-twitter-square', post_text: name),
+          link_to(font_awesome_icon('fab-twitter_square', post_text: name),
                   "https://twitter.com/hashtag/#{name[1..-1]}",
                   class: 'external twitter',
                   title: l(:label_twitter_hashtag))
         else
-          link_to(font_awesome_icon('fa-twitter', post_text: " @#{name}"),
+          link_to(font_awesome_icon('fab-twitter', post_text: " @#{name}"),
                   "https://twitter.com/#{name}",
                   class: 'external twitter',
                   title: l(:label_twitter_account))

test/unit/additionals_fontawesome_test.rb

@@ -0,0 +1,69 @@
+require File.expand_path('../../test_helper', __FILE__)
+
+class AdditionalsFontAwesomeTest < ActiveSupport::TestCase
+  fixtures :projects, :users, :members, :member_roles, :roles,
+           :trackers, :projects_trackers,
+           :enabled_modules,
+           :issue_statuses, :issue_categories, :workflows,
+           :enumerations,
+           :issues, :journals, :journal_details,
+           :custom_fields, :custom_fields_projects, :custom_fields_trackers, :custom_values,
+           :time_entries
+
+  include Redmine::I18n
+
+  def setup
+    set_language_if_valid 'en'
+  end
+
+  def test_value_info_should_return_infos
+    info = AdditionalsFontAwesome.value_info('invalid')
+    assert_equal [], info
+
+    info = AdditionalsFontAwesome.value_info('fas-car')
+    assert info.key?(:name)
+    assert_equal 'fa-car', info[:name]
+    assert_equal :fas, info[:type]
+    assert_equal 'fas fa-car', info[:classes]
+    assert_not info.key?(:unicode)
+  end
+
+  def test_value_info_regular_icons
+    info = AdditionalsFontAwesome.value_info('far-address_book')
+    assert info.key?(:name)
+    assert_equal 'normal', info[:font_weight]
+    assert_equal 'Font Awesome\ 5 Free', info[:font_family]
+  end
+
+  def test_value_info_solid_icons
+    info = AdditionalsFontAwesome.value_info('fas-address_book')
+    assert info.key?(:name)
+    assert_equal 900, info[:font_weight]
+    assert_equal 'Font Awesome\ 5 Free', info[:font_family]
+  end
+
+  def test_value_info_brands_icons
+    info = AdditionalsFontAwesome.value_info('fab-xing')
+    assert info.key?(:name)
+    assert_equal 'normal', info[:font_weight]
+    assert_equal 'Font Awesome\ 5 Brands', info[:font_family]
+  end
+
+  def test_brands_icon_with_unicode
+    info = AdditionalsFontAwesome.value_info('fab-amazon', with_unicode: true)
+    assert info.key?(:unicode)
+    assert_equal '&#xf270', info[:unicode]
+  end
+
+  def test_regular_icon_with_unicode
+    info = AdditionalsFontAwesome.value_info('far-calendar', with_unicode: true)
+    assert info.key?(:unicode)
+    assert_equal '&#xf133', info[:unicode]
+  end
+
+  def test_solid_icon_with_unicode
+    info = AdditionalsFontAwesome.value_info('fas-archive', with_unicode: true)
+    assert info.key?(:unicode)
+    assert_equal '&#xf187', info[:unicode]
+  end
+end

test/unit/helpers/global_helper_test.rb

@@ -42,13 +42,16 @@ class GlobalHelperTest < ActionView::TestCase
   end
 
   def test_font_awesome_icon
-    html = font_awesome_icon('fa-car', class: 'test')
-    assert_include 'class="fa fa-car test"', html
+    html = font_awesome_icon('fas-cloud_upload_alt', class: 'test')
+    assert_include 'class="fas fa-cloud-upload-alt test"', html
 
-    html = font_awesome_icon('fa-car', pre_text: 'Testing')
+    html = font_awesome_icon('fab-xing', class: 'test')
+    assert_include 'class="fab fa-xing test"', html
+
+    html = font_awesome_icon('fas-cloud_upload_alt', pre_text: 'Testing')
     assert_include 'Testing <span', html
 
-    html = font_awesome_icon('fa-car', post_text: 'Testing')
+    html = font_awesome_icon('fas-cloud_upload_alt', post_text: 'Testing')
     assert_include '</span> Testing', html
   end