Hera/add main layout

.rubocop_todo.yml

@@ -477,7 +477,7 @@ Style/EmptyLineBetweenDefs:
     - 'app/controllers/methodologies_controller.rb'
     - 'app/controllers/nodes_controller.rb'
     - 'app/controllers/sessions_controller.rb'
-    - 'app/helpers/tylium_helper.rb'
+    - 'app/helpers/hera_helper.rb'
     - 'app/models/concerns/node_properties.rb'
     - 'app/models/configuration.rb'
     - 'app/models/methodology.rb'
@@ -517,7 +517,7 @@ Style/EmptyLinesAroundClassBody:
 Style/EmptyLinesAroundMethodBody:
   Exclude:
     - 'app/controllers/projects_controller.rb'
-    - 'app/helpers/tylium_helper.rb'
+    - 'app/helpers/hera_helper.rb'
     - 'app/models/concerns/file_backed_model.rb'
     - 'app/models/concerns/has_fields.rb'
     - 'app/models/methodology.rb'
@@ -531,7 +531,7 @@ Style/EmptyLinesAroundModuleBody:
     - 'app/controllers/concerns/activity_tracking.rb'
     - 'app/controllers/concerns/authentication.rb'
     - 'app/helpers/revisions_helper.rb'
-    - 'app/helpers/tylium_helper.rb'
+    - 'app/helpers/hera_helper.rb'
     - 'app/models/concerns/file_backed_model.rb'
     - 'app/models/concerns/has_fields.rb'
     - 'app/models/concerns/revision_tracking.rb'
@@ -628,7 +628,7 @@ Style/IfUnlessModifier:
   Exclude:
     - 'Gemfile'
     - 'app/controllers/attachments_controller.rb'
-    - 'app/helpers/tylium_helper.rb'
+    - 'app/helpers/hera_helper.rb'
     - 'app/models/category.rb'
     - 'app/models/concerns/file_backed_model.rb'
     - 'app/models/methodology.rb'

CHANGELOG

