From 56924aa0871149b218593564ca071a60d5ce1c54 Mon Sep 17 00:00:00 2001
From: Sergio Eduardo Castro Ceballos
<72516762+SergioCasCeb@users.noreply.github.com>
Date: Tue, 2 Jan 2024 23:38:14 +0100
Subject: [PATCH] rebasing and fixing styling issues
---
packages/web-new/src/scripts/aas.js | 4 +-
packages/web-new/src/scripts/async-api.js | 4 +-
packages/web-new/src/scripts/defaults.js | 4 +-
packages/web-new/src/scripts/editor.js | 4 +-
packages/web-new/src/scripts/examples-menu.js | 12 +++--
packages/web-new/src/scripts/json-yaml.js | 4 +-
packages/web-new/src/scripts/jsonld-vis.js | 2 +-
packages/web-new/src/scripts/open-api.js | 4 +-
packages/web-new/src/scripts/save-menu.js | 2 +-
packages/web-new/src/scripts/settings-menu.js | 6 +--
packages/web-new/src/scripts/vega-vis.js | 4 +-
.../web-new/src/styles/_examples-menu.scss | 44 +++++--------------
packages/web-new/src/template.html | 2 +-
13 files changed, 37 insertions(+), 59 deletions(-)
diff --git a/packages/web-new/src/scripts/aas.js b/packages/web-new/src/scripts/aas.js
index 8401fc29d..f507e8b48 100644
--- a/packages/web-new/src/scripts/aas.js
+++ b/packages/web-new/src/scripts/aas.js
@@ -53,7 +53,7 @@ async function initAASEditor() {
setFontSize(window.AASEditor)
})
- //Bind the reset button form the settings to the editor and assign the specied font size
+ //Bind the reset button form the settings to the editor and assign the specified font size
editorForm.addEventListener("reset", () => {
setFontSize(window.AASEditor)
})
@@ -62,7 +62,7 @@ async function initAASEditor() {
initAASEditor()
-//Donwload btn
+//Download btn
AASDownload.addEventListener("click", () => {
const editorData = getEditorData(window.AASEditor)
const contentType = `application/${editorData[0]};charset=utf-8;`
diff --git a/packages/web-new/src/scripts/async-api.js b/packages/web-new/src/scripts/async-api.js
index 9a1c00fb8..b502ca22c 100644
--- a/packages/web-new/src/scripts/async-api.js
+++ b/packages/web-new/src/scripts/async-api.js
@@ -55,7 +55,7 @@ async function initAsyncApiEditor() {
setFontSize(window.asyncApiEditor)
})
- //Bind the reset button form the settings to the editor and assign the specied font size
+ //Bind the reset button form the settings to the editor and assign the specified font size
editorForm.addEventListener("reset", () => {
setFontSize(window.asyncApiEditor)
})
@@ -77,7 +77,7 @@ asyncApiYamlBtn.addEventListener("click", () => {
asyncApiYamlBtn.disabled = true
})
-//Donwload btn
+//Download btn
asyncApiDownload.addEventListener("click", () => {
const editorData = getEditorData(window.asyncApiEditor)
const contentType = `application/${editorData[0]};charset=utf-8;`
diff --git a/packages/web-new/src/scripts/defaults.js b/packages/web-new/src/scripts/defaults.js
index 183dd7d79..447ffafdd 100644
--- a/packages/web-new/src/scripts/defaults.js
+++ b/packages/web-new/src/scripts/defaults.js
@@ -56,7 +56,7 @@ async function initDefaultsEditor() {
setFontSize(window.defaultsEditor)
})
- //Bind the reset button form the settings to the editor and assign the specied font size
+ //Bind the reset button form the settings to the editor and assign the specified font size
editorForm.addEventListener("reset", () => {
setFontSize(window.defaultsEditor)
})
@@ -92,7 +92,7 @@ defaultsRemoveBtn.addEventListener("click", () => {
defaultsRemoveBtn.disabled = true
})
-//Donwload btn
+//Download btn
defaultsDownload.addEventListener("click", () => {
const editorData = getEditorData(window.defaultsEditor)
const contentType = `application/${editorData[0]};charset=utf-8;`
diff --git a/packages/web-new/src/scripts/editor.js b/packages/web-new/src/scripts/editor.js
index 425d1f393..1584fd529 100644
--- a/packages/web-new/src/scripts/editor.js
+++ b/packages/web-new/src/scripts/editor.js
@@ -98,7 +98,7 @@ function createTab(tabNumber, exampleName, thingType) {
closeBtn.appendChild(closeIcon)
- //Create the close confirmation btns
+ //Create the close confirmation buttons
const confirmBtns = document.createElement("div")
confirmBtns.classList.add("confirm-btns", "hidden")
@@ -444,7 +444,7 @@ tabsLeftContainer.addEventListener("click", (e) => {
})
/**
- * Find if active editor is json or yaml and change the json/yaml btns respectively
+ * Find if active editor is json or yaml and change the json/yaml buttons respectively
*/
function findFileType() {
editorList.forEach(editor => {
diff --git a/packages/web-new/src/scripts/examples-menu.js b/packages/web-new/src/scripts/examples-menu.js
index c1646e6df..c8239ef15 100644
--- a/packages/web-new/src/scripts/examples-menu.js
+++ b/packages/web-new/src/scripts/examples-menu.js
@@ -18,7 +18,7 @@
* for the examples menu, such as displaying all the TD and TM examples,
* as well as filtering them by categories, a search function to find
* specific examples and a use a template example to directly added to an editor where it can be utilized and modified.
- * In the future the option to see short snippppets of the most important part of the example, might also be implemented.
+ * In the future the option to see short snippets of the most important part of the example, might also be implemented.
*/
import { createIde, ideCount, tabsLeft } from "./editor"
@@ -304,14 +304,12 @@ 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")
- const quickButtonIcon = document.createElement('i')
- quickButtonIcon.classList.add("fa-solid", "fa-file-import")
- quickBtn.appendChild(quickButtonIcon)
- exampleHeader.appendChild(quickBtn)
+ quickBtn.setAttribute("title", "Load this example into the editor")
+ quickBtn.innerText = "Load"
+ exampleHeader.appendChild(quickBtn)
- //add event listener to show example information and interaction btns
+ //add event listener to show example information and interaction buttons
exampleName.addEventListener('click', () => {
exampleContainer.classList.toggle("open")
})
diff --git a/packages/web-new/src/scripts/json-yaml.js b/packages/web-new/src/scripts/json-yaml.js
index aed32588d..41d73efcf 100644
--- a/packages/web-new/src/scripts/json-yaml.js
+++ b/packages/web-new/src/scripts/json-yaml.js
@@ -16,7 +16,7 @@
/**
* @file The `json-yaml.js` contains the main functionality
* for converting json to yaml and vice versa, utilizing the util's
- * funcions and the editorList array from the editor file.
+ * functions and the editorList array from the editor file.
*/
import { editorList } from './editor.js'
import { generateTD } from './util.js'
@@ -66,7 +66,7 @@ document.addEventListener('click', (e) => {
}
})
-//Confirm the json to yaml convertion
+//Confirm the json to yaml conversion
yamlConfirmBtn.addEventListener("click", () => {
yamlWarning.classList.add('closed')
convertJsonYaml()
diff --git a/packages/web-new/src/scripts/jsonld-vis.js b/packages/web-new/src/scripts/jsonld-vis.js
index dffe043c1..fc22f24ee 100644
--- a/packages/web-new/src/scripts/jsonld-vis.js
+++ b/packages/web-new/src/scripts/jsonld-vis.js
@@ -15,7 +15,7 @@
/**
* @file The `jsonld-vis.js` handles the d3 visualization for the
- * graph option, by utilizin the d3 and d3-tip dependencies
+ * graph option, by utilizing the d3 and d3-tip dependencies
*/
import * as d3 from 'd3'
diff --git a/packages/web-new/src/scripts/open-api.js b/packages/web-new/src/scripts/open-api.js
index dde078683..7377a2903 100644
--- a/packages/web-new/src/scripts/open-api.js
+++ b/packages/web-new/src/scripts/open-api.js
@@ -55,7 +55,7 @@ async function initOpenApiEditor() {
setFontSize(window.openApiEditor)
})
- //Bind the reset button form the settings to the editor and assign the specied font size
+ //Bind the reset button form the settings to the editor and assign the specified font size
editorForm.addEventListener("reset", () => {
setFontSize(window.openApiEditor)
})
@@ -77,7 +77,7 @@ openApiYamlBtn.addEventListener("click", () => {
openApiYamlBtn.disabled = true
})
-//Donwload btn
+//Download btn
openApiDownload.addEventListener("click", () => {
const editorData = getEditorData(window.openApiEditor)
const contentType = `application/${editorData[0]};charset=utf-8;`
diff --git a/packages/web-new/src/scripts/save-menu.js b/packages/web-new/src/scripts/save-menu.js
index b50a90f77..6c8b268bb 100644
--- a/packages/web-new/src/scripts/save-menu.js
+++ b/packages/web-new/src/scripts/save-menu.js
@@ -228,7 +228,7 @@ async function saveFileInSystem(content) {
// }
//TODO IMPORT FROM FILES
-/** Experimental file manager fucntion*/
+/** Experimental file manager function*/
// const visualizeView = document.querySelector("#visualize-view p")
// async function getFile() {
// // Open file picker and destructure the result the first handle
diff --git a/packages/web-new/src/scripts/settings-menu.js b/packages/web-new/src/scripts/settings-menu.js
index aca8141b0..855ed36a0 100644
--- a/packages/web-new/src/scripts/settings-menu.js
+++ b/packages/web-new/src/scripts/settings-menu.js
@@ -68,7 +68,7 @@ document.addEventListener('click', (e) => {
})
/**
- * Event listener for reseting all the settings and preferences values
+ * Event listener for resetting all the settings and preferences values
* @param {event} e - reset event
*/
editorForm.addEventListener("reset", (e) => {
@@ -83,7 +83,7 @@ editorForm.addEventListener("reset", (e) => {
storeFontSize(fontSizeSlider.value)
setMonacoTheme(themePicker.value)
- //resetting all toggle btns
+ //resetting all toggle buttons
autoValidateBtn.checked = false
validateJSONLDBtn.checked = true
tmConformanceBtn.checked = true
@@ -113,7 +113,7 @@ fontSizeSlider.addEventListener("input", () => {
/***********************************************************/
/**
- * Store the selected themek in the localStorage
+ * Store the selected theme in the localStorage
* @param {String} theme - the name of the theme
*/
function storeTheme(theme) {
diff --git a/packages/web-new/src/scripts/vega-vis.js b/packages/web-new/src/scripts/vega-vis.js
index 9cbc28a4b..021559773 100644
--- a/packages/web-new/src/scripts/vega-vis.js
+++ b/packages/web-new/src/scripts/vega-vis.js
@@ -15,13 +15,13 @@
/**
* @file The `vega-vis.js` handles the vega visualization for the
- * tree option, by utilizin the vega and vega-embed dependencies
+ * tree option, by utilizing the vega and vega-embed dependencies
*/
import vegaEmbed from 'vega-embed'
/**
- * Initialize and generat the Vega visualization by passing the container element and the td content
+ * Initialize and generate the Vega visualization by passing the container element and the td content
* @param { html element } visContainer - Html container for the svg visualization
* @param { json object } td - Json object from the current editor
*/
diff --git a/packages/web-new/src/styles/_examples-menu.scss b/packages/web-new/src/styles/_examples-menu.scss
index 1e751d698..183ecc44d 100644
--- a/packages/web-new/src/styles/_examples-menu.scss
+++ b/packages/web-new/src/styles/_examples-menu.scss
@@ -328,7 +328,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,23 +367,16 @@
}
&--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;
-
- i {
- font-size: var(--fs-i);
- color: var(--clr-neutral-50);
- transition: color 250ms ease-in-out;
- }
+ height: 3rem;
+ transition: background-color 250ms ease-in-out;
}
}
@@ -394,26 +386,14 @@
.example__header {
&--quick {
+ background-color: var(--clr-neutral-300);
- opacity: 1;
-
- i {
- color: var(--clr-neutral-300);
- }
-
- &:hover {
- background-color: var(--clr-neutral-100);
-
- i {
- color: var(--clr-neutral-900);
- }
+ &:hover{
+ background-color: var(--clr-primary-700);
}
}
- }
- }
- &:hover{
- box-shadow: 0px 0px 10px 0px var(--clr-shadow);
+ }
}
&__content {
diff --git a/packages/web-new/src/template.html b/packages/web-new/src/template.html
index 4a7e0bec1..5ed7063a9 100644
--- a/packages/web-new/src/template.html
+++ b/packages/web-new/src/template.html
@@ -168,7 +168,7 @@
-
Thing Description Playground - BETA Version
+ Thing Description Playground