diff --git a/pandora_console/operation/visual_console/view.php b/pandora_console/operation/visual_console/view.php index b2d61aae61..cae05b8151 100644 --- a/pandora_console/operation/visual_console/view.php +++ b/pandora_console/operation/visual_console/view.php @@ -185,7 +185,6 @@ if ($pure === false) { ); echo ''; echo '
'; - // sub visual_editor_button_toolbox delete_item delete_min } echo '
'; diff --git a/visual_console_client/package-lock.json b/visual_console_client/package-lock.json index 2d6aa65d7d..8c81d39d3a 100644 --- a/visual_console_client/package-lock.json +++ b/visual_console_client/package-lock.json @@ -192,6 +192,19 @@ "minimist": "^1.2.0" } }, + "@fortawesome/fontawesome-common-types": { + "version": "0.2.20", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.20.tgz", + "integrity": "sha512-5wo0pMNS4gWTkplFAPSfNq4poXwLcgj8+khZs9/zbWMxC0hi6qnehXOrX7i7+Y7XyTQForja2WpR7Nz6LY2BtQ==" + }, + "@fortawesome/free-solid-svg-icons": { + "version": "5.10.0", + "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.10.0.tgz", + "integrity": "sha512-Ndt0GR9wU66lBLGMRZN2jv8LEDx+VTfwmnqYKLQ3VttH4ikgTpqBhdr7UF4M3GFYt1CwftrPVuKOUAFleYg7xA==", + "requires": { + "@fortawesome/fontawesome-common-types": "^0.2.20" + } + }, "@jest/console": { "version": "24.7.1", "resolved": "https://registry.npmjs.org/@jest/console/-/console-24.7.1.tgz", diff --git a/visual_console_client/package.json b/visual_console_client/package.json index d049a39b10..33abee513e 100644 --- a/visual_console_client/package.json +++ b/visual_console_client/package.json @@ -24,6 +24,7 @@ }, "homepage": "https://github.com/pandorafms/pandorafms#readme", "dependencies": { + "@fortawesome/free-solid-svg-icons": "^5.10.0", "@types/d3-shape": "^1.3.1", "@types/jest": "^24.0.11", "@typescript-eslint/eslint-plugin": "^1.6.0", diff --git a/visual_console_client/src/lib/FontAwesomeIcon.styles.css b/visual_console_client/src/lib/FontAwesomeIcon.styles.css new file mode 100644 index 0000000000..b8101ffa5f --- /dev/null +++ b/visual_console_client/src/lib/FontAwesomeIcon.styles.css @@ -0,0 +1,37 @@ +/* Styles for the solid icons */ + +.fa { + display: inline-block; + margin: 0; +} + +.fa.medium, +.fa.medium > svg { + width: 24px; + height: 24px; +} + +.fa.fa-small, +.fa.fa-small > svg { + width: 12px; + height: 12px; +} + +.fa.fa-large, +.fa.fa-large > svg { + width: 36px; + height: 36px; +} + +.fa-spin { + animation: fa-spin 2s infinite linear; +} + +@keyframes fa-spin { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } +} diff --git a/visual_console_client/src/lib/FontAwesomeIcon.ts b/visual_console_client/src/lib/FontAwesomeIcon.ts new file mode 100644 index 0000000000..bd46141568 --- /dev/null +++ b/visual_console_client/src/lib/FontAwesomeIcon.ts @@ -0,0 +1,45 @@ +import { IconDefinition } from "@fortawesome/free-solid-svg-icons"; +import "./FontAwesomeIcon.styles.css"; + +const svgNS = "http://www.w3.org/2000/svg"; + +const fontAwesomeIcon = ( + iconDefinition: IconDefinition, + { + size, + color, + spin + }: { + size?: "small" | "medium" | "large"; + color?: string; + spin?: boolean; + } +): HTMLElement => { + const container = document.createElement("figure"); + container.className = `fa fa-${iconDefinition.iconName}`; + if (size) container.classList.add(`fa-${size}`); + if (spin) container.classList.add("fa-spin"); + + const icon = document.createElementNS(svgNS, "svg"); + // Auto resize SVG using the view box magic: https://css-tricks.com/scale-svg/ + icon.setAttribute( + "viewBox", + `0 0 ${iconDefinition.icon[0]} ${iconDefinition.icon[1]}` + ); + if (color) icon.setAttribute("fill", color); + + // Path + const path = document.createElementNS(svgNS, "path"); + const pathData = + typeof iconDefinition.icon[4] === "string" + ? iconDefinition.icon[4] + : iconDefinition.icon[4][0]; + path.setAttribute("d", pathData); + + icon.appendChild(path); + container.appendChild(icon); + + return container; +}; + +export default fontAwesomeIcon;