@@ -1,4 +1,5 @@
 [v#.#.#] ([month] [YYYY])
+  - Hera: A new layout with incremental improvements. In this iteration we redesigned the navigation and increased workspace real estate.
   - Tags: Add custom ordering
   - Welcome Kit:
     - Add HTML report template

app/assets/config/manifest.js

@@ -1,9 +1,9 @@
 //= link application.css
 //= link setup/setup.css
-//= link tylium.css
+//= link hera.css
 
 //= link legacy.application.js
-//= link tylium.js
+//= link hera.js
 
 //= link_tree ../../javascript .js
 //= link_tree ../../../vendor/javascript .js

app/assets/javascripts/tylium.js → app/assets/javascripts/hera.js

@@ -2,7 +2,6 @@
 //= require jquery-ui.min
 //= require rails-ujs
 //= require turbolinks
-// require activestorage
 //= require jquery.form
 //= require jquery.textchange.min
 //= require jquery.textile
@@ -38,34 +37,31 @@
 //= require shared/datatable/tag
 //= require shared/datatable/validate
 
-//= require tylium/plugins/jquery.breadcrumbs
-//= require tylium/plugins/jquery.treemodal
-//= require tylium/plugins/jquery.treenav
+//= require hera/vendor/jquery.breadcrumbs
+//= require hera/vendor/jquery.treemodal
+//= require hera/vendor/jquery.treenav
 
-//= require tylium/behaviors
+//= require hera/behaviors
 //= require shared/behaviors
 
-//= require tylium/engines
-//= require tylium/keyboard_shortcuts
+//= require hera/engines
 
-//= require tylium/modules/configurations
-//= require tylium/modules/export
-//= require tylium/modules/fileupload
-//= require tylium/modules/issues
-//= require tylium/modules/liquid_async
-//= require tylium/modules/nodes
-//= require tylium/modules/search
-//= require tylium/modules/sidebar
-//= require tylium/modules/activities/poller
-// require tylium/modules/tour
-//= require tylium/modules/uploads
+//= require hera/modules/activities_poller
+//= require hera/modules/configurations
+//= require hera/modules/export
+//= require hera/modules/fileupload
+//= require hera/modules/issues
+//= require hera/modules/liquid_async
+//= require hera/modules/nodes
+//= require hera/modules/search
+//= require hera/modules/sidebar
+//= require hera/modules/try_pro
+//= require hera/modules/uploads
 
-//= require tylium/pages/activities
-//= require tylium/pages/boards
-//= require tylium/pages/issues
-//= require tylium/pages/nodes/new_form
-//= require tylium/pages/projects/boards_summary
-//= require tylium/pages/projects/issues_chart
-//= require tylium/pages/projects/summary
-//= require tylium/pages/qa
-//= require tylium/pages/upload
+//= require hera/pages/activities
+//= require hera/pages/boards
+//= require hera/pages/issues
+//= require hera/pages/nodes/new_form
+//= require hera/pages/projects
+//= require hera/pages/qa
+//= require hera/pages/upload

app/assets/javascripts/hera/behaviors.js

@@ -0,0 +1,60 @@
+document.addEventListener('turbolinks:load', function () {
+  // Activate jQuery.breadCrumbs
+  $('.breadcrumb').breadcrumbs({
+    tree: $('.main-sidebar .tree-navigation'),
+  });
+
+  // Activate jQuery.treeNav
+  $('.tree-navigation').treeNav();
+
+  // Activate jQuery.treeModal
+  $('.modal-node-selection-form').treeModal();
+
+  // Focus first input on modal window display.
+  $('.modal').on('shown.bs.modal', function () {
+    $(this).find('input:text:visible:first').focus();
+  });
+
+  // If project id is changed in project path
+  if (!/^\/projects\/1(\/|$)/.test(window.location.pathname)) {
+    $('[data-behavior~=project-teaser]').removeClass('d-none');
+  }
+
+  if ($('#activities-poller').length) {
+    if (!ActivitiesPoller.initialized) {
+      ActivitiesPoller.init($('#activities-poller'));
+      ActivitiesPoller.poll();
+    }
+  }
+
+  // Disable form buttons after submitting them.
+  $('form').submit(function (ev) {
+    if (
+      !$('input[type=submit]', this).is('[data-behavior~=skip-auto-disable]')
+    ) {
+      $('input[type=submit]', this)
+        .attr('disabled', 'disabled')
+        .val('Processing...');
+    }
+  });
+
+  // Toggle sidebar menu
+  $('[data-behavior~=sidebar]').each(function () {
+    new Sidebar($(this));
+  });
+
+  // Disable turbolinks for on-page anchor links (prevents page from jumping to top and allows smooth-scrolling)
+  if ($('a[href^="#"]').length) {
+    $('a[href^="#"]').each(function () {
+      if (!$(this).data('turbolinks')) {
+        $(this).attr('data-turbolinks', 'false');
+      }
+    });
+  }
+
+  // Smooth Scrolling - scroll to element on page load if hash present in current browser url
+  if (window.location.hash) {
+    const target = window.location.hash;
+    $(target)[0].scrollIntoView({ behavior: 'smooth' });
+  }
+});

app/assets/javascripts/tylium/engines.js.erb → app/assets/javascripts/hera/engines.js.erb

@@ -4,7 +4,7 @@ Dradis::Plugins::with_feature(:addon).sort_by(&:plugin_description).each do |plu
   begin
     plugin_path = ActiveSupport::Inflector.underscore(ActiveSupport::Inflector.deconstantize(plugin.name))
     %>
-    <%= require_asset "#{plugin_path}/manifests/tylium.js" %>
+    <%= require_asset "#{plugin_path}/manifests/hera.js" %>
     <% sleep 1 %>
     <%
   rescue Sprockets::FileNotFound;

app/assets/javascripts/tylium/modules/activities/poller.js.coffee → app/assets/javascripts/hera/modules/activities_poller.js.coffee

@@ -261,7 +261,7 @@ class @ActivitiesPoller
           $board.find('.board-tile-details-name').html(boardName)
       else if @_currentlyViewingBoard(boardId)
         document.title = boardName
-        $('#view-content h3').html(boardName)
+        $('[data-behavior~=view-content] h3').html(boardName)
         $('ol.breadcrumb li:nth-child(2)').html(boardName)
 
     if @controller == 'nodes' && @_currentlyViewingBoard(boardId)

app/assets/javascripts/hera/modules/issues.js

@@ -0,0 +1,4 @@
+//= require hera/modules/issues/evidence
+//= require hera/modules/issues/importer
+//= require hera/modules/issues/merge
+//= require hera/modules/issues/tag-input

app/assets/javascripts/hera/modules/search.js

@@ -0,0 +1,51 @@
+document.addEventListener('turbolinks:load', function () {
+  $('[data-behavior~=form-search]').hover(function () {
+    $(this).find('[data-behavior~=search-query]').focus();
+  });
+
+  $('[data-behavior~=search-button]').on('click', function (e) {
+    e.preventDefault();
+    submitSearch($(this).parents('form'));
+  });
+
+  $('[data-behavior~=search-query]').on('keypress', function (e) {
+    if (e.which === 13) {
+      submitSearch($(this).parents('form'));
+    }
+  });
+
+  if ($('body.search.index').length) {
+    const highlighter = new SearchWordHighlight();
+    const query = $('.form-search #q').val();
+    $('#tbl-search .search-matches').each(function () {
+      highlighter.highlight($(this), query);
+    });
+  }
+});
+
+function submitSearch($form) {
+  if ($form.find('[data-behavior~=search-query]').val() !== '') {
+    $form.submit();
+    $form.find('[data-behavior~=search-query]').val('Searching...');
+    return false;
+  } else {
+    $form
+      .find('[data-behavior~=search-query]')
+      .effect('shake', { direction: 'left', times: 2, distance: 5 }, 'fast')
+      .focus();
+  }
+}
+
+class SearchWordHighlight {
+  highlight(element, term) {
+    let src_str = element.html();
+    term = term.replace(/(\s+)/, '(<[^>]+>)*$1(<[^>]+>)*');
+    const pattern = new RegExp('(' + term + ')', 'gi');
+    src_str = src_str.replace(pattern, '<mark>$1</mark>');
+    src_str = src_str.replace(
+      /(<mark>[^<>]*)((<[^>]+>)+)([^<>]*<\/mark>)/,
+      '$1</mark>$2<mark>$4'
+    );
+    element.html(src_str);
+  }
+}

app/assets/javascripts/hera/modules/sidebar.js

@@ -0,0 +1,85 @@
+(function ($, window) {
+  class Sidebar {
+    constructor($sidebar) {
+      this.$sidebar = $sidebar;
+      this.storageKey = $sidebar.data('storage-key');
+      this.$toggleLink = $sidebar.find($('[data-behavior~=sidebar-toggle]'));
+      this.mobileBreakpoint = 992;
+
+      this.init();
+    }
+
+    init() {
+      this.toggle(this.isSidebarOpen());
+
+      const that = this;
+
+      this.$toggleLink.on('click', function () {
+        that.toggle(!that.isSidebarOpen());
+      });
+
+      $(window).on('resize', function () {
+        if ($(window).width() < that.mobileBreakpoint) {
+          that.close();
+        }
+        that.setViewContentMaxWidth();
+      });
+    }
+
+    changeState(key, state) {
+      localStorage.setItem(key, state);
+      Turbolinks.clearCache();
+    }
+
+    close() {
+      this.$sidebar
+        .removeClass('sidebar-expanded')
+        .addClass('sidebar-collapsed')
+        .attr('data-behavior', 'sidebar');
+
+      this.setViewContentMaxWidth();
+      this.changeState(this.storageKey, false);
+    }
+
+    isSidebarOpen() {
+      if (JSON.parse(localStorage.getItem(this.storageKey)) === null) {
+        return true;
+      } else {
+        return JSON.parse(localStorage.getItem(this.storageKey));
+      }
+    }
+
+    open() {
+      this.$sidebar
+        .removeClass('sidebar-collapsed')
+        .addClass('sidebar-expanded')
+        .attr('data-behavior', 'sidebar sidebar-expanded');
+
+      this.setViewContentMaxWidth();
+      this.changeState(this.storageKey, true);
+    }
+
+    setViewContentMaxWidth() {
+      const collapsedSidebarsWidth = 10;
+      const viewportWidth = $(window).width() - collapsedSidebarsWidth;
+      let sidebarsWidth = 0;
+
+      $('[data-behavior~=sidebar]').each(function () {
+        sidebarsWidth += $(this).width();
+      });
+
+      const limit =
+        $(window).width() < this.mobileBreakpoint
+          ? viewportWidth
+          : viewportWidth - sidebarsWidth;
+
+      $('[data-behavior~=view-content]').css('max-width', limit);
+    }
+
+    toggle(openSidebar) {
+      openSidebar ? this.open() : this.close();
+    }
+  }
+
+  window.Sidebar = Sidebar;
+})(jQuery, window);