Merge branch 'develop' into remove-export-create

dradis · Jul 12, 2023 · ee88d20 · ee88d20
2 parents 81ed5f0 + 3d29d32
commit ee88d20
Show file tree

Hide file tree

Showing 22 changed files with 190 additions and 213 deletions.
diff --git a/CHANGELOG b/CHANGELOG
@@ -1,8 +1,7 @@
 [v#.#.#] ([month] [YYYY])
-  - [entity]:
-    - [future tense verb] [feature]
+  - Tylium: Consolidate sidebars
   - Upgraded gems:
-    - font-awesome-sass, rails
+    - font-awesome-sass, nokogiri, rails, sanitize
   - Bugs fixes:
     - QA: Enable @mentions and formatting toolbar for comments in QA show views
     - [entity]:

diff --git a/Gemfile b/Gemfile
@@ -101,7 +101,7 @@ gem 'RedCloth', '~> 4.3.2', require: 'redcloth'
 gem 'rinku'
 
 # html-pipeline dependency for html sanitization
-gem 'sanitize', '6.0.1'
+gem 'sanitize', '6.0.2'
 
 # SQLite3 DB driver
 gem 'sqlite3'

diff --git a/Gemfile.lock b/Gemfile.lock
@@ -302,14 +302,14 @@ GEM
     net-smtp (0.3.3)
       net-protocol
     nio4r (2.5.9)
-    nokogiri (1.15.2)
+    nokogiri (1.15.3)
       mini_portile2 (~> 2.8.2)
       racc (~> 1.4)
-    nokogiri (1.15.2-arm64-darwin)
+    nokogiri (1.15.3-arm64-darwin)
       racc (~> 1.4)
-    nokogiri (1.15.2-x86_64-darwin)
+    nokogiri (1.15.3-x86_64-darwin)
       racc (~> 1.4)
-    nokogiri (1.15.2-x86_64-linux)
+    nokogiri (1.15.3-x86_64-linux)
       racc (~> 1.4)
     notiffany (0.1.3)
       nenv (~> 0.1)
@@ -436,7 +436,7 @@ GEM
     ruby_audit (2.1.0)
       bundler-audit (~> 0.9.0)
     rubyzip (2.3.2)
-    sanitize (6.0.1)
+    sanitize (6.0.2)
       crass (~> 1.0.2)
       nokogiri (>= 1.12.0)
     sass-rails (6.0.0)
@@ -597,7 +597,7 @@ DEPENDENCIES
   rubocop
   ruby_audit
   rubyzip (>= 1.2.2)
-  sanitize (= 6.0.1)
+  sanitize (= 6.0.2)
   sass-rails (~> 6.0)
   selenium-webdriver
   shoulda-matchers (~> 3.1)

diff --git a/app/assets/javascripts/tylium/modules/sidebar.js b/app/assets/javascripts/tylium/modules/sidebar.js
@@ -5,6 +5,10 @@
     this.$navbarBrand = $sidebar
       .siblings('[data-behavior~=navbar]')
       .find('[data-behavior~=navbar-brand]');
+    this.$nodeTree = $sidebar.find($('[data-behavior~=node-tree-content]'));
+    this.$nodeTreeToggle = $sidebar.find(
+      $('[data-behavior~=toggle-node-tree]')
+    );
     this.storageKey = $sidebar.data('storage-key');
     this.$toggleLink = $sidebar.find($('[data-behavior~=sidebar-toggle]'));
     this.$viewContent = $sidebar.siblings('[data-behavior~=view-content]');
@@ -15,6 +19,7 @@
   Sidebar.prototype = {
     init: function () {
       this.toggle(this.isSidebarOpen());
+      this.toggleNodeTree(this.isNodeTreeOpen());
 
       var that = this;
 
@@ -27,6 +32,7 @@
               'data-behavior',
               'nodes-tree sidebar-toggle open-only'
             );
+            that.nodeTreeOpen();
           }
         }
 
@@ -37,6 +43,11 @@
         }
       });
 
+      this.$nodeTreeToggle.on('click', function (e) {
+        e.stopPropagation();
+        that.toggleNodeTree(!that.isNodeTreeOpen());
+      });
+
       if (window.innerWidth < that.minBreakpoint) {
         $('[data-behavior~=sidebar-node-link]').on('click', function () {
           that.close();
@@ -51,8 +62,8 @@
         that.isSidebarOpen() ? that.open() : that.close();
       });
     },
-    changeState: function (state) {
-      localStorage.setItem(this.storageKey, state);
+    changeState: function (key, state) {
+      localStorage.setItem(key, state);
       Turbolinks.clearCache();
     },
     close: function () {
@@ -68,7 +79,14 @@
         });
       }
 
