Merge pull request #541 from SergioCasCeb/simpler-user-button-sergio

Modified quick use button

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;`

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;`

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;`

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 => {

packages/web-new/src/scripts/examples-menu.js

@@ -19,6 +19,7 @@
  * 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 snippets 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 +305,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")
         })
@@ -348,7 +347,7 @@ async function getAllExamples(categoryId, thingType) {
         exampleBtnUse.appendChild(exampleIconUse)
 
         const exampleTxtUse = document.createElement('p')
-        exampleTxtUse.innerText = "Apply"
+        exampleTxtUse.innerText = "Load"
         exampleBtnUse.appendChild(exampleTxtUse)
 
         const exampleBtnCancel = document.createElement('button')

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()

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'

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;`

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

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) {

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
  */

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;
@@ -342,7 +341,7 @@
                                     align-items: center;
                                     justify-content: center;
                                     gap: 1rem;
-                                    margin: 0 4rem;
+                                    margin: 0 2rem;
                                     cursor: pointer;
                                     transition: all 250ms ease-in-out;
 
@@ -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 {

packages/web-new/src/template.html

@@ -168,7 +168,7 @@
                         </svg>
                 </div>
                 <div class="navbar__title">
-                    <h1>Thing Description Playground <span>- BETA Version</span></h1>
+                    <h1>Thing Description Playground</h1>
                 </div>
                 <div class="navbar__links">
                     <a href="https://github.com/eclipse-thingweb/playground/discussions/492" class="feedback-link"