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] 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 cabe8a94..6a3ad1a9 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 b66317ae..e74c0947 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 02b933bb..f37ee40b 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 ac650165..764a45e9 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 0112de2a..8c380d91 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 a15d1709..aed76a22 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 ba146b62..89ada27f 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 77a3b0e7..08cc3758 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 cb6a35ef..f43d2e3c 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 970c6f90..9f75d6db 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 db1f95d3..643050b3 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