-      this.changeState(false);
+      this.changeState(this.storageKey, false);
+    },
+    isNodeTreeOpen: function () {
+      if (JSON.parse(localStorage.getItem('node-tree-expanded')) === null) {
+        return true;
+      } else {
+        return JSON.parse(localStorage.getItem('node-tree-expanded'));
+      }
     },
     isSidebarOpen: function () {
       if (JSON.parse(localStorage.getItem(this.storageKey)) === null) {
@@ -96,7 +114,32 @@
         }
       }
 
-      this.changeState(true);
+      this.changeState(this.storageKey, true);
+    },
+    nodeTreeClose: function () {
+      this.$nodeTree.removeClass('show');
+      this.$nodeTreeToggle
+        .find($('[data-behavior~=toggle-icon]'))
+        .removeClass('fa-chevron-up')
+        .addClass('fa-chevron-down');
+      this.$nodeTree.on(
+        'hidden.bs.collapse',
+        this.changeState('node-tree-expanded', false)
+      );
+    },
+    nodeTreeOpen: function () {
+      this.$nodeTree.addClass('show');
+      this.$nodeTreeToggle
+        .find($('[data-behavior~=toggle-icon]'))
+        .removeClass('fa-chevron-down')
+        .addClass('fa-chevron-up');
+      this.$nodeTree.on(
+        'shown.bs.collapse',
+        this.changeState('node-tree-expanded', true)
+      );
+    },
+    toggleNodeTree: function (openNodeTree) {
+      openNodeTree ? this.nodeTreeOpen() : this.nodeTreeClose();
     },
     toggle: function (openSidebar) {
       openSidebar ? this.open() : this.close();

diff --git a/app/assets/stylesheets/tylium/base.scss b/app/assets/stylesheets/tylium/base.scss
@@ -169,13 +169,6 @@ select:not(select[multiple]) {
   font-weight: 300;
 }
 
-.sticky-top {
-  position: sticky !important;
-  top: $mainContentMargin;
-  margin-bottom: $mainContentMargin;
-  z-index: 2;
-}
-
 strong {
   font-weight: 600;
 }
@@ -220,10 +213,6 @@ strong {
   color: $primaryColor !important;
 }
 
-.top-5 {
-  top: 5rem !important;
-}
-
 ul {
   list-style: none;
 

diff --git a/app/assets/stylesheets/tylium/layout.scss b/app/assets/stylesheets/tylium/layout.scss
@@ -56,9 +56,14 @@
   position: relative;
 }
 
-.secondary-sidebar-content {
-  .sticky-top {
-    top: calc(#{$mainContentMargin} + 4.35rem);
+.sticky-top {
+  position: sticky !important;
+  top: 5rem;
+  margin-bottom: $mainContentMargin;
+  z-index: 2;
+
+  &.sticky-top-with-title {
+    top: 2rem;
   }
 }
 

diff --git a/app/assets/stylesheets/tylium/modules/_secondary_sidebar.scss b/app/assets/stylesheets/tylium/modules/_secondary_sidebar.scss
@@ -1,13 +1,8 @@
 .secondary-sidebar {
-  background: $sidebarActiveColor;
-  border-right: 1px solid $borderColor;
+  background-color: $sidebarActiveColor;
   color: $lightColor;
-  height: calc(100vh - 60px);
-  overflow: auto;
-  padding: 1rem;
-  position: sticky !important;
-  top: 0;
-  z-index: 2;
+  font-size: 0.9rem;
+  padding: 0.6rem 1rem;
 
   a {
     color: lighten($lightColor, 20%);
@@ -17,18 +12,14 @@
     }
   }
 
-  @media screen and (max-width: 1199px) {
-    width: 24%;
-  }
-
-  @media screen and (max-width: 991px) {
-    width: 31.8%;
-  }
-
   @include media-breakpoint-down(lg) {
     display: none;
   }
 
+  h5 {
+    font-size: 1rem;
+  }
+
   .header-inner {
     position: relative;
     padding-top: 0.5rem;
@@ -150,36 +141,15 @@
 
     .summary-link {
       color: $lightColor;
+      display: block;
+      max-width: 13.5rem;
 
       &:hover {
         color: $white;
       }
     }
   }
 
-  @media (min-width: 992px) {
-    &.sidebar-collapsed {
-      $collapsed-width: 1.75rem;
-
-      max-width: $collapsed-width;
-      padding: 0.75rem 0.5rem;
-
-      .inner-content,
-      .summary-link {
-        display: none;
-      }
-
-      & + .secondary-sidebar-content {
-        max-width: calc(100% - #{$collapsed-width});
-        flex: 0 0 100%;
-      }
-
-      .sidebar-toggle-icon {
-        transform: rotate(180deg);
-      }
-    }
-  }
-
   .sidebar-toggle-link {
     color: $lightColor;
   }