New quick button for the example cards

A new button for users to import an example without the need to open or read the description of the example
eclipse-thingweb · Oct 9, 2023 · cdea20f · cdea20f
1 parent d935329
commit cdea20f
Show file tree

Hide file tree

Showing 6 changed files with 93 additions and 22 deletions.
diff --git a/packages/web-new/src/scripts/examples-menu.js b/packages/web-new/src/scripts/examples-menu.js
@@ -258,20 +258,39 @@ async function getAllExamples(categoryId, thingType) {
         exampleContainer.classList.add("example")
         categoryContainer.appendChild(exampleContainer)
 
+        //Create header container
+        const exampleHeader = document.createElement('div')
+        exampleHeader.classList.add("example__header")
+        exampleContainer.appendChild(exampleHeader)
+
         //create example title
         const exampleName = document.createElement('div')
-        exampleName.classList.add("example__name")
+        exampleName.classList.add("example__header--name")
         const exampleNameIcon = document.createElement('i')
         exampleNameIcon.classList.add("fa-solid", "fa-file-code")
         exampleName.appendChild(exampleNameIcon)
         const exampleNameTitle = document.createElement('p')
         exampleNameTitle.innerText = example[1]["title"]
         exampleName.appendChild(exampleNameTitle)
-        exampleContainer.appendChild(exampleName)
+        exampleHeader.appendChild(exampleName)
+
+        //Create the example quick access button
+        const quickButton = document.createElement('button')
+        quickButton.classList.add("example__header--quick")
+        const quickButtonIcon = document.createElement('i')
+        quickButtonIcon.classList.add("fa-solid", "fa-file-import")
+        quickButton.appendChild(quickButtonIcon)
+        exampleHeader.appendChild(quickButton)
+
 
         //add event listener to show example information and interaction btns
         exampleName.addEventListener('click', () => {
-            exampleName.parentElement.classList.toggle("open")
+            exampleContainer.classList.toggle("open")
+        })
+
+        //Importing example to the monaco editor with the quick buttons
+        quickButton.addEventListener('click', () => {
+            getTemplateData(example[1]["path"])
         })
 
         //create example content
@@ -312,12 +331,12 @@ async function getAllExamples(categoryId, thingType) {
         //Listener to generate an editor with the examples information
         exampleBtnUse.addEventListener('click', () => {
             getTemplateData(example[1]["path"])
-            exampleName.parentElement.classList.toggle("open")
+            exampleContainer.classList.toggle("open")
         })
 
         //Listener to generate an editor with the examples information
         exampleBtnCancel.addEventListener('click', () => {
-            exampleName.parentElement.classList.toggle("open")
+            exampleContainer.classList.toggle("open")
         })
     }
 }

diff --git a/packages/web-new/src/styles/_examples-menu.scss b/packages/web-new/src/styles/_examples-menu.scss
@@ -239,23 +239,51 @@
                             padding: 2rem;
                             box-shadow: 0px 0px 5px 0px var(--clr-shadow);
 
