Upgrade to font awesome 5.x finos#3002

-show warning for renamed icons CTCTOWALTZ-926
deutschebank · May 15, 2018 · e3dd304 · e3dd304
1 parent 3175086
commit e3dd304
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 19 deletions.
diff --git a/waltz-ng/client/widgets/icon-utils.js b/waltz-ng/client/widgets/icon-utils.js
@@ -468,26 +468,26 @@ const faReplacements = _
     .chain(faV4Shims)
     .map(arr => ({
         previous: arr[0],
-        class: arr[1],
+        iconSet: arr[1],
         current: arr[2]
     }))
     .keyBy('previous')
     .value();
 
 
-function mkNamespace(name) {
+export function mkIconSetName(currentIconSet, name) {
     if (faReplacements[name]) {
-        const namespace = faReplacements[name].class;
-        if (namespace === 'fab') {
-            console.warn(`Icon [${name}] namespace updated to [${namespace}]`);
-            return `fa ${namespace}`;
+        const iconSet = faReplacements[name].iconSet;
+        if (iconSet && iconSet !== currentIconSet) {
+            console.warn(`Icon [${name}] namespace updated to [${iconSet}]`);
+            return `${iconSet}`;
         }
     }
-    return 'fa';
+    return currentIconSet;
 }
 
 
-function mkCurrentName(name) {
+export function mkCurrentName(name) {
     if (faReplacements[name]) {
         const currentName = faReplacements[name].current;
         if (currentName) {
@@ -498,11 +498,3 @@ function mkCurrentName(name) {
     return `fa-${name}`;
 
 }
-
-
-export function mkIconClasses(name) {
-    return [
-        mkNamespace(name),
-        mkCurrentName(name)
-    ];
-}
diff --git a/waltz-ng/client/widgets/icon.js b/waltz-ng/client/widgets/icon.js
@@ -18,10 +18,12 @@
  */
 
 import '@fortawesome/fontawesome-free/js/all'
-import {mkIconClasses} from './icon-utils';
+import {mkCurrentName, mkIconSetName} from './icon-utils';
+import {initialiseData} from "../common/index";
 
 const bindings = {
     name: '@',
+    iconSet: '@',
     size: '@',
     flip: '@',
     rotate: '@',
@@ -31,15 +33,20 @@ const bindings = {
     spin: '@'
 };
 
+const initialState = {
+    iconSet: 'fa'
+};
+
 
 const template = '<span style="font-size: smaller; opacity: 0.8;"><i ng-class="$ctrl.classNames"/></span>';
 
 
 function controller() {
-    const vm = this;
+    const vm = initialiseData(this, initialState);
     vm.$onChanges = () => {
         vm.classNames = [
-            mkIconClasses(vm.name).join(' '),
+            mkIconSetName(vm.iconSet, vm.name),
+            mkCurrentName(vm.name),
             vm.flip ? `fa-flip-${vm.flip}` : '',
             vm.rotate ? `fa-rotate-${vm.rotate}` : '',
             vm.size ? `fa-${vm.size}` : '',