Merge pull request #542 from SergioCasCeb/console-tab-interaction-sergio

New console tab interaction design
eclipse-thingweb · Dec 13, 2023 · 5cc822d · 5cc822d
2 parents e78f325 + 7d7ccc0
commit 5cc822d
Show file tree

Hide file tree

Showing 7 changed files with 48 additions and 67 deletions.
diff --git a/packages/web-new/src/scripts/console.js b/packages/web-new/src/scripts/console.js
@@ -38,7 +38,7 @@ import { textIcon } from './main.js'
 const errorContainer = document.querySelector(".console__content #console-error")
 const errorTxt = document.querySelector(".console-error__txt")
 export const minMaxBtn = document.querySelector(".min-max")
-export const visualizationOptions = document.querySelectorAll(".visualization__option")
+export const visualizationOptions = document.querySelectorAll(".visualizations__option")
 export const visualizationContainers = document.querySelectorAll(".console-view")
 const consoleElement = document.querySelector(".console")
 const mainContentElement = document.querySelector(".main-content")
@@ -47,7 +47,7 @@ minMaxBtn.addEventListener("click", () => {
 
     if (minMaxBtn.children[0].classList.contains("fa-down-left-and-up-right-to-center")) {
         mainContentElement.style.flex = "1 0"
-        consoleElement.style.flex = `0 40px`
+        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")
 

diff --git a/packages/web-new/src/scripts/main.js b/packages/web-new/src/scripts/main.js
@@ -162,18 +162,18 @@ function onmousemoveY(e) {
     // DOWN
     if (deltaY > 0) {
       const h = Math.round(parseInt(getComputedStyle(b).height) - deltaY)
-      b.style.flex = `0 ${h < 50 ? 40 : h}px`
+      b.style.flex = `0 ${h < 50 ? 39 : h}px`
       t.style.flex = "1 0"
 
-      if(h > 39){
+      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")
       }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")
       }
 
-      if (h > 290) {
+      if (h < 445) {
         textIcon.forEach(text => {
           text.classList.remove("hiddenV")
         })
@@ -185,16 +185,15 @@ function onmousemoveY(e) {
       t.style.flex = `0 ${h < 210 ? 200 : h}px`
       b.style.flex = "1 0"
 
-      if(h < 713){
+      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")
       }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")
       }
 
-
-      if (h < 290) {
+      if (h < 310) {
         textIcon.forEach(text => {
           text.classList.add("hiddenV")
         })

diff --git a/packages/web-new/src/styles/_console.scss b/packages/web-new/src/styles/_console.scss
@@ -25,7 +25,9 @@
         align-items: center;
         justify-content: space-between;
         border-bottom: 2px solid var(--clr-primary-500);
-        padding: 0 1rem;
+        height: fit-content;
+        background-color: var(--clr-neutral-50);
+        padding-right: 1rem;
 
         .console-controllers {
             display: flex;
@@ -36,33 +38,28 @@
                 padding: 1rem .5rem;
                 appearance: none;
                 border: none;
-                background-color: var(--clr-neutral-50);
+                background-color: transparent;
                 color: var(--clr-primary-500);
                 transition: color 250ms ease;
 
                 &:hover {
-                    color: var(--clr-primary-900);
+                    color: var(--clr-primary-700);
                     cursor: pointer;
                 }
-
-                &:disabled {
-                    color: var(--clr-neutral-300);
-                    cursor: auto;
-                }
             }
         }
 
-        .visualization {
+        .visualizations {
             height: 100%;
             display: flex;
             align-items: center;
 
             input[type=radio] {
                 appearance: none;
                 width: fit-content;
-                padding: 1rem;
-                background-color: var(--clr-neutral-50);
-                color: var(--clr-neutral-300);
+                height: 100%;
+                padding: .75rem 1.5rem;
+                color: var(--clr-primary-500);
                 font-family: var(--ff-primary);
                 font-size: var(--fs-p);
                 font-weight: var(--fw-bold);
@@ -98,28 +95,20 @@
                     content: 'Defaults';
                 }
 
-                // &:nth-child(5)::before{
-                //     content: 'Linting';
-                // }
-
-                // &:nth-child(6)::before{
-                //     content: 'Canonicalize';
-                // }
-
                 &:nth-child(6)::before {
                     content: 'Visualize';
                 }
-            }
 
-            input[type=radio]:checked {
-                color: var(--clr-neutral-900);
+                &:hover{
+                    background-color: var(--clr-primary-500);
+                    color: var(--clr-neutral-50);
+                }
             }
 
-            input[type=radio]:disabled {
-                color: var(--clr-neutral-200);
-                cursor: not-allowed;
+            input[type=radio]:checked {
+                color: var(--clr-neutral-50);
+                background-color: var(--clr-primary-500);
             }
-
         }
     }
 

diff --git a/packages/web-new/src/styles/_examples-menu.scss b/packages/web-new/src/styles/_examples-menu.scss
@@ -369,7 +369,7 @@
                                     opacity: 0;
                                     position: absolute;
                                     top: .25rem;
-                                    right: .5rem;
+                                    right: .25rem;
                                     width: 4rem;
                                     height: 4rem;
                                     border-radius: 50%;
@@ -421,8 +421,8 @@
                                 align-items: flex-start;
                                 justify-content: center;
                                 flex-wrap: wrap;
-                                padding: 0 1rem;
-                                transition: padding 250ms ease-in-out 250ms;
+                                // padding: 0 .75rem;
+                                // transition: padding 250ms ease-in-out 250ms;
                             }
 
                             &__description {
@@ -506,8 +506,8 @@
 
                             .example__content {
                                 pointer-events: all;
-                                padding: 0 1rem 1rem 1rem;
-                                transition: padding 250ms ease-in-out 0s;
+                                // padding: 0 .75rem .75rem .75rem;
+                                // transition: padding 250ms ease-in-out 0s;
                             }
 
                             .example__description {

diff --git a/packages/web-new/src/styles/styles.css b/packages/web-new/src/styles/styles.css
@@ -691,9 +691,10 @@ main .console {
   align-items: center;
   justify-content: space-between;
   border-bottom: 2px solid var(--clr-primary-500);
-  padding: 0 1rem;
   height: -moz-fit-content;
   height: fit-content;
+  background-color: var(--clr-neutral-50);
+  padding-right: 1rem;
 }
 .console__tabs .console-controllers {
   display: flex;
@@ -706,19 +707,15 @@ main .console {
      -moz-appearance: none;
           appearance: none;
   border: none;
-  background-color: var(--clr-neutral-50);
+  background-color: transparent;
   color: var(--clr-primary-500);
   transition: color 250ms ease;
 }
 .console__tabs .console-controllers .min-max:hover {
-  color: var(--clr-primary-900);
+  color: var(--clr-primary-700);
   cursor: pointer;
 }
-.console__tabs .console-controllers .min-max:disabled {
-  color: var(--clr-neutral-300);
-  cursor: auto;
-}
-.console__tabs .visualization {
+.console__tabs .visualizations {
   height: 100%;
   display: flex;
   align-items: center;
@@ -729,9 +726,9 @@ main .console {
           appearance: none;
   width: -moz-fit-content;
   width: fit-content;
-  padding: 1rem;
-  background-color: var(--clr-neutral-50);
-  color: var(--clr-neutral-300);
+  height: 100%;
+  padding: 0.75rem 1.5rem;
+  color: var(--clr-primary-500);
   font-family: var(--ff-primary);
   font-size: var(--fs-p);
   font-weight: var(--fw-bold);
@@ -764,12 +761,13 @@ main .console {
 .console__tabs .visualizations input[type=radio]:nth-child(6)::before {
   content: "Visualize";
 }
-.console__tabs .visualizations input[type=radio]:checked {
-  color: var(--clr-neutral-900);
+.console__tabs .visualizations input[type=radio]:hover {
+  background-color: var(--clr-primary-500);
+  color: var(--clr-neutral-50);
 }
-.console__tabs .visualizations input[type=radio]:disabled {
-  color: var(--clr-neutral-200);
-  cursor: not-allowed;
+.console__tabs .visualizations input[type=radio]:checked {
+  color: var(--clr-neutral-50);
+  background-color: var(--clr-primary-500);
 }
 .console__content {
   width: 100%;
@@ -1982,7 +1980,6 @@ main .console {
   align-items: center;
   justify-content: center;
   gap: 1rem;
-
   margin: 0 4rem;
   cursor: pointer;
   transition: all 250ms ease-in-out;
@@ -2005,7 +2002,7 @@ main .console {
   opacity: 0;
   position: absolute;
   top: 0.25rem;
-  right: 0.5rem;
+  right: 0.25rem;
   width: 4rem;
   height: 4rem;
   border-radius: 50%;
@@ -2044,8 +2041,6 @@ main .console {
   align-items: flex-start;
   justify-content: center;
   flex-wrap: wrap;
-  padding: 0 1rem;
-  transition: padding 250ms ease-in-out 250ms;
 }
 .examples-menu .examples-menu-container .examples-container__td .examples-category__container .example__description, .examples-menu .examples-menu-container .examples-container__tm .examples-category__container .example__description {
   height: 0;
@@ -2111,8 +2106,6 @@ main .console {
 }
 .examples-menu .examples-menu-container .examples-container__td .examples-category__container .example.open .example__content, .examples-menu .examples-menu-container .examples-container__tm .examples-category__container .example.open .example__content {
   pointer-events: all;
-  padding: 0 1rem 1rem 1rem;
-  transition: padding 250ms ease-in-out 0s;
 }
 .examples-menu .examples-menu-container .examples-container__td .examples-category__container .example.open .example__description, .examples-menu .examples-menu-container .examples-container__tm .examples-category__container .example.open .example__description {
   height: 9rem;

diff --git a/packages/web-new/src/styles/styles.css.map b/packages/web-new/src/styles/styles.css.map
diff --git a/packages/web-new/src/template.html b/packages/web-new/src/template.html
@@ -239,10 +239,10 @@ <h1>Thing Description Playground <span>- BETA Version</span></h1>
                         <input type="radio" name="visualizations-option" id="aas-tab"
                             class="visualizations__option aas-tab-btn"
                             title="Conversion to Asset Administration Shell/Asset Interface Description">
-                        <input type="radio" name="visualization-option" id="defaults-tab"
-                            class="visualization__option defaults-tab-btn" title="Add or remove default values">
-                        <input type="radio" name="visualization-option" id="visualize-tab"
-                            class="visualization__option visualize-tab-btn" title="Tree or Graph TD visualizations">
+                        <input type="radio" name="visualizations-option" id="defaults-tab"
+                            class="visualizations__option defaults-tab-btn" title="Add or remove default values">
+                        <input type="radio" name="visualizations-option" id="visualize-tab"
+                            class="visualizations__option visualize-tab-btn" title="Tree or Graph TD visualizations">
                     </div>
                     <div class="console-controllers">
                         <button class="min-max"><i class="fa-solid fa-down-left-and-up-right-to-center"></i></button>