FontAwesome v5.0.6 (#1372)

* Update FontAwesome to v5.0.6

* Adapt DiscussionListItem-count icon to match FontAwesome 5 syntax

* Change icon name to match FontAwesome 5.0.6 fas icon

* Add font type prefix parameter to icon helper

* Add Enable Icon Prefix to show icon in Extension Page

* Fix invalid icon behavior

* Change icon name to match FontAwesome 5.0.6 far icon

* Use iconPrefix property on component

* Use full icon class name

* Update icon helper docblock

* Full icon class syntax

framework/core/js/admin/src/components/AdminNav.js

@@ -34,42 +34,42 @@ export default class AdminNav extends Component {
 
     items.add('dashboard', AdminLinkButton.component({
       href: app.route('dashboard'),
-      icon: 'bar-chart',
+      icon: 'far fa-chart-bar',
       children: app.translator.trans('core.admin.nav.dashboard_button'),
       description: app.translator.trans('core.admin.nav.dashboard_text')
     }));
 
     items.add('basics', AdminLinkButton.component({
       href: app.route('basics'),
-      icon: 'pencil',
+      icon: 'fa fa-pencil-alt',
       children: app.translator.trans('core.admin.nav.basics_button'),
       description: app.translator.trans('core.admin.nav.basics_text')
     }));
 
     items.add('mail', AdminLinkButton.component({
       href: app.route('mail'),
-      icon: 'envelope',
+      icon: 'fa fa-envelope',
       children: app.translator.trans('core.admin.nav.email_button'),
       description: app.translator.trans('core.admin.nav.email_text')
     }));
 
     items.add('permissions', AdminLinkButton.component({
       href: app.route('permissions'),
-      icon: 'key',
+      icon: 'fa fa-key',
       children: app.translator.trans('core.admin.nav.permissions_button'),
       description: app.translator.trans('core.admin.nav.permissions_text')
     }));
 
     items.add('appearance', AdminLinkButton.component({
       href: app.route('appearance'),
-      icon: 'paint-brush',
+      icon: 'fa fa-paint-brush',
       children: app.translator.trans('core.admin.nav.appearance_button'),
       description: app.translator.trans('core.admin.nav.appearance_text')
     }));
 
     items.add('extensions', AdminLinkButton.component({
       href: app.route('extensions'),
-      icon: 'puzzle-piece',
+      icon: 'fa fa-puzzle-piece',
       children: app.translator.trans('core.admin.nav.extensions_button'),
       description: app.translator.trans('core.admin.nav.extensions_text')
     }));

framework/core/js/admin/src/components/ExtensionsPage.js

@@ -17,7 +17,7 @@ export default class ExtensionsPage extends Page {
           <div className="container">
             {Button.component({
               children: app.translator.trans('core.admin.extensions.add_button'),
-              icon: 'plus',
+              icon: 'fa fa-plus',
               className: 'Button Button--primary',
               onclick: () => app.modal.show(new AddExtensionModal())
             })}
@@ -42,7 +42,7 @@ export default class ExtensionsPage extends Page {
                           className="ExtensionListItem-controls"
                           buttonClassName="Button Button--icon Button--flat"
                           menuClassName="Dropdown-menu--right"
-                          icon="ellipsis-h">
+                          icon="fa fa-ellipsis-h">
                           {controls}
                         </Dropdown>
                       ) : ''}
@@ -67,7 +67,7 @@ export default class ExtensionsPage extends Page {
 
     if (app.extensionSettings[name]) {
       items.add('settings', Button.component({
-        icon: 'cog',
+        icon: 'fa fa-cog',
         children: app.translator.trans('core.admin.extensions.settings_button'),
         onclick: app.extensionSettings[name]
       }));
@@ -75,7 +75,7 @@ export default class ExtensionsPage extends Page {
 
     if (!enabled) {
       items.add('uninstall', Button.component({
-        icon: 'trash-o',
+        icon: 'far fa-trash-alt',
         children: app.translator.trans('core.admin.extensions.uninstall_button'),
         onclick: () => {
           app.request({

framework/core/js/admin/src/components/PermissionDropdown.js

@@ -52,9 +52,9 @@ export default class PermissionDropdown extends Dropdown {
     const adminGroup = app.store.getById('groups', Group.ADMINISTRATOR_ID);
 
     if (everyone) {
-      this.props.label = Badge.component({icon: 'globe'});
+      this.props.label = Badge.component({icon: 'fa fa-globe'});
     } else if (members) {
-      this.props.label = Badge.component({icon: 'user'});
+      this.props.label = Badge.component({icon: 'fa fa-user'});
     } else {
       this.props.label = [
         badgeForId(Group.ADMINISTRATOR_ID),
@@ -66,8 +66,8 @@ export default class PermissionDropdown extends Dropdown {
       if (this.props.allowGuest) {
         this.props.children.push(
           Button.component({
-            children: [Badge.component({icon: 'globe'}), ' ', app.translator.trans('core.admin.permissions_controls.everyone_button')],
-            icon: everyone ? 'check' : true,
+            children: [Badge.component({icon: 'fa fa-globe'}), ' ', app.translator.trans('core.admin.permissions_controls.everyone_button')],
+            icon: everyone ? 'fa fa-check' : true,
             onclick: () => this.save([Group.GUEST_ID]),
             disabled: this.isGroupDisabled(Group.GUEST_ID)
           })
@@ -76,8 +76,8 @@ export default class PermissionDropdown extends Dropdown {
 
       this.props.children.push(
         Button.component({
-          children: [Badge.component({icon: 'user'}), ' ', app.translator.trans('core.admin.permissions_controls.members_button')],
-          icon: members ? 'check' : true,
+          children: [Badge.component({icon: 'fa fa-user'}), ' ', app.translator.trans('core.admin.permissions_controls.members_button')],
+          icon: members ? 'fa fa-check' : true,
           onclick: () => this.save([Group.MEMBER_ID]),
           disabled: this.isGroupDisabled(Group.MEMBER_ID)
         }),
@@ -86,7 +86,7 @@ export default class PermissionDropdown extends Dropdown {
 
         Button.component({
           children: [badgeForId(adminGroup.id()), ' ', adminGroup.namePlural()],
-          icon: !everyone && !members ? 'check' : true,
+          icon: !everyone && !members ? 'fa fa-check' : true,
           disabled: !everyone && !members,
           onclick: e => {
             if (e.shiftKey) e.stopPropagation();
@@ -101,7 +101,7 @@ export default class PermissionDropdown extends Dropdown {
           .filter(group => [Group.ADMINISTRATOR_ID, Group.GUEST_ID, Group.MEMBER_ID].indexOf(group.id()) === -1)
           .map(group => Button.component({
             children: [badgeForId(group.id()), ' ', group.namePlural()],
-            icon: groupIds.indexOf(group.id()) !== -1 ? 'check' : true,
+            icon: groupIds.indexOf(group.id()) !== -1 ? 'fa fa-check' : true,
             onclick: (e) => {
               if (e.shiftKey) e.stopPropagation();
               this.toggle(group.id());

framework/core/js/admin/src/components/PermissionGrid.js

@@ -29,7 +29,7 @@ export default class PermissionGrid extends Component {
             {scopes.map(scope => (
               <th>
                 {scope.label}{' '}
-                {scope.onremove ? Button.component({icon: 'times', className: 'Button Button--text PermissionGrid-removeScope', onclick: scope.onremove}) : ''}
+                {scope.onremove ? Button.component({icon: 'fa fa-times', className: 'Button Button--text PermissionGrid-removeScope', onclick: scope.onremove}) : ''}
               </th>
             ))}
             <th>{this.scopeControlItems().toArray()}</th>
@@ -85,21 +85,21 @@ export default class PermissionGrid extends Component {
     const items = new ItemList();
 
     items.add('viewDiscussions', {
-      icon: 'eye',
+      icon: 'fa fa-eye',
       label: app.translator.trans('core.admin.permissions.view_discussions_label'),
       permission: 'viewDiscussions',
       allowGuest: true
     }, 100);
 
     items.add('viewUserList', {
-      icon: 'users',
+      icon: 'fa fa-users',
       label: app.translator.trans('core.admin.permissions.view_user_list_label'),
       permission: 'viewUserList',
       allowGuest: true
     }, 100);
 
     items.add('signUp', {
-      icon: 'user-plus',
+      icon: 'fa fa-user-plus',
       label: app.translator.trans('core.admin.permissions.sign_up_label'),
       setting: () => SettingDropdown.component({
         key: 'allow_sign_up',
@@ -117,13 +117,13 @@ export default class PermissionGrid extends Component {
     const items = new ItemList();
 
     items.add('start', {
-      icon: 'edit',
+      icon: 'fa fa-edit',
       label: app.translator.trans('core.admin.permissions.start_discussions_label'),
       permission: 'startDiscussion'
     }, 100);
 
     items.add('allowRenaming', {
-      icon: 'i-cursor',
+      icon: 'fa fa-i-cursor',
       label: app.translator.trans('core.admin.permissions.allow_renaming_label'),
       setting: () => {
         const minutes = parseInt(app.data.settings.allow_renaming, 10);
@@ -149,13 +149,13 @@ export default class PermissionGrid extends Component {
     const items = new ItemList();
 
     items.add('reply', {
-      icon: 'reply',
+      icon: 'fa fa-reply',
       label: app.translator.trans('core.admin.permissions.reply_to_discussions_label'),
       permission: 'discussion.reply'
     }, 100);
 
     items.add('allowPostEditing', {
-      icon: 'pencil',
+      icon: 'fa fa-pencil-alt',
       label: app.translator.trans('core.admin.permissions.allow_post_editing_label'),
       setting: () => {
         const minutes = parseInt(app.data.settings.allow_post_editing, 10);
@@ -181,37 +181,37 @@ export default class PermissionGrid extends Component {
     const items = new ItemList();
 
     items.add('viewIpsPosts', {
-      icon: 'bullseye',
+      icon: 'fa fa-bullseye',
       label: app.translator.trans('core.admin.permissions.view_post_ips_label'),
       permission: 'discussion.viewIpsPosts'
     }, 110);
 
     items.add('renameDiscussions', {
-      icon: 'i-cursor',
+      icon: 'fa fa-i-cursor',
       label: app.translator.trans('core.admin.permissions.rename_discussions_label'),
       permission: 'discussion.rename'
     }, 100);
 
     items.add('hideDiscussions', {
-      icon: 'trash-o',
+      icon: 'far fa-trash-alt',
       label: app.translator.trans('core.admin.permissions.delete_discussions_label'),
       permission: 'discussion.hide'
     }, 90);
 
     items.add('deleteDiscussions', {
-      icon: 'times',
+      icon: 'fa fa-times',
       label: app.translator.trans('core.admin.permissions.delete_discussions_forever_label'),
       permission: 'discussion.delete'
     }, 80);
 
     items.add('editPosts', {
-      icon: 'pencil',
+      icon: 'fa fa-pencil-alt',
       label: app.translator.trans('core.admin.permissions.edit_and_delete_posts_label'),
       permission: 'discussion.editPosts'
     }, 70);
 
     items.add('deletePosts', {
-      icon: 'times',
+      icon: 'fa fa-times',
       label: app.translator.trans('core.admin.permissions.delete_posts_forever_label'),
       permission: 'discussion.deletePosts'
     }, 60);

framework/core/js/admin/src/components/PermissionsPage.js

@@ -24,7 +24,7 @@ export default class PermissionsPage extends Page {
                 </button>
               ))}
             <button className="Button Group Group--add" onclick={() => app.modal.show(new EditGroupModal())}>
-              {icon('plus', {className: 'Group-icon'})}
+              {icon('fa fa-plus', {className: 'Group-icon'})}
               <span className="Group-name">{app.translator.trans('core.admin.permissions.new_group_button')}</span>
             </button>
           </div>

framework/core/js/admin/src/components/SessionDropdown.js

@@ -42,7 +42,7 @@ export default class SessionDropdown extends Dropdown {
 
     items.add('logOut',
       Button.component({
-        icon: 'sign-out',
+        icon: 'fa fa-sign-out-alt',
         children: app.translator.trans('core.admin.header.log_out_button'),
         onclick: app.session.logout.bind(app.session)
       }),

framework/core/js/admin/src/components/SettingDropdown.js

@@ -8,7 +8,7 @@ export default class SettingDropdown extends SelectDropdown {
 
     props.className = 'SettingDropdown';
     props.buttonClassName = 'Button Button--text';
-    props.caretIcon = 'caret-down';
+    props.caretIcon = 'fa fa-caret-down';
     props.defaultLabel = 'Custom';
 
     props.children = props.options.map(({value, label}) => {
@@ -16,7 +16,7 @@ export default class SettingDropdown extends SelectDropdown {
 
       return Button.component({
         children: label,
-        icon: active ? 'check' : true,
+        icon: active ? 'fa fa-check' : true,
         onclick: saveSettings.bind(this, {[props.key]: value}),
         active
       });

framework/core/js/admin/src/components/StatusWidget.js

@@ -28,7 +28,7 @@ export default class StatusWidget extends DashboardWidget {
 
     items.add('help', (
       <a href="http://flarum.org/docs/troubleshooting" target="_blank">
-        {icon('question-circle')} {app.translator.trans('core.admin.dashboard.help_link')}
+        {icon('fa fa-question-circle')} {app.translator.trans('core.admin.dashboard.help_link')}
       </a>
     ));