Fixes #26028: Make fold-out menu css accessible everywhere in Rudder

Normation · Dec 6, 2024 · 257c925 · 257c925
1 parent 81bb05f
commit 257c925
Show file tree

Hide file tree

Showing 8 changed files with 150 additions and 133 deletions.
diff --git a/webapp/sources/rudder/rudder-web/src/main/elm/sources/Editor/ViewTechnique.elm b/webapp/sources/rudder/rudder-web/src/main/elm/sources/Editor/ViewTechnique.elm
@@ -449,7 +449,7 @@ view model =
 
                 TechniqueDetails technique state uiInfo editInfo ->
                   showTechnique model technique state uiInfo editInfo
-    classes = "rudder-template " ++ if model.genericMethodsOpen then "show-methods" else "show-techniques"
+    classes = "rudder-template " ++ if model.genericMethodsOpen then "show-right" else "show-left"
 
 
   in

diff --git a/webapp/sources/rudder/rudder-web/src/main/style/rudder/_rudder-variables.scss b/webapp/sources/rudder/rudder-web/src/main/style/rudder/_rudder-variables.scss
@@ -53,8 +53,13 @@ $rudder-txt-light     : #36474E;
 $rudder-txt-link      : #1295C2;
 
 // --- BACKGROUNDS
-$rudder-bg-gray : #F8F9FC;
+$rudder-bg-light-gray : #F8F9FC;
+$rudder-bg-gray       : #EEF1F9;
+$rudder-bg-dark-gray  : #E1E5EB;
 
 // --- BORDERS
 $rudder-border-color-default : #D6DEEF;
 $rudder-border-color-danger  : #AC2925;
