Improved the font awesome icon management of the visual console client

visual_console_client/src/Item.ts

@@ -22,7 +22,12 @@ import {
 } from "./lib";
 import TypedEvent, { Listener, Disposable } from "./lib/TypedEvent";
 import { FormContainer, InputGroup } from "./Form";
-import { isObject } from "util";
+
+import {
+  faCircleNotch,
+  faExclamationCircle
+} from "@fortawesome/free-solid-svg-icons";
+import fontAwesomeIcon from "./lib/FontAwesomeIcon";
 
 // Enum: https://www.typescriptlang.org/docs/handbook/enums.html.
 export const enum ItemType {
@@ -294,18 +299,23 @@ class AclGroupInputGroup extends InputGroup<Partial<ItemProps>> {
     const aclGroupLabel = document.createElement("label");
     aclGroupLabel.textContent = t("Restrict access to group");
 
-    const divSpinner = document.createElement("div");
-    divSpinner.className = "visual-console-spinner small";
-    aclGroupLabel.appendChild(divSpinner);
+    const spinner = fontAwesomeIcon(faCircleNotch, t("Spinner"), {
+      size: "small",
+      spin: true
+    });
+    aclGroupLabel.appendChild(spinner);
 
     this.requestData("acl-group", {}, (error, data) => {
       // Remove Spinner.
-      divSpinner.remove();
+      spinner.remove();
+
       if (error) {
-        const errorSelect = document.createElement("img");
-        errorSelect.src = "";
-        errorSelect.alt = "image-error";
-        aclGroupLabel.appendChild(errorSelect);
+        aclGroupLabel.appendChild(
+          fontAwesomeIcon(faExclamationCircle, t("Error"), {
+            size: "small",
+            color: "#e63c52"
+          })
+        );
       }
 
       if (data instanceof Array) {

visual_console_client/src/lib/FontAwesomeIcon.styles.css

@@ -5,28 +5,34 @@
   margin: 0;
 }
 
+.fa,
+.fa > svg,
 .fa.medium,
 .fa.medium > svg {
-  width: 24px;
-  height: 24px;
+  width: 28px;
+  height: 28px;
 }
 
 .fa.fa-small,
 .fa.fa-small > svg {
-  width: 12px;
-  height: 12px;
+  width: 14px;
+  height: 14px;
 }
 
 .fa.fa-large,
 .fa.fa-large > svg {
-  width: 36px;
-  height: 36px;
+  width: 44px;
+  height: 44px;
 }
 
 .fa-spin {
   animation: fa-spin 2s infinite linear;
 }
 
+.fa-pulse {
+  animation: fa-spin 1s infinite steps(8);
+}
+
 @keyframes fa-spin {
   0% {
     transform: rotate(0deg);

visual_console_client/src/lib/FontAwesomeIcon.ts

@@ -3,22 +3,26 @@ import "./FontAwesomeIcon.styles.css";
 
 const svgNS = "http://www.w3.org/2000/svg";
 
+interface ExtraProps {
+  size?: "small" | "medium" | "large";
+  color?: string;
+  spin?: boolean;
+  pulse?: boolean;
+}
+
 const fontAwesomeIcon = (
   iconDefinition: IconDefinition,
-  {
-    size,
-    color,
-    spin
-  }: {
-    size?: "small" | "medium" | "large";
-    color?: string;
-    spin?: boolean;
-  }
+  title: string,
+  { size, color, spin, pulse }: ExtraProps
 ): HTMLElement => {
   const container = document.createElement("figure");
+  container.title = title;
   container.className = `fa fa-${iconDefinition.iconName}`;
+
   if (size) container.classList.add(`fa-${size}`);
+
   if (spin) container.classList.add("fa-spin");
+  else if (pulse) container.classList.add("fa-pulse");
 
   const icon = document.createElementNS(svgNS, "svg");
   // Auto resize SVG using the view box magic: https://css-tricks.com/scale-svg/