New console tab interaction design

Modified the console tabs to better show their current state and therefore provide better feedback to the user while utilizing them. Note: If this were to be implemented, I would highly recommend to also change to the new console default state change.
eclipse-thingweb · Dec 6, 2023 · afe79a3 · afe79a3
1 parent 3a3b678
commit afe79a3
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 45 deletions.
diff --git a/packages/web-new/src/scripts/main.js b/packages/web-new/src/scripts/main.js
@@ -163,7 +163,7 @@ function onmousemoveY(e) {
     // DOWN
     if (deltaY > 0) {
       const h = Math.round(parseInt(getComputedStyle(b).height) - deltaY)
-      b.style.flex = `0 ${h < 55 ? 50 : h}px`
+      b.style.flex = `0 ${h < 50 ? 40 : h}px`
       t.style.flex = "1 0"
       if (Math.round(parseInt(getComputedStyle(t).height) + deltaY) > 290) {
         textIcon.forEach(text => {

diff --git a/packages/web-new/src/styles/_console.scss b/packages/web-new/src/styles/_console.scss
@@ -25,36 +25,27 @@
         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;
             align-items: center;
             justify-content: center;
 
-            .trash,
-            .download {
-                padding: 1rem .5rem;
+            .trash {
+                padding: 1rem;
                 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;
-                }
-            }
-
-            .download {
-                margin-right: 1rem;
             }
         }
 
@@ -66,11 +57,9 @@
             input[type=radio] {
                 appearance: none;
                 width: fit-content;
-                padding: .5rem 1rem;
-                background-color: var(--clr-neutral-50);
-                border-top-right-radius: 5px;
-                border-top-left-radius: 5px;
-                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);
@@ -117,10 +106,16 @@
                 &:nth-child(6)::before {
                     content: 'Visualize';
                 }
+
+                &:hover{
+                    background-color: var(--clr-primary-500);
+                    color: var(--clr-neutral-50);
+                }
             }
 
             input[type=radio]:checked {
-                color: var(--clr-neutral-900);
+                color: var(--clr-neutral-50);
+                background-color: var(--clr-primary-500);
             }
 
             input[type=radio]:disabled {

diff --git a/packages/web-new/src/styles/styles.css b/packages/web-new/src/styles/styles.css
@@ -691,39 +691,30 @@ 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;
   align-items: center;
   justify-content: center;
 }
-.console__tabs .console-controllers .trash,
-.console__tabs .console-controllers .download {
-  padding: 1rem 0.5rem;
+.console__tabs .console-controllers .trash {
+  padding: 1rem;
   -webkit-appearance: none;
      -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 .trash:hover,
-.console__tabs .console-controllers .download:hover {
-  color: var(--clr-primary-900);
+.console__tabs .console-controllers .trash:hover {
+  color: var(--clr-primary-700);
   cursor: pointer;
 }
-.console__tabs .console-controllers .trash:disabled,
-.console__tabs .console-controllers .download:disabled {
-  color: var(--clr-neutral-300);
-  cursor: auto;
-}
-.console__tabs .console-controllers .download {
-  margin-right: 1rem;
-}
 .console__tabs .visualization {
   height: 100%;
   display: flex;
@@ -735,11 +726,9 @@ main .console {
           appearance: none;
   width: -moz-fit-content;
   width: fit-content;
-  padding: 0.5rem 1rem;
-  background-color: var(--clr-neutral-50);
-  border-top-right-radius: 5px;
-  border-top-left-radius: 5px;
-  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);
@@ -772,8 +761,13 @@ main .console {
 .console__tabs .visualization input[type=radio]:nth-child(6)::before {
   content: "Visualize";
 }
+.console__tabs .visualization input[type=radio]:hover {
+  background-color: var(--clr-primary-500);
+  color: var(--clr-neutral-50);
+}
 .console__tabs .visualization input[type=radio]:checked {
-  color: var(--clr-neutral-900);
+  color: var(--clr-neutral-50);
+  background-color: var(--clr-primary-500);
 }
 .console__tabs .visualization input[type=radio]:disabled {
   color: var(--clr-neutral-200);