+
+// --- BOX-SHADOWS
+$rudder-box-shadow-color: #DCE3EF;
diff --git a/webapp/sources/rudder/rudder-web/src/main/style/rudder/rudder-bootstrap.scss b/webapp/sources/rudder/rudder-web/src/main/style/rudder/rudder-bootstrap.scss
@@ -88,7 +88,7 @@ $modal-md: 600px;
   }
   &.btn-danger,
   &.btn-default {
-    background-color: $rudder-bg-gray;
+    background-color: $rudder-bg-light-gray;
     border: 1px solid $rudder-border-color-default;
     color: $rudder-txt-primary;
     .fa{

diff --git a/webapp/sources/rudder/rudder-web/src/main/style/rudder/rudder-hooks.scss b/webapp/sources/rudder/rudder-web/src/main/style/rudder/rudder-hooks.scss
@@ -83,7 +83,7 @@
 
   & > li{
     padding: 8px;
-    background-color: $rudder-bg-gray;
+    background-color: $rudder-bg-light-gray;
     border-radius: 5px;
     margin-bottom: 6px;
     font-size: 14px;

diff --git a/webapp/sources/rudder/rudder-web/src/main/style/rudder/rudder-menu.scss b/webapp/sources/rudder/rudder-web/src/main/style/rudder/rudder-menu.scss
@@ -35,6 +35,8 @@
 *************************************************************************************
 */
 
+@use 'rudder-variables' as *;
+
 @import "../../node_modules/bootstrap/scss/functions";
 @import "../../node_modules/bootstrap/scss/variables";
 @import "../../node_modules/bootstrap/scss/mixins";
@@ -101,7 +103,7 @@ $navbar-hover-color : #F4F4F4;
   height: 50px;
   border-radius: 0;
   background-color: #fff;
-  box-shadow: 4px 4px 10px #dce3efb0;
+  box-shadow: 4px 4px 10px $rudder-box-shadow-color;
 }
 
 .modal-open {

diff --git a/webapp/sources/rudder/rudder-web/src/main/style/rudder/rudder-node.scss b/webapp/sources/rudder/rudder-web/src/main/style/rudder/rudder-node.scss
@@ -101,7 +101,7 @@
   padding: 15px 15px 10px !important;
   margin: 0;
   font-size: 1.3rem;
-  background-color: $rudder-bg-gray;
+  background-color: $rudder-bg-light-gray;
   border-bottom: 1px solid $rudder-border-color-default;
 }
 
@@ -256,7 +256,7 @@ pre.display-keys{
   border-top-left-radius: 0;
   border: 1px solid $rudder-border-color-default;
   border-radius: 0px 4px 4px 4px;
-  background-color: $rudder-bg-gray;
+  background-color: $rudder-bg-light-gray;
   display: inline-block;
 }
 pre.display-keys > label:first-child{
@@ -297,7 +297,7 @@ pre.display-keys > label{
   & > .nav-item {
     & > button {
       transition-duration: .2s;
-      background-color: $rudder-bg-gray;
+      background-color: $rudder-bg-light-gray;
       border: 1px solid $rudder-border-color-default;
       padding: 6px 10px;
       color: $rudder-txt-secondary;

diff --git a/.../style/rudder/rudder-technique-editor.css → ...style/rudder/rudder-technique-editor.scss b/.../style/rudder/rudder-technique-editor.css → ...style/rudder/rudder-technique-editor.scss
@@ -1,6 +1,6 @@
 /*
 *************************************************************************************
-* Copyright 2020 Normation SAS
+* Copyright 2024 Normation SAS
 *************************************************************************************
 *
 * This file is part of Rudder.
@@ -35,6 +35,9 @@
 *************************************************************************************
 */
 
+// --- MODULES
+@use 'rudder-variables' as *;
+
 /* =====  GENERAL  ===== */
 .btn.btn-dsc.active{
   color: #fff !important;
@@ -152,12 +155,7 @@
 body > .container-fluid {
 	padding: 0 !important;
 }
-.col-techniques,
-.col-methods {
-  transition-duration: .15s;
-  transition-timing-function: ease;
-  overflow: hidden;
-}
+
 .label-checkbox{
   color: #041922;
   cursor: pointer;
@@ -198,98 +196,6 @@ body > .ng-toast {
 }
 
 /* ===== TECHNIQUES & METHODS ===== */
-.show-methods .col-techniques,
-.show-techniques .col-methods{
-  -ms-flex: 0 0 50px;
-  flex: 0 0 50px;
-  background-color: #dedada;
-  cursor: pointer;
-}
-.show-methods .col-techniques::before,
-.show-techniques .col-methods::before{
-  content: "";
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  opacity: 0;
-  transition-property: opacity;
-  transition-duration: .2s;
-  z-index: -1;
-  box-shadow: 2px 0px 8px 0px #00000010;
-}
-.show-methods .col-techniques:hover::before,
-.show-techniques .col-methods:hover::before{
-  opacity: 1;
-}
-.show-methods .col-techniques::after,
-.show-techniques .col-methods::after{
-  content: "\f0c9";
-  display: inline-block;
-  font: normal normal normal 14px/1 inherit;
-  font-family: "Font Awesome 5 Free";
-  font-size: inherit;
-  text-rendering: auto;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  line-height: 1;
-  font-weight: 900;
-  display: block;
-  position: absolute;
-  top: 15px;
-  right: 16.25px;
-  opacity: .5;
-  font-size: 20px;
-  transition-duration: .2s;
-  transition-property: opacity;
-  font-weight: 900;
-}
-.show-techniques .col-techniques:hover::after,
-.show-methods .col-methods:hover::after{
-  opacity: .8;
-}
-.col-techniques > .row,
-.col-methods > .row,
-.methods .method {
-  margin: 0;
-  transition-duration: .4s;
-  transition-property: transform, opacity;
-  transition-timing-function: ease;
-}
-.col-methods .filters-container{
-  flex-direction: column;
-  padding: 10px;
-}
-
-.col-methods .filters-container .input-group > .input-group-text:first-child{
-  border-top-left-radius : 4px;
-  border-bottom-left-radius : 4px;
-  background-color: #ededed;
-  border-color: #D6DEEF;
-}
-.col-methods .filters-container .input-group > .input-group-text + .form-control {
-  display: flex;
-  align-items: center;
-}
-
-.show-methods .col-techniques > div,
-.show-techniques .col-methods > div{
-  opacity: 0;
-}
-.col-techniques .input-group,
-.col-methods .input-group{
-  padding-top: 10px;
-  padding-bottom: 10px;
-  width: 100%;
-}
-.show-techniques .col-methods .input-group .btn{
-  margin-left: 15px;
-}
-.show-methods .col-techniques > div{
-  transform: translateX(-50px);
-  pointer-events: none;
-}
 .dndPlaceholder{
   margin: 10px 0;
   padding: 15px;
@@ -299,9 +205,6 @@ body > .ng-toast {
   background-color: #F8F9FC;
 }
 /* ===== TECHNIQUES ===== */
-.col-techniques{
-  box-shadow: 2px 0px 8px 0px #00000024;
-}
 .col-techniques label.btn{
   margin-bottom: 0;
 }
@@ -967,7 +870,7 @@ button.btn.clipboard:hover {
   padding-top: 10px;
 }
 
-.show-techniques .col-methods > div{
+.show-left .col-methods > div{
   transform: translateX(50px);
 }
 
@@ -1102,7 +1005,7 @@ ul li.hide-method {
   word-break: keep-all;
 }
 .method .cursorMove {
-  background-color: #e1e5eb;
+  background-color: $rudder-bg-dark-gray;
   padding: 0 10px;
   color: #04192299;
   display: flex;
@@ -1627,7 +1530,7 @@ ul li.hide-method {
 .gm-labels .gm-label.gm-label-name,
 .gm-labels .gm-label.gm-label-default{
   color: #041922;
-  background-color:#e1e5eb;
+  background-color: $rudder-bg-dark-gray;
 }