Merge pull request #554 from SergioCasCeb/changing-icons-to-svgs-sergio

Changed all icons for svgs

packages/web-new/README.md

@@ -22,14 +22,17 @@ This package provides the new web interface of the Web of Things Playground. It
 
 Licensed under the MIT license, see [License](../../LICENSE.md).
 
+## Icon
+
+Icons used in this project (excluding the TD file icon) are sourced from FontAwesome Free 6.5.1 by @fontawesome - [FontAwesome](https://fontawesome.com).
+License information can be found here: [FontAwesome License](https://fontawesome.com/license/free). Copyright © 2024 Fonticons, Inc.
+
 ## How to use
 
 - Online: It is hosted [here](http://plugfest.thingweb.io/playground-new/)
   - Simply paste a TD or utilize an example from the examples menu and click on validate
   - The validation process will then start on the bottom console, where more information will be provided in case of errors or warnings
 
-## Testing with Playwright
-
 ## Webpack functionality and bundling
 
 This package is built by utilizing webpack, allowing to bundle and compile the projects JavaScript and CSS files. It also handles asset management and optimization. Below are the steps to understand the current configuration:
@@ -50,27 +53,33 @@ The `webpack.config.js` file is used to set up Webpack for the project. It manag
 ### 3. Webpack Configuration Obejct
 
 **3.1 Entry Points**
+
 - `entry`: Specifies the entry points for your application. In this case, there are two entry points: 'bundle' for JavaScript and 'styles' for CSS
 
 **3.2 Output**
+
 - `output`: Specifies where Webpack should output the bundled files. The path property defines the output directory as 'dist', and the filename property determines the naming pattern for generated files. [name] is a placeholder for the entry point name, and [contenthash] is a unique hash based on file content
 - `clean`: Tells Webpack to clean the 'dist' directory before each build
 - `assetModuleFilename`: Specifies the filename for asset files
 
 **3.3 Development Server**
+
 - `devServer`: Configures the development server with settings such as the port, compressing assets, and enabling history API fallback
 
 **3.4 Module Rules**
+
 - `module`: Defines rules for how Webpack should process different file types. There are rules for JavaScript, images, CSS, and more. For example, it uses Babel to transpile JavaScript, handles image assets, and processes CSS with style loaders and sass loaders
 
 **3.5 Plugins**
-- `plugins`: Lists the plugins used in the build process. Key plugins include 
-    - `HtmlWebpackPlugin` for generating HTML files, 
-    - `CopyWebpackPlugin` for copying assets, 
-    - `MonacoWebpackPlugin` for the Monaco code editor integration, and 
+
+- `plugins`: Lists the plugins used in the build process. Key plugins include
+    - `HtmlWebpackPlugin` for generating HTML files,
+    - `CopyWebpackPlugin` for copying assets,
+    - `MonacoWebpackPlugin` for the Monaco code editor integration, and
     - `MiniCssExtractPlugin` for extracting CSS into separate files
 
 **3.6 Optimization**
+
 - `optimization`: Contains settings for optimizing the build, including minimizing CSS using `CssMinimizerPlugin`
 
 

packages/web-new/src/scripts/console.js

@@ -46,6 +46,7 @@ const mainContentElement = document.querySelector(".main-content")
 /**
  * Hides the text from the left control panel, updates the state of the console element
  * and adjusts the console size as well as the expand/collapse icon
+ * *Collapse arrows gotten from: https://fontawesome.com/icons/down-left-and-up-right-to-center?f=classic&s=solid
  */
 function expandConsole() {
     textIcon.forEach(text => {
@@ -58,27 +59,30 @@ function expandConsole() {
     setTimeout(() => {
         mainContentElement.style.flex = "0 210px"
         consoleElement.style.flex = `1 0`
-        minMaxBtn.children[0].classList.add("fa-down-left-and-up-right-to-center")
-        minMaxBtn.children[0].classList.remove("fa-up-right-and-down-left-from-center")
+        minMaxBtn.children[0].children[0].setAttribute("d", "M439 7c9.4-9.4 24.6-9.4 33.9 0l32 32c9.4 9.4 9.4 24.6 0 33.9l-87 87 39 39c6.9 6.9 8.9 17.2 5.2 26.2s-12.5 14.8-22.2 14.8H296c-13.3 0-24-10.7-24-24V72c0-9.7 5.8-18.5 14.8-22.2s19.3-1.7 26.2 5.2l39 39L439 7zM72 272H216c13.3 0 24 10.7 24 24V440c0 9.7-5.8 18.5-14.8 22.2s-19.3 1.7-26.2-5.2l-39-39L73 505c-9.4 9.4-24.6 9.4-33.9 0L7 473c-9.4-9.4-9.4-24.6 0-33.9l87-87L55 313c-6.9-6.9-8.9-17.2-5.2-26.2s12.5-14.8 22.2-14.8z")
+        minMaxBtn.children[0].classList.remove("expand-arrows")
+        minMaxBtn.children[0].classList.add("collapse-arrows")
     }, 100);
 }
 
 /**
  * Shows the text from the left control panel, updates the state of the console element
  * and adjusts the console size as well as the expand/collapse icon
+ * *Expand arrows gotten from: https://fontawesome.com/icons/up-right-and-down-left-from-center?f=classic&s=solid
  */
 function collapseConsole() {
+    textIcon.forEach(text => {
+        text.classList.remove("hiddenV")
+    })
+
     consoleElement.classList.remove("expanded")
     consoleElement.classList.add("collapsed")
 
     mainContentElement.style.flex = "1 0"
     consoleElement.style.flex = `0 39px`
-    minMaxBtn.children[0].classList.remove("fa-down-left-and-up-right-to-center")
-    minMaxBtn.children[0].classList.add("fa-up-right-and-down-left-from-center")
-
-    textIcon.forEach(text => {
-        text.classList.remove("hiddenV")
-    })
+    minMaxBtn.children[0].children[0].setAttribute("d", "M344 0H488c13.3 0 24 10.7 24 24V168c0 9.7-5.8 18.5-14.8 22.2s-19.3 1.7-26.2-5.2l-39-39-87 87c-9.4 9.4-24.6 9.4-33.9 0l-32-32c-9.4-9.4-9.4-24.6 0-33.9l87-87L327 41c-6.9-6.9-8.9-17.2-5.2-26.2S334.3 0 344 0zM168 512H24c-13.3 0-24-10.7-24-24V344c0-9.7 5.8-18.5 14.8-22.2s19.3-1.7 26.2 5.2l39 39 87-87c9.4-9.4 24.6-9.4 33.9 0l32 32c9.4 9.4 9.4 24.6 0 33.9l-87 87 39 39c6.9 6.9 8.9 17.2 5.2 26.2s-12.5 14.8-22.2 14.8z")
+    minMaxBtn.children[0].classList.add("expand-arrows")
+    minMaxBtn.children[0].classList.remove("collapse-arrows")
 }
 
 minMaxBtn.addEventListener("click", () => {
@@ -89,9 +93,8 @@ minMaxBtn.addEventListener("click", () => {
     }
 })
 
-
 /**
- * Unchecks all visualization btns and hides all visualization containers
+ * Unchecks all visualization buttons and hides all visualization containers
  */
 export function clearConsole() {
     visualizationContainers.forEach(container => {
@@ -122,7 +125,7 @@ function clearVisualizationEditors() {
 //Set the behavior for each visualization tab when clicked on it
 visualizationOptions.forEach(option => {
     option.addEventListener("click", () => {
-        if(consoleElement.classList.contains("collapsed")){
+        if (consoleElement.classList.contains("collapsed")) {
             expandConsole()
         }
         clearVisualizationEditors()

packages/web-new/src/scripts/editor.js

@@ -92,29 +92,80 @@ function createTab(tabNumber, exampleName, thingType) {
   //Add the close btn element
   const closeBtn = document.createElement("div")
   closeBtn.classList.add("close-tab")
-  //Assign icon to the close btn
-  const closeIcon = document.createElement("i")
-  closeIcon.classList.add("fa-solid", "fa-xmark")
 
-  closeBtn.appendChild(closeIcon)
+  // Create the svg close icon
+  // Close icon gotten from: https://fontawesome.com/icons/xmark?f=classic&s=solid
+  const closeIconSvg = document.createElementNS("http://www.w3.org/2000/svg", "svg")
+  closeIconSvg.setAttribute("xmlns", "http://www.w3.org/2000/svg")
+  closeIconSvg.setAttribute("width", "100%")
+  closeIconSvg.setAttribute("height", "100%")
+  closeIconSvg.setAttribute("viewBox", "0 0 384 512")
+
+  // Create a path element and set its attributes
+  const closeIconPath = document.createElementNS("http://www.w3.org/2000/svg", "path")
+  closeIconPath.setAttribute("d", "M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z")
+
+  //Create and append Font Awesome attribution comment
+  const commentCloseIcon = document.createComment(" !Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc. ")
+  closeIconSvg.appendChild(commentCloseIcon)
+
+  //append the path to the svg and the svg to the button
+  closeIconSvg.appendChild(closeIconPath)
+  closeBtn.appendChild(closeIconSvg)
 
   //Create the close confirmation buttons
   const confirmBtns = document.createElement("div")
   confirmBtns.classList.add("confirm-btns", "hidden")
 
+  //Confirm close button
   const confirmTabClose = document.createElement("button")
   confirmTabClose.classList.add("confirm-tab-close")
   confirmTabClose.textContent = "Close"
-  const confirmTabIcon = document.createElement("i")
-  confirmTabIcon.classList.add("fa-solid", "fa-check")
-  confirmTabClose.appendChild(confirmTabIcon)
+
+  // Create the svg confirm close icon
+  // Check icon gotten from: https://fontawesome.com/icons/check?f=classic&s=solid
+  const confirmIconSvg = document.createElementNS("http://www.w3.org/2000/svg", "svg")
+  confirmIconSvg.setAttribute("xmlns", "http://www.w3.org/2000/svg")
+  confirmIconSvg.setAttribute("width", "100%")
+  confirmIconSvg.setAttribute("height", "100%")
+  confirmIconSvg.setAttribute("viewBox", "0 0 448 512")
+  confirmIconSvg.classList.add("icon")
+
+  // Create a path element and set its attributes
+  const confirmIconPath = document.createElementNS("http://www.w3.org/2000/svg", "path")
+  confirmIconPath.setAttribute("d", "M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z")
+
+  //Create and append Font Awesome attribution comment
+  const commentConfirmIcon = document.createComment(" !Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc. ")
+  confirmIconSvg.appendChild(commentConfirmIcon)
+
+  confirmIconSvg.appendChild(confirmIconPath)
+  confirmTabClose.appendChild(confirmIconSvg)
 
+  //Cancel close button
   const cancelTabClose = document.createElement("button")
   cancelTabClose.classList.add("cancel-tab-close")
   cancelTabClose.textContent = "Cancel"
-  const cancelTabIcon = document.createElement("i")
-  cancelTabIcon.classList.add("fa-solid", "fa-xmark")
-  cancelTabClose.appendChild(cancelTabIcon)
+
+  // Create the svg close cancel icon
+  // Close icon gotten from: https://fontawesome.com/icons/xmark?f=classic&s=solid
+  const cancelIconSvg = document.createElementNS("http://www.w3.org/2000/svg", "svg")
+  cancelIconSvg.setAttribute("xmlns", "http://www.w3.org/2000/svg")
+  cancelIconSvg.setAttribute("width", "100%")
+  cancelIconSvg.setAttribute("height", "100%")
+  cancelIconSvg.setAttribute("viewBox", "0 0 384 512")
+  cancelIconSvg.classList.add("icon")
+
+  // Create a path element and set its attributes
+  const cancelIconPath = document.createElementNS("http://www.w3.org/2000/svg", "path")
+  cancelIconPath.setAttribute("d", "M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z")
+
+  //Create and append Font Awesome attribution comment
+  const commentCancelIcon = document.createComment(" !Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc. ")
+  cancelIconSvg.appendChild(commentCancelIcon)
+
+  cancelIconSvg.appendChild(cancelIconPath)
+  cancelTabClose.appendChild(cancelIconSvg)
 
   cancelTabClose.addEventListener("click", () => {
     cancelTabClose.parentElement.classList.add("hidden")