-                            &__name {
+                            &__header {
                                 display: flex;
-                                flex-direction: row;
                                 align-items: center;
-                                justify-content: center;
+                                justify-content: space-between;
                                 gap: 2rem;
-                                cursor: pointer;
-                                transition: all 250ms ease-in-out 250ms;
 
-                                i {
-                                    color: var(--clr-primary-500);
-                                }
+                                &--name {
+                                    width: 100%;
+                                    display: flex;
+                                    flex-direction: row;
+                                    align-items: center;
+                                    justify-content: center;
+                                    gap: 2rem;
+                                    cursor: pointer;
+                                    transition: all 250ms ease-in-out 250ms;
 
-                                p {
-                                    font-weight: var(--fw-bold);
+                                    i {
+                                        color: var(--clr-primary-500);
+                                    }
+
+                                    p {
+                                        font-weight: var(--fw-bold);
+                                    }
                                 }
 
+                                &--quick{
+                                    width: fit-content;
+                                    background-color: transparent;
+                                    border: none;
+                                    border-left: 2px solid var(--clr-primary-500);
+                                    padding: 1rem 1rem 1rem 2rem;
+                                    cursor: pointer;
+
+                                    i{
+                                        font-size: var(--fs-i);
+                                        color: var(--clr-primary-500);
+                                        transition: color 250ms ease-in-out 250ms;
+                                    }
+
+                                    &:hover{
+                                        i{
+                                            color: var(--clr-primary-700);
+                                        }
+                                    }
+                                }
                             }
 
                             &__content {

diff --git a/packages/web-new/src/styles/styles.css b/packages/web-new/src/styles/styles.css
@@ -43,7 +43,7 @@
   --fs-sub-header: clamp(1.25rem, 1.05rem + 1vw, 2.25rem);
   --fs-p: clamp(1rem, 0.92rem + 0.3999999999999999vw, 1.4rem);
   --fs-footer: clamp(0.8rem, 0.76rem + 0.19999999999999996vw, 1rem);
-  --fs-i: clamp(1.2rem, 1.1199999999999999rem + 0.4000000000000002vw, 1.6rem);
+  --fs-i: clamp(1.2rem, 1.04rem + 0.8vw, 2rem);
   /*line heights*/
   --lh-h1: 4rem;
   --lh-h2: 4rem;
@@ -1804,7 +1804,14 @@ main .console {
   padding: 2rem;
   box-shadow: 0px 0px 5px 0px var(--clr-shadow);
 }
-.examples-menu .examples-menu-container .examples-container__td .examples-category__container .example__name, .examples-menu .examples-menu-container .examples-container__tm .examples-category__container .example__name {
+.examples-menu .examples-menu-container .examples-container__td .examples-category__container .example__header, .examples-menu .examples-menu-container .examples-container__tm .examples-category__container .example__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 2rem;
+}
+.examples-menu .examples-menu-container .examples-container__td .examples-category__container .example__header--name, .examples-menu .examples-menu-container .examples-container__tm .examples-category__container .example__header--name {
+  width: 100%;
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -1813,12 +1820,29 @@ main .console {
   cursor: pointer;
   transition: all 250ms ease-in-out 250ms;
 }
-.examples-menu .examples-menu-container .examples-container__td .examples-category__container .example__name i, .examples-menu .examples-menu-container .examples-container__tm .examples-category__container .example__name i {
+.examples-menu .examples-menu-container .examples-container__td .examples-category__container .example__header--name i, .examples-menu .examples-menu-container .examples-container__tm .examples-category__container .example__header--name i {
   color: var(--clr-primary-500);
 }
-.examples-menu .examples-menu-container .examples-container__td .examples-category__container .example__name p, .examples-menu .examples-menu-container .examples-container__tm .examples-category__container .example__name p {
+.examples-menu .examples-menu-container .examples-container__td .examples-category__container .example__header--name p, .examples-menu .examples-menu-container .examples-container__tm .examples-category__container .example__header--name p {
   font-weight: var(--fw-bold);
 }
+.examples-menu .examples-menu-container .examples-container__td .examples-category__container .example__header--quick, .examples-menu .examples-menu-container .examples-container__tm .examples-category__container .example__header--quick {
+  width: -moz-fit-content;
+  width: fit-content;
+  background-color: transparent;
+  border: none;
+  border-left: 2px solid var(--clr-primary-500);
+  padding: 1rem 1rem 1rem 2rem;
+  cursor: pointer;
+}
+.examples-menu .examples-menu-container .examples-container__td .examples-category__container .example__header--quick i, .examples-menu .examples-menu-container .examples-container__tm .examples-category__container .example__header--quick i {
+  font-size: var(--fs-i);
+  color: var(--clr-primary-500);
+  transition: color 250ms ease-in-out 250ms;
+}
+.examples-menu .examples-menu-container .examples-container__td .examples-category__container .example__header--quick:hover i, .examples-menu .examples-menu-container .examples-container__tm .examples-category__container .example__header--quick:hover i {
+  color: var(--clr-primary-700);
+}
 .examples-menu .examples-menu-container .examples-container__td .examples-category__container .example__content, .examples-menu .examples-menu-container .examples-container__tm .examples-category__container .example__content {
   pointer-events: none;
   display: flex;