Change some FontAwesome icons to Tabler icons (#19642)

* fix: change some icons fas to ti

* marketplace spinner

* remove stack in kanban

---------

Co-authored-by: Alexandre Delaunay <adelaunay@teclib.com>

Author: flegastelois

ajax/comments.php

@@ -145,7 +145,7 @@
                     ) {
                         echo Html::scriptBlock(
                             sprintf(
-                                '$("#%s").html("href", "&nbsp;<a class=\'fas fa-crosshairs\' href=\'%s\'></a>");',
+                                '$("#%s").html("href", "&nbsp;<a class=\'ti ti-crosshairs\' href=\'%s\'></a>");',
                                 htmlescape($_POST['with_dc_position']),
                                 htmlescape($rack->getLinkURL())
                             )

ajax/uemailUpdate.php

@@ -78,7 +78,7 @@
     $switch_name = $_POST['field'] . '[use_notification][]';
     echo "<div class='my-1 d-flex align-items-center'>
          <label  for='email_fup_check'>
-            <i class='far fa-envelope me-1'></i>
+            <i class='ti ti-mail me-1'></i>
             " . __s('Email followup') . "
          </label>
          <div class='ms-2'>

css/standalone/marketplace.scss

@@ -159,8 +159,7 @@ $break_s_screen: 1400px;
                 backdrop-filter: blur(2px);
                 background-color: rgba(0, 0, 0, 50%);
 
-                i.fas,
-                i.fa-solid {
+                .spinner-border {
                     position: absolute;
                     top: 50%;
                     left: calc(50% - 1.5rem);

js/common.js

@@ -922,46 +922,46 @@ var templateItilStatus = function(option) {
     var classes = "";
     switch (parseInt(status)) {
         case 1 :
-            classes = 'new fas fa-circle';
+            classes = 'new ti ti-circle-filled';
             break;
         case 2 :
-            classes = 'assigned far fa-circle';
+            classes = 'assigned ti ti-circle';
             break;
         case 3 :
-            classes = 'planned far fa-calendar';
+            classes = 'planned ti ti-calendar';
             break;
         case 4 :
-            classes = 'waiting fas fa-circle';
+            classes = 'waiting ti ti-circle-filled';
             break;
         case 5 :
-            classes = 'solved far fa-circle';
+            classes = 'solved ti ti-circle';
             break;
         case 6 :
-            classes = 'closed fas fa-circle';
+            classes = 'closed ti ti-circle-filled';
             break;
         case 7:
-            classes = 'accepted fas fa-check-circle';
+            classes = 'accepted ti ti-circle-check-filled';
             break;
         case 8 :
-            classes = 'observe fas fa-eye';
+            classes = 'observe ti ti-eye';
             break;
         case 9 :
-            classes = 'eval far fa-circle';
+            classes = 'eval ti ti-circle';
             break;
         case 10 :
-            classes = 'approval fas fa-question-circle';
+            classes = 'approval ti ti-help-circle';
             break;
         case 11 :
-            classes = 'test fas fa-question-circle';
+            classes = 'test ti ti-help-circle';
             break;
         case 12 :
-            classes = 'qualif far fa-circle';
+            classes = 'qualif ti ti-circle';
             break;
         case 13 :
-            classes = 'refused far fa-times-circle';
+            classes = 'refused ti ti-circle-x';
             break;
         case 14 :
-            classes = 'canceled fas fa-ban';
+            classes = 'canceled ti ti-ban';
             break;
     }
 
@@ -979,13 +979,13 @@ var templateValidation = function(option) {
     var classes = "";
     switch (parseInt(status)) {
         case 2 : // WAITING
-            classes = 'waiting far fa-clock';
+            classes = 'waiting ti ti-clock';
             break;
         case 3 : // ACCEPTED
-            classes = 'accepted fas fa-check';
+            classes = 'accepted ti ti-circle-check-filled';
             break;
         case 4 : // REFUSED
-            classes = 'refused fas fa-times';
+            classes = 'refused ti ti-circle-x';
             break;
     }
 
@@ -1003,7 +1003,7 @@ var templateItilPriority = function(option) {
     var color_badge = "";
 
     if (priority_color.length > 0) {
-        color_badge += `<i class='fas fa-circle' style='color: ${priority_color}'></i>`;
+        color_badge += `<i class='ti ti-circle-filled' style='color: ${priority_color}'></i>`;
     }
 
     return $(`<span>${color_badge}&nbsp;${option.text}</span>`);
@@ -1596,19 +1596,19 @@ function initSortableTable(element_id) {
         const current_sort = element.data('sort');
         element.data('sort', column_index);
         const current_order = element.data('order');
-        const new_order = current_sort === column_index && current_order === 'asc' ? 'desc' : 'asc';
+        const new_order = current_sort === column_index && current_order === 'up' ? 'down' : 'up';
         element.data('order', new_order);
         const sortable_header = element.find('thead').first();
         const col = sortable_header.find('th').eq(column_index);
         // Remove all sort icon classes
-        sortable_header.find('th i[class*="fa-sort"]').removeClass('fa-sort fa-sort-asc fa-sort-desc');
+        sortable_header.find('th i[class*="ti ti-caret"]').removeClass('ti-caret-down-filled ti-caret-up-filled');
 
         const sort_icon = col.find('i');
         if (sort_icon.length === 0) {
             // Add sort icon
-            col.eq(0).append(`<i class="fas fa-sort-${new_order}"></i>`);
+            col.eq(0).append(`<i class="ti ti-caret-${new_order}-filled"></i>`);
         } else {
-            sort_icon.addClass(new_order === 'asc' ? 'fa-sort-asc' : 'fa-sort-desc');
+            sort_icon.addClass(new_order === 'up' ? 'ti-caret-up-filled' : 'ti-caret-down-filled');
         }
 
         const rows = element.find('tbody tr');
@@ -1633,7 +1633,7 @@ function initSortableTable(element_id) {
             if (a_value === b_value) {
                 return 0;
             }
-            if (new_order === 'asc') {
+            if (new_order === 'up') {
                 return a_value < b_value ? -1 : 1;
             }
             return a_value > b_value ? -1 : 1;

js/impact.js

@@ -1371,45 +1371,45 @@ var GLPIImpact = {
         return [
             {
                 id             : 'goTo',
-                content        : '<i class="fas fa-link me-2"></i>' + __("Go to"),
+                content        : '<i class="ti ti-external-link me-2"></i>' + __("Go to"),
                 tooltipText    : _.unescape(__("Open this element in a new tab")),
                 selector       : 'node[link]',
                 onClickFunction: this.menuOnGoTo
             },
             {
                 id             : 'showOngoing',
-                content        : '<i class="fas fa-list me-2"></i>' + __("Show ongoing tickets"),
+                content        : '<i class="ti ti-alert-circle me-2"></i>' + __("Show ongoing tickets"),
                 tooltipText    : _.unescape(__("Show ongoing tickets for this item")),
                 selector       : 'node[hasITILObjects=1]',
                 onClickFunction: this.menuOnShowOngoing
             },
             {
                 id             : 'editEdge',
-                content        : '<i class="fas fa-edit me-2"></i>' + __("Edge properties..."),
+                content        : '<i class="ti ti-edit me-2"></i>' + __("Edge properties..."),
                 tooltipText    : _.unescape(__("Set name for this edge")),
                 selector       : 'edge',
                 onClickFunction: this.menuOnEditEdge,
                 show           : !this.readonly,
             },
             {
                 id             : 'editCompound',
-                content        : '<i class="fas fa-edit me-2"></i>' + __("Group properties..."),
+                content        : '<i class="ti ti-edit me-2"></i>' + __("Group properties..."),
                 tooltipText    : _.unescape(__("Set name and/or color for this group")),
                 selector       : 'node:parent',
                 onClickFunction: this.menuOnEditCompound,
                 show           : !this.readonly,
             },
             {
                 id             : 'removeFromCompound',
-                content        : '<i class="fas fa-external-link-alt me-2"></i>' + __("Remove from group"),
+                content        : '<i class="ti ti-home-move me-2"></i>' + __("Remove from group"),
                 tooltipText    : _.unescape(__("Remove this asset from the group")),
                 selector       : 'node:child',
                 onClickFunction: this.menuOnRemoveFromCompound,
                 show           : !this.readonly,
             },
             {
                 id             : 'delete',
-                content        : '<i class="fas fa-trash me-2"></i>' + __("Delete"),
+                content        : '<i class="ti ti-trash me-2"></i>' + __("Delete"),
                 tooltipText    : _.unescape(__("Delete element")),
                 selector       : 'node, edge',
                 onClickFunction: this.menuOnDelete,
@@ -3678,7 +3678,7 @@ var GLPIImpact = {
                     str += value["name"];
 
                     if (isHidden) {
-                        str += '<i class="fas fa-eye-slash impact-res-hidden"></i>';
+                        str += '<i class="ti ti-eye-off impact-res-hidden"></i>';
                     }
 
                     str += "</p>";

js/marketplace.js

@@ -54,7 +54,7 @@ $(document).ready(function() {
 
         icon
             .removeClass()
-            .addClass('fas fa-spinner fa-spin');
+            .addClass('spinner-border');
 
         const executeAction = function () {
             if (action === 'download_plugin'
@@ -155,7 +155,7 @@ var filterPluginList = function(page, force) {
     }
 
     plugins_list
-        .append("<div class='loading-plugins'><i class='fas fa-spinner fa-pulse'></i></div>");
+        .append("<div class='loading-plugins'><div class='spinner-border'></div></div>");
     pagination.find('li.current').removeClass('current');
 
     var jqxhr = $.get(ajax_url, {
@@ -192,13 +192,13 @@ var refreshPlugins = function(page, force) {
     var icon = $('.marketplace:visible .refresh-plugin-list');
 
     icon
-        .removeClass('fa-sync-alt')
-        .addClass('fa-spinner fa-spin');
+        .removeClass('ti ti-refresh')
+        .addClass('spinner-border spinner-border-sm');
 
     $.when(filterPluginList(page, force)).then(function() {
         icon
-            .removeClass('fa-spinner fa-spin')
-            .addClass('fa-sync-alt');
+            .removeClass('spinner-border spinner-border-sm')
+            .addClass('ti ti-refresh');
         current_page = page;
 
         addTooltips();

js/modules/Dashboard/Dashboard.js

@@ -1109,7 +1109,7 @@ class GLPIDashboard {
                     this.fitNumbers(card);
                     this.animateNumbers(card);
                 }, () => {
-                    card.html("<div class='empty-card card-error'><i class='fas fa-exclamation-triangle'></i></div>");
+                    card.html("<div class='empty-card card-error'><i class='ti ti-alert-triangle'></i></div>");
                 }));
             });
 
@@ -1149,13 +1149,13 @@ class GLPIDashboard {
                         }
                     });
                     if (!has_result) {
-                        card.html("<div class='empty-card card-error'><i class='fas fa-exclamation-triangle'></i></div>");
+                        card.html("<div class='empty-card card-error'><i class='ti ti-alert-triangle'></i></div>");
                     }
                 });
             }, () => {
                 $.each(requested_cards, (i2, crd) => {
                     const card = crd.card_el;
-                    card.html("<div class='empty-card card-error'><i class='fas fa-exclamation-triangle'></i></div>");
+                    card.html("<div class='empty-card card-error'><i class='ti ti-alert-triangle'></i></div>");
                 });
             });
         }

js/planning.js

@@ -158,7 +158,7 @@ var GLPIPlanning  = {
                 }
                 $(info.el)
                     .find('.fc-cell-text')
-                    .prepend(`<i class="fas fa-${icon}"></i>&nbsp;`);
+                    .prepend(`<i class="ti ti-${icon}"></i>&nbsp;`);
 
                 if (info.resource._resource.extendedProps.itemtype == 'Group_User') {
                     info.el.style.backgroundColor = 'lightgray';
@@ -278,10 +278,10 @@ var GLPIPlanning  = {
                     // create new one
                     var actions = '';
                     if (options.can_create) {
-                        actions += `<li class="clone-event"><i class="far fa-clone"></i>${__("Clone")}</li>`;
+                        actions += `<li class="clone-event"><i class="ti ti-copy"></i>${__("Clone")}</li>`;
                     }
                     if (options.can_delete) {
-                        actions += `<li class="delete-event"><i class="fas fa-trash"></i>${__("Delete")}</li>`;
+                        actions += `<li class="delete-event"><i class="ti ti-trash"></i>${__("Delete")}</li>`;
                     }
                     if (actions == '') {
                         return;
@@ -360,7 +360,7 @@ var GLPIPlanning  = {
                         } else {
                             glpi_html_dialog({
                                 title: __("Make a choice"),
-                                body: `${__("Delete the whole serie of the recurrent event")}<br>${ 
+                                body: `${__("Delete the whole serie of the recurrent event")}<br>${
                                     __("or just add an exception by deleting this instance?")}`,
                                 buttons: [{
                                     label: __("Serie"),
@@ -392,9 +392,9 @@ var GLPIPlanning  = {
                 // attach button (planning and refresh) in planning header
                 $(`#${GLPIPlanning.dom_id} .fc-toolbar .fc-center h2`)
                     .after(
-                        $('<i id="refresh_planning" class="fa fa-sync pointer"></i>')
+                        $('<i id="refresh_planning" class="ti ti-refresh pointer"></i>')
                     ).after(
-                        $('<div id="planning_datepicker"><a data-toggle><i class="far fa-calendar-alt fa-lg pointer"></i></a>')
+                        $('<div id="planning_datepicker"><a data-toggle><i class="ti ti-calendar pointer"></i></a>')
                     );
 
                 // specific process for full list

js/src/vue/FuzzySearch/Modal.vue

@@ -107,7 +107,7 @@
                 </div>
                 <div class="modal-body">
                     <div class="alert alert-info d-flex" role="alert">
-                        <i class="fas fa-exclamation-circle fa-2x me-2"></i>
+                        <i class="ti ti-alert-circle-filled fa-2x me-2"></i>
                         <p v-html="shortcut_message"></p>
                     </div>
                     <input type="text" class="form-control" :placeholder="placeholder" v-model="input_text">

js/src/vue/Kanban/TeamBadgeProvider.js

@@ -46,7 +46,7 @@ export class TeamBadgeProvider {
          * The size in pixels for the team badges
          * @type {number}
          */
-        this.team_image_size = 22;
+        this.team_image_size = 26;
         this.max_team_images = max_team_images;
         this.display_initials = display_initials;
 
@@ -97,16 +97,16 @@ export class TeamBadgeProvider {
         // Pictures from groups, supplier, contact
         switch (itemtype) {
             case 'Group':
-                this.badges[itemtype][items_id] = this.generateOtherBadge(team_member, 'fa-users');
+                this.badges[itemtype][items_id] = this.generateOtherBadge(team_member, 'ti ti-users-group');
                 break;
             case 'Supplier':
-                this.badges[itemtype][items_id] = this.generateOtherBadge(team_member, 'fa-briefcase');
+                this.badges[itemtype][items_id] = this.generateOtherBadge(team_member, 'ti ti-truck-loading');
                 break;
             case 'Contact':
-                this.badges[itemtype][items_id] = this.generateOtherBadge(team_member, 'fa-user');
+                this.badges[itemtype][items_id] = this.generateOtherBadge(team_member, 'ti ti-user');
                 break;
             default:
-                this.badges[itemtype][items_id] = this.generateOtherBadge(team_member, 'fa-user');
+                this.badges[itemtype][items_id] = this.generateOtherBadge(team_member, 'ti ti-user');
         }
         return this.badges[itemtype][items_id];
     }
@@ -232,9 +232,8 @@ export class TeamBadgeProvider {
         const name = team_member['name'].replace(/"/g, '"').replace(/'/g, ''');
 
         return `
-            <span class='fa-stack fa-lg' style='font-size: ${(this.team_image_size / 2)}px'>
-                <i class='fas fa-circle fa-stack-2x' style="color: ${bg_color}" title="${team_member['name']}"></i>
-                <i class='fas ${icon} fa-stack-1x' title="${name}" data-bs-toggle='tooltip' data-bs-placement='top'></i>
+            <span class="badge badge-pill" style="background-color: ${bg_color}; font-size: ${(this.team_image_size / 2)}px; height: 26px">
+                <i class='${icon}' title="${name}" data-bs-toggle='tooltip' data-bs-placement='top'></i>
             </span>
         `;
     }