From 2eb3b8b9b81c83c69757027648b8d44fb63667fd Mon Sep 17 00:00:00 2001 From: Sergio Eduardo Castro Ceballos <72516762+SergioCasCeb@users.noreply.github.com> Date: Fri, 5 Jan 2024 05:21:55 +0100 Subject: [PATCH 01/16] Changed all icons for svgs - Previously all icon were been imported from Font Awesome, so in order to not depend on such system anymore all icons have been substituted for svgs --- .../src/assets/img/angle-down-solid.svg | 1 + .../src/assets/img/eye-slash-solid.svg | 1 + packages/web-new/src/assets/img/eye-solid.svg | 1 + packages/web-new/src/scripts/console.js | 12 +- packages/web-new/src/scripts/editor.js | 55 ++- packages/web-new/src/scripts/examples-menu.js | 79 ++-- packages/web-new/src/scripts/main.js | 20 +- packages/web-new/src/scripts/save-menu.js | 2 +- packages/web-new/src/scripts/settings-menu.js | 2 +- packages/web-new/src/scripts/svgs.js | 71 ++++ packages/web-new/src/scripts/util.js | 43 +- packages/web-new/src/styles/_console.scss | 79 ++-- .../web-new/src/styles/_control-panel.scss | 12 +- packages/web-new/src/styles/_editor.scss | 90 ++-- .../web-new/src/styles/_examples-menu.scss | 65 +-- .../src/styles/_json-yaml-warning.scss | 1 - packages/web-new/src/styles/_save-menu.scss | 35 +- .../web-new/src/styles/_settings-menu.scss | 20 +- packages/web-new/src/styles/styles.scss | 18 +- packages/web-new/src/template.html | 388 +++++++++++++++--- packages/web-new/webpack.config.js | 4 +- 21 files changed, 746 insertions(+), 253 deletions(-) create mode 100644 packages/web-new/src/assets/img/angle-down-solid.svg create mode 100644 packages/web-new/src/assets/img/eye-slash-solid.svg create mode 100644 packages/web-new/src/assets/img/eye-solid.svg create mode 100644 packages/web-new/src/scripts/svgs.js diff --git a/packages/web-new/src/assets/img/angle-down-solid.svg b/packages/web-new/src/assets/img/angle-down-solid.svg new file mode 100644 index 000000000..cabe8a94f --- /dev/null +++ b/packages/web-new/src/assets/img/angle-down-solid.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/web-new/src/assets/img/eye-slash-solid.svg b/packages/web-new/src/assets/img/eye-slash-solid.svg new file mode 100644 index 000000000..f592dabfe --- /dev/null +++ b/packages/web-new/src/assets/img/eye-slash-solid.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/web-new/src/assets/img/eye-solid.svg b/packages/web-new/src/assets/img/eye-solid.svg new file mode 100644 index 000000000..1f07b7f80 --- /dev/null +++ b/packages/web-new/src/assets/img/eye-solid.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/web-new/src/scripts/console.js b/packages/web-new/src/scripts/console.js index 450314b30..4056d4fee 100644 --- a/packages/web-new/src/scripts/console.js +++ b/packages/web-new/src/scripts/console.js @@ -45,11 +45,12 @@ const mainContentElement = document.querySelector(".main-content") minMaxBtn.addEventListener("click", () => { - if (minMaxBtn.children[0].classList.contains("fa-down-left-and-up-right-to-center")) { + if (minMaxBtn.children[0].classList.contains("collapse-arrows")) { 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") + minMaxBtn.children[0].classList.remove("collapse-arrows") + minMaxBtn.children[0].classList.add("expand-arrows") + 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") textIcon.forEach(text => { text.classList.remove("hiddenV") @@ -62,8 +63,9 @@ minMaxBtn.addEventListener("click", () => { 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].classList.add("collapse-arrows") + minMaxBtn.children[0].classList.remove("expand-arrows") + 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") if (visualizeTab.checked === true) { visualizeTab.click() diff --git a/packages/web-new/src/scripts/editor.js b/packages/web-new/src/scripts/editor.js index 425d1f393..d5db9eca7 100644 --- a/packages/web-new/src/scripts/editor.js +++ b/packages/web-new/src/scripts/editor.js @@ -92,29 +92,64 @@ 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 + 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") + + //append the path to the svg and the svg to the button + closeIconSvg.appendChild(closeIconPath) + closeBtn.appendChild(closeIconSvg) //Create the close confirmation btns 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 + 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") + + 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 + 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") + + cancelIconSvg.appendChild(cancelIconPath) + cancelTabClose.appendChild(cancelIconSvg) cancelTabClose.addEventListener("click", () => { cancelTabClose.parentElement.classList.add("hidden") diff --git a/packages/web-new/src/scripts/examples-menu.js b/packages/web-new/src/scripts/examples-menu.js index 1a00e0f83..088a25703 100644 --- a/packages/web-new/src/scripts/examples-menu.js +++ b/packages/web-new/src/scripts/examples-menu.js @@ -26,7 +26,7 @@ import { createIde, ideCount, tabsLeft } from "./editor" /***********************************************************/ /* Examples menu */ /***********************************************************/ -const closeExamples = document.querySelector(".examples-menu-container__close i") +const closeExamples = document.querySelector(".examples-menu-container__close .x-icon") const examplesMenu = document.querySelector(".examples-menu") const examplesBtn = document.querySelector("#examples-btn") const categorySelect = document.querySelector('#thing-category') @@ -267,23 +267,23 @@ async function getAllExamples(categoryId, thingType) { exampleNameIcon.classList.add("example-icon") // Create an SVG element - const svgElement = document.createElementNS("http://www.w3.org/2000/svg", "svg") - svgElement.setAttribute("xmlns", "http://www.w3.org/2000/svg") - svgElement.setAttribute("width", "100%") - svgElement.setAttribute("viewBox", "0 0 351 379") - svgElement.setAttribute("fill", "none") + const tdFileSvg = document.createElementNS("http://www.w3.org/2000/svg", "svg") + tdFileSvg.setAttribute("xmlns", "http://www.w3.org/2000/svg") + tdFileSvg.setAttribute("width", "100%") + tdFileSvg.setAttribute("viewBox", "0 0 351 379") + tdFileSvg.setAttribute("fill", "none") // Create a path element and set its attributes - const pathElement = document.createElementNS("http://www.w3.org/2000/svg", "path") - pathElement.setAttribute("fill-rule", "evenodd") - pathElement.setAttribute("clip-rule", "evenodd") - pathElement.setAttribute("d", "M184 0V95.9981C184 107.044 192.954 115.998 204 115.998H300V190H106C89.4315 190 76 203.431 76 220V379H40C17.9086 379 0 361.091 0 339V40C0 17.9086 17.9086 0 40 0H184ZM204 95.9981V4.28427L295.714 95.9981H204ZM189.758 379V265.724H231.32V243.922H189.758H162.019H121.105V265.724H162.019V379H189.758ZM275.017 379H288.654C297.808 379 306.158 377.485 313.703 374.454C321.311 371.362 327.836 367.001 333.278 361.373C338.783 355.683 343.02 348.88 345.988 340.963C349.019 333.046 350.534 324.295 350.534 314.708V308.307C350.534 298.658 349.019 289.907 345.988 282.052C343.02 274.135 338.783 267.332 333.278 261.642C327.774 255.951 321.249 251.591 313.703 248.561C306.219 245.468 297.963 243.922 288.933 243.922H275.017H258.688H247.185V379H259.245H275.017ZM275.017 357.291H288.654C295.952 357.291 302.106 355.652 307.116 352.374C312.126 349.034 315.899 344.179 318.435 337.809C321.032 331.438 322.331 323.738 322.331 314.708V308.121C322.331 301.194 321.589 295.102 320.104 289.845C318.682 284.588 316.548 280.165 313.703 276.578C310.858 272.991 307.364 270.3 303.22 268.507C299.076 266.651 294.313 265.724 288.933 265.724H275.017V357.291Z") + const tdFilePath = document.createElementNS("http://www.w3.org/2000/svg", "path") + tdFilePath.setAttribute("fill-rule", "evenodd") + tdFilePath.setAttribute("clip-rule", "evenodd") + tdFilePath.setAttribute("d", "M184 0V95.9981C184 107.044 192.954 115.998 204 115.998H300V190H106C89.4315 190 76 203.431 76 220V379H40C17.9086 379 0 361.091 0 339V40C0 17.9086 17.9086 0 40 0H184ZM204 95.9981V4.28427L295.714 95.9981H204ZM189.758 379V265.724H231.32V243.922H189.758H162.019H121.105V265.724H162.019V379H189.758ZM275.017 379H288.654C297.808 379 306.158 377.485 313.703 374.454C321.311 371.362 327.836 367.001 333.278 361.373C338.783 355.683 343.02 348.88 345.988 340.963C349.019 333.046 350.534 324.295 350.534 314.708V308.307C350.534 298.658 349.019 289.907 345.988 282.052C343.02 274.135 338.783 267.332 333.278 261.642C327.774 255.951 321.249 251.591 313.703 248.561C306.219 245.468 297.963 243.922 288.933 243.922H275.017H258.688H247.185V379H259.245H275.017ZM275.017 357.291H288.654C295.952 357.291 302.106 355.652 307.116 352.374C312.126 349.034 315.899 344.179 318.435 337.809C321.032 331.438 322.331 323.738 322.331 314.708V308.121C322.331 301.194 321.589 295.102 320.104 289.845C318.682 284.588 316.548 280.165 313.703 276.578C310.858 272.991 307.364 270.3 303.22 268.507C299.076 266.651 294.313 265.724 288.933 265.724H275.017V357.291Z") // Append the path element to the SVG element - svgElement.appendChild(pathElement) + tdFileSvg.appendChild(tdFilePath) // Append the SVG element to the document body or any other desired location - exampleNameIcon.appendChild(svgElement); + exampleNameIcon.appendChild(tdFileSvg); // Append the icon container to the name container exampleName.appendChild(exampleNameIcon) @@ -292,11 +292,21 @@ async function getAllExamples(categoryId, thingType) { const exampleNameTitle = document.createElement('p') exampleNameTitle.innerText = example[1]["title"] exampleName.appendChild(exampleNameTitle) - - // //Create, populate and append the example title toggle arrow - const exampleNameArrow = document.createElement('i') - exampleNameArrow.classList.add("fa-solid", "fa-chevron-down", "toggle-arrow") - exampleName.appendChild(exampleNameArrow) + + //Create, populate and append the example title toggle arrow + const exampleArrowSvg = document.createElementNS("http://www.w3.org/2000/svg", "svg") + exampleArrowSvg.setAttribute("xmlns", "http://www.w3.org/2000/svg") + exampleArrowSvg.setAttribute("width", "100%") + exampleArrowSvg.setAttribute("height", "100%") + exampleArrowSvg.setAttribute("viewBox", "0 0 448 512") + exampleArrowSvg.classList.add("icon") + + // Create a path element and set its attributes + const exampleArrowPath = document.createElementNS("http://www.w3.org/2000/svg", "path") + exampleArrowPath.setAttribute("d", "M201.4 342.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 274.7 86.6 137.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z") + + exampleArrowSvg.appendChild(exampleArrowPath) + exampleName.appendChild(exampleArrowSvg) //Append the whole name component to the header component exampleHeader.appendChild(exampleName) @@ -305,9 +315,20 @@ async function getAllExamples(categoryId, thingType) { const quickBtn = document.createElement('button') quickBtn.classList.add("example__header--quick") quickBtn.setAttribute("title", "Use") - const quickButtonIcon = document.createElement('i') - quickButtonIcon.classList.add("fa-solid", "fa-file-import") - quickBtn.appendChild(quickButtonIcon) + // create the svg icon for the quick use button + const importFileSvg = document.createElementNS("http://www.w3.org/2000/svg", "svg") + importFileSvg.setAttribute("xmlns", "http://www.w3.org/2000/svg") + importFileSvg.setAttribute("width", "100%") + importFileSvg.setAttribute("height", "100%") + importFileSvg.setAttribute("viewBox", "0 0 512 512") + importFileSvg.classList.add("icon") + + // Create a path element and set its attributes + const importFilePath = document.createElementNS("http://www.w3.org/2000/svg", "path") + importFilePath.setAttribute("d", "M128 64c0-35.3 28.7-64 64-64H352V128c0 17.7 14.3 32 32 32H512V448c0 35.3-28.7 64-64 64H192c-35.3 0-64-28.7-64-64V336H302.1l-39 39c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l80-80c9.4-9.4 9.4-24.6 0-33.9l-80-80c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9l39 39H128V64zm0 224v48H24c-13.3 0-24-10.7-24-24s10.7-24 24-24H128zM512 128H384V0L512 128z") + + importFileSvg.appendChild(importFilePath) + quickBtn.appendChild(importFileSvg) exampleHeader.appendChild(quickBtn) @@ -343,9 +364,21 @@ async function getAllExamples(categoryId, thingType) { exampleBtnUse.classList.add("example__btn--use") exampleBtns.appendChild(exampleBtnUse) - const exampleIconUse = document.createElement('i') - exampleIconUse.classList.add("fa-solid", "fa-file-import") - exampleBtnUse.appendChild(exampleIconUse) + //todo: create the apply button + // create the svg icon for the apply button + const applyIconSvg = document.createElementNS("http://www.w3.org/2000/svg", "svg") + applyIconSvg.setAttribute("xmlns", "http://www.w3.org/2000/svg") + applyIconSvg.setAttribute("width", "100%") + applyIconSvg.setAttribute("height", "100%") + applyIconSvg.setAttribute("viewBox", "0 0 512 512") + applyIconSvg.classList.add("icon") + + // Create a path element and set its attributes + const applyIconPath = document.createElementNS("http://www.w3.org/2000/svg", "path") + applyIconPath.setAttribute("d", "M128 64c0-35.3 28.7-64 64-64H352V128c0 17.7 14.3 32 32 32H512V448c0 35.3-28.7 64-64 64H192c-35.3 0-64-28.7-64-64V336H302.1l-39 39c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l80-80c9.4-9.4 9.4-24.6 0-33.9l-80-80c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9l39 39H128V64zm0 224v48H24c-13.3 0-24-10.7-24-24s10.7-24 24-24H128zM512 128H384V0L512 128z") + + applyIconSvg.appendChild(applyIconPath) + exampleBtnUse.appendChild(applyIconSvg) const exampleTxtUse = document.createElement('p') exampleTxtUse.innerText = "Apply" diff --git a/packages/web-new/src/scripts/main.js b/packages/web-new/src/scripts/main.js index 601bddd05..04ce65ddb 100644 --- a/packages/web-new/src/scripts/main.js +++ b/packages/web-new/src/scripts/main.js @@ -166,11 +166,13 @@ function onmousemoveY(e) { t.style.flex = "1 0" if(h > 38){ - 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].classList.add("collapse-arrows") + minMaxBtn.children[0].classList.remove("expand-arrows") + 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") }else{ - 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") + minMaxBtn.children[0].classList.remove("collapse-arrows") + minMaxBtn.children[0].classList.add("expand-arrows") + 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") } if (h < 445) { @@ -186,11 +188,13 @@ function onmousemoveY(e) { b.style.flex = "1 0" if(h < 714){ - 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].classList.add("collapse-arrows") + minMaxBtn.children[0].classList.remove("expand-arrows") + 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") }else{ - 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") + minMaxBtn.children[0].classList.remove("collapse-arrows") + minMaxBtn.children[0].classList.add("expand-arrows") + 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") } if (h < 310) { diff --git a/packages/web-new/src/scripts/save-menu.js b/packages/web-new/src/scripts/save-menu.js index b50a90f77..647ff61eb 100644 --- a/packages/web-new/src/scripts/save-menu.js +++ b/packages/web-new/src/scripts/save-menu.js @@ -28,7 +28,7 @@ import { editorList, getEditorData } from "./editor" /***********************************************************/ const saveMenu = document.querySelector(".save-menu") const saveMenuBtn = document.querySelector("#save-btn") -const closeSaveMenu = document.querySelector(".save-menu-close i") +const closeSaveMenu = document.querySelector(".save-menu-close .x-icon") const shareUrlContainer = document.querySelector("#share-url-input") const openUrlTab = document.querySelector("#open-url-tab") const thingTypeText = document.querySelector('#thing-type-text') diff --git a/packages/web-new/src/scripts/settings-menu.js b/packages/web-new/src/scripts/settings-menu.js index aca8141b0..5580adaed 100644 --- a/packages/web-new/src/scripts/settings-menu.js +++ b/packages/web-new/src/scripts/settings-menu.js @@ -26,7 +26,7 @@ import themeData from './monochrome-theme' /***********************************************************/ /* Settings menu */ /***********************************************************/ -const closeSettings = document.querySelector(".settings__close i"); +const closeSettings = document.querySelector(".settings__close .x-icon"); const settingsMenu = document.querySelector(".settings-menu"); const settingsBtn = document.querySelector("#settings-btn"); export const editorForm = document.querySelector(".settings__editor") diff --git a/packages/web-new/src/scripts/svgs.js b/packages/web-new/src/scripts/svgs.js new file mode 100644 index 000000000..fd21ddf1b --- /dev/null +++ b/packages/web-new/src/scripts/svgs.js @@ -0,0 +1,71 @@ + + +//Play button: + + +//code file (filled): + + +//Download file (filled): + + +//settings (filled): + + +//plus icon + + +//x icon: + + +//feedback (filled): + + +// cli: + + +// github rounded: + + +// angle right: + + +// angle down: + + +// expand arrows: + + +// collapse arrows + + +//import file + + +// search icon + + +// open in new tab + + +// link + + +// download secondary + + +// minus + + +//collapse square: + + +//expand square: + + +//slashed eye + + +// check icon: + + diff --git a/packages/web-new/src/scripts/util.js b/packages/web-new/src/scripts/util.js index 7e9b72531..a15d17098 100644 --- a/packages/web-new/src/scripts/util.js +++ b/packages/web-new/src/scripts/util.js @@ -233,23 +233,24 @@ export function validate(thingType, editorContent) { validator(editorContent, log, { checkDefaults: true, checkJsonLd, checkTmConformance }) .then(result => { - // console.log(result) Object.keys(result.report).forEach(el => { const spotName = "spot-" + el document.getElementById(spotName).removeAttribute('open') const resultIcon = document.getElementById(spotName).children[0].children[0] if (result.report[el] === "passed") { - resultIcon.classList.remove("fa-circle") - resultIcon.classList.add("fa-circle-check") + resultIcon.classList.remove("neutral-circle-icon") + resultIcon.classList.add("success-circle-icon") + resultIcon.children[0].setAttribute("d", "M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z") } else if (result.report[el] === "warning") { - resultIcon.classList.remove("fa-circle") - resultIcon.classList.add("fa-circle-exclamation") - + resultIcon.classList.remove("neutral-circle-icon") + resultIcon.classList.add("warning-circle-icon") + resultIcon.children[0].setAttribute("d", "M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24V264c0 13.3-10.7 24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z") } else if (result.report[el] === "failed") { - resultIcon.classList.remove("fa-circle") - resultIcon.classList.add("fa-circle-xmark") + resultIcon.classList.remove("neutral-circle-icon") + resultIcon.classList.add("error-circle-icon") + resultIcon.children[0].setAttribute("d", "M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM175 175c9.4-9.4 24.6-9.4 33.9 0l47 47 47-47c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-47 47 47 47c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-47-47-47 47c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l47-47-47-47c-9.4-9.4-9.4-24.6 0-33.9z") } else if (result.report[el] === null) { //do nothing @@ -266,16 +267,19 @@ export function validate(thingType, editorContent) { const detailsIcon = document.getElementById(detailsName).children[0].children[0] if (result.details[el] === "passed") { - detailsIcon.classList.remove("fa-circle") - detailsIcon.classList.add("fa-circle-check") + detailsIcon.classList.remove("neutral-circle-icon") + detailsIcon.classList.add("success-circle-icon") + detailsIcon.children[0].setAttribute("d", "M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z") } else if (result.details[el] === "warning" || result.details[el] === "not-impl") { - detailsIcon.classList.remove("fa-circle") - detailsIcon.classList.add("fa-circle-exclamation") + detailsIcon.classList.remove("neutral-circle-icon") + detailsIcon.classList.add("warning-circle-icon") + detailsIcon.children[0].setAttribute("d", "M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24V264c0 13.3-10.7 24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z") } else if (result.details[el] === "failed") { - detailsIcon.classList.remove("fa-circle") - detailsIcon.classList.add("fa-circle-xmark") + detailsIcon.classList.remove("neutral-circle-icon") + detailsIcon.classList.add("error-circle-icon") + detailsIcon.children[0].setAttribute("d", "M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM175 175c9.4-9.4 24.6-9.4 33.9 0l47 47 47-47c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-47 47 47 47c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-47-47-47 47c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l47-47-47-47c-9.4-9.4-9.4-24.6 0-33.9z") } else if (result.details[el] === null) { //do nothing @@ -310,9 +314,10 @@ export function resetValidationStatus() { sectionHeaders.forEach(header => { const headerIcon = header.children[0] - if (!headerIcon.classList.contains("fa-circle")) { - headerIcon.classList.remove("fa-circle-check", "fa-circle-exclamation", "fa-circle-xmark") - headerIcon.classList.add("fa-circle") + if (!headerIcon.classList.contains("neutral-circle-icon")) { + headerIcon.classList.remove("success-circle-icon", "warning-circle-icon", "error-circle-icon") + headerIcon.classList.add("neutral-circle-icon") + headerIcon.children[0].setAttribute("d", "M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z") } }) @@ -344,7 +349,7 @@ function populateCategory(messagesList) { document.querySelectorAll("#spot-json, #spot-schema, #spot-defaults, #spot-jsonld, #spot-additional").forEach(category => { const categoryContainer = category.querySelector("ul.section-content") category.classList.remove("disabled") - if (category.children[0].children[0].classList.contains("fa-circle-xmark") || category.children[0].children[0].classList.contains("fa-circle-exclamation")) { + if (category.children[0].children[0].classList.contains("error-circle-icon") || category.children[0].children[0].classList.contains("warning-circle-icon")) { const noticePrompt = document.createElement("p") noticePrompt.textContent = "*This feature is still in the testing phase, and it may not refer to the correct source of the error*" noticePrompt.classList.add("notice-prompt") @@ -354,7 +359,7 @@ function populateCategory(messagesList) { listElement.textContent = message categoryContainer.append(listElement) }) - } else if (category.children[0].children[0].classList.contains("fa-circle-check")) { + } else if (category.children[0].children[0].classList.contains("success-circle-icon")) { const successMessage = document.createElement("li") successMessage.textContent = "Validated Successfully" categoryContainer.append(successMessage) diff --git a/packages/web-new/src/styles/_console.scss b/packages/web-new/src/styles/_console.scss index a7222ec62..ba146b621 100644 --- a/packages/web-new/src/styles/_console.scss +++ b/packages/web-new/src/styles/_console.scss @@ -39,12 +39,19 @@ appearance: none; border: none; background-color: transparent; - color: var(--clr-primary-500); - transition: color 250ms ease; + cursor: pointer; + + .icon { + fill: var(--clr-primary-500); + height: var(--fs-i); + width: fit-content; + transition: fill 250ms ease; + } &:hover { - color: var(--clr-primary-700); - cursor: pointer; + .icon { + fill: var(--clr-primary-700); + } } } } @@ -99,7 +106,7 @@ content: 'Visualize'; } - &:hover{ + &:hover { background-color: var(--clr-primary-500); color: var(--clr-neutral-50); } @@ -189,6 +196,9 @@ .show-icon { transform: rotate(0); transition: transform 250ms ease-in-out; + cursor: pointer; + height: var(--fs-p); + fill: var(--clr-neutral-900); } } @@ -199,24 +209,31 @@ gap: 1rem; cursor: pointer; - .fa-circle-check { - color: var(--clr-success-500); + .icon { + width: fit-content; } - .fa-circle-exclamation { - color: var(--clr-warning-500); + .neutral-circle-icon, + .success-circle-icon, + .warning-circle-icon, + .error-circle-icon { + height: var(--fs-i); } - .fa-circle-xmark { - color: var(--clr-error-500); + .neutral-circle-icon { + fill: var(--clr-neutral-300); } - .fa-circle { - color: var(--clr-neutral-300); + .success-circle-icon { + fill: var(--clr-success-500); } - .show-icon { - cursor: pointer; + .warning-circle-icon { + fill: var(--clr-warning-500); + } + + .error-circle-icon { + fill: var(--clr-error-500); } .title { @@ -345,6 +362,12 @@ align-items: center; gap: 1rem; + .icon { + fill: var(--clr-neutral-50); + height: var(--fs-i); + width: fit-content; + } + &:hover { background-color: var(--clr-primary-900); } @@ -388,10 +411,6 @@ align-items: center; justify-content: center; gap: 1rem; - - i { - font-size: var(--fs-p); - } } } } @@ -541,17 +560,19 @@ &::before { position: absolute; - content: '\f06e'; - display: inline-block; - text-rendering: auto; - -webkit-font-smoothing: antialiased; - font: var(--fa-font-solid); - font-size: var(--fs-p); - color: var(--clr-neutral-50); top: 50%; left: 50%; transform: translate(-50%, -50%); - transition: all 500ms ease-in-out; + content: ''; + -webkit-mask: url('../assets/img/eye-solid.svg') no-repeat 50% 50%; + mask: url('../assets/img/eye-solid.svg') no-repeat 50% 50%; + -webkit-mask-size: cover; + mask-size: cover; + display: inline-block; + height: calc(var(--fs-i) - .2rem); + width: var(--fs-i); + pointer-events: none; + background-color: var(--clr-neutral-50); } &:hover { @@ -562,7 +583,9 @@ input[type="checkbox"]:checked { &::before { - content: '\f070'; + -webkit-mask: url('../assets/img/eye-slash-solid.svg') no-repeat 50% 50%; + mask: url('../assets/img/eye-slash-solid.svg') no-repeat 50% 50%; + height: var(--fs-i); } } diff --git a/packages/web-new/src/styles/_control-panel.scss b/packages/web-new/src/styles/_control-panel.scss index 058695a1b..5ce141f58 100644 --- a/packages/web-new/src/styles/_control-panel.scss +++ b/packages/web-new/src/styles/_control-panel.scss @@ -35,7 +35,7 @@ border-bottom: 2px solid var(--clr-primary-500); font-family: var(--ff-primary); cursor: pointer; - transition: all 250ms ease; + transition: all 250ms ease-in-out; &:last-child { border-color: var(--clr-neutral-50); @@ -48,10 +48,16 @@ &:hover { color: var(--clr-neutral-50); background-color: var(--clr-primary-500); + + .icon { + fill: var(--clr-neutral-50); + } } - i { - font-size: var(--fs-i); + .icon { + height: var(--fs-i); + fill: var(--clr-primary-500); + transition: fill 250ms ease-in-out; } p { diff --git a/packages/web-new/src/styles/_editor.scss b/packages/web-new/src/styles/_editor.scss index 7121e283d..f396aa69b 100644 --- a/packages/web-new/src/styles/_editor.scss +++ b/packages/web-new/src/styles/_editor.scss @@ -47,7 +47,7 @@ white-space: nowrap; cursor: pointer; - span{ + span { font-size: 1rem; font-weight: bold; margin-right: 1rem; @@ -57,10 +57,6 @@ font-weight: var(--fw-bold); } - i { - font-size: var(--fs-p); - } - &.active { background-color: var(--clr-neutral-50); color: var(--clr-neutral-900); @@ -88,16 +84,22 @@ padding-right: 3rem; min-width: 17rem; - .tab-icon{ + .tab-icon { font-size: 1rem; width: fit-content; color: var(--clr-td-300); } - &.active{ - .tab-icon{ + &.active { + .tab-icon { color: var(--clr-td-500); } + + .close-tab { + svg { + fill: var(--clr-neutral-900); + } + } } .close-tab { @@ -114,35 +116,42 @@ display: flex; align-items: center; justify-content: center; - transition: all 250ms ease-in-out; + transition: background-color 250ms ease-in-out; + + svg { + pointer-events: none; + height: 1.3rem; + fill: var(--clr-neutral-300); + transition: fill 250ms ease-in-out; + } &:hover { background-color: var(--clr-neutral-200); - } - i { - pointer-events: none; - font-size: 1.4rem; - height: 1.3rem; + svg { + fill: var(--clr-neutral-900); + } } } - .confirm-btns{ + .confirm-btns { position: absolute; top: 0; left: 0; width: 100%; height: 100%; + padding: .5rem 1rem; background-color: var(--clr-neutral-50); display: flex; align-items: center; justify-content: center; - gap: 1rem; + gap: .5rem; opacity: 1; pointer-events: all; transition: opacity 250ms ease-in-out; - button{ + button { + flex: 1; display: flex; align-items: center; justify-content: center; @@ -158,29 +167,32 @@ padding: .25rem 1rem; transition: background-color 250ms ease-in-out; - i{ + .icon { order: -1; + height: var(--fs-p); + width: fit-content; + fill: var(--clr-neutral-50); } - &.confirm-tab-close{ + &.confirm-tab-close { background-color: var(--clr-success-500); - &:hover{ + &:hover { background-color: var(--clr-success-700); } } - - &.cancel-tab-close{ + + &.cancel-tab-close { background-color: var(--clr-error-700); - &:hover{ + &:hover { background-color: var(--clr-error-900); } } } - &.hidden{ + &.hidden { opacity: 0; pointer-events: none; } @@ -189,18 +201,28 @@ li:last-child { min-width: 3.5rem; - transition: all 250ms ease-in-out; + transition: background-color 250ms ease-in-out; + + .icon { + height: var(--fs-p); + fill: var(--clr-neutral-300); + transition: fill 250ms ease-in-out; + } - &:hover{ + &:hover { background-color: var(--clr-neutral-50); - color: var(--clr-neutral-900); + + .icon { + fill: var(--clr-neutral-900); + } } } } - &__right{ + &__right { height: 100%; - input[type=radio]{ + + input[type=radio] { appearance: none; width: 6rem; height: 100%; @@ -215,7 +237,7 @@ overflow: hidden; transition: all 250ms ease-in-out; - &::before{ + &::before { width: 100%; height: 100%; display: flex; @@ -223,16 +245,16 @@ justify-content: center; } - &:nth-child(1)::before{ + &:nth-child(1)::before { content: 'JSON'; } - &:nth-child(2)::before{ + &:nth-child(2)::before { content: 'YAML'; } } - input[type=radio]:checked{ + input[type=radio]:checked { background-color: var(--clr-neutral-50); color: var(--clr-neutral-900); } @@ -244,7 +266,7 @@ pointer-events: none; width: 0; height: 0; - opacity: 0; + opacity: 0; } .editor.active { diff --git a/packages/web-new/src/styles/_examples-menu.scss b/packages/web-new/src/styles/_examples-menu.scss index 1e751d698..77a3b0e7c 100644 --- a/packages/web-new/src/styles/_examples-menu.scss +++ b/packages/web-new/src/styles/_examples-menu.scss @@ -45,9 +45,11 @@ width: 100%; text-align: right; - i { - font-size: var(--fs-sub-header); + .icon { + width: fit-content; + height: var(--fs-sub-header); cursor: pointer; + fill: var(--clr-neutral-900); } } @@ -158,15 +160,18 @@ top: 50%; right: 2rem; transform: translateY(-50%); + content: ''; + -webkit-mask: url('../assets/img/angle-down-solid.svg') no-repeat 50% 50%; + mask: url('../assets/img/angle-down-solid.svg') no-repeat 50% 50%; + -webkit-mask-size: cover; + mask-size: cover; display: inline-block; - text-rendering: auto; - -webkit-font-smoothing: antialiased; - font: var(--fa-font-solid); - content: "\f107"; + height: 1.25rem; + width: 1.25rem; pointer-events: none; - color: var(--clr-neutral-900); - font-size: var(--fs-p); + background-color: var(--clr-neutral-300); } + } select, @@ -216,12 +221,13 @@ background-color: var(--clr-neutral-50); color: var(--clr-neutral-900); font-family: var(--ff-primary); - font-size: inherit; + font-size: var(--fs-p); - i { + .icon { + height: var(--fs-p); width: fit-content; padding: 0 1rem; - font-size: inherit; + fill: var(--clr-neutral-300); } .search-input { @@ -231,7 +237,7 @@ font-size: inherit; border: none; width: 100%; - padding: .8rem 1rem; + padding: .8rem 1rem .8rem 0; appearance: none; cursor: text; @@ -360,8 +366,10 @@ font-weight: var(--fw-bold); } - .toggle-arrow { - font-size: var(--fs-footer); + .icon { + fill: var(--clr-neutral-900); + height: var(--fs-footer); + width: fit-content; transform: rotate(0); transition: transform 250ms ease-in-out 250ms; } @@ -380,10 +388,11 @@ cursor: pointer; transition: background-color 250ms ease-in-out, opacity 250ms ease-in-out; - i { - font-size: var(--fs-i); - color: var(--clr-neutral-50); - transition: color 250ms ease-in-out; + .icon { + height: var(--fs-i); + width: fit-content; + fill: var(--clr-neutral-50); + transition: fill 250ms ease-in-out; } } } @@ -397,25 +406,21 @@ opacity: 1; - i { - color: var(--clr-neutral-300); + .icon { + fill: var(--clr-neutral-300); } &:hover { background-color: var(--clr-neutral-100); - i { - color: var(--clr-neutral-900); + .icon { + fill: var(--clr-neutral-900); } } } } } - &:hover{ - box-shadow: 0px 0px 10px 0px var(--clr-shadow); - } - &__content { pointer-events: none; display: flex; @@ -463,9 +468,11 @@ font-weight: var(--fw-bold); } - i { + .icon { margin-right: 1rem; - font-size: var(--fs-p); + height: var(--fs-p); + width: fit-content; + fill: var(--clr-neutral-50); } } @@ -497,7 +504,7 @@ .example__header { &--name { - .toggle-arrow { + .icon { transform: rotate(-90deg); transition: transform 250ms ease-in-out 0s; } diff --git a/packages/web-new/src/styles/_json-yaml-warning.scss b/packages/web-new/src/styles/_json-yaml-warning.scss index bfe3f952d..d502a8374 100644 --- a/packages/web-new/src/styles/_json-yaml-warning.scss +++ b/packages/web-new/src/styles/_json-yaml-warning.scss @@ -59,7 +59,6 @@ font-weight: var(--fw-bold); font-family: var(--ff-primary); color: var(--clr-neutral-50); - // color: var(--clr-neutral-900); transition: background-color 250ms ease-in-out; } .confirm-btn{ diff --git a/packages/web-new/src/styles/_save-menu.scss b/packages/web-new/src/styles/_save-menu.scss index 6ba36307b..cb6a35ef4 100644 --- a/packages/web-new/src/styles/_save-menu.scss +++ b/packages/web-new/src/styles/_save-menu.scss @@ -39,9 +39,11 @@ text-align: right; margin-bottom: 2rem; - i{ - font-size: var(--fs-sub-header); + .icon { + height: var(--fs-sub-header); + width: fit-content; cursor: pointer; + fill: var(--clr-neutral-900); } } @@ -101,8 +103,6 @@ height: 4rem; width: fit-content; background-color: var(--clr-neutral-200); - color: var(--clr-neutral-50); - font-size: var(--fs-p); padding: 1rem; border-top-right-radius: 5px; border-bottom-right-radius: 5px; @@ -110,6 +110,12 @@ cursor: pointer; transition: background-color 250ms ease-in-out; + .icon { + fill: var(--clr-neutral-50); + height: var(--fs-i); + width: fit-content; + } + &:hover{ background-color: var(--clr-neutral-300); } @@ -125,6 +131,10 @@ cursor: pointer; font-weight: var(--fw-bold); transition: all 250ms ease-in-out; + display: flex; + align-items: center; + justify-content: center; + gap: 1rem; &.share-url{ margin-bottom: 1rem; @@ -132,8 +142,11 @@ color: var(--clr-neutral-50); border: none; transition: background-color 250ms ease-in-out; - i{ - margin-right: 1rem; + + .icon { + height: var(--fs-i); + width: fit-content; + fill: var(--clr-neutral-50); } &:hover{ @@ -169,6 +182,10 @@ & > *{ flex: 1; height: 4rem; + display: flex; + align-items: center; + justify-content: center; + gap: 1rem; border-radius: 5px; border: none; color: var(--clr-neutral-50); @@ -188,8 +205,10 @@ } } - i{ - margin-right: 1rem; + .icon { + height: var(--fs-i); + width: fit-content; + fill: var(--clr-neutral-50); } &:hover{ diff --git a/packages/web-new/src/styles/_settings-menu.scss b/packages/web-new/src/styles/_settings-menu.scss index 575060dd4..970c6f908 100644 --- a/packages/web-new/src/styles/_settings-menu.scss +++ b/packages/web-new/src/styles/_settings-menu.scss @@ -40,8 +40,10 @@ text-align: right; margin-bottom: 2rem; - i { - font-size: var(--fs-sub-header); + .icon { + height: var(--fs-sub-header); + width: fit-content; + fill: var(--clr-neutral-50); cursor: pointer; } } @@ -143,14 +145,16 @@ top: 50%; right: 1rem; transform: translateY(-50%); + content: ''; + -webkit-mask: url('../assets/img/angle-down-solid.svg') no-repeat 50% 50%; + mask: url('../assets/img/angle-down-solid.svg') no-repeat 50% 50%; + -webkit-mask-size: cover; + mask-size: cover; display: inline-block; - text-rendering: auto; - -webkit-font-smoothing: antialiased; - font: var(--fa-font-solid); - content: "\f107"; + height: var(--fs-footer); + width: var(--fs-footer); pointer-events: none; - color: var(--clr-neutral-900); - font-size: var(--fs-footer); + background-color: var(--clr-neutral-900); } } diff --git a/packages/web-new/src/styles/styles.scss b/packages/web-new/src/styles/styles.scss index 62f07f081..e09417da8 100644 --- a/packages/web-new/src/styles/styles.scss +++ b/packages/web-new/src/styles/styles.scss @@ -188,10 +188,6 @@ a { font-weight: var(--fw-regular); } -i { - font-size: var(--fs-i); -} - ul { list-style: none; } @@ -270,7 +266,7 @@ header { &__links { display: flex; align-items: center; - justify-content: center; + justify-content: space-between; gap: 3rem; a { @@ -279,16 +275,22 @@ header { align-items: center; justify-content: center; font-size: var(--fs-p); - transition: color 250ms ease; + transition: color 250ms ease-in-out; &:hover { color: var(--clr-neutral-200); + + .icon { + fill: var(--clr-neutral-200); + } } } - i { - font-size: var(--fs-i); + .icon { + height: var(--fs-i); margin-bottom: .5rem; + fill: var(--clr-neutral-50); + transition: fill 250ms ease-in-out; } } } diff --git a/packages/web-new/src/template.html b/packages/web-new/src/template.html index 4a7e0bec1..2ef3c5d15 100644 --- a/packages/web-new/src/template.html +++ b/packages/web-new/src/template.html @@ -25,10 +25,9 @@ - - - - + @@ -166,17 +165,39 @@ + @@ -188,22 +209,38 @@

Thing Description Playground - BETA Version

@@ -212,7 +249,11 @@

Thing Description Playground - BETA Version

  • - + + +
@@ -245,7 +286,13 @@

Thing Description Playground - BETA Version

class="visualizations__option visualize-tab-btn" title="Tree or Graph TD visualizations">
- +
@@ -253,53 +300,95 @@

Thing Description Playground - BETA Version

- + + +

JSON Validation

- + + +
    - + + +

    JSON Schema Validation

    - + + +
      - + + +

      (With Defaults) JSON Schema Validation

      - + + +
        - + + +

        JSON-LD Validation

        - + + +
          - + + +

          Additional Checks

          - + + +
            - + + +

            Enum/Const

            - + + +
            • @@ -308,9 +397,16 @@

              Thing Description Playground - BETA Version

              - + + +

              Linked Affordances

              - + + +
              • @@ -319,9 +415,16 @@

                Thing Description Playground - BETA Version

                - + + +

                Linked Structure

                - + + +
                • @@ -330,9 +433,16 @@

                  Thing Description Playground - BETA Version

                  - + + +

                  Links Rel:Type Count

                  - + + +
                  • @@ -341,9 +451,16 @@

                    Thing Description Playground - BETA Version

                    - + + +

                    Multi-Language Consistency

                    - + + +
                    • @@ -352,9 +469,16 @@

                      Thing Description Playground - BETA Version

                      - + + +

                      Properties Items

                      - + + +
                      • @@ -363,9 +487,16 @@

                        Thing Description Playground - BETA Version

                        - + + +

                        Properties Uniqueness

                        - + + +
                        • @@ -374,9 +505,16 @@

                          Thing Description Playground - BETA Version

                          - + + +

                          Read/WriteOnly

                          - + + +
                          • @@ -385,9 +523,16 @@

                            Thing Description Playground - BETA Version

                            - + + +

                            Security

                            - + + +
                            • @@ -396,9 +541,16 @@

                              Thing Description Playground - BETA Version

                              - + + +

                              URI Variable Security

                              - + + +
                              • @@ -417,7 +569,14 @@

                                Thing Description Playground - BETA Version

            - +
            @@ -430,7 +589,14 @@

            Thing Description Playground - BETA Version

            - +
            @@ -438,9 +604,16 @@

            Thing Description Playground - BETA Version

            @@ -453,11 +626,32 @@

            Thing Description Playground - BETA Version

            - - + +
            - +
            @@ -477,8 +671,23 @@

            Thing Description Playground - BETA Version

            - - + + +
            @@ -489,8 +698,22 @@

            Thing Description Playground - BETA Version

            - - + +
            @@ -507,7 +730,11 @@

            Thing Description Playground - BETA Version

            - + + +

            Settings

            @@ -574,7 +801,11 @@

            Preferences

            - + + +
            @@ -595,9 +826,12 @@

            Preferences

            @@ -631,7 +865,11 @@

            Search Results

            - + + +
            @@ -644,17 +882,37 @@

            Search Results

            + id="open-url-tab"> + + + +
            + id="share-url-btn"> + + + + Share +
            + id="download-btn"> + + + + Download + - -//code file (filled): - - -//Download file (filled): - - -//settings (filled): - - -//plus icon - - -//x icon: - - -//feedback (filled): - - -// cli: - - -// github rounded: - - -// angle right: - - -// angle down: - - -// expand arrows: - - -// collapse arrows - - -//import file - - -// search icon - - -// open in new tab - - -// link - - -// download secondary - - -// minus - - -//collapse square: - - -//expand square: - - -//slashed eye - - -// check icon: - - From 878c24b05e2ecda21e5bafe523079918958a0dd2 Mon Sep 17 00:00:00 2001 From: Sergio Eduardo Castro Ceballos <72516762+SergioCasCeb@users.noreply.github.com> Date: Fri, 5 Jan 2024 05:21:55 +0100 Subject: [PATCH 03/16] Changed all icons for svgs - Previously all icon were been imported from Font Awesome, so in order to not depend on such system anymore all icons have been substituted for svgs --- .../src/assets/img/angle-down-solid.svg | 1 + .../src/assets/img/eye-slash-solid.svg | 1 + packages/web-new/src/assets/img/eye-solid.svg | 1 + packages/web-new/src/scripts/console.js | 8 + packages/web-new/src/scripts/editor.js | 55 ++- packages/web-new/src/scripts/examples-menu.js | 79 ++-- packages/web-new/src/scripts/main.js | 20 +- packages/web-new/src/scripts/save-menu.js | 2 +- packages/web-new/src/scripts/settings-menu.js | 2 +- packages/web-new/src/scripts/svgs.js | 71 ++++ packages/web-new/src/scripts/util.js | 43 +- packages/web-new/src/styles/_console.scss | 79 ++-- .../web-new/src/styles/_control-panel.scss | 12 +- packages/web-new/src/styles/_editor.scss | 90 ++-- .../web-new/src/styles/_examples-menu.scss | 65 +-- .../src/styles/_json-yaml-warning.scss | 1 - packages/web-new/src/styles/_save-menu.scss | 35 +- .../web-new/src/styles/_settings-menu.scss | 20 +- packages/web-new/src/styles/styles.scss | 18 +- packages/web-new/src/template.html | 388 +++++++++++++++--- packages/web-new/webpack.config.js | 4 +- 21 files changed, 747 insertions(+), 248 deletions(-) create mode 100644 packages/web-new/src/assets/img/angle-down-solid.svg create mode 100644 packages/web-new/src/assets/img/eye-slash-solid.svg create mode 100644 packages/web-new/src/assets/img/eye-solid.svg create mode 100644 packages/web-new/src/scripts/svgs.js diff --git a/packages/web-new/src/assets/img/angle-down-solid.svg b/packages/web-new/src/assets/img/angle-down-solid.svg new file mode 100644 index 000000000..cabe8a94f --- /dev/null +++ b/packages/web-new/src/assets/img/angle-down-solid.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/web-new/src/assets/img/eye-slash-solid.svg b/packages/web-new/src/assets/img/eye-slash-solid.svg new file mode 100644 index 000000000..f592dabfe --- /dev/null +++ b/packages/web-new/src/assets/img/eye-slash-solid.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/web-new/src/assets/img/eye-solid.svg b/packages/web-new/src/assets/img/eye-solid.svg new file mode 100644 index 000000000..1f07b7f80 --- /dev/null +++ b/packages/web-new/src/assets/img/eye-solid.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/web-new/src/scripts/console.js b/packages/web-new/src/scripts/console.js index 90a83ad56..0531d3c6a 100644 --- a/packages/web-new/src/scripts/console.js +++ b/packages/web-new/src/scripts/console.js @@ -75,6 +75,14 @@ function collapseConsole() { 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") +minMaxBtn.addEventListener("click", () => { + + if (minMaxBtn.children[0].classList.contains("collapse-arrows")) { + mainContentElement.style.flex = "1 0" + consoleElement.style.flex = `0 39px` + minMaxBtn.children[0].classList.remove("collapse-arrows") + minMaxBtn.children[0].classList.add("expand-arrows") + 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") textIcon.forEach(text => { text.classList.remove("hiddenV") diff --git a/packages/web-new/src/scripts/editor.js b/packages/web-new/src/scripts/editor.js index 425d1f393..d5db9eca7 100644 --- a/packages/web-new/src/scripts/editor.js +++ b/packages/web-new/src/scripts/editor.js @@ -92,29 +92,64 @@ 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 + 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") + + //append the path to the svg and the svg to the button + closeIconSvg.appendChild(closeIconPath) + closeBtn.appendChild(closeIconSvg) //Create the close confirmation btns 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 + 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") + + 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 + 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") + + cancelIconSvg.appendChild(cancelIconPath) + cancelTabClose.appendChild(cancelIconSvg) cancelTabClose.addEventListener("click", () => { cancelTabClose.parentElement.classList.add("hidden") diff --git a/packages/web-new/src/scripts/examples-menu.js b/packages/web-new/src/scripts/examples-menu.js index 1a00e0f83..088a25703 100644 --- a/packages/web-new/src/scripts/examples-menu.js +++ b/packages/web-new/src/scripts/examples-menu.js @@ -26,7 +26,7 @@ import { createIde, ideCount, tabsLeft } from "./editor" /***********************************************************/ /* Examples menu */ /***********************************************************/ -const closeExamples = document.querySelector(".examples-menu-container__close i") +const closeExamples = document.querySelector(".examples-menu-container__close .x-icon") const examplesMenu = document.querySelector(".examples-menu") const examplesBtn = document.querySelector("#examples-btn") const categorySelect = document.querySelector('#thing-category') @@ -267,23 +267,23 @@ async function getAllExamples(categoryId, thingType) { exampleNameIcon.classList.add("example-icon") // Create an SVG element - const svgElement = document.createElementNS("http://www.w3.org/2000/svg", "svg") - svgElement.setAttribute("xmlns", "http://www.w3.org/2000/svg") - svgElement.setAttribute("width", "100%") - svgElement.setAttribute("viewBox", "0 0 351 379") - svgElement.setAttribute("fill", "none") + const tdFileSvg = document.createElementNS("http://www.w3.org/2000/svg", "svg") + tdFileSvg.setAttribute("xmlns", "http://www.w3.org/2000/svg") + tdFileSvg.setAttribute("width", "100%") + tdFileSvg.setAttribute("viewBox", "0 0 351 379") + tdFileSvg.setAttribute("fill", "none") // Create a path element and set its attributes - const pathElement = document.createElementNS("http://www.w3.org/2000/svg", "path") - pathElement.setAttribute("fill-rule", "evenodd") - pathElement.setAttribute("clip-rule", "evenodd") - pathElement.setAttribute("d", "M184 0V95.9981C184 107.044 192.954 115.998 204 115.998H300V190H106C89.4315 190 76 203.431 76 220V379H40C17.9086 379 0 361.091 0 339V40C0 17.9086 17.9086 0 40 0H184ZM204 95.9981V4.28427L295.714 95.9981H204ZM189.758 379V265.724H231.32V243.922H189.758H162.019H121.105V265.724H162.019V379H189.758ZM275.017 379H288.654C297.808 379 306.158 377.485 313.703 374.454C321.311 371.362 327.836 367.001 333.278 361.373C338.783 355.683 343.02 348.88 345.988 340.963C349.019 333.046 350.534 324.295 350.534 314.708V308.307C350.534 298.658 349.019 289.907 345.988 282.052C343.02 274.135 338.783 267.332 333.278 261.642C327.774 255.951 321.249 251.591 313.703 248.561C306.219 245.468 297.963 243.922 288.933 243.922H275.017H258.688H247.185V379H259.245H275.017ZM275.017 357.291H288.654C295.952 357.291 302.106 355.652 307.116 352.374C312.126 349.034 315.899 344.179 318.435 337.809C321.032 331.438 322.331 323.738 322.331 314.708V308.121C322.331 301.194 321.589 295.102 320.104 289.845C318.682 284.588 316.548 280.165 313.703 276.578C310.858 272.991 307.364 270.3 303.22 268.507C299.076 266.651 294.313 265.724 288.933 265.724H275.017V357.291Z") + const tdFilePath = document.createElementNS("http://www.w3.org/2000/svg", "path") + tdFilePath.setAttribute("fill-rule", "evenodd") + tdFilePath.setAttribute("clip-rule", "evenodd") + tdFilePath.setAttribute("d", "M184 0V95.9981C184 107.044 192.954 115.998 204 115.998H300V190H106C89.4315 190 76 203.431 76 220V379H40C17.9086 379 0 361.091 0 339V40C0 17.9086 17.9086 0 40 0H184ZM204 95.9981V4.28427L295.714 95.9981H204ZM189.758 379V265.724H231.32V243.922H189.758H162.019H121.105V265.724H162.019V379H189.758ZM275.017 379H288.654C297.808 379 306.158 377.485 313.703 374.454C321.311 371.362 327.836 367.001 333.278 361.373C338.783 355.683 343.02 348.88 345.988 340.963C349.019 333.046 350.534 324.295 350.534 314.708V308.307C350.534 298.658 349.019 289.907 345.988 282.052C343.02 274.135 338.783 267.332 333.278 261.642C327.774 255.951 321.249 251.591 313.703 248.561C306.219 245.468 297.963 243.922 288.933 243.922H275.017H258.688H247.185V379H259.245H275.017ZM275.017 357.291H288.654C295.952 357.291 302.106 355.652 307.116 352.374C312.126 349.034 315.899 344.179 318.435 337.809C321.032 331.438 322.331 323.738 322.331 314.708V308.121C322.331 301.194 321.589 295.102 320.104 289.845C318.682 284.588 316.548 280.165 313.703 276.578C310.858 272.991 307.364 270.3 303.22 268.507C299.076 266.651 294.313 265.724 288.933 265.724H275.017V357.291Z") // Append the path element to the SVG element - svgElement.appendChild(pathElement) + tdFileSvg.appendChild(tdFilePath) // Append the SVG element to the document body or any other desired location - exampleNameIcon.appendChild(svgElement); + exampleNameIcon.appendChild(tdFileSvg); // Append the icon container to the name container exampleName.appendChild(exampleNameIcon) @@ -292,11 +292,21 @@ async function getAllExamples(categoryId, thingType) { const exampleNameTitle = document.createElement('p') exampleNameTitle.innerText = example[1]["title"] exampleName.appendChild(exampleNameTitle) - - // //Create, populate and append the example title toggle arrow - const exampleNameArrow = document.createElement('i') - exampleNameArrow.classList.add("fa-solid", "fa-chevron-down", "toggle-arrow") - exampleName.appendChild(exampleNameArrow) + + //Create, populate and append the example title toggle arrow + const exampleArrowSvg = document.createElementNS("http://www.w3.org/2000/svg", "svg") + exampleArrowSvg.setAttribute("xmlns", "http://www.w3.org/2000/svg") + exampleArrowSvg.setAttribute("width", "100%") + exampleArrowSvg.setAttribute("height", "100%") + exampleArrowSvg.setAttribute("viewBox", "0 0 448 512") + exampleArrowSvg.classList.add("icon") + + // Create a path element and set its attributes + const exampleArrowPath = document.createElementNS("http://www.w3.org/2000/svg", "path") + exampleArrowPath.setAttribute("d", "M201.4 342.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 274.7 86.6 137.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z") + + exampleArrowSvg.appendChild(exampleArrowPath) + exampleName.appendChild(exampleArrowSvg) //Append the whole name component to the header component exampleHeader.appendChild(exampleName) @@ -305,9 +315,20 @@ async function getAllExamples(categoryId, thingType) { const quickBtn = document.createElement('button') quickBtn.classList.add("example__header--quick") quickBtn.setAttribute("title", "Use") - const quickButtonIcon = document.createElement('i') - quickButtonIcon.classList.add("fa-solid", "fa-file-import") - quickBtn.appendChild(quickButtonIcon) + // create the svg icon for the quick use button + const importFileSvg = document.createElementNS("http://www.w3.org/2000/svg", "svg") + importFileSvg.setAttribute("xmlns", "http://www.w3.org/2000/svg") + importFileSvg.setAttribute("width", "100%") + importFileSvg.setAttribute("height", "100%") + importFileSvg.setAttribute("viewBox", "0 0 512 512") + importFileSvg.classList.add("icon") + + // Create a path element and set its attributes + const importFilePath = document.createElementNS("http://www.w3.org/2000/svg", "path") + importFilePath.setAttribute("d", "M128 64c0-35.3 28.7-64 64-64H352V128c0 17.7 14.3 32 32 32H512V448c0 35.3-28.7 64-64 64H192c-35.3 0-64-28.7-64-64V336H302.1l-39 39c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l80-80c9.4-9.4 9.4-24.6 0-33.9l-80-80c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9l39 39H128V64zm0 224v48H24c-13.3 0-24-10.7-24-24s10.7-24 24-24H128zM512 128H384V0L512 128z") + + importFileSvg.appendChild(importFilePath) + quickBtn.appendChild(importFileSvg) exampleHeader.appendChild(quickBtn) @@ -343,9 +364,21 @@ async function getAllExamples(categoryId, thingType) { exampleBtnUse.classList.add("example__btn--use") exampleBtns.appendChild(exampleBtnUse) - const exampleIconUse = document.createElement('i') - exampleIconUse.classList.add("fa-solid", "fa-file-import") - exampleBtnUse.appendChild(exampleIconUse) + //todo: create the apply button + // create the svg icon for the apply button + const applyIconSvg = document.createElementNS("http://www.w3.org/2000/svg", "svg") + applyIconSvg.setAttribute("xmlns", "http://www.w3.org/2000/svg") + applyIconSvg.setAttribute("width", "100%") + applyIconSvg.setAttribute("height", "100%") + applyIconSvg.setAttribute("viewBox", "0 0 512 512") + applyIconSvg.classList.add("icon") + + // Create a path element and set its attributes + const applyIconPath = document.createElementNS("http://www.w3.org/2000/svg", "path") + applyIconPath.setAttribute("d", "M128 64c0-35.3 28.7-64 64-64H352V128c0 17.7 14.3 32 32 32H512V448c0 35.3-28.7 64-64 64H192c-35.3 0-64-28.7-64-64V336H302.1l-39 39c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l80-80c9.4-9.4 9.4-24.6 0-33.9l-80-80c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9l39 39H128V64zm0 224v48H24c-13.3 0-24-10.7-24-24s10.7-24 24-24H128zM512 128H384V0L512 128z") + + applyIconSvg.appendChild(applyIconPath) + exampleBtnUse.appendChild(applyIconSvg) const exampleTxtUse = document.createElement('p') exampleTxtUse.innerText = "Apply" diff --git a/packages/web-new/src/scripts/main.js b/packages/web-new/src/scripts/main.js index 030d062a4..0112de2ad 100644 --- a/packages/web-new/src/scripts/main.js +++ b/packages/web-new/src/scripts/main.js @@ -166,14 +166,16 @@ function onmousemoveY(e) { t.style.flex = "1 0" if(h > 38){ - 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].classList.add("collapse-arrows") + minMaxBtn.children[0].classList.remove("expand-arrows") + 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") consoleElement.classList.remove("collapsed") consoleElement.classList.add("expanded") }else{ - 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") + minMaxBtn.children[0].classList.remove("collapse-arrows") + minMaxBtn.children[0].classList.add("expand-arrows") + 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") consoleElement.classList.remove("expanded") consoleElement.classList.add("collapsed") @@ -192,14 +194,16 @@ function onmousemoveY(e) { b.style.flex = "1 0" if(h < 714){ - 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].classList.add("collapse-arrows") + minMaxBtn.children[0].classList.remove("expand-arrows") + 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") consoleElement.classList.remove("collapsed") consoleElement.classList.add("expanded") }else{ - 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") + minMaxBtn.children[0].classList.remove("collapse-arrows") + minMaxBtn.children[0].classList.add("expand-arrows") + 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") consoleElement.classList.remove("expanded") consoleElement.classList.add("collapsed") diff --git a/packages/web-new/src/scripts/save-menu.js b/packages/web-new/src/scripts/save-menu.js index b50a90f77..647ff61eb 100644 --- a/packages/web-new/src/scripts/save-menu.js +++ b/packages/web-new/src/scripts/save-menu.js @@ -28,7 +28,7 @@ import { editorList, getEditorData } from "./editor" /***********************************************************/ const saveMenu = document.querySelector(".save-menu") const saveMenuBtn = document.querySelector("#save-btn") -const closeSaveMenu = document.querySelector(".save-menu-close i") +const closeSaveMenu = document.querySelector(".save-menu-close .x-icon") const shareUrlContainer = document.querySelector("#share-url-input") const openUrlTab = document.querySelector("#open-url-tab") const thingTypeText = document.querySelector('#thing-type-text') diff --git a/packages/web-new/src/scripts/settings-menu.js b/packages/web-new/src/scripts/settings-menu.js index aca8141b0..5580adaed 100644 --- a/packages/web-new/src/scripts/settings-menu.js +++ b/packages/web-new/src/scripts/settings-menu.js @@ -26,7 +26,7 @@ import themeData from './monochrome-theme' /***********************************************************/ /* Settings menu */ /***********************************************************/ -const closeSettings = document.querySelector(".settings__close i"); +const closeSettings = document.querySelector(".settings__close .x-icon"); const settingsMenu = document.querySelector(".settings-menu"); const settingsBtn = document.querySelector("#settings-btn"); export const editorForm = document.querySelector(".settings__editor") diff --git a/packages/web-new/src/scripts/svgs.js b/packages/web-new/src/scripts/svgs.js new file mode 100644 index 000000000..fd21ddf1b --- /dev/null +++ b/packages/web-new/src/scripts/svgs.js @@ -0,0 +1,71 @@ + + +//Play button: + + +//code file (filled): + + +//Download file (filled): + + +//settings (filled): + + +//plus icon + + +//x icon: + + +//feedback (filled): + + +// cli: + + +// github rounded: + + +// angle right: + + +// angle down: + + +// expand arrows: + + +// collapse arrows + + +//import file + + +// search icon + + +// open in new tab + + +// link + + +// download secondary + + +// minus + + +//collapse square: + + +//expand square: + + +//slashed eye + + +// check icon: + + diff --git a/packages/web-new/src/scripts/util.js b/packages/web-new/src/scripts/util.js index 7e9b72531..a15d17098 100644 --- a/packages/web-new/src/scripts/util.js +++ b/packages/web-new/src/scripts/util.js @@ -233,23 +233,24 @@ export function validate(thingType, editorContent) { validator(editorContent, log, { checkDefaults: true, checkJsonLd, checkTmConformance }) .then(result => { - // console.log(result) Object.keys(result.report).forEach(el => { const spotName = "spot-" + el document.getElementById(spotName).removeAttribute('open') const resultIcon = document.getElementById(spotName).children[0].children[0] if (result.report[el] === "passed") { - resultIcon.classList.remove("fa-circle") - resultIcon.classList.add("fa-circle-check") + resultIcon.classList.remove("neutral-circle-icon") + resultIcon.classList.add("success-circle-icon") + resultIcon.children[0].setAttribute("d", "M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z") } else if (result.report[el] === "warning") { - resultIcon.classList.remove("fa-circle") - resultIcon.classList.add("fa-circle-exclamation") - + resultIcon.classList.remove("neutral-circle-icon") + resultIcon.classList.add("warning-circle-icon") + resultIcon.children[0].setAttribute("d", "M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24V264c0 13.3-10.7 24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z") } else if (result.report[el] === "failed") { - resultIcon.classList.remove("fa-circle") - resultIcon.classList.add("fa-circle-xmark") + resultIcon.classList.remove("neutral-circle-icon") + resultIcon.classList.add("error-circle-icon") + resultIcon.children[0].setAttribute("d", "M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM175 175c9.4-9.4 24.6-9.4 33.9 0l47 47 47-47c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-47 47 47 47c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-47-47-47 47c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l47-47-47-47c-9.4-9.4-9.4-24.6 0-33.9z") } else if (result.report[el] === null) { //do nothing @@ -266,16 +267,19 @@ export function validate(thingType, editorContent) { const detailsIcon = document.getElementById(detailsName).children[0].children[0] if (result.details[el] === "passed") { - detailsIcon.classList.remove("fa-circle") - detailsIcon.classList.add("fa-circle-check") + detailsIcon.classList.remove("neutral-circle-icon") + detailsIcon.classList.add("success-circle-icon") + detailsIcon.children[0].setAttribute("d", "M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z") } else if (result.details[el] === "warning" || result.details[el] === "not-impl") { - detailsIcon.classList.remove("fa-circle") - detailsIcon.classList.add("fa-circle-exclamation") + detailsIcon.classList.remove("neutral-circle-icon") + detailsIcon.classList.add("warning-circle-icon") + detailsIcon.children[0].setAttribute("d", "M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24V264c0 13.3-10.7 24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z") } else if (result.details[el] === "failed") { - detailsIcon.classList.remove("fa-circle") - detailsIcon.classList.add("fa-circle-xmark") + detailsIcon.classList.remove("neutral-circle-icon") + detailsIcon.classList.add("error-circle-icon") + detailsIcon.children[0].setAttribute("d", "M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM175 175c9.4-9.4 24.6-9.4 33.9 0l47 47 47-47c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-47 47 47 47c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-47-47-47 47c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l47-47-47-47c-9.4-9.4-9.4-24.6 0-33.9z") } else if (result.details[el] === null) { //do nothing @@ -310,9 +314,10 @@ export function resetValidationStatus() { sectionHeaders.forEach(header => { const headerIcon = header.children[0] - if (!headerIcon.classList.contains("fa-circle")) { - headerIcon.classList.remove("fa-circle-check", "fa-circle-exclamation", "fa-circle-xmark") - headerIcon.classList.add("fa-circle") + if (!headerIcon.classList.contains("neutral-circle-icon")) { + headerIcon.classList.remove("success-circle-icon", "warning-circle-icon", "error-circle-icon") + headerIcon.classList.add("neutral-circle-icon") + headerIcon.children[0].setAttribute("d", "M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z") } }) @@ -344,7 +349,7 @@ function populateCategory(messagesList) { document.querySelectorAll("#spot-json, #spot-schema, #spot-defaults, #spot-jsonld, #spot-additional").forEach(category => { const categoryContainer = category.querySelector("ul.section-content") category.classList.remove("disabled") - if (category.children[0].children[0].classList.contains("fa-circle-xmark") || category.children[0].children[0].classList.contains("fa-circle-exclamation")) { + if (category.children[0].children[0].classList.contains("error-circle-icon") || category.children[0].children[0].classList.contains("warning-circle-icon")) { const noticePrompt = document.createElement("p") noticePrompt.textContent = "*This feature is still in the testing phase, and it may not refer to the correct source of the error*" noticePrompt.classList.add("notice-prompt") @@ -354,7 +359,7 @@ function populateCategory(messagesList) { listElement.textContent = message categoryContainer.append(listElement) }) - } else if (category.children[0].children[0].classList.contains("fa-circle-check")) { + } else if (category.children[0].children[0].classList.contains("success-circle-icon")) { const successMessage = document.createElement("li") successMessage.textContent = "Validated Successfully" categoryContainer.append(successMessage) diff --git a/packages/web-new/src/styles/_console.scss b/packages/web-new/src/styles/_console.scss index a7222ec62..ba146b621 100644 --- a/packages/web-new/src/styles/_console.scss +++ b/packages/web-new/src/styles/_console.scss @@ -39,12 +39,19 @@ appearance: none; border: none; background-color: transparent; - color: var(--clr-primary-500); - transition: color 250ms ease; + cursor: pointer; + + .icon { + fill: var(--clr-primary-500); + height: var(--fs-i); + width: fit-content; + transition: fill 250ms ease; + } &:hover { - color: var(--clr-primary-700); - cursor: pointer; + .icon { + fill: var(--clr-primary-700); + } } } } @@ -99,7 +106,7 @@ content: 'Visualize'; } - &:hover{ + &:hover { background-color: var(--clr-primary-500); color: var(--clr-neutral-50); } @@ -189,6 +196,9 @@ .show-icon { transform: rotate(0); transition: transform 250ms ease-in-out; + cursor: pointer; + height: var(--fs-p); + fill: var(--clr-neutral-900); } } @@ -199,24 +209,31 @@ gap: 1rem; cursor: pointer; - .fa-circle-check { - color: var(--clr-success-500); + .icon { + width: fit-content; } - .fa-circle-exclamation { - color: var(--clr-warning-500); + .neutral-circle-icon, + .success-circle-icon, + .warning-circle-icon, + .error-circle-icon { + height: var(--fs-i); } - .fa-circle-xmark { - color: var(--clr-error-500); + .neutral-circle-icon { + fill: var(--clr-neutral-300); } - .fa-circle { - color: var(--clr-neutral-300); + .success-circle-icon { + fill: var(--clr-success-500); } - .show-icon { - cursor: pointer; + .warning-circle-icon { + fill: var(--clr-warning-500); + } + + .error-circle-icon { + fill: var(--clr-error-500); } .title { @@ -345,6 +362,12 @@ align-items: center; gap: 1rem; + .icon { + fill: var(--clr-neutral-50); + height: var(--fs-i); + width: fit-content; + } + &:hover { background-color: var(--clr-primary-900); } @@ -388,10 +411,6 @@ align-items: center; justify-content: center; gap: 1rem; - - i { - font-size: var(--fs-p); - } } } } @@ -541,17 +560,19 @@ &::before { position: absolute; - content: '\f06e'; - display: inline-block; - text-rendering: auto; - -webkit-font-smoothing: antialiased; - font: var(--fa-font-solid); - font-size: var(--fs-p); - color: var(--clr-neutral-50); top: 50%; left: 50%; transform: translate(-50%, -50%); - transition: all 500ms ease-in-out; + content: ''; + -webkit-mask: url('../assets/img/eye-solid.svg') no-repeat 50% 50%; + mask: url('../assets/img/eye-solid.svg') no-repeat 50% 50%; + -webkit-mask-size: cover; + mask-size: cover; + display: inline-block; + height: calc(var(--fs-i) - .2rem); + width: var(--fs-i); + pointer-events: none; + background-color: var(--clr-neutral-50); } &:hover { @@ -562,7 +583,9 @@ input[type="checkbox"]:checked { &::before { - content: '\f070'; + -webkit-mask: url('../assets/img/eye-slash-solid.svg') no-repeat 50% 50%; + mask: url('../assets/img/eye-slash-solid.svg') no-repeat 50% 50%; + height: var(--fs-i); } } diff --git a/packages/web-new/src/styles/_control-panel.scss b/packages/web-new/src/styles/_control-panel.scss index 058695a1b..5ce141f58 100644 --- a/packages/web-new/src/styles/_control-panel.scss +++ b/packages/web-new/src/styles/_control-panel.scss @@ -35,7 +35,7 @@ border-bottom: 2px solid var(--clr-primary-500); font-family: var(--ff-primary); cursor: pointer; - transition: all 250ms ease; + transition: all 250ms ease-in-out; &:last-child { border-color: var(--clr-neutral-50); @@ -48,10 +48,16 @@ &:hover { color: var(--clr-neutral-50); background-color: var(--clr-primary-500); + + .icon { + fill: var(--clr-neutral-50); + } } - i { - font-size: var(--fs-i); + .icon { + height: var(--fs-i); + fill: var(--clr-primary-500); + transition: fill 250ms ease-in-out; } p { diff --git a/packages/web-new/src/styles/_editor.scss b/packages/web-new/src/styles/_editor.scss index 7121e283d..f396aa69b 100644 --- a/packages/web-new/src/styles/_editor.scss +++ b/packages/web-new/src/styles/_editor.scss @@ -47,7 +47,7 @@ white-space: nowrap; cursor: pointer; - span{ + span { font-size: 1rem; font-weight: bold; margin-right: 1rem; @@ -57,10 +57,6 @@ font-weight: var(--fw-bold); } - i { - font-size: var(--fs-p); - } - &.active { background-color: var(--clr-neutral-50); color: var(--clr-neutral-900); @@ -88,16 +84,22 @@ padding-right: 3rem; min-width: 17rem; - .tab-icon{ + .tab-icon { font-size: 1rem; width: fit-content; color: var(--clr-td-300); } - &.active{ - .tab-icon{ + &.active { + .tab-icon { color: var(--clr-td-500); } + + .close-tab { + svg { + fill: var(--clr-neutral-900); + } + } } .close-tab { @@ -114,35 +116,42 @@ display: flex; align-items: center; justify-content: center; - transition: all 250ms ease-in-out; + transition: background-color 250ms ease-in-out; + + svg { + pointer-events: none; + height: 1.3rem; + fill: var(--clr-neutral-300); + transition: fill 250ms ease-in-out; + } &:hover { background-color: var(--clr-neutral-200); - } - i { - pointer-events: none; - font-size: 1.4rem; - height: 1.3rem; + svg { + fill: var(--clr-neutral-900); + } } } - .confirm-btns{ + .confirm-btns { position: absolute; top: 0; left: 0; width: 100%; height: 100%; + padding: .5rem 1rem; background-color: var(--clr-neutral-50); display: flex; align-items: center; justify-content: center; - gap: 1rem; + gap: .5rem; opacity: 1; pointer-events: all; transition: opacity 250ms ease-in-out; - button{ + button { + flex: 1; display: flex; align-items: center; justify-content: center; @@ -158,29 +167,32 @@ padding: .25rem 1rem; transition: background-color 250ms ease-in-out; - i{ + .icon { order: -1; + height: var(--fs-p); + width: fit-content; + fill: var(--clr-neutral-50); } - &.confirm-tab-close{ + &.confirm-tab-close { background-color: var(--clr-success-500); - &:hover{ + &:hover { background-color: var(--clr-success-700); } } - - &.cancel-tab-close{ + + &.cancel-tab-close { background-color: var(--clr-error-700); - &:hover{ + &:hover { background-color: var(--clr-error-900); } } } - &.hidden{ + &.hidden { opacity: 0; pointer-events: none; } @@ -189,18 +201,28 @@ li:last-child { min-width: 3.5rem; - transition: all 250ms ease-in-out; + transition: background-color 250ms ease-in-out; + + .icon { + height: var(--fs-p); + fill: var(--clr-neutral-300); + transition: fill 250ms ease-in-out; + } - &:hover{ + &:hover { background-color: var(--clr-neutral-50); - color: var(--clr-neutral-900); + + .icon { + fill: var(--clr-neutral-900); + } } } } - &__right{ + &__right { height: 100%; - input[type=radio]{ + + input[type=radio] { appearance: none; width: 6rem; height: 100%; @@ -215,7 +237,7 @@ overflow: hidden; transition: all 250ms ease-in-out; - &::before{ + &::before { width: 100%; height: 100%; display: flex; @@ -223,16 +245,16 @@ justify-content: center; } - &:nth-child(1)::before{ + &:nth-child(1)::before { content: 'JSON'; } - &:nth-child(2)::before{ + &:nth-child(2)::before { content: 'YAML'; } } - input[type=radio]:checked{ + input[type=radio]:checked { background-color: var(--clr-neutral-50); color: var(--clr-neutral-900); } @@ -244,7 +266,7 @@ pointer-events: none; width: 0; height: 0; - opacity: 0; + opacity: 0; } .editor.active { diff --git a/packages/web-new/src/styles/_examples-menu.scss b/packages/web-new/src/styles/_examples-menu.scss index 1e751d698..77a3b0e7c 100644 --- a/packages/web-new/src/styles/_examples-menu.scss +++ b/packages/web-new/src/styles/_examples-menu.scss @@ -45,9 +45,11 @@ width: 100%; text-align: right; - i { - font-size: var(--fs-sub-header); + .icon { + width: fit-content; + height: var(--fs-sub-header); cursor: pointer; + fill: var(--clr-neutral-900); } } @@ -158,15 +160,18 @@ top: 50%; right: 2rem; transform: translateY(-50%); + content: ''; + -webkit-mask: url('../assets/img/angle-down-solid.svg') no-repeat 50% 50%; + mask: url('../assets/img/angle-down-solid.svg') no-repeat 50% 50%; + -webkit-mask-size: cover; + mask-size: cover; display: inline-block; - text-rendering: auto; - -webkit-font-smoothing: antialiased; - font: var(--fa-font-solid); - content: "\f107"; + height: 1.25rem; + width: 1.25rem; pointer-events: none; - color: var(--clr-neutral-900); - font-size: var(--fs-p); + background-color: var(--clr-neutral-300); } + } select, @@ -216,12 +221,13 @@ background-color: var(--clr-neutral-50); color: var(--clr-neutral-900); font-family: var(--ff-primary); - font-size: inherit; + font-size: var(--fs-p); - i { + .icon { + height: var(--fs-p); width: fit-content; padding: 0 1rem; - font-size: inherit; + fill: var(--clr-neutral-300); } .search-input { @@ -231,7 +237,7 @@ font-size: inherit; border: none; width: 100%; - padding: .8rem 1rem; + padding: .8rem 1rem .8rem 0; appearance: none; cursor: text; @@ -360,8 +366,10 @@ font-weight: var(--fw-bold); } - .toggle-arrow { - font-size: var(--fs-footer); + .icon { + fill: var(--clr-neutral-900); + height: var(--fs-footer); + width: fit-content; transform: rotate(0); transition: transform 250ms ease-in-out 250ms; } @@ -380,10 +388,11 @@ cursor: pointer; transition: background-color 250ms ease-in-out, opacity 250ms ease-in-out; - i { - font-size: var(--fs-i); - color: var(--clr-neutral-50); - transition: color 250ms ease-in-out; + .icon { + height: var(--fs-i); + width: fit-content; + fill: var(--clr-neutral-50); + transition: fill 250ms ease-in-out; } } } @@ -397,25 +406,21 @@ opacity: 1; - i { - color: var(--clr-neutral-300); + .icon { + fill: var(--clr-neutral-300); } &:hover { background-color: var(--clr-neutral-100); - i { - color: var(--clr-neutral-900); + .icon { + fill: var(--clr-neutral-900); } } } } } - &:hover{ - box-shadow: 0px 0px 10px 0px var(--clr-shadow); - } - &__content { pointer-events: none; display: flex; @@ -463,9 +468,11 @@ font-weight: var(--fw-bold); } - i { + .icon { margin-right: 1rem; - font-size: var(--fs-p); + height: var(--fs-p); + width: fit-content; + fill: var(--clr-neutral-50); } } @@ -497,7 +504,7 @@ .example__header { &--name { - .toggle-arrow { + .icon { transform: rotate(-90deg); transition: transform 250ms ease-in-out 0s; } diff --git a/packages/web-new/src/styles/_json-yaml-warning.scss b/packages/web-new/src/styles/_json-yaml-warning.scss index bfe3f952d..d502a8374 100644 --- a/packages/web-new/src/styles/_json-yaml-warning.scss +++ b/packages/web-new/src/styles/_json-yaml-warning.scss @@ -59,7 +59,6 @@ font-weight: var(--fw-bold); font-family: var(--ff-primary); color: var(--clr-neutral-50); - // color: var(--clr-neutral-900); transition: background-color 250ms ease-in-out; } .confirm-btn{ diff --git a/packages/web-new/src/styles/_save-menu.scss b/packages/web-new/src/styles/_save-menu.scss index 6ba36307b..cb6a35ef4 100644 --- a/packages/web-new/src/styles/_save-menu.scss +++ b/packages/web-new/src/styles/_save-menu.scss @@ -39,9 +39,11 @@ text-align: right; margin-bottom: 2rem; - i{ - font-size: var(--fs-sub-header); + .icon { + height: var(--fs-sub-header); + width: fit-content; cursor: pointer; + fill: var(--clr-neutral-900); } } @@ -101,8 +103,6 @@ height: 4rem; width: fit-content; background-color: var(--clr-neutral-200); - color: var(--clr-neutral-50); - font-size: var(--fs-p); padding: 1rem; border-top-right-radius: 5px; border-bottom-right-radius: 5px; @@ -110,6 +110,12 @@ cursor: pointer; transition: background-color 250ms ease-in-out; + .icon { + fill: var(--clr-neutral-50); + height: var(--fs-i); + width: fit-content; + } + &:hover{ background-color: var(--clr-neutral-300); } @@ -125,6 +131,10 @@ cursor: pointer; font-weight: var(--fw-bold); transition: all 250ms ease-in-out; + display: flex; + align-items: center; + justify-content: center; + gap: 1rem; &.share-url{ margin-bottom: 1rem; @@ -132,8 +142,11 @@ color: var(--clr-neutral-50); border: none; transition: background-color 250ms ease-in-out; - i{ - margin-right: 1rem; + + .icon { + height: var(--fs-i); + width: fit-content; + fill: var(--clr-neutral-50); } &:hover{ @@ -169,6 +182,10 @@ & > *{ flex: 1; height: 4rem; + display: flex; + align-items: center; + justify-content: center; + gap: 1rem; border-radius: 5px; border: none; color: var(--clr-neutral-50); @@ -188,8 +205,10 @@ } } - i{ - margin-right: 1rem; + .icon { + height: var(--fs-i); + width: fit-content; + fill: var(--clr-neutral-50); } &:hover{ diff --git a/packages/web-new/src/styles/_settings-menu.scss b/packages/web-new/src/styles/_settings-menu.scss index 575060dd4..970c6f908 100644 --- a/packages/web-new/src/styles/_settings-menu.scss +++ b/packages/web-new/src/styles/_settings-menu.scss @@ -40,8 +40,10 @@ text-align: right; margin-bottom: 2rem; - i { - font-size: var(--fs-sub-header); + .icon { + height: var(--fs-sub-header); + width: fit-content; + fill: var(--clr-neutral-50); cursor: pointer; } } @@ -143,14 +145,16 @@ top: 50%; right: 1rem; transform: translateY(-50%); + content: ''; + -webkit-mask: url('../assets/img/angle-down-solid.svg') no-repeat 50% 50%; + mask: url('../assets/img/angle-down-solid.svg') no-repeat 50% 50%; + -webkit-mask-size: cover; + mask-size: cover; display: inline-block; - text-rendering: auto; - -webkit-font-smoothing: antialiased; - font: var(--fa-font-solid); - content: "\f107"; + height: var(--fs-footer); + width: var(--fs-footer); pointer-events: none; - color: var(--clr-neutral-900); - font-size: var(--fs-footer); + background-color: var(--clr-neutral-900); } } diff --git a/packages/web-new/src/styles/styles.scss b/packages/web-new/src/styles/styles.scss index 62f07f081..e09417da8 100644 --- a/packages/web-new/src/styles/styles.scss +++ b/packages/web-new/src/styles/styles.scss @@ -188,10 +188,6 @@ a { font-weight: var(--fw-regular); } -i { - font-size: var(--fs-i); -} - ul { list-style: none; } @@ -270,7 +266,7 @@ header { &__links { display: flex; align-items: center; - justify-content: center; + justify-content: space-between; gap: 3rem; a { @@ -279,16 +275,22 @@ header { align-items: center; justify-content: center; font-size: var(--fs-p); - transition: color 250ms ease; + transition: color 250ms ease-in-out; &:hover { color: var(--clr-neutral-200); + + .icon { + fill: var(--clr-neutral-200); + } } } - i { - font-size: var(--fs-i); + .icon { + height: var(--fs-i); margin-bottom: .5rem; + fill: var(--clr-neutral-50); + transition: fill 250ms ease-in-out; } } } diff --git a/packages/web-new/src/template.html b/packages/web-new/src/template.html index bb317ac9b..db1f95d34 100644 --- a/packages/web-new/src/template.html +++ b/packages/web-new/src/template.html @@ -25,10 +25,9 @@ - - - - + @@ -166,17 +165,39 @@ +
            @@ -188,22 +209,38 @@

            Thing Description Playground - BETA Version

            @@ -212,7 +249,11 @@

            Thing Description Playground - BETA Version

            • - + + +
            @@ -245,7 +286,13 @@

            Thing Description Playground - BETA Version

            class="visualizations__option visualize-tab-btn" title="Tree or Graph TD visualizations">
            - +
            @@ -253,53 +300,95 @@

            Thing Description Playground - BETA Version

            - + + +

            JSON Validation

            - + + +
              - + + +

              JSON Schema Validation

              - + + +
                - + + +

                (With Defaults) JSON Schema Validation

                - + + +
                  - + + +

                  JSON-LD Validation

                  - + + +
                    - + + +

                    Additional Checks

                    - + + +
                      - + + +

                      Enum/Const

                      - + + +
                      • @@ -308,9 +397,16 @@

                        Thing Description Playground - BETA Version

                        - + + +

                        Linked Affordances

                        - + + +
                        • @@ -319,9 +415,16 @@

                          Thing Description Playground - BETA Version

                          - + + +

                          Linked Structure

                          - + + +
                          • @@ -330,9 +433,16 @@

                            Thing Description Playground - BETA Version

                            - + + +

                            Links Rel:Type Count

                            - + + +
                            • @@ -341,9 +451,16 @@

                              Thing Description Playground - BETA Version

                              - + + +

                              Multi-Language Consistency

                              - + + +
                              • @@ -352,9 +469,16 @@

                                Thing Description Playground - BETA Version

                                - + + +

                                Properties Items

                                - + + +
                                • @@ -363,9 +487,16 @@

                                  Thing Description Playground - BETA Version

                                  - + + +

                                  Properties Uniqueness

                                  - + + +
                                  • @@ -374,9 +505,16 @@

                                    Thing Description Playground - BETA Version

                                    - + + +

                                    Read/WriteOnly

                                    - + + +
                                    • @@ -385,9 +523,16 @@

                                      Thing Description Playground - BETA Version

                                      - + + +

                                      Security

                                      - + + +
                                      • @@ -396,9 +541,16 @@

                                        Thing Description Playground - BETA Version

                                        - + + +

                                        URI Variable Security

                                        - + + +
                                        • @@ -417,7 +569,14 @@

                                          Thing Description Playground - BETA Version

                      - +
                      @@ -430,7 +589,14 @@

                      Thing Description Playground - BETA Version

                      - +
                      @@ -438,9 +604,16 @@

                      Thing Description Playground - BETA Version

                      @@ -453,11 +626,32 @@

                      Thing Description Playground - BETA Version

                      - - + +
                      - +
                      @@ -477,8 +671,23 @@

                      Thing Description Playground - BETA Version

                      - - + + +
                      @@ -489,8 +698,22 @@

                      Thing Description Playground - BETA Version

                      - - + +
                      @@ -507,7 +730,11 @@

                      Thing Description Playground - BETA Version

                      - + + +

                      Settings

                      @@ -574,7 +801,11 @@

                      Preferences

                      - + + +
                      @@ -595,9 +826,12 @@

                      Preferences

                      @@ -631,7 +865,11 @@

                      Search Results

                      - + + +
                      @@ -644,17 +882,37 @@

                      Search Results

                      + id="open-url-tab"> + + + +
                      + id="share-url-btn"> + + + + Share +
                      + id="download-btn"> + + + + Download + - -//code file (filled): - - -//Download file (filled): - - -//settings (filled): - - -//plus icon - - -//x icon: - - -//feedback (filled): - - -// cli: - - -// github rounded: - - -// angle right: - - -// angle down: - - -// expand arrows: - - -// collapse arrows - - -//import file - - -// search icon - - -// open in new tab - - -// link - - -// download secondary - - -// minus - - -//collapse square: - - -//expand square: - - -//slashed eye - - -// check icon: - - From 2f4ab6516d859cd7a3c2ff48390e4afd177d7b3f Mon Sep 17 00:00:00 2001 From: Sergio Eduardo Castro Ceballos <72516762+SergioCasCeb@users.noreply.github.com> Date: Wed, 10 Jan 2024 06:45:44 +0100 Subject: [PATCH 05/16] Fixed merging conflicts - Rebased the branch to fix the merging conflicts added by the new console functionality --- packages/web-new/src/scripts/console.js | 34 +++++++++---------------- 1 file changed, 12 insertions(+), 22 deletions(-) diff --git a/packages/web-new/src/scripts/console.js b/packages/web-new/src/scripts/console.js index dc4aac14a..454e426c6 100644 --- a/packages/web-new/src/scripts/console.js +++ b/packages/web-new/src/scripts/console.js @@ -58,8 +58,9 @@ 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].classList.add("collapse-arrows") + minMaxBtn.children[0].classList.remove("expand-arrows") + 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") }, 100); } @@ -68,29 +69,18 @@ function expandConsole() { * and adjusts the console size as well as the expand/collapse icon */ 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") -minMaxBtn.addEventListener("click", () => { - - if (minMaxBtn.children[0].classList.contains("collapse-arrows")) { - if (minMaxBtn.children[0].classList.contains("collapse-arrows")) { - mainContentElement.style.flex = "1 0" - consoleElement.style.flex = `0 39px` - minMaxBtn.children[0].classList.remove("collapse-arrows") - minMaxBtn.children[0].classList.add("expand-arrows") - 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.remove("collapse-arrows") - minMaxBtn.children[0].classList.add("expand-arrows") - 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") - - textIcon.forEach(text => { - text.classList.remove("hiddenV") - }) + minMaxBtn.children[0].classList.remove("collapse-arrows") + minMaxBtn.children[0].classList.add("expand-arrows") + 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.addEventListener("click", () => { @@ -103,7 +93,7 @@ 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 => { @@ -134,7 +124,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() From 34fe5f8d16dcec6a5e52a4c5c8557ea71c2edb61 Mon Sep 17 00:00:00 2001 From: Sergio Eduardo Castro Ceballos <72516762+SergioCasCeb@users.noreply.github.com> Date: Fri, 5 Jan 2024 05:21:55 +0100 Subject: [PATCH 06/16] Changed all icons for svgs - Previously all icon were been imported from Font Awesome, so in order to not depend on such system anymore all icons have been substituted for svgs --- .../src/assets/img/angle-down-solid.svg | 1 + .../src/assets/img/eye-slash-solid.svg | 1 + packages/web-new/src/assets/img/eye-solid.svg | 1 + packages/web-new/src/scripts/console.js | 8 + packages/web-new/src/scripts/editor.js | 55 ++- packages/web-new/src/scripts/examples-menu.js | 78 +++- packages/web-new/src/scripts/main.js | 20 +- packages/web-new/src/scripts/save-menu.js | 2 +- packages/web-new/src/scripts/settings-menu.js | 2 +- packages/web-new/src/scripts/svgs.js | 71 ++++ packages/web-new/src/scripts/util.js | 43 +- packages/web-new/src/styles/_console.scss | 79 ++-- .../web-new/src/styles/_control-panel.scss | 12 +- packages/web-new/src/styles/_editor.scss | 90 ++-- .../web-new/src/styles/_examples-menu.scss | 87 ++-- .../src/styles/_json-yaml-warning.scss | 1 - packages/web-new/src/styles/_save-menu.scss | 35 +- .../web-new/src/styles/_settings-menu.scss | 20 +- packages/web-new/src/styles/styles.scss | 18 +- packages/web-new/src/template.html | 386 +++++++++++++++--- packages/web-new/webpack.config.js | 4 +- 21 files changed, 767 insertions(+), 247 deletions(-) create mode 100644 packages/web-new/src/assets/img/angle-down-solid.svg create mode 100644 packages/web-new/src/assets/img/eye-slash-solid.svg create mode 100644 packages/web-new/src/assets/img/eye-solid.svg create mode 100644 packages/web-new/src/scripts/svgs.js diff --git a/packages/web-new/src/assets/img/angle-down-solid.svg b/packages/web-new/src/assets/img/angle-down-solid.svg new file mode 100644 index 000000000..cabe8a94f --- /dev/null +++ b/packages/web-new/src/assets/img/angle-down-solid.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/web-new/src/assets/img/eye-slash-solid.svg b/packages/web-new/src/assets/img/eye-slash-solid.svg new file mode 100644 index 000000000..f592dabfe --- /dev/null +++ b/packages/web-new/src/assets/img/eye-slash-solid.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/web-new/src/assets/img/eye-solid.svg b/packages/web-new/src/assets/img/eye-solid.svg new file mode 100644 index 000000000..1f07b7f80 --- /dev/null +++ b/packages/web-new/src/assets/img/eye-solid.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/web-new/src/scripts/console.js b/packages/web-new/src/scripts/console.js index 90a83ad56..0531d3c6a 100644 --- a/packages/web-new/src/scripts/console.js +++ b/packages/web-new/src/scripts/console.js @@ -75,6 +75,14 @@ function collapseConsole() { 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") +minMaxBtn.addEventListener("click", () => { + + if (minMaxBtn.children[0].classList.contains("collapse-arrows")) { + mainContentElement.style.flex = "1 0" + consoleElement.style.flex = `0 39px` + minMaxBtn.children[0].classList.remove("collapse-arrows") + minMaxBtn.children[0].classList.add("expand-arrows") + 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") textIcon.forEach(text => { text.classList.remove("hiddenV") diff --git a/packages/web-new/src/scripts/editor.js b/packages/web-new/src/scripts/editor.js index 1584fd529..02b933bbc 100644 --- a/packages/web-new/src/scripts/editor.js +++ b/packages/web-new/src/scripts/editor.js @@ -92,29 +92,64 @@ 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 + 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") + + //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 + 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") + + 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 + 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") + + cancelIconSvg.appendChild(cancelIconPath) + cancelTabClose.appendChild(cancelIconSvg) cancelTabClose.addEventListener("click", () => { cancelTabClose.parentElement.classList.add("hidden") diff --git a/packages/web-new/src/scripts/examples-menu.js b/packages/web-new/src/scripts/examples-menu.js index 2937f3065..ac6501655 100644 --- a/packages/web-new/src/scripts/examples-menu.js +++ b/packages/web-new/src/scripts/examples-menu.js @@ -27,7 +27,7 @@ import { createIde, ideCount, tabsLeft } from "./editor" /***********************************************************/ /* Examples menu */ /***********************************************************/ -const closeExamples = document.querySelector(".examples-menu-container__close i") +const closeExamples = document.querySelector(".examples-menu-container__close .x-icon") const examplesMenu = document.querySelector(".examples-menu") const examplesBtn = document.querySelector("#examples-btn") const categorySelect = document.querySelector('#thing-category') @@ -268,23 +268,23 @@ async function getAllExamples(categoryId, thingType) { exampleNameIcon.classList.add("example-icon") // Create an SVG element - const svgElement = document.createElementNS("http://www.w3.org/2000/svg", "svg") - svgElement.setAttribute("xmlns", "http://www.w3.org/2000/svg") - svgElement.setAttribute("width", "100%") - svgElement.setAttribute("viewBox", "0 0 351 379") - svgElement.setAttribute("fill", "none") + const tdFileSvg = document.createElementNS("http://www.w3.org/2000/svg", "svg") + tdFileSvg.setAttribute("xmlns", "http://www.w3.org/2000/svg") + tdFileSvg.setAttribute("width", "100%") + tdFileSvg.setAttribute("viewBox", "0 0 351 379") + tdFileSvg.setAttribute("fill", "none") // Create a path element and set its attributes - const pathElement = document.createElementNS("http://www.w3.org/2000/svg", "path") - pathElement.setAttribute("fill-rule", "evenodd") - pathElement.setAttribute("clip-rule", "evenodd") - pathElement.setAttribute("d", "M184 0V95.9981C184 107.044 192.954 115.998 204 115.998H300V190H106C89.4315 190 76 203.431 76 220V379H40C17.9086 379 0 361.091 0 339V40C0 17.9086 17.9086 0 40 0H184ZM204 95.9981V4.28427L295.714 95.9981H204ZM189.758 379V265.724H231.32V243.922H189.758H162.019H121.105V265.724H162.019V379H189.758ZM275.017 379H288.654C297.808 379 306.158 377.485 313.703 374.454C321.311 371.362 327.836 367.001 333.278 361.373C338.783 355.683 343.02 348.88 345.988 340.963C349.019 333.046 350.534 324.295 350.534 314.708V308.307C350.534 298.658 349.019 289.907 345.988 282.052C343.02 274.135 338.783 267.332 333.278 261.642C327.774 255.951 321.249 251.591 313.703 248.561C306.219 245.468 297.963 243.922 288.933 243.922H275.017H258.688H247.185V379H259.245H275.017ZM275.017 357.291H288.654C295.952 357.291 302.106 355.652 307.116 352.374C312.126 349.034 315.899 344.179 318.435 337.809C321.032 331.438 322.331 323.738 322.331 314.708V308.121C322.331 301.194 321.589 295.102 320.104 289.845C318.682 284.588 316.548 280.165 313.703 276.578C310.858 272.991 307.364 270.3 303.22 268.507C299.076 266.651 294.313 265.724 288.933 265.724H275.017V357.291Z") + const tdFilePath = document.createElementNS("http://www.w3.org/2000/svg", "path") + tdFilePath.setAttribute("fill-rule", "evenodd") + tdFilePath.setAttribute("clip-rule", "evenodd") + tdFilePath.setAttribute("d", "M184 0V95.9981C184 107.044 192.954 115.998 204 115.998H300V190H106C89.4315 190 76 203.431 76 220V379H40C17.9086 379 0 361.091 0 339V40C0 17.9086 17.9086 0 40 0H184ZM204 95.9981V4.28427L295.714 95.9981H204ZM189.758 379V265.724H231.32V243.922H189.758H162.019H121.105V265.724H162.019V379H189.758ZM275.017 379H288.654C297.808 379 306.158 377.485 313.703 374.454C321.311 371.362 327.836 367.001 333.278 361.373C338.783 355.683 343.02 348.88 345.988 340.963C349.019 333.046 350.534 324.295 350.534 314.708V308.307C350.534 298.658 349.019 289.907 345.988 282.052C343.02 274.135 338.783 267.332 333.278 261.642C327.774 255.951 321.249 251.591 313.703 248.561C306.219 245.468 297.963 243.922 288.933 243.922H275.017H258.688H247.185V379H259.245H275.017ZM275.017 357.291H288.654C295.952 357.291 302.106 355.652 307.116 352.374C312.126 349.034 315.899 344.179 318.435 337.809C321.032 331.438 322.331 323.738 322.331 314.708V308.121C322.331 301.194 321.589 295.102 320.104 289.845C318.682 284.588 316.548 280.165 313.703 276.578C310.858 272.991 307.364 270.3 303.22 268.507C299.076 266.651 294.313 265.724 288.933 265.724H275.017V357.291Z") // Append the path element to the SVG element - svgElement.appendChild(pathElement) + tdFileSvg.appendChild(tdFilePath) // Append the SVG element to the document body or any other desired location - exampleNameIcon.appendChild(svgElement); + exampleNameIcon.appendChild(tdFileSvg); // Append the icon container to the name container exampleName.appendChild(exampleNameIcon) @@ -293,11 +293,21 @@ async function getAllExamples(categoryId, thingType) { const exampleNameTitle = document.createElement('p') exampleNameTitle.innerText = example[1]["title"] exampleName.appendChild(exampleNameTitle) - - // //Create, populate and append the example title toggle arrow - const exampleNameArrow = document.createElement('i') - exampleNameArrow.classList.add("fa-solid", "fa-chevron-down", "toggle-arrow") - exampleName.appendChild(exampleNameArrow) + + //Create, populate and append the example title toggle arrow + const exampleArrowSvg = document.createElementNS("http://www.w3.org/2000/svg", "svg") + exampleArrowSvg.setAttribute("xmlns", "http://www.w3.org/2000/svg") + exampleArrowSvg.setAttribute("width", "100%") + exampleArrowSvg.setAttribute("height", "100%") + exampleArrowSvg.setAttribute("viewBox", "0 0 448 512") + exampleArrowSvg.classList.add("icon") + + // Create a path element and set its attributes + const exampleArrowPath = document.createElementNS("http://www.w3.org/2000/svg", "path") + exampleArrowPath.setAttribute("d", "M201.4 342.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 274.7 86.6 137.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z") + + exampleArrowSvg.appendChild(exampleArrowPath) + exampleName.appendChild(exampleArrowSvg) //Append the whole name component to the header component exampleHeader.appendChild(exampleName) @@ -305,9 +315,21 @@ async function getAllExamples(categoryId, thingType) { //Create the example quick access button const quickBtn = document.createElement('button') quickBtn.classList.add("example__header--quick") - quickBtn.setAttribute("title", "Load this example into the editor") - quickBtn.innerText = "Load" + quickBtn.setAttribute("title", "Use") + // create the svg icon for the quick use button + const importFileSvg = document.createElementNS("http://www.w3.org/2000/svg", "svg") + importFileSvg.setAttribute("xmlns", "http://www.w3.org/2000/svg") + importFileSvg.setAttribute("width", "100%") + importFileSvg.setAttribute("height", "100%") + importFileSvg.setAttribute("viewBox", "0 0 512 512") + importFileSvg.classList.add("icon") + // Create a path element and set its attributes + const importFilePath = document.createElementNS("http://www.w3.org/2000/svg", "path") + importFilePath.setAttribute("d", "M128 64c0-35.3 28.7-64 64-64H352V128c0 17.7 14.3 32 32 32H512V448c0 35.3-28.7 64-64 64H192c-35.3 0-64-28.7-64-64V336H302.1l-39 39c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l80-80c9.4-9.4 9.4-24.6 0-33.9l-80-80c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9l39 39H128V64zm0 224v48H24c-13.3 0-24-10.7-24-24s10.7-24 24-24H128zM512 128H384V0L512 128z") + + importFileSvg.appendChild(importFilePath) + quickBtn.appendChild(importFileSvg) exampleHeader.appendChild(quickBtn) //add event listener to show example information and interaction buttons @@ -342,9 +364,21 @@ async function getAllExamples(categoryId, thingType) { exampleBtnUse.classList.add("example__btn--use") exampleBtns.appendChild(exampleBtnUse) - const exampleIconUse = document.createElement('i') - exampleIconUse.classList.add("fa-solid", "fa-file-import") - exampleBtnUse.appendChild(exampleIconUse) + //todo: create the apply button + // create the svg icon for the apply button + const applyIconSvg = document.createElementNS("http://www.w3.org/2000/svg", "svg") + applyIconSvg.setAttribute("xmlns", "http://www.w3.org/2000/svg") + applyIconSvg.setAttribute("width", "100%") + applyIconSvg.setAttribute("height", "100%") + applyIconSvg.setAttribute("viewBox", "0 0 512 512") + applyIconSvg.classList.add("icon") + + // Create a path element and set its attributes + const applyIconPath = document.createElementNS("http://www.w3.org/2000/svg", "path") + applyIconPath.setAttribute("d", "M128 64c0-35.3 28.7-64 64-64H352V128c0 17.7 14.3 32 32 32H512V448c0 35.3-28.7 64-64 64H192c-35.3 0-64-28.7-64-64V336H302.1l-39 39c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l80-80c9.4-9.4 9.4-24.6 0-33.9l-80-80c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9l39 39H128V64zm0 224v48H24c-13.3 0-24-10.7-24-24s10.7-24 24-24H128zM512 128H384V0L512 128z") + + applyIconSvg.appendChild(applyIconPath) + exampleBtnUse.appendChild(applyIconSvg) const exampleTxtUse = document.createElement('p') exampleTxtUse.innerText = "Load" diff --git a/packages/web-new/src/scripts/main.js b/packages/web-new/src/scripts/main.js index 030d062a4..0112de2ad 100644 --- a/packages/web-new/src/scripts/main.js +++ b/packages/web-new/src/scripts/main.js @@ -166,14 +166,16 @@ function onmousemoveY(e) { t.style.flex = "1 0" if(h > 38){ - 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].classList.add("collapse-arrows") + minMaxBtn.children[0].classList.remove("expand-arrows") + 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") consoleElement.classList.remove("collapsed") consoleElement.classList.add("expanded") }else{ - 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") + minMaxBtn.children[0].classList.remove("collapse-arrows") + minMaxBtn.children[0].classList.add("expand-arrows") + 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") consoleElement.classList.remove("expanded") consoleElement.classList.add("collapsed") @@ -192,14 +194,16 @@ function onmousemoveY(e) { b.style.flex = "1 0" if(h < 714){ - 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].classList.add("collapse-arrows") + minMaxBtn.children[0].classList.remove("expand-arrows") + 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") consoleElement.classList.remove("collapsed") consoleElement.classList.add("expanded") }else{ - 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") + minMaxBtn.children[0].classList.remove("collapse-arrows") + minMaxBtn.children[0].classList.add("expand-arrows") + 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") consoleElement.classList.remove("expanded") consoleElement.classList.add("collapsed") diff --git a/packages/web-new/src/scripts/save-menu.js b/packages/web-new/src/scripts/save-menu.js index 6c8b268bb..e883b3c4d 100644 --- a/packages/web-new/src/scripts/save-menu.js +++ b/packages/web-new/src/scripts/save-menu.js @@ -28,7 +28,7 @@ import { editorList, getEditorData } from "./editor" /***********************************************************/ const saveMenu = document.querySelector(".save-menu") const saveMenuBtn = document.querySelector("#save-btn") -const closeSaveMenu = document.querySelector(".save-menu-close i") +const closeSaveMenu = document.querySelector(".save-menu-close .x-icon") const shareUrlContainer = document.querySelector("#share-url-input") const openUrlTab = document.querySelector("#open-url-tab") const thingTypeText = document.querySelector('#thing-type-text') diff --git a/packages/web-new/src/scripts/settings-menu.js b/packages/web-new/src/scripts/settings-menu.js index 855ed36a0..b3863fa89 100644 --- a/packages/web-new/src/scripts/settings-menu.js +++ b/packages/web-new/src/scripts/settings-menu.js @@ -26,7 +26,7 @@ import themeData from './monochrome-theme' /***********************************************************/ /* Settings menu */ /***********************************************************/ -const closeSettings = document.querySelector(".settings__close i"); +const closeSettings = document.querySelector(".settings__close .x-icon"); const settingsMenu = document.querySelector(".settings-menu"); const settingsBtn = document.querySelector("#settings-btn"); export const editorForm = document.querySelector(".settings__editor") diff --git a/packages/web-new/src/scripts/svgs.js b/packages/web-new/src/scripts/svgs.js new file mode 100644 index 000000000..fd21ddf1b --- /dev/null +++ b/packages/web-new/src/scripts/svgs.js @@ -0,0 +1,71 @@ + + +//Play button: + + +//code file (filled): + + +//Download file (filled): + + +//settings (filled): + + +//plus icon + + +//x icon: + + +//feedback (filled): + + +// cli: + + +// github rounded: + + +// angle right: + + +// angle down: + + +// expand arrows: + + +// collapse arrows + + +//import file + + +// search icon + + +// open in new tab + + +// link + + +// download secondary + + +// minus + + +//collapse square: + + +//expand square: + + +//slashed eye + + +// check icon: + + diff --git a/packages/web-new/src/scripts/util.js b/packages/web-new/src/scripts/util.js index 7e9b72531..a15d17098 100644 --- a/packages/web-new/src/scripts/util.js +++ b/packages/web-new/src/scripts/util.js @@ -233,23 +233,24 @@ export function validate(thingType, editorContent) { validator(editorContent, log, { checkDefaults: true, checkJsonLd, checkTmConformance }) .then(result => { - // console.log(result) Object.keys(result.report).forEach(el => { const spotName = "spot-" + el document.getElementById(spotName).removeAttribute('open') const resultIcon = document.getElementById(spotName).children[0].children[0] if (result.report[el] === "passed") { - resultIcon.classList.remove("fa-circle") - resultIcon.classList.add("fa-circle-check") + resultIcon.classList.remove("neutral-circle-icon") + resultIcon.classList.add("success-circle-icon") + resultIcon.children[0].setAttribute("d", "M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z") } else if (result.report[el] === "warning") { - resultIcon.classList.remove("fa-circle") - resultIcon.classList.add("fa-circle-exclamation") - + resultIcon.classList.remove("neutral-circle-icon") + resultIcon.classList.add("warning-circle-icon") + resultIcon.children[0].setAttribute("d", "M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24V264c0 13.3-10.7 24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z") } else if (result.report[el] === "failed") { - resultIcon.classList.remove("fa-circle") - resultIcon.classList.add("fa-circle-xmark") + resultIcon.classList.remove("neutral-circle-icon") + resultIcon.classList.add("error-circle-icon") + resultIcon.children[0].setAttribute("d", "M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM175 175c9.4-9.4 24.6-9.4 33.9 0l47 47 47-47c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-47 47 47 47c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-47-47-47 47c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l47-47-47-47c-9.4-9.4-9.4-24.6 0-33.9z") } else if (result.report[el] === null) { //do nothing @@ -266,16 +267,19 @@ export function validate(thingType, editorContent) { const detailsIcon = document.getElementById(detailsName).children[0].children[0] if (result.details[el] === "passed") { - detailsIcon.classList.remove("fa-circle") - detailsIcon.classList.add("fa-circle-check") + detailsIcon.classList.remove("neutral-circle-icon") + detailsIcon.classList.add("success-circle-icon") + detailsIcon.children[0].setAttribute("d", "M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z") } else if (result.details[el] === "warning" || result.details[el] === "not-impl") { - detailsIcon.classList.remove("fa-circle") - detailsIcon.classList.add("fa-circle-exclamation") + detailsIcon.classList.remove("neutral-circle-icon") + detailsIcon.classList.add("warning-circle-icon") + detailsIcon.children[0].setAttribute("d", "M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24V264c0 13.3-10.7 24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z") } else if (result.details[el] === "failed") { - detailsIcon.classList.remove("fa-circle") - detailsIcon.classList.add("fa-circle-xmark") + detailsIcon.classList.remove("neutral-circle-icon") + detailsIcon.classList.add("error-circle-icon") + detailsIcon.children[0].setAttribute("d", "M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM175 175c9.4-9.4 24.6-9.4 33.9 0l47 47 47-47c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-47 47 47 47c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-47-47-47 47c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l47-47-47-47c-9.4-9.4-9.4-24.6 0-33.9z") } else if (result.details[el] === null) { //do nothing @@ -310,9 +314,10 @@ export function resetValidationStatus() { sectionHeaders.forEach(header => { const headerIcon = header.children[0] - if (!headerIcon.classList.contains("fa-circle")) { - headerIcon.classList.remove("fa-circle-check", "fa-circle-exclamation", "fa-circle-xmark") - headerIcon.classList.add("fa-circle") + if (!headerIcon.classList.contains("neutral-circle-icon")) { + headerIcon.classList.remove("success-circle-icon", "warning-circle-icon", "error-circle-icon") + headerIcon.classList.add("neutral-circle-icon") + headerIcon.children[0].setAttribute("d", "M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z") } }) @@ -344,7 +349,7 @@ function populateCategory(messagesList) { document.querySelectorAll("#spot-json, #spot-schema, #spot-defaults, #spot-jsonld, #spot-additional").forEach(category => { const categoryContainer = category.querySelector("ul.section-content") category.classList.remove("disabled") - if (category.children[0].children[0].classList.contains("fa-circle-xmark") || category.children[0].children[0].classList.contains("fa-circle-exclamation")) { + if (category.children[0].children[0].classList.contains("error-circle-icon") || category.children[0].children[0].classList.contains("warning-circle-icon")) { const noticePrompt = document.createElement("p") noticePrompt.textContent = "*This feature is still in the testing phase, and it may not refer to the correct source of the error*" noticePrompt.classList.add("notice-prompt") @@ -354,7 +359,7 @@ function populateCategory(messagesList) { listElement.textContent = message categoryContainer.append(listElement) }) - } else if (category.children[0].children[0].classList.contains("fa-circle-check")) { + } else if (category.children[0].children[0].classList.contains("success-circle-icon")) { const successMessage = document.createElement("li") successMessage.textContent = "Validated Successfully" categoryContainer.append(successMessage) diff --git a/packages/web-new/src/styles/_console.scss b/packages/web-new/src/styles/_console.scss index a7222ec62..ba146b621 100644 --- a/packages/web-new/src/styles/_console.scss +++ b/packages/web-new/src/styles/_console.scss @@ -39,12 +39,19 @@ appearance: none; border: none; background-color: transparent; - color: var(--clr-primary-500); - transition: color 250ms ease; + cursor: pointer; + + .icon { + fill: var(--clr-primary-500); + height: var(--fs-i); + width: fit-content; + transition: fill 250ms ease; + } &:hover { - color: var(--clr-primary-700); - cursor: pointer; + .icon { + fill: var(--clr-primary-700); + } } } } @@ -99,7 +106,7 @@ content: 'Visualize'; } - &:hover{ + &:hover { background-color: var(--clr-primary-500); color: var(--clr-neutral-50); } @@ -189,6 +196,9 @@ .show-icon { transform: rotate(0); transition: transform 250ms ease-in-out; + cursor: pointer; + height: var(--fs-p); + fill: var(--clr-neutral-900); } } @@ -199,24 +209,31 @@ gap: 1rem; cursor: pointer; - .fa-circle-check { - color: var(--clr-success-500); + .icon { + width: fit-content; } - .fa-circle-exclamation { - color: var(--clr-warning-500); + .neutral-circle-icon, + .success-circle-icon, + .warning-circle-icon, + .error-circle-icon { + height: var(--fs-i); } - .fa-circle-xmark { - color: var(--clr-error-500); + .neutral-circle-icon { + fill: var(--clr-neutral-300); } - .fa-circle { - color: var(--clr-neutral-300); + .success-circle-icon { + fill: var(--clr-success-500); } - .show-icon { - cursor: pointer; + .warning-circle-icon { + fill: var(--clr-warning-500); + } + + .error-circle-icon { + fill: var(--clr-error-500); } .title { @@ -345,6 +362,12 @@ align-items: center; gap: 1rem; + .icon { + fill: var(--clr-neutral-50); + height: var(--fs-i); + width: fit-content; + } + &:hover { background-color: var(--clr-primary-900); } @@ -388,10 +411,6 @@ align-items: center; justify-content: center; gap: 1rem; - - i { - font-size: var(--fs-p); - } } } } @@ -541,17 +560,19 @@ &::before { position: absolute; - content: '\f06e'; - display: inline-block; - text-rendering: auto; - -webkit-font-smoothing: antialiased; - font: var(--fa-font-solid); - font-size: var(--fs-p); - color: var(--clr-neutral-50); top: 50%; left: 50%; transform: translate(-50%, -50%); - transition: all 500ms ease-in-out; + content: ''; + -webkit-mask: url('../assets/img/eye-solid.svg') no-repeat 50% 50%; + mask: url('../assets/img/eye-solid.svg') no-repeat 50% 50%; + -webkit-mask-size: cover; + mask-size: cover; + display: inline-block; + height: calc(var(--fs-i) - .2rem); + width: var(--fs-i); + pointer-events: none; + background-color: var(--clr-neutral-50); } &:hover { @@ -562,7 +583,9 @@ input[type="checkbox"]:checked { &::before { - content: '\f070'; + -webkit-mask: url('../assets/img/eye-slash-solid.svg') no-repeat 50% 50%; + mask: url('../assets/img/eye-slash-solid.svg') no-repeat 50% 50%; + height: var(--fs-i); } } diff --git a/packages/web-new/src/styles/_control-panel.scss b/packages/web-new/src/styles/_control-panel.scss index 058695a1b..5ce141f58 100644 --- a/packages/web-new/src/styles/_control-panel.scss +++ b/packages/web-new/src/styles/_control-panel.scss @@ -35,7 +35,7 @@ border-bottom: 2px solid var(--clr-primary-500); font-family: var(--ff-primary); cursor: pointer; - transition: all 250ms ease; + transition: all 250ms ease-in-out; &:last-child { border-color: var(--clr-neutral-50); @@ -48,10 +48,16 @@ &:hover { color: var(--clr-neutral-50); background-color: var(--clr-primary-500); + + .icon { + fill: var(--clr-neutral-50); + } } - i { - font-size: var(--fs-i); + .icon { + height: var(--fs-i); + fill: var(--clr-primary-500); + transition: fill 250ms ease-in-out; } p { diff --git a/packages/web-new/src/styles/_editor.scss b/packages/web-new/src/styles/_editor.scss index 7121e283d..f396aa69b 100644 --- a/packages/web-new/src/styles/_editor.scss +++ b/packages/web-new/src/styles/_editor.scss @@ -47,7 +47,7 @@ white-space: nowrap; cursor: pointer; - span{ + span { font-size: 1rem; font-weight: bold; margin-right: 1rem; @@ -57,10 +57,6 @@ font-weight: var(--fw-bold); } - i { - font-size: var(--fs-p); - } - &.active { background-color: var(--clr-neutral-50); color: var(--clr-neutral-900); @@ -88,16 +84,22 @@ padding-right: 3rem; min-width: 17rem; - .tab-icon{ + .tab-icon { font-size: 1rem; width: fit-content; color: var(--clr-td-300); } - &.active{ - .tab-icon{ + &.active { + .tab-icon { color: var(--clr-td-500); } + + .close-tab { + svg { + fill: var(--clr-neutral-900); + } + } } .close-tab { @@ -114,35 +116,42 @@ display: flex; align-items: center; justify-content: center; - transition: all 250ms ease-in-out; + transition: background-color 250ms ease-in-out; + + svg { + pointer-events: none; + height: 1.3rem; + fill: var(--clr-neutral-300); + transition: fill 250ms ease-in-out; + } &:hover { background-color: var(--clr-neutral-200); - } - i { - pointer-events: none; - font-size: 1.4rem; - height: 1.3rem; + svg { + fill: var(--clr-neutral-900); + } } } - .confirm-btns{ + .confirm-btns { position: absolute; top: 0; left: 0; width: 100%; height: 100%; + padding: .5rem 1rem; background-color: var(--clr-neutral-50); display: flex; align-items: center; justify-content: center; - gap: 1rem; + gap: .5rem; opacity: 1; pointer-events: all; transition: opacity 250ms ease-in-out; - button{ + button { + flex: 1; display: flex; align-items: center; justify-content: center; @@ -158,29 +167,32 @@ padding: .25rem 1rem; transition: background-color 250ms ease-in-out; - i{ + .icon { order: -1; + height: var(--fs-p); + width: fit-content; + fill: var(--clr-neutral-50); } - &.confirm-tab-close{ + &.confirm-tab-close { background-color: var(--clr-success-500); - &:hover{ + &:hover { background-color: var(--clr-success-700); } } - - &.cancel-tab-close{ + + &.cancel-tab-close { background-color: var(--clr-error-700); - &:hover{ + &:hover { background-color: var(--clr-error-900); } } } - &.hidden{ + &.hidden { opacity: 0; pointer-events: none; } @@ -189,18 +201,28 @@ li:last-child { min-width: 3.5rem; - transition: all 250ms ease-in-out; + transition: background-color 250ms ease-in-out; + + .icon { + height: var(--fs-p); + fill: var(--clr-neutral-300); + transition: fill 250ms ease-in-out; + } - &:hover{ + &:hover { background-color: var(--clr-neutral-50); - color: var(--clr-neutral-900); + + .icon { + fill: var(--clr-neutral-900); + } } } } - &__right{ + &__right { height: 100%; - input[type=radio]{ + + input[type=radio] { appearance: none; width: 6rem; height: 100%; @@ -215,7 +237,7 @@ overflow: hidden; transition: all 250ms ease-in-out; - &::before{ + &::before { width: 100%; height: 100%; display: flex; @@ -223,16 +245,16 @@ justify-content: center; } - &:nth-child(1)::before{ + &:nth-child(1)::before { content: 'JSON'; } - &:nth-child(2)::before{ + &:nth-child(2)::before { content: 'YAML'; } } - input[type=radio]:checked{ + input[type=radio]:checked { background-color: var(--clr-neutral-50); color: var(--clr-neutral-900); } @@ -244,7 +266,7 @@ pointer-events: none; width: 0; height: 0; - opacity: 0; + opacity: 0; } .editor.active { diff --git a/packages/web-new/src/styles/_examples-menu.scss b/packages/web-new/src/styles/_examples-menu.scss index 455af6db1..77a3b0e7c 100644 --- a/packages/web-new/src/styles/_examples-menu.scss +++ b/packages/web-new/src/styles/_examples-menu.scss @@ -45,9 +45,11 @@ width: 100%; text-align: right; - i { - font-size: var(--fs-sub-header); + .icon { + width: fit-content; + height: var(--fs-sub-header); cursor: pointer; + fill: var(--clr-neutral-900); } } @@ -158,15 +160,18 @@ top: 50%; right: 2rem; transform: translateY(-50%); + content: ''; + -webkit-mask: url('../assets/img/angle-down-solid.svg') no-repeat 50% 50%; + mask: url('../assets/img/angle-down-solid.svg') no-repeat 50% 50%; + -webkit-mask-size: cover; + mask-size: cover; display: inline-block; - text-rendering: auto; - -webkit-font-smoothing: antialiased; - font: var(--fa-font-solid); - content: "\f107"; + height: 1.25rem; + width: 1.25rem; pointer-events: none; - color: var(--clr-neutral-900); - font-size: var(--fs-p); + background-color: var(--clr-neutral-300); } + } select, @@ -216,12 +221,13 @@ background-color: var(--clr-neutral-50); color: var(--clr-neutral-900); font-family: var(--ff-primary); - font-size: inherit; + font-size: var(--fs-p); - i { + .icon { + height: var(--fs-p); width: fit-content; padding: 0 1rem; - font-size: inherit; + fill: var(--clr-neutral-300); } .search-input { @@ -231,7 +237,7 @@ font-size: inherit; border: none; width: 100%; - padding: .8rem 1rem; + padding: .8rem 1rem .8rem 0; appearance: none; cursor: text; @@ -328,6 +334,7 @@ padding: .75rem; box-shadow: 0px 0px 5px 0px var(--clr-shadow); transition: box-shadow 250ms ease-in-out; + position: relative; &__header { display: flex; @@ -341,7 +348,7 @@ align-items: center; justify-content: center; gap: 1rem; - margin: 0 2rem; + margin: 0 4rem; cursor: pointer; transition: all 250ms ease-in-out; @@ -359,24 +366,34 @@ font-weight: var(--fw-bold); } - .toggle-arrow { - font-size: var(--fs-footer); + .icon { + fill: var(--clr-neutral-900); + height: var(--fs-footer); + width: fit-content; transform: rotate(0); transition: transform 250ms ease-in-out 250ms; } } &--quick { - font-size: var(--fs-p); - font-weight: var(--fw-bold); - color: var(--clr-neutral-50); - background-color: var(--clr-neutral-100); + opacity: 0; + position: absolute; + top: .25rem; + right: .25rem; + width: 4rem; + height: 4rem; + border-radius: 50%; + background-color: var(--clr-neutral-50); border: none; - border-radius: 5px; - padding: .5rem 1rem; cursor: pointer; - height: 3rem; - transition: background-color 250ms ease-in-out; + transition: background-color 250ms ease-in-out, opacity 250ms ease-in-out; + + .icon { + height: var(--fs-i); + width: fit-content; + fill: var(--clr-neutral-50); + transition: fill 250ms ease-in-out; + } } } @@ -386,13 +403,21 @@ .example__header { &--quick { - background-color: var(--clr-neutral-300); - &:hover{ - background-color: var(--clr-primary-700); + opacity: 1; + + .icon { + fill: var(--clr-neutral-300); } - } + &:hover { + background-color: var(--clr-neutral-100); + + .icon { + fill: var(--clr-neutral-900); + } + } + } } } @@ -443,9 +468,11 @@ font-weight: var(--fw-bold); } - i { + .icon { margin-right: 1rem; - font-size: var(--fs-p); + height: var(--fs-p); + width: fit-content; + fill: var(--clr-neutral-50); } } @@ -477,7 +504,7 @@ .example__header { &--name { - .toggle-arrow { + .icon { transform: rotate(-90deg); transition: transform 250ms ease-in-out 0s; } diff --git a/packages/web-new/src/styles/_json-yaml-warning.scss b/packages/web-new/src/styles/_json-yaml-warning.scss index bfe3f952d..d502a8374 100644 --- a/packages/web-new/src/styles/_json-yaml-warning.scss +++ b/packages/web-new/src/styles/_json-yaml-warning.scss @@ -59,7 +59,6 @@ font-weight: var(--fw-bold); font-family: var(--ff-primary); color: var(--clr-neutral-50); - // color: var(--clr-neutral-900); transition: background-color 250ms ease-in-out; } .confirm-btn{ diff --git a/packages/web-new/src/styles/_save-menu.scss b/packages/web-new/src/styles/_save-menu.scss index 6ba36307b..cb6a35ef4 100644 --- a/packages/web-new/src/styles/_save-menu.scss +++ b/packages/web-new/src/styles/_save-menu.scss @@ -39,9 +39,11 @@ text-align: right; margin-bottom: 2rem; - i{ - font-size: var(--fs-sub-header); + .icon { + height: var(--fs-sub-header); + width: fit-content; cursor: pointer; + fill: var(--clr-neutral-900); } } @@ -101,8 +103,6 @@ height: 4rem; width: fit-content; background-color: var(--clr-neutral-200); - color: var(--clr-neutral-50); - font-size: var(--fs-p); padding: 1rem; border-top-right-radius: 5px; border-bottom-right-radius: 5px; @@ -110,6 +110,12 @@ cursor: pointer; transition: background-color 250ms ease-in-out; + .icon { + fill: var(--clr-neutral-50); + height: var(--fs-i); + width: fit-content; + } + &:hover{ background-color: var(--clr-neutral-300); } @@ -125,6 +131,10 @@ cursor: pointer; font-weight: var(--fw-bold); transition: all 250ms ease-in-out; + display: flex; + align-items: center; + justify-content: center; + gap: 1rem; &.share-url{ margin-bottom: 1rem; @@ -132,8 +142,11 @@ color: var(--clr-neutral-50); border: none; transition: background-color 250ms ease-in-out; - i{ - margin-right: 1rem; + + .icon { + height: var(--fs-i); + width: fit-content; + fill: var(--clr-neutral-50); } &:hover{ @@ -169,6 +182,10 @@ & > *{ flex: 1; height: 4rem; + display: flex; + align-items: center; + justify-content: center; + gap: 1rem; border-radius: 5px; border: none; color: var(--clr-neutral-50); @@ -188,8 +205,10 @@ } } - i{ - margin-right: 1rem; + .icon { + height: var(--fs-i); + width: fit-content; + fill: var(--clr-neutral-50); } &:hover{ diff --git a/packages/web-new/src/styles/_settings-menu.scss b/packages/web-new/src/styles/_settings-menu.scss index 575060dd4..970c6f908 100644 --- a/packages/web-new/src/styles/_settings-menu.scss +++ b/packages/web-new/src/styles/_settings-menu.scss @@ -40,8 +40,10 @@ text-align: right; margin-bottom: 2rem; - i { - font-size: var(--fs-sub-header); + .icon { + height: var(--fs-sub-header); + width: fit-content; + fill: var(--clr-neutral-50); cursor: pointer; } } @@ -143,14 +145,16 @@ top: 50%; right: 1rem; transform: translateY(-50%); + content: ''; + -webkit-mask: url('../assets/img/angle-down-solid.svg') no-repeat 50% 50%; + mask: url('../assets/img/angle-down-solid.svg') no-repeat 50% 50%; + -webkit-mask-size: cover; + mask-size: cover; display: inline-block; - text-rendering: auto; - -webkit-font-smoothing: antialiased; - font: var(--fa-font-solid); - content: "\f107"; + height: var(--fs-footer); + width: var(--fs-footer); pointer-events: none; - color: var(--clr-neutral-900); - font-size: var(--fs-footer); + background-color: var(--clr-neutral-900); } } diff --git a/packages/web-new/src/styles/styles.scss b/packages/web-new/src/styles/styles.scss index 62f07f081..e09417da8 100644 --- a/packages/web-new/src/styles/styles.scss +++ b/packages/web-new/src/styles/styles.scss @@ -188,10 +188,6 @@ a { font-weight: var(--fw-regular); } -i { - font-size: var(--fs-i); -} - ul { list-style: none; } @@ -270,7 +266,7 @@ header { &__links { display: flex; align-items: center; - justify-content: center; + justify-content: space-between; gap: 3rem; a { @@ -279,16 +275,22 @@ header { align-items: center; justify-content: center; font-size: var(--fs-p); - transition: color 250ms ease; + transition: color 250ms ease-in-out; &:hover { color: var(--clr-neutral-200); + + .icon { + fill: var(--clr-neutral-200); + } } } - i { - font-size: var(--fs-i); + .icon { + height: var(--fs-i); margin-bottom: .5rem; + fill: var(--clr-neutral-50); + transition: fill 250ms ease-in-out; } } } diff --git a/packages/web-new/src/template.html b/packages/web-new/src/template.html index 6d5b264f0..db1f95d34 100644 --- a/packages/web-new/src/template.html +++ b/packages/web-new/src/template.html @@ -25,10 +25,9 @@ - - - - + @@ -166,17 +165,39 @@ +
                      @@ -188,22 +209,38 @@

                      Thing Description Playground

                      @@ -212,7 +249,11 @@

                      Thing Description Playground

                      • - + + +
                      @@ -245,7 +286,13 @@

                      Thing Description Playground

                      class="visualizations__option visualize-tab-btn" title="Tree or Graph TD visualizations">
                      - +
                      @@ -253,53 +300,95 @@

                      Thing Description Playground

                      - + + +

                      JSON Validation

                      - + + +
                        - + + +

                        JSON Schema Validation

                        - + + +
                          - + + +

                          (With Defaults) JSON Schema Validation

                          - + + +
                            - + + +

                            JSON-LD Validation

                            - + + +
                              - + + +

                              Additional Checks

                              - + + +
                                - + + +

                                Enum/Const

                                - + + +
                                • @@ -308,9 +397,16 @@

                                  Thing Description Playground

                                  - + + +

                                  Linked Affordances

                                  - + + +
                                  • @@ -319,9 +415,16 @@

                                    Thing Description Playground

                                    - + + +

                                    Linked Structure

                                    - + + +
                                    • @@ -330,9 +433,16 @@

                                      Thing Description Playground

                                      - + + +

                                      Links Rel:Type Count

                                      - + + +
                                      • @@ -341,9 +451,16 @@

                                        Thing Description Playground

                                        - + + +

                                        Multi-Language Consistency

                                        - + + +
                                        • @@ -352,9 +469,16 @@

                                          Thing Description Playground

                                          - + + +

                                          Properties Items

                                          - + + +
                                          • @@ -363,9 +487,16 @@

                                            Thing Description Playground

                                            - + + +

                                            Properties Uniqueness

                                            - + + +
                                            • @@ -374,9 +505,16 @@

                                              Thing Description Playground

                                              - + + +

                                              Read/WriteOnly

                                              - + + +
                                              • @@ -385,9 +523,16 @@

                                                Thing Description Playground

                                                - + + +

                                                Security

                                                - + + +
                                                • @@ -396,9 +541,16 @@

                                                  Thing Description Playground

                                                  - + + +

                                                  URI Variable Security

                                                  - + + +
                                                  • @@ -417,7 +569,14 @@

                                                    Thing Description Playground

                                - +
                                @@ -430,7 +589,14 @@

                                Thing Description Playground

                                - +
                                @@ -438,9 +604,16 @@

                                Thing Description Playground

                                @@ -453,11 +626,32 @@

                                Thing Description Playground

                                - - + +
                                - +
                                @@ -477,8 +671,23 @@

                                Thing Description Playground

                                - - + + +
                                @@ -489,8 +698,22 @@

                                Thing Description Playground

                                - - + +
                                @@ -507,7 +730,11 @@

                                Thing Description Playground

                                - + + +

                                Settings

                                @@ -574,7 +801,11 @@

                                Preferences

                                - + + +
                                @@ -595,9 +826,12 @@

                                Preferences

                                @@ -631,7 +865,11 @@

                                Search Results

                                - + + +
                                @@ -644,17 +882,37 @@

                                Search Results

                                + id="open-url-tab"> + + + +
                                + id="share-url-btn"> + + + + Share +
                                + id="download-btn"> + + + + Download + - -//code file (filled): - - -//Download file (filled): - - -//settings (filled): - - -//plus icon - - -//x icon: - - -//feedback (filled): - - -// cli: - - -// github rounded: - - -// angle right: - - -// angle down: - - -// expand arrows: - - -// collapse arrows - - -//import file - - -// search icon - - -// open in new tab - - -// link - - -// download secondary - - -// minus - - -//collapse square: - - -//expand square: - - -//slashed eye - - -// check icon: - - From 5ece1c57f42e37f004ead3d99cc4d396263c83d4 Mon Sep 17 00:00:00 2001 From: Sergio Eduardo Castro Ceballos <72516762+SergioCasCeb@users.noreply.github.com> Date: Fri, 5 Jan 2024 05:21:55 +0100 Subject: [PATCH 08/16] Changed all icons for svgs - Previously all icon were been imported from Font Awesome, so in order to not depend on such system anymore all icons have been substituted for svgs --- packages/web-new/src/scripts/console.js | 21 +++++++- packages/web-new/src/scripts/editor.js | 46 ++++++++++++++++ packages/web-new/src/scripts/svgs.js | 71 +++++++++++++++++++++++++ 3 files changed, 136 insertions(+), 2 deletions(-) create mode 100644 packages/web-new/src/scripts/svgs.js diff --git a/packages/web-new/src/scripts/console.js b/packages/web-new/src/scripts/console.js index 0531d3c6a..1d386a998 100644 --- a/packages/web-new/src/scripts/console.js +++ b/packages/web-new/src/scripts/console.js @@ -77,12 +77,16 @@ function collapseConsole() { minMaxBtn.children[0].classList.add("fa-up-right-and-down-left-from-center") minMaxBtn.addEventListener("click", () => { + if (minMaxBtn.children[0].classList.contains("collapse-arrows")) { if (minMaxBtn.children[0].classList.contains("collapse-arrows")) { mainContentElement.style.flex = "1 0" consoleElement.style.flex = `0 39px` minMaxBtn.children[0].classList.remove("collapse-arrows") minMaxBtn.children[0].classList.add("expand-arrows") 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.remove("collapse-arrows") + minMaxBtn.children[0].classList.add("expand-arrows") + 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") textIcon.forEach(text => { text.classList.remove("hiddenV") @@ -93,11 +97,24 @@ minMaxBtn.addEventListener("click", () => { if (consoleElement.classList.contains("expanded")) { collapseConsole() } else { - expandConsole() + textIcon.forEach(text => { + text.classList.add("hiddenV") + }) + + setTimeout(() => { + mainContentElement.style.flex = "0 210px" + consoleElement.style.flex = `1 0` + minMaxBtn.children[0].classList.add("collapse-arrows") + minMaxBtn.children[0].classList.remove("expand-arrows") + 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") + + if (visualizeTab.checked === true) { + visualizeTab.click() + } + }, 100); } }) - /** * Unchecks all visualization btns and hides all visualization containers */ diff --git a/packages/web-new/src/scripts/editor.js b/packages/web-new/src/scripts/editor.js index 02b933bbc..6cc7d5d35 100644 --- a/packages/web-new/src/scripts/editor.js +++ b/packages/web-new/src/scripts/editor.js @@ -108,10 +108,26 @@ function createTab(tabNumber, exampleName, thingType) { closeIconSvg.appendChild(closeIconPath) closeBtn.appendChild(closeIconSvg) + // Create the svg close icon + 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") + + //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 //Confirm close button const confirmTabClose = document.createElement("button") confirmTabClose.classList.add("confirm-tab-close") @@ -128,9 +144,24 @@ function createTab(tabNumber, exampleName, thingType) { 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") + confirmIconSvg.appendChild(confirmIconPath) + confirmTabClose.appendChild(confirmIconSvg) + // Create the svg confirm close icon + 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") + confirmIconSvg.appendChild(confirmIconPath) confirmTabClose.appendChild(confirmIconSvg) + //Cancel close button //Cancel close button const cancelTabClose = document.createElement("button") cancelTabClose.classList.add("cancel-tab-close") @@ -148,6 +179,21 @@ function createTab(tabNumber, exampleName, thingType) { 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") + cancelIconSvg.appendChild(cancelIconPath) + cancelTabClose.appendChild(cancelIconSvg) + + // Create the svg close cancel icon + 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") + cancelIconSvg.appendChild(cancelIconPath) cancelTabClose.appendChild(cancelIconSvg) diff --git a/packages/web-new/src/scripts/svgs.js b/packages/web-new/src/scripts/svgs.js new file mode 100644 index 000000000..fd21ddf1b --- /dev/null +++ b/packages/web-new/src/scripts/svgs.js @@ -0,0 +1,71 @@ + + +//Play button: + + +//code file (filled): + + +//Download file (filled): + + +//settings (filled): + + +//plus icon + + +//x icon: + + +//feedback (filled): + + +// cli: + + +// github rounded: + + +// angle right: + + +// angle down: + + +// expand arrows: + + +// collapse arrows + + +//import file + + +// search icon + + +// open in new tab + + +// link + + +// download secondary + + +// minus + + +//collapse square: + + +//expand square: + + +//slashed eye + + +// check icon: + + From cf53bb05242324fc54239723349076b6e1620763 Mon Sep 17 00:00:00 2001 From: Sergio Eduardo Castro Ceballos <72516762+SergioCasCeb@users.noreply.github.com> Date: Fri, 5 Jan 2024 07:55:10 +0100 Subject: [PATCH 09/16] removing unnecessary file --- packages/web-new/src/scripts/svgs.js | 71 ---------------------------- 1 file changed, 71 deletions(-) delete mode 100644 packages/web-new/src/scripts/svgs.js diff --git a/packages/web-new/src/scripts/svgs.js b/packages/web-new/src/scripts/svgs.js deleted file mode 100644 index fd21ddf1b..000000000 --- a/packages/web-new/src/scripts/svgs.js +++ /dev/null @@ -1,71 +0,0 @@ - - -//Play button: - - -//code file (filled): - - -//Download file (filled): - - -//settings (filled): - - -//plus icon - - -//x icon: - - -//feedback (filled): - - -// cli: - - -// github rounded: - - -// angle right: - - -// angle down: - - -// expand arrows: - - -// collapse arrows - - -//import file - - -// search icon - - -// open in new tab - - -// link - - -// download secondary - - -// minus - - -//collapse square: - - -//expand square: - - -//slashed eye - - -// check icon: - - From ed1b2fa163111a4345f5c206193fa5a1bd52c7fa Mon Sep 17 00:00:00 2001 From: Sergio Eduardo Castro Ceballos <72516762+SergioCasCeb@users.noreply.github.com> Date: Wed, 10 Jan 2024 06:45:44 +0100 Subject: [PATCH 10/16] Fixed merging conflicts - Rebased the branch to fix the merging conflicts added by the new console functionality --- packages/web-new/src/scripts/console.js | 34 +++++++++---------------- 1 file changed, 12 insertions(+), 22 deletions(-) diff --git a/packages/web-new/src/scripts/console.js b/packages/web-new/src/scripts/console.js index 1d386a998..9926394b2 100644 --- a/packages/web-new/src/scripts/console.js +++ b/packages/web-new/src/scripts/console.js @@ -58,8 +58,9 @@ 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].classList.add("collapse-arrows") + minMaxBtn.children[0].classList.remove("expand-arrows") + 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") }, 100); } @@ -68,29 +69,18 @@ function expandConsole() { * and adjusts the console size as well as the expand/collapse icon */ 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") -minMaxBtn.addEventListener("click", () => { - - if (minMaxBtn.children[0].classList.contains("collapse-arrows")) { - if (minMaxBtn.children[0].classList.contains("collapse-arrows")) { - mainContentElement.style.flex = "1 0" - consoleElement.style.flex = `0 39px` - minMaxBtn.children[0].classList.remove("collapse-arrows") - minMaxBtn.children[0].classList.add("expand-arrows") - 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.remove("collapse-arrows") - minMaxBtn.children[0].classList.add("expand-arrows") - 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") - - textIcon.forEach(text => { - text.classList.remove("hiddenV") - }) + minMaxBtn.children[0].classList.remove("collapse-arrows") + minMaxBtn.children[0].classList.add("expand-arrows") + 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.addEventListener("click", () => { @@ -116,7 +106,7 @@ 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 => { @@ -147,7 +137,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() From 3074c4df7ed82d890b27c903770336de44b273c2 Mon Sep 17 00:00:00 2001 From: Sergio Eduardo Castro Ceballos <72516762+SergioCasCeb@users.noreply.github.com> Date: Fri, 5 Jan 2024 05:21:55 +0100 Subject: [PATCH 11/16] Changed all icons for svgs - Previously all icon were been imported from Font Awesome, so in order to not depend on such system anymore all icons have been substituted for svgs --- packages/web-new/src/scripts/console.js | 17 ++++-- packages/web-new/src/scripts/editor.js | 46 ---------------- packages/web-new/src/scripts/svgs.js | 71 +++++++++++++++++++++++++ 3 files changed, 85 insertions(+), 49 deletions(-) create mode 100644 packages/web-new/src/scripts/svgs.js diff --git a/packages/web-new/src/scripts/console.js b/packages/web-new/src/scripts/console.js index 9926394b2..b66317aed 100644 --- a/packages/web-new/src/scripts/console.js +++ b/packages/web-new/src/scripts/console.js @@ -78,9 +78,20 @@ function collapseConsole() { mainContentElement.style.flex = "1 0" consoleElement.style.flex = `0 39px` - minMaxBtn.children[0].classList.remove("collapse-arrows") - minMaxBtn.children[0].classList.add("expand-arrows") - 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.remove("fa-down-left-and-up-right-to-center") + minMaxBtn.children[0].classList.add("fa-up-right-and-down-left-from-center") +minMaxBtn.addEventListener("click", () => { + + if (minMaxBtn.children[0].classList.contains("collapse-arrows")) { + mainContentElement.style.flex = "1 0" + consoleElement.style.flex = `0 39px` + minMaxBtn.children[0].classList.remove("collapse-arrows") + minMaxBtn.children[0].classList.add("expand-arrows") + 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") + + textIcon.forEach(text => { + text.classList.remove("hiddenV") + }) } minMaxBtn.addEventListener("click", () => { diff --git a/packages/web-new/src/scripts/editor.js b/packages/web-new/src/scripts/editor.js index 6cc7d5d35..02b933bbc 100644 --- a/packages/web-new/src/scripts/editor.js +++ b/packages/web-new/src/scripts/editor.js @@ -108,26 +108,10 @@ function createTab(tabNumber, exampleName, thingType) { closeIconSvg.appendChild(closeIconPath) closeBtn.appendChild(closeIconSvg) - // Create the svg close icon - 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") - - //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 //Confirm close button const confirmTabClose = document.createElement("button") confirmTabClose.classList.add("confirm-tab-close") @@ -144,24 +128,9 @@ function createTab(tabNumber, exampleName, thingType) { 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") - confirmIconSvg.appendChild(confirmIconPath) - confirmTabClose.appendChild(confirmIconSvg) - // Create the svg confirm close icon - 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") - confirmIconSvg.appendChild(confirmIconPath) confirmTabClose.appendChild(confirmIconSvg) - //Cancel close button //Cancel close button const cancelTabClose = document.createElement("button") cancelTabClose.classList.add("cancel-tab-close") @@ -179,21 +148,6 @@ function createTab(tabNumber, exampleName, thingType) { 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") - cancelIconSvg.appendChild(cancelIconPath) - cancelTabClose.appendChild(cancelIconSvg) - - // Create the svg close cancel icon - 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") - cancelIconSvg.appendChild(cancelIconPath) cancelTabClose.appendChild(cancelIconSvg) diff --git a/packages/web-new/src/scripts/svgs.js b/packages/web-new/src/scripts/svgs.js new file mode 100644 index 000000000..fd21ddf1b --- /dev/null +++ b/packages/web-new/src/scripts/svgs.js @@ -0,0 +1,71 @@ + + +//Play button: + + +//code file (filled): + + +//Download file (filled): + + +//settings (filled): + + +//plus icon + + +//x icon: + + +//feedback (filled): + + +// cli: + + +// github rounded: + + +// angle right: + + +// angle down: + + +// expand arrows: + + +// collapse arrows + + +//import file + + +// search icon + + +// open in new tab + + +// link + + +// download secondary + + +// minus + + +//collapse square: + + +//expand square: + + +//slashed eye + + +// check icon: + + From 17307351d1294b925f847b54fb797677929ef941 Mon Sep 17 00:00:00 2001 From: Sergio Eduardo Castro Ceballos <72516762+SergioCasCeb@users.noreply.github.com> Date: Fri, 5 Jan 2024 07:55:10 +0100 Subject: [PATCH 12/16] removing unnecessary file --- packages/web-new/src/scripts/svgs.js | 71 ---------------------------- 1 file changed, 71 deletions(-) delete mode 100644 packages/web-new/src/scripts/svgs.js diff --git a/packages/web-new/src/scripts/svgs.js b/packages/web-new/src/scripts/svgs.js deleted file mode 100644 index fd21ddf1b..000000000 --- a/packages/web-new/src/scripts/svgs.js +++ /dev/null @@ -1,71 +0,0 @@ - - -//Play button: - - -//code file (filled): - - -//Download file (filled): - - -//settings (filled): - - -//plus icon - - -//x icon: - - -//feedback (filled): - - -// cli: - - -// github rounded: - - -// angle right: - - -// angle down: - - -// expand arrows: - - -// collapse arrows - - -//import file - - -// search icon - - -// open in new tab - - -// link - - -// download secondary - - -// minus - - -//collapse square: - - -//expand square: - - -//slashed eye - - -// check icon: - - From 15aa4d8077fbbf02c2bf42f696d55922829b2db3 Mon Sep 17 00:00:00 2001 From: Sergio Eduardo Castro Ceballos <72516762+SergioCasCeb@users.noreply.github.com> Date: Fri, 5 Jan 2024 05:21:55 +0100 Subject: [PATCH 13/16] Changed all icons for svgs - Previously all icon were been imported from Font Awesome, so in order to not depend on such system anymore all icons have been substituted for svgs --- packages/web-new/src/scripts/svgs.js | 71 ++++++++++++++++++++++++++++ 1 file changed, 71 insertions(+) create mode 100644 packages/web-new/src/scripts/svgs.js diff --git a/packages/web-new/src/scripts/svgs.js b/packages/web-new/src/scripts/svgs.js new file mode 100644 index 000000000..fd21ddf1b --- /dev/null +++ b/packages/web-new/src/scripts/svgs.js @@ -0,0 +1,71 @@ + + +//Play button: + + +//code file (filled): + + +//Download file (filled): + + +//settings (filled): + + +//plus icon + + +//x icon: + + +//feedback (filled): + + +// cli: + + +// github rounded: + + +// angle right: + + +// angle down: + + +// expand arrows: + + +// collapse arrows + + +//import file + + +// search icon + + +// open in new tab + + +// link + + +// download secondary + + +// minus + + +//collapse square: + + +//expand square: + + +//slashed eye + + +// check icon: + + From 395a512ddd3b219b43f8a60761459f0ec816f90d Mon Sep 17 00:00:00 2001 From: Sergio Eduardo Castro Ceballos <72516762+SergioCasCeb@users.noreply.github.com> Date: Fri, 5 Jan 2024 07:55:10 +0100 Subject: [PATCH 14/16] removing unnecessary file --- packages/web-new/src/scripts/svgs.js | 71 ---------------------------- 1 file changed, 71 deletions(-) delete mode 100644 packages/web-new/src/scripts/svgs.js diff --git a/packages/web-new/src/scripts/svgs.js b/packages/web-new/src/scripts/svgs.js deleted file mode 100644 index fd21ddf1b..000000000 --- a/packages/web-new/src/scripts/svgs.js +++ /dev/null @@ -1,71 +0,0 @@ - - -//Play button: - - -//code file (filled): - - -//Download file (filled): - - -//settings (filled): - - -//plus icon - - -//x icon: - - -//feedback (filled): - - -// cli: - - -// github rounded: - - -// angle right: - - -// angle down: - - -// expand arrows: - - -// collapse arrows - - -//import file - - -// search icon - - -// open in new tab - - -// link - - -// download secondary - - -// minus - - -//collapse square: - - -//expand square: - - -//slashed eye - - -// check icon: - - From 047264b677605c776eda60a618de1de92dd9d693 Mon Sep 17 00:00:00 2001 From: Sergio Eduardo Castro Ceballos <72516762+SergioCasCeb@users.noreply.github.com> Date: Thu, 18 Jan 2024 22:01:04 +0100 Subject: [PATCH 15/16] Added missing attribution - Added all missing attribuutions to svg (html and javascript) - Fixed all merging issues - Fixed style issues due to the merging and the new svgs --- .../src/assets/img/angle-down-solid.svg | 2 +- packages/web-new/src/scripts/console.js | 41 +- packages/web-new/src/scripts/editor.js | 12 + packages/web-new/src/scripts/examples-menu.js | 30 +- packages/web-new/src/scripts/main.js | 32 +- packages/web-new/src/scripts/util.js | 139 +++-- packages/web-new/src/styles/_console.scss | 25 +- .../web-new/src/styles/_examples-menu.scss | 52 +- packages/web-new/src/styles/_save-menu.scss | 10 +- .../web-new/src/styles/_settings-menu.scss | 2 +- packages/web-new/src/template.html | 571 +++++++++++++++--- 11 files changed, 651 insertions(+), 265 deletions(-) diff --git a/packages/web-new/src/assets/img/angle-down-solid.svg b/packages/web-new/src/assets/img/angle-down-solid.svg index cabe8a94f..6a3ad1a90 100644 --- a/packages/web-new/src/assets/img/angle-down-solid.svg +++ b/packages/web-new/src/assets/img/angle-down-solid.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/web-new/src/scripts/console.js b/packages/web-new/src/scripts/console.js index b66317aed..e74c0947a 100644 --- a/packages/web-new/src/scripts/console.js +++ b/packages/web-new/src/scripts/console.js @@ -37,7 +37,9 @@ import { textIcon } from './main.js' //Main console elements const errorContainer = document.querySelector(".console__content #console-error") const errorTxt = document.querySelector(".console-error__txt") -export const minMaxBtn = document.querySelector(".min-max") +const minMaxBtn = document.querySelector(".min-max") +export const collapseArrows = minMaxBtn.querySelector(".collapse-arrows") +export const expandArrows = minMaxBtn.querySelector(".expand-arrows") export const visualizationOptions = document.querySelectorAll(".visualizations__option") export const visualizationContainers = document.querySelectorAll(".console-view") export const consoleElement = document.querySelector(".console") @@ -58,9 +60,8 @@ function expandConsole() { setTimeout(() => { mainContentElement.style.flex = "0 210px" consoleElement.style.flex = `1 0` - minMaxBtn.children[0].classList.add("collapse-arrows") - minMaxBtn.children[0].classList.remove("expand-arrows") - 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") + collapseArrows.classList.remove("hidden") + expandArrows.classList.add("hidden") }, 100); } @@ -78,41 +79,15 @@ function collapseConsole() { 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") -minMaxBtn.addEventListener("click", () => { - - if (minMaxBtn.children[0].classList.contains("collapse-arrows")) { - mainContentElement.style.flex = "1 0" - consoleElement.style.flex = `0 39px` - minMaxBtn.children[0].classList.remove("collapse-arrows") - minMaxBtn.children[0].classList.add("expand-arrows") - 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") - - textIcon.forEach(text => { - text.classList.remove("hiddenV") - }) + collapseArrows.classList.add("hidden") + expandArrows.classList.remove("hidden") } minMaxBtn.addEventListener("click", () => { if (consoleElement.classList.contains("expanded")) { collapseConsole() } else { - textIcon.forEach(text => { - text.classList.add("hiddenV") - }) - - setTimeout(() => { - mainContentElement.style.flex = "0 210px" - consoleElement.style.flex = `1 0` - minMaxBtn.children[0].classList.add("collapse-arrows") - minMaxBtn.children[0].classList.remove("expand-arrows") - 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") - - if (visualizeTab.checked === true) { - visualizeTab.click() - } - }, 100); + expandConsole() } }) diff --git a/packages/web-new/src/scripts/editor.js b/packages/web-new/src/scripts/editor.js index 02b933bbc..f37ee40b6 100644 --- a/packages/web-new/src/scripts/editor.js +++ b/packages/web-new/src/scripts/editor.js @@ -104,6 +104,10 @@ function createTab(tabNumber, exampleName, thingType) { 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) @@ -128,6 +132,10 @@ function createTab(tabNumber, exampleName, thingType) { 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) @@ -148,6 +156,10 @@ function createTab(tabNumber, exampleName, thingType) { 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) diff --git a/packages/web-new/src/scripts/examples-menu.js b/packages/web-new/src/scripts/examples-menu.js index ac6501655..764a45e9e 100644 --- a/packages/web-new/src/scripts/examples-menu.js +++ b/packages/web-new/src/scripts/examples-menu.js @@ -280,9 +280,14 @@ async function getAllExamples(categoryId, thingType) { tdFilePath.setAttribute("clip-rule", "evenodd") tdFilePath.setAttribute("d", "M184 0V95.9981C184 107.044 192.954 115.998 204 115.998H300V190H106C89.4315 190 76 203.431 76 220V379H40C17.9086 379 0 361.091 0 339V40C0 17.9086 17.9086 0 40 0H184ZM204 95.9981V4.28427L295.714 95.9981H204ZM189.758 379V265.724H231.32V243.922H189.758H162.019H121.105V265.724H162.019V379H189.758ZM275.017 379H288.654C297.808 379 306.158 377.485 313.703 374.454C321.311 371.362 327.836 367.001 333.278 361.373C338.783 355.683 343.02 348.88 345.988 340.963C349.019 333.046 350.534 324.295 350.534 314.708V308.307C350.534 298.658 349.019 289.907 345.988 282.052C343.02 274.135 338.783 267.332 333.278 261.642C327.774 255.951 321.249 251.591 313.703 248.561C306.219 245.468 297.963 243.922 288.933 243.922H275.017H258.688H247.185V379H259.245H275.017ZM275.017 357.291H288.654C295.952 357.291 302.106 355.652 307.116 352.374C312.126 349.034 315.899 344.179 318.435 337.809C321.032 331.438 322.331 323.738 322.331 314.708V308.121C322.331 301.194 321.589 295.102 320.104 289.845C318.682 284.588 316.548 280.165 313.703 276.578C310.858 272.991 307.364 270.3 303.22 268.507C299.076 266.651 294.313 265.724 288.933 265.724H275.017V357.291Z") + //Create and append Font Awesome attribution comment + const commentTDFile = document.createComment(" !Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc. ") + tdFileSvg.appendChild(commentTDFile) + // Append the path element to the SVG element tdFileSvg.appendChild(tdFilePath) + // Append the SVG element to the document body or any other desired location exampleNameIcon.appendChild(tdFileSvg); @@ -306,6 +311,10 @@ async function getAllExamples(categoryId, thingType) { const exampleArrowPath = document.createElementNS("http://www.w3.org/2000/svg", "path") exampleArrowPath.setAttribute("d", "M201.4 342.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 274.7 86.6 137.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z") + //Create and append Font Awesome attribution comment + const commentExampleArrow = document.createComment(" !Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc. ") + exampleArrowSvg.appendChild(commentExampleArrow) + exampleArrowSvg.appendChild(exampleArrowPath) exampleName.appendChild(exampleArrowSvg) @@ -315,21 +324,9 @@ async function getAllExamples(categoryId, thingType) { //Create the example quick access button const quickBtn = document.createElement('button') quickBtn.classList.add("example__header--quick") - quickBtn.setAttribute("title", "Use") - // create the svg icon for the quick use button - const importFileSvg = document.createElementNS("http://www.w3.org/2000/svg", "svg") - importFileSvg.setAttribute("xmlns", "http://www.w3.org/2000/svg") - importFileSvg.setAttribute("width", "100%") - importFileSvg.setAttribute("height", "100%") - importFileSvg.setAttribute("viewBox", "0 0 512 512") - importFileSvg.classList.add("icon") + quickBtn.setAttribute("title", "Load this example into the editor") + quickBtn.innerText = "Load" - // Create a path element and set its attributes - const importFilePath = document.createElementNS("http://www.w3.org/2000/svg", "path") - importFilePath.setAttribute("d", "M128 64c0-35.3 28.7-64 64-64H352V128c0 17.7 14.3 32 32 32H512V448c0 35.3-28.7 64-64 64H192c-35.3 0-64-28.7-64-64V336H302.1l-39 39c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l80-80c9.4-9.4 9.4-24.6 0-33.9l-80-80c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9l39 39H128V64zm0 224v48H24c-13.3 0-24-10.7-24-24s10.7-24 24-24H128zM512 128H384V0L512 128z") - - importFileSvg.appendChild(importFilePath) - quickBtn.appendChild(importFileSvg) exampleHeader.appendChild(quickBtn) //add event listener to show example information and interaction buttons @@ -364,7 +361,6 @@ async function getAllExamples(categoryId, thingType) { exampleBtnUse.classList.add("example__btn--use") exampleBtns.appendChild(exampleBtnUse) - //todo: create the apply button // create the svg icon for the apply button const applyIconSvg = document.createElementNS("http://www.w3.org/2000/svg", "svg") applyIconSvg.setAttribute("xmlns", "http://www.w3.org/2000/svg") @@ -377,6 +373,10 @@ async function getAllExamples(categoryId, thingType) { const applyIconPath = document.createElementNS("http://www.w3.org/2000/svg", "path") applyIconPath.setAttribute("d", "M128 64c0-35.3 28.7-64 64-64H352V128c0 17.7 14.3 32 32 32H512V448c0 35.3-28.7 64-64 64H192c-35.3 0-64-28.7-64-64V336H302.1l-39 39c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l80-80c9.4-9.4 9.4-24.6 0-33.9l-80-80c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9l39 39H128V64zm0 224v48H24c-13.3 0-24-10.7-24-24s10.7-24 24-24H128zM512 128H384V0L512 128z") + //Create and append Font Awesome attribution comment + const commentApplyIcon = document.createComment(" !Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc. ") + applyIconSvg.appendChild(commentApplyIcon) + applyIconSvg.appendChild(applyIconPath) exampleBtnUse.appendChild(applyIconSvg) diff --git a/packages/web-new/src/scripts/main.js b/packages/web-new/src/scripts/main.js index 0112de2ad..8c380d91b 100644 --- a/packages/web-new/src/scripts/main.js +++ b/packages/web-new/src/scripts/main.js @@ -26,7 +26,7 @@ import './json-yaml' import './settings-menu' import './save-menu' import './examples-menu' -import { minMaxBtn, consoleElement } from './console' +import { consoleElement, expandArrows, collapseArrows } from './console' import './open-api' import './async-api' import './aas' @@ -165,20 +165,12 @@ function onmousemoveY(e) { b.style.flex = `0 ${h < 50 ? 39 : h}px` t.style.flex = "1 0" - if(h > 38){ - minMaxBtn.children[0].classList.add("collapse-arrows") - minMaxBtn.children[0].classList.remove("expand-arrows") - 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") - - consoleElement.classList.remove("collapsed") - consoleElement.classList.add("expanded") - }else{ - minMaxBtn.children[0].classList.remove("collapse-arrows") - minMaxBtn.children[0].classList.add("expand-arrows") - 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") - + if(h < 39){ consoleElement.classList.remove("expanded") consoleElement.classList.add("collapsed") + + collapseArrows.classList.add("hidden") + expandArrows.classList.remove("hidden") } if (h < 445) { @@ -193,20 +185,12 @@ function onmousemoveY(e) { t.style.flex = `0 ${h < 220 ? 210 : h}px` b.style.flex = "1 0" - if(h < 714){ - minMaxBtn.children[0].classList.add("collapse-arrows") - minMaxBtn.children[0].classList.remove("expand-arrows") - 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") - + if ( h > 714 ){ consoleElement.classList.remove("collapsed") consoleElement.classList.add("expanded") - }else{ - minMaxBtn.children[0].classList.remove("collapse-arrows") - minMaxBtn.children[0].classList.add("expand-arrows") - 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") - consoleElement.classList.remove("expanded") - consoleElement.classList.add("collapsed") + expandArrows.classList.add("hidden") + collapseArrows.classList.remove("hidden") } if (h < 310) { diff --git a/packages/web-new/src/scripts/util.js b/packages/web-new/src/scripts/util.js index a15d17098..aed76a227 100644 --- a/packages/web-new/src/scripts/util.js +++ b/packages/web-new/src/scripts/util.js @@ -236,24 +236,41 @@ export function validate(thingType, editorContent) { Object.keys(result.report).forEach(el => { const spotName = "spot-" + el document.getElementById(spotName).removeAttribute('open') - const resultIcon = document.getElementById(spotName).children[0].children[0] + const resultIcons = document.getElementById(spotName).children[0].children[0].querySelectorAll(".icon") + + resultIcons.forEach(icon => { + if (!icon.classList.contains("hidden")) { + icon.classList.add("hidden") + } + }) + if (result.report[el] === "passed") { - resultIcon.classList.remove("neutral-circle-icon") - resultIcon.classList.add("success-circle-icon") - resultIcon.children[0].setAttribute("d", "M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z") + resultIcons.forEach(icon => { + if (icon.classList.contains("success-circle-icon")) { + icon.classList.remove("hidden") + } + }) } else if (result.report[el] === "warning") { - resultIcon.classList.remove("neutral-circle-icon") - resultIcon.classList.add("warning-circle-icon") - resultIcon.children[0].setAttribute("d", "M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24V264c0 13.3-10.7 24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z") + resultIcons.forEach(icon => { + if (icon.classList.contains("warning-circle-icon")) { + icon.classList.remove("hidden") + } + }) } else if (result.report[el] === "failed") { - resultIcon.classList.remove("neutral-circle-icon") - resultIcon.classList.add("error-circle-icon") - resultIcon.children[0].setAttribute("d", "M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM175 175c9.4-9.4 24.6-9.4 33.9 0l47 47 47-47c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-47 47 47 47c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-47-47-47 47c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l47-47-47-47c-9.4-9.4-9.4-24.6 0-33.9z") + resultIcons.forEach(icon => { + if (icon.classList.contains("error-circle-icon")) { + icon.classList.remove("hidden") + } + }) } else if (result.report[el] === null) { - //do nothing + resultIcons.forEach(icon => { + if (icon.classList.contains("neutral-circle-icon")) { + icon.classList.remove("hidden") + } + }) } else { console.error("unknown report feedback value") @@ -264,25 +281,41 @@ export function validate(thingType, editorContent) { const detailsName = el + "-section" if (document.getElementById(detailsName)) { document.getElementById(detailsName).removeAttribute('open') - const detailsIcon = document.getElementById(detailsName).children[0].children[0] + const detailsIcons = document.getElementById(detailsName).children[0].children[0].querySelectorAll(".icon") + + detailsIcons.forEach(icon => { + if (!icon.classList.contains("hidden")) { + icon.classList.add("hidden") + } + }) if (result.details[el] === "passed") { - detailsIcon.classList.remove("neutral-circle-icon") - detailsIcon.classList.add("success-circle-icon") - detailsIcon.children[0].setAttribute("d", "M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z") + detailsIcons.forEach(icon => { + if (icon.classList.contains("success-circle-icon")) { + icon.classList.remove("hidden") + } + }) } else if (result.details[el] === "warning" || result.details[el] === "not-impl") { - detailsIcon.classList.remove("neutral-circle-icon") - detailsIcon.classList.add("warning-circle-icon") - detailsIcon.children[0].setAttribute("d", "M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24V264c0 13.3-10.7 24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z") + detailsIcons.forEach(icon => { + if (icon.classList.contains("warning-circle-icon")) { + icon.classList.remove("hidden") + } + }) } else if (result.details[el] === "failed") { - detailsIcon.classList.remove("neutral-circle-icon") - detailsIcon.classList.add("error-circle-icon") - detailsIcon.children[0].setAttribute("d", "M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM175 175c9.4-9.4 24.6-9.4 33.9 0l47 47 47-47c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-47 47 47 47c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-47-47-47 47c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l47-47-47-47c-9.4-9.4-9.4-24.6 0-33.9z") + detailsIcons.forEach(icon => { + if (icon.classList.contains("error-circle-icon")) { + icon.classList.remove("hidden") + } + }) } else if (result.details[el] === null) { - //do nothing + detailsIcons.forEach(icon => { + if (icon.classList.contains("neutral-circle-icon")) { + icon.classList.remove("hidden") + } + }) } else { console.error("unknown report feedback value") @@ -313,12 +346,15 @@ export function resetValidationStatus() { } sectionHeaders.forEach(header => { - const headerIcon = header.children[0] - if (!headerIcon.classList.contains("neutral-circle-icon")) { - headerIcon.classList.remove("success-circle-icon", "warning-circle-icon", "error-circle-icon") - headerIcon.classList.add("neutral-circle-icon") - headerIcon.children[0].setAttribute("d", "M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z") - } + const headerIcons = header.children[0].querySelectorAll(".icon") + headerIcons.forEach(icon => { + if (!icon.classList.contains("hidden")) { + icon.classList.add("hidden") + } + if (icon.classList.contains("neutral-circle-icon")) { + icon.classList.remove("hidden") + } + }) }) document.querySelectorAll("#spot-json, #spot-schema, #spot-defaults, #spot-jsonld, #spot-additional").forEach(category => { @@ -349,25 +385,34 @@ function populateCategory(messagesList) { document.querySelectorAll("#spot-json, #spot-schema, #spot-defaults, #spot-jsonld, #spot-additional").forEach(category => { const categoryContainer = category.querySelector("ul.section-content") category.classList.remove("disabled") - if (category.children[0].children[0].classList.contains("error-circle-icon") || category.children[0].children[0].classList.contains("warning-circle-icon")) { - const noticePrompt = document.createElement("p") - noticePrompt.textContent = "*This feature is still in the testing phase, and it may not refer to the correct source of the error*" - noticePrompt.classList.add("notice-prompt") - categoryContainer.append(noticePrompt) - messagesList.forEach(message => { - const listElement = document.createElement("li") - listElement.textContent = message - categoryContainer.append(listElement) - }) - } else if (category.children[0].children[0].classList.contains("success-circle-icon")) { - const successMessage = document.createElement("li") - successMessage.textContent = "Validated Successfully" - categoryContainer.append(successMessage) - } else { - const nullMessage = document.createElement("li") - nullMessage.textContent = "A previous validation has failed or it is only available for Thing Descriptions" - categoryContainer.append(nullMessage) - } + + const categoryIcons = category.children[0].children[0].querySelectorAll(".icon") + + categoryIcons.forEach(icon => { + if (!icon.classList.contains("hidden")) { + if (icon.classList.contains("error-circle-icon") || icon.classList.contains("warning-circle-icon")) { + const noticePrompt = document.createElement("p") + noticePrompt.textContent = "*This feature is still in the testing phase, and it may not refer to the correct source of the error*" + noticePrompt.classList.add("notice-prompt") + categoryContainer.append(noticePrompt) + messagesList.forEach(message => { + const listElement = document.createElement("li") + listElement.textContent = message + categoryContainer.append(listElement) + }) + } + else if (icon.classList.contains("success-circle-icon")) { + const successMessage = document.createElement("li") + successMessage.textContent = "Validated Successfully" + categoryContainer.append(successMessage) + } + else { + const nullMessage = document.createElement("li") + nullMessage.textContent = "A previous validation has failed or it is only available for Thing Descriptions" + categoryContainer.append(nullMessage) + } + } + }) }) } diff --git a/packages/web-new/src/styles/_console.scss b/packages/web-new/src/styles/_console.scss index ba146b621..89ada27fe 100644 --- a/packages/web-new/src/styles/_console.scss +++ b/packages/web-new/src/styles/_console.scss @@ -42,6 +42,7 @@ cursor: pointer; .icon { + display: inline-block; fill: var(--clr-primary-500); height: var(--fs-i); width: fit-content; @@ -53,6 +54,10 @@ fill: var(--clr-primary-700); } } + + .hidden { + display: none; + } } } @@ -197,7 +202,7 @@ transform: rotate(0); transition: transform 250ms ease-in-out; cursor: pointer; - height: var(--fs-p); + height: var(--fs-footer); fill: var(--clr-neutral-900); } } @@ -211,6 +216,15 @@ .icon { width: fit-content; + display: block; + + &.hidden { + display: none; + } + } + + .show-icon { + width: var(--fs-footer); } .neutral-circle-icon, @@ -273,7 +287,7 @@ summary { .show-icon { - transform: rotate(-90deg); + transform: rotate(90deg); } } } @@ -285,7 +299,7 @@ summary { .show-icon { - transform: rotate(-90deg); + transform: rotate(90deg); } } } @@ -364,8 +378,7 @@ .icon { fill: var(--clr-neutral-50); - height: var(--fs-i); - width: fit-content; + width: var(--fs-i); } &:hover { @@ -629,6 +642,7 @@ color: var(--clr-neutral-50); font-size: var(--fs-p); font-family: var(--ff-primary); + font-weight: var(--fw-bold); padding: .75rem 1rem; border: none; cursor: pointer; @@ -653,6 +667,7 @@ color: var(--clr-neutral-50); padding: .75rem 1.5rem; justify-content: center; + font-weight: var(--fw-bold); cursor: pointer; input[type='radio'] { diff --git a/packages/web-new/src/styles/_examples-menu.scss b/packages/web-new/src/styles/_examples-menu.scss index 77a3b0e7c..08cc3758c 100644 --- a/packages/web-new/src/styles/_examples-menu.scss +++ b/packages/web-new/src/styles/_examples-menu.scss @@ -46,7 +46,7 @@ text-align: right; .icon { - width: fit-content; + width: var(--fs-sub-header); height: var(--fs-sub-header); cursor: pointer; fill: var(--clr-neutral-900); @@ -225,7 +225,7 @@ .icon { height: var(--fs-p); - width: fit-content; + width: calc(var(--fs-p) + 2.5rem); padding: 0 1rem; fill: var(--clr-neutral-300); } @@ -334,7 +334,6 @@ padding: .75rem; box-shadow: 0px 0px 5px 0px var(--clr-shadow); transition: box-shadow 250ms ease-in-out; - position: relative; &__header { display: flex; @@ -368,54 +367,34 @@ .icon { fill: var(--clr-neutral-900); - height: var(--fs-footer); - width: fit-content; + width: var(--fs-footer); transform: rotate(0); transition: transform 250ms ease-in-out 250ms; } } &--quick { - opacity: 0; - position: absolute; - top: .25rem; - right: .25rem; - width: 4rem; - height: 4rem; - border-radius: 50%; - background-color: var(--clr-neutral-50); + font-size: var(--fs-p); + font-weight: var(--fw-bold); + color: var(--clr-neutral-50); + background-color: var(--clr-neutral-100); border: none; + border-radius: 5px; + padding: .5rem 1rem; cursor: pointer; - transition: background-color 250ms ease-in-out, opacity 250ms ease-in-out; - - .icon { - height: var(--fs-i); - width: fit-content; - fill: var(--clr-neutral-50); - transition: fill 250ms ease-in-out; - } + height: 3rem; + transition: background-color 250ms ease-in-out; } } &:hover { box-shadow: 0px 0px 10px 0px var(--clr-shadow); - .example__header { - &--quick { - - opacity: 1; - - .icon { - fill: var(--clr-neutral-300); - } + background-color: var(--clr-neutral-300); &:hover { - background-color: var(--clr-neutral-100); - - .icon { - fill: var(--clr-neutral-900); - } + background-color: var(--clr-primary-700); } } } @@ -470,8 +449,7 @@ .icon { margin-right: 1rem; - height: var(--fs-p); - width: fit-content; + width: var(--fs-p); fill: var(--clr-neutral-50); } } @@ -505,7 +483,7 @@ .example__header { &--name { .icon { - transform: rotate(-90deg); + transform: rotate(-180deg); transition: transform 250ms ease-in-out 0s; } } diff --git a/packages/web-new/src/styles/_save-menu.scss b/packages/web-new/src/styles/_save-menu.scss index cb6a35ef4..f43d2e3c5 100644 --- a/packages/web-new/src/styles/_save-menu.scss +++ b/packages/web-new/src/styles/_save-menu.scss @@ -41,7 +41,7 @@ .icon { height: var(--fs-sub-header); - width: fit-content; + width: var(--fs-sub-header); cursor: pointer; fill: var(--clr-neutral-900); } @@ -113,7 +113,7 @@ .icon { fill: var(--clr-neutral-50); height: var(--fs-i); - width: fit-content; + width: var(--fs-i); } &:hover{ @@ -144,8 +144,8 @@ transition: background-color 250ms ease-in-out; .icon { - height: var(--fs-i); - width: fit-content; + // height: var(--fs-i); + width: var(--fs-i); fill: var(--clr-neutral-50); } @@ -207,7 +207,7 @@ .icon { height: var(--fs-i); - width: fit-content; + width: var(--fs-i); fill: var(--clr-neutral-50); } diff --git a/packages/web-new/src/styles/_settings-menu.scss b/packages/web-new/src/styles/_settings-menu.scss index 970c6f908..9f75d6dba 100644 --- a/packages/web-new/src/styles/_settings-menu.scss +++ b/packages/web-new/src/styles/_settings-menu.scss @@ -42,7 +42,7 @@ .icon { height: var(--fs-sub-header); - width: fit-content; + width: var(--fs-sub-header); fill: var(--clr-neutral-50); cursor: pointer; } diff --git a/packages/web-new/src/template.html b/packages/web-new/src/template.html index db1f95d34..643050b3e 100644 --- a/packages/web-new/src/template.html +++ b/packages/web-new/src/template.html @@ -176,6 +176,7 @@

                                Thing Description Playground

                                title="This is a new design which is open to feedback to change the layout and UX"> @@ -185,6 +186,7 @@

                                Thing Description Playground

                                target="_blank"> + @@ -193,6 +195,7 @@

                                Thing Description Playground

                                + @@ -211,6 +214,7 @@

                                Thing Description Playground

                                @@ -300,15 +315,38 @@

                                Thing Description Playground

                                - - - +
                                + + + + + + + +
                                +

                                JSON Validation

                                - + + + d="M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z" />
                                  @@ -316,15 +354,38 @@

                                  Thing Description Playground

                                  - - - +
                                  + + + + + + + +
                                  +

                                  JSON Schema Validation

                                  - + + + d="M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z" />
                                    @@ -332,15 +393,38 @@

                                    Thing Description Playground

                                    - - - +
                                    + + + + + + + +
                                    +

                                    (With Defaults) JSON Schema Validation

                                    - + + + d="M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z" />
                                      @@ -348,15 +432,38 @@

                                      Thing Description Playground

                                      - - - +
                                      + + + + + + + +
                                      +

                                      JSON-LD Validation

                                      - + + + d="M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z" />
                                        @@ -364,30 +471,76 @@

                                        Thing Description Playground

                                        - - - +
                                        + + + + + + + +
                                        +

                                        Additional Checks

                                        - + + + d="M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z" />
                                          - - - +
                                          + + + + + + + +
                                          +

                                          Enum/Const

                                          + + d="M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z" />
                                            @@ -397,15 +550,38 @@

                                            Thing Description Playground

                                            - - - +
                                            + + + + + + + +
                                            +

                                            Linked Affordances

                                            + + d="M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z" />
                                              @@ -415,15 +591,38 @@

                                              Thing Description Playground

                                              - - - +
                                              + + + + + + + +
                                              +

                                              Linked Structure

                                              + + d="M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z" />
                                                @@ -433,15 +632,38 @@

                                                Thing Description Playground

                                                - - - +
                                                + + + + + + + +
                                                +

                                                Links Rel:Type Count

                                                + + d="M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z" />
                                                  @@ -451,15 +673,38 @@

                                                  Thing Description Playground

                                                  - - - +
                                                  + + + + + + + +
                                                  +

                                                  Multi-Language Consistency

                                                  + + d="M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z" />
                                                    @@ -469,15 +714,38 @@

                                                    Thing Description Playground

                                                    - - - +
                                                    + + + + + + + +
                                                    +

                                                    Properties Items

                                                    + + d="M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z" />
                                                      @@ -487,15 +755,38 @@

                                                      Thing Description Playground

                                                      - - - +
                                                      + + + + + + + +
                                                      +

                                                      Properties Uniqueness

                                                      + + d="M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z" />
                                                        @@ -505,15 +796,38 @@

                                                        Thing Description Playground

                                                        - - - +
                                                        + + + + + + + +
                                                        +

                                                        Read/WriteOnly

                                                        + + d="M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z" />
                                                          @@ -523,15 +837,38 @@

                                                          Thing Description Playground

                                                          - - - +
                                                          + + + + + + + +
                                                          +

                                                          Security

                                                          + + d="M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z" />
                                                            @@ -541,15 +878,38 @@

                                                            Thing Description Playground

                                                            - - - +
                                                            + + + + + + + +
                                                            +

                                                            URI Variable Security

                                                            + + d="M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z" />
                                                              @@ -570,8 +930,9 @@

                                                              Thing Description Playground

                                          @@ -319,32 +323,19 @@

                                          Thing Description Playground

                                          + + + + - - -

                                          JSON Validation

                                          + @@ -358,32 +349,19 @@

                                          Thing Description Playground

                                          + + + + - - -

                                          JSON Schema Validation

                                          + @@ -397,32 +375,19 @@

                                          Thing Description Playground

                                          + + + + - - -

                                          (With Defaults) JSON Schema Validation

                                          + @@ -436,32 +401,19 @@

                                          Thing Description Playground

                                          + + + + - - -

                                          JSON-LD Validation

                                          + @@ -475,32 +427,19 @@

                                          Thing Description Playground

                                          + + + + - - -

                                          Additional Checks

                                          + @@ -513,32 +452,19 @@

                                          Thing Description Playground

                                          + + + + - - -

                                          Enum/Const

                                          + @@ -554,32 +480,19 @@

                                          Thing Description Playground

                                          + + + + - - -

                                          Linked Affordances

                                          + @@ -595,32 +508,19 @@

                                          Thing Description Playground

                                          + + + + - - -

                                          Linked Structure

                                          + @@ -636,32 +536,19 @@

                                          Thing Description Playground

                                          + + + + - - -

                                          Links Rel:Type Count

                                          + @@ -677,32 +564,19 @@

                                          Thing Description Playground

                                          + + + + - - -

                                          Multi-Language Consistency

                                          + @@ -718,32 +592,19 @@

                                          Thing Description Playground

                                          + + + + - - -

                                          Properties Items

                                          + @@ -759,32 +620,19 @@

                                          Thing Description Playground

                                          + + + + - - -

                                          Properties Uniqueness

                                          + @@ -800,32 +648,19 @@

                                          Thing Description Playground

                                          + + + + - - -

                                          Read/WriteOnly

                                          + @@ -841,32 +676,19 @@

                                          Thing Description Playground

                                          + + + + - - -

                                          Security

                                          + @@ -882,32 +704,19 @@

                                          Thing Description Playground

                                          + + + + - - -

                                          URI Variable Security

                                          + @@ -933,6 +742,7 @@

                                          Thing Description Playground

                                          + @@ -954,6 +764,7 @@

                                          Thing Description Playground

                                          + @@ -973,6 +784,7 @@

                                          Thing Description Playground

                                          + Download @@ -993,6 +805,7 @@

                                          Thing Description Playground

                                          + @@ -1002,6 +815,7 @@

                                          Thing Description Playground

                                          + @@ -1013,6 +827,7 @@

                                          Thing Description Playground

                                          + @@ -1041,6 +856,7 @@

                                          Thing Description Playground

                                          + @@ -1051,6 +867,7 @@

                                          Thing Description Playground

                                          + @@ -1070,6 +887,7 @@

                                          Thing Description Playground

                                          + @@ -1079,6 +897,7 @@

                                          Thing Description Playground

                                          + @@ -1103,6 +922,7 @@

                                          Thing Description Playground

                                          + @@ -1175,6 +995,7 @@

                                          Preferences

                                          + @@ -1201,6 +1022,7 @@

                                          Preferences

                                          + @@ -1241,6 +1063,7 @@

                                          Search Results

                                          + @@ -1260,6 +1083,7 @@

                                          Search Results

                                          + @@ -1270,6 +1094,7 @@

                                          Search Results

                                          + @@ -1285,6 +1110,7 @@

                                          Search Results

                                          +