Merge pull request #538 from SergioCasCeb/remove-trash-icon-sergio

Removed trash icon from console
eclipse-thingweb · Dec 7, 2023 · 2d692b9 · 2d692b9
2 parents 3a3b678 + cc9fe96
commit 2d692b9
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 105 deletions.
diff --git a/packages/web-new/src/scripts/console.js b/packages/web-new/src/scripts/console.js
@@ -36,16 +36,11 @@ import { editorList, getEditorData } from './editor'
 //Main console elements
 const errorContainer = document.querySelector(".console__content #console-error")
 const errorTxt = document.querySelector(".console-error__txt")
-const eraseConsole = document.querySelector(".console__tabs .trash")
-export const visualizationOptions = document.querySelectorAll(".visualization__option")
+export const visualizationOptions = document.querySelectorAll(".visualizations__option")
 export const visualizationContainers = document.querySelectorAll(".console-view")
 
-eraseConsole.addEventListener("click", () => {
-    clearConsole()
-})
-
 /**
- * Unchecks all visualizatin btns and hiddes all visualization containers
+ * Unchecks all visualizations btns and hides all visualization containers
  */
 export function clearConsole() {
     visualizationContainers.forEach(container => {
@@ -59,7 +54,7 @@ export function clearConsole() {
 }
 
 /**
- * Clear the value of all the viisualization monaco editor
+ * Clear the value of all the monaco editors
  */
 function clearVisualizationEditors() {
     window.openApiEditor.getModel().setValue('')

diff --git a/packages/web-new/src/styles/_console.scss b/packages/web-new/src/styles/_console.scss
@@ -26,50 +26,17 @@
         justify-content: space-between;
         border-bottom: 2px solid var(--clr-primary-500);
         padding: 0 1rem;
-        height: fit-content;
 
-        .console-controllers {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-
-            .trash,
-            .download {
-                padding: 1rem .5rem;
-                appearance: none;
-                border: none;
-                background-color: var(--clr-neutral-50);
-                color: var(--clr-primary-500);
-                transition: color 250ms ease;
-
-                &:hover {
-                    color: var(--clr-primary-900);
-                    cursor: pointer;
-                }
-
-                &:disabled {
-                    color: var(--clr-neutral-300);
-                    cursor: auto;
-                }
-            }
-
-            .download {
-                margin-right: 1rem;
-            }
-        }
-
-        .visualization {
+        .visualizations {
             height: 100%;
             display: flex;
             align-items: center;
 
             input[type=radio] {
                 appearance: none;
                 width: fit-content;
-                padding: .5rem 1rem;
+                padding: 1rem;
                 background-color: var(--clr-neutral-50);
-                border-top-right-radius: 5px;
-                border-top-left-radius: 5px;
                 color: var(--clr-neutral-300);
                 font-family: var(--ff-primary);
                 font-size: var(--fs-p);

diff --git a/packages/web-new/src/styles/styles.css b/packages/web-new/src/styles/styles.css
@@ -692,53 +692,20 @@ main .console {
   justify-content: space-between;
   border-bottom: 2px solid var(--clr-primary-500);
   padding: 0 1rem;
-  height: -moz-fit-content;
-  height: fit-content;
 }
-.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;
-  -webkit-appearance: none;
-     -moz-appearance: none;
-          appearance: none;
-  border: none;
-  background-color: var(--clr-neutral-50);
-  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);
-  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 {
+.console__tabs .visualizations {
   height: 100%;
   display: flex;
   align-items: center;
 }
-.console__tabs .visualization input[type=radio] {
+.console__tabs .visualizations input[type=radio] {
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
   width: -moz-fit-content;
   width: fit-content;
-  padding: 0.5rem 1rem;
+  padding: 1rem;
   background-color: var(--clr-neutral-50);
-  border-top-right-radius: 5px;
-  border-top-left-radius: 5px;
   color: var(--clr-neutral-300);
   font-family: var(--ff-primary);
   font-size: var(--fs-p);
@@ -747,35 +714,35 @@ main .console {
   overflow: hidden;
   transition: all 250ms ease-in-out;
 }
-.console__tabs .visualization input[type=radio]::before {
+.console__tabs .visualizations input[type=radio]::before {
   width: 100%;
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
 }
-.console__tabs .visualization input[type=radio]:nth-child(1)::before {
+.console__tabs .visualizations input[type=radio]:nth-child(1)::before {
   content: "Validation";
 }
-.console__tabs .visualization input[type=radio]:nth-child(2)::before {
+.console__tabs .visualizations input[type=radio]:nth-child(2)::before {
   content: "OpenAPI";
 }
-.console__tabs .visualization input[type=radio]:nth-child(3)::before {
+.console__tabs .visualizations input[type=radio]:nth-child(3)::before {
   content: "AsyncAPI";
 }
-.console__tabs .visualization input[type=radio]:nth-child(4)::before {
+.console__tabs .visualizations input[type=radio]:nth-child(4)::before {
   content: "AAS AID";
 }
-.console__tabs .visualization input[type=radio]:nth-child(5)::before {
+.console__tabs .visualizations input[type=radio]:nth-child(5)::before {
   content: "Defaults";
 }
-.console__tabs .visualization input[type=radio]:nth-child(6)::before {
+.console__tabs .visualizations input[type=radio]:nth-child(6)::before {
   content: "Visualize";
 }
-.console__tabs .visualization input[type=radio]:checked {
+.console__tabs .visualizations input[type=radio]:checked {
   color: var(--clr-neutral-900);
 }
-.console__tabs .visualization input[type=radio]:disabled {
+.console__tabs .visualizations input[type=radio]:disabled {
   color: var(--clr-neutral-200);
   cursor: not-allowed;
 }