update reports show page to work with new navigation

app/assets/javascripts/reports/new.js.erb

@@ -5,7 +5,6 @@ $.fn.findWithSelf = function(selector) {
 };
 
 var REPORT_CONTENT = "#report-content";
-var SIDEBAR_PARENT_TREE = "#report-sidebar-tree";
 var ADD_CONTENTS_FORM_ID = "#add-contents-form";
 var SAVE_REPORT_FORM_ID = "#save-report-form";
 
@@ -31,12 +30,14 @@ var ignoreUnsavedWorkAlert;
    initializeSaveToPdf();
    initializeSaveReport();
    initializeAddContentsModal();
-   initializeSidebarNavigation();
    initializeUnsavedWorkDialog();
 
    $('.report-nav-link').each(function() {
      truncateLongString($(this), <%= Constants::NAME_TRUNCATION_LENGTH %>);
    });
+
+   // Automatically display the "Add content" modal
+   $('.new-element.initial').click();
  }
 
 /**
@@ -238,9 +239,6 @@ function initializeNewElement(newEl) {
           } else if (data.status == 200) {
             // Add elements
             addElements(el, data.responseJSON.elements);
-
-            // Update sidebar
-            initializeSidebarNavigation();
           }
         })
         .on("ajax:error", function(e, xhr, settings, error) {
@@ -486,140 +484,6 @@ function initializeUnsavedWorkDialog() {
   $(document).on('page:before-change', beforeUnload);
 }
 
-/**
- * SIDEBAR CODE
- */
-
- /**
-  * Get the sidebar <li> element for the specified report element.
-  * @param reportEl - The .report-element in the report.
-  * @return The corresponding sidebar <li>.
-  */
-function getSidebarEl(reportEl) {
-  var type = reportEl.data("type");
-  var scrollId = reportEl.data("scroll-id");
-  return $(SIDEBAR_PARENT_TREE).find(
-    "li" +
-    "[data-type='" + type + "']" +
-    "[data-scroll-id='" + scrollId + "']"
-  );
-}
-
-/**
- * Get the report <div.report-element> element for the specified
- * sidebar element.
- * @param sidebarEl - The <li> sidebar element.
- * @return The corresponding report element.
- */
-function getReportEl(sidebarEl) {
-  var type = sidebarEl.data("type");
-  var scrollId = sidebarEl.data("scroll-id");
-  return $(REPORT_CONTENT).find(
-    "div.report-element" +
-    "[data-type='" + type + "']" +
-    "[data-scroll-id='" + scrollId + "']"
-  );
-}
-
-/**
- * Initialize the sidebar navigation pane.
- */
-function initializeSidebarNavigation() {
-  var reportContent = $(REPORT_CONTENT);
-  var treeParent = $(SIDEBAR_PARENT_TREE);
-
-  // Remove existing contents (also remove click listeners)
-  treeParent.find(".report-nav-link").off("click");
-  treeParent.children().remove();
-
-  // Re-populate the sidebar
-  _.each(reportContent.children(".report-element"), function(child) {
-    var li = initSidebarElement($(child));
-    li.appendTo(treeParent);
-  });
-
-  // Add click listener on all links
-  treeParent.find(".report-nav-link").click(function(e) {
-    var el = $(this).closest("li");
-    scrollToElement(el);
-
-    e.preventDefault();
-    e.stopPropagation();
-    return false;
-  });
-
-  // Call to sidebar function to re-initialize tree functionality
-  setupSidebarTree();
-}
-
-/**
- * Recursive call to initialize sidebar elements.
- * @param reportEl - The report element for which to
- * generate the sidebar.
- * @return A <li> jQuery element containing sidebar entry.
- */
-function initSidebarElement(reportEl) {
-  var elChildrenContainer = reportEl.children(".report-element-children");
-  var type = reportEl.data("type");
-  var name = reportEl.data("name");
-  var scrollId = reportEl.data("scroll-id");
-  var iconClass = reportEl.data("icon-class");
-
-  // Generate list element
-  var newLi = $(document.createElement("li"));
-  newLi
-  .attr("data-type", type)
-  .attr("data-scroll-id", scrollId);
-
-  var newSpan = $(document.createElement("span"));
-  newSpan.appendTo(newLi);
-  var newI = $(document.createElement("i"));
-  newI.appendTo(newSpan);
-  var newHref = $(document.createElement("a"));
-  newHref
-  .attr("href", "")
-  .addClass("report-nav-link")
-  .text(name)
-  .appendTo(newSpan);
-  var newIcon = $(document.createElement("span"));
-  newIcon.addClass(iconClass).prependTo(newHref);
-
-  if (elChildrenContainer.length && elChildrenContainer.length > 0) {
-    var elChildren = elChildrenContainer.children(".report-element");
-    if (elChildren.length && elChildren.length > 0) {
-      var newUl = $(document.createElement("ul"));
-      newUl.appendTo(newLi);
-
-      _.each(elChildren, function(child) {
-        var li = initSidebarElement($(child));
-        li.appendTo(newUl);
-      });
-    }
-  }
-
-  return newLi;
-}
-
-/**
- * Scroll to the specified element in the report.
- * @param sidebarEl - The sidebar element.
- */
-function scrollToElement(sidebarEl) {
-  var el = getReportEl(sidebarEl);
-
-  if (el.length && el.length == 1) {
-    var content = $("body");
-    content.scrollTo(
-      el,
-      {
-        axis: 'y',
-        duration: 500,
-        offset: -150
-      }
-    );
-  }
-}
-
 /**
  * INDIVIDUAL ELEMENTS SORTING/MODIFYING FUNCTIONS
  */
@@ -683,8 +547,6 @@ function sortWholeReport(asc) {
     sortElementChildren($(el), asc, true);
   });
 
-  // Reinitialize sidebar
-  initializeSidebarNavigation();
   animateLoading(false);
 }
 
@@ -734,22 +596,6 @@ function sortElementChildren(el, asc, recursive) {
       sortElementChildren($(child), asc, true);
     }
   });
-
-  // Update sidebar
-  var prevEl = null;
-  _.each(children, function(child) {
-    var sidebarEl = getSidebarEl($(child));
-    if (sidebarEl.length && sidebarEl.length == 1) {
-      var sidebarParent = sidebarEl.closest("ul");
-      sidebarEl.detach();
-      if (prevEl === null) {
-        sidebarParent.prepend(sidebarEl);
-      } else {
-        prevEl.after(sidebarEl);
-      }
-      prevEl = sidebarEl;
-    }
-  });
 }
 
 /**
@@ -843,46 +689,6 @@ function moveElement(el, up) {
     !nextNewEl.hasClass("new-element")) {
     return;
   }
-
-  var sidebarEl;
-  if (up) {
-    var prevEl = prevNewEl.prev();
-    if (!prevEl.length || !prevEl.hasClass("report-element")) {
-      return;
-    }
-
-    // Move sidebar element up
-    sidebarEl = getSidebarEl(el);
-    var sidebarPrev = sidebarEl.prev();
-    sidebarEl.detach();
-    sidebarPrev.before(sidebarEl);
-
-    el.detach();
-    nextNewEl.detach();
-    prevEl.before(el);
-    prevEl.before(nextNewEl);
-    updateElementControls(prevEl);
-
-
-  } else {
-    var nextEl = nextNewEl.next();
-    if (!nextEl.length || !nextEl.hasClass("report-element")) {
-      return;
-    }
-
-    // Move sidebar element up
-    sidebarEl = getSidebarEl(el);
-    var sidebarNext = sidebarEl.next();
-    sidebarEl.detach();
-    sidebarNext.after(sidebarEl);
-
-    prevNewEl.detach();
-    el.detach();
-    nextEl.after(el);
-    nextEl.after(prevNewEl);
-    updateElementControls(nextEl);
-  }
-
   updateElementControls(el);
 }
 
@@ -905,10 +711,6 @@ function removeElement(el) {
 
   // TODO Remove event listeners
 
-  // Remove sidebar entry
-  var sidebarEl = getSidebarEl(el);
-  sidebarEl.remove();
-
   prevNewEl.remove();
   el.remove();
 
@@ -933,10 +735,6 @@ function removeResultCommentsElement(el) {
 
   // TODO Remove event listeners
 
-  // Remove sidebar entry
-  var sidebarEl = getSidebarEl(el);
-  sidebarEl.remove();
-
   // Remove element, show the new element container
   el.remove();
   parent.children(".new-element").removeClass("hidden");
@@ -1125,26 +923,6 @@ function constructElementContentsJson(el) {
   return jsonEl;
 }
 
-/**
-  * Binds listeners to sidebar
-  * that truncate long strings
-  */
-function initializeReportSidebartruncation() {
-  var target = document.getElementById("report-sidebar-tree");
-  var observer = new MutationObserver(
-    function() {
-      $.each($("a.report-nav-link"),
-               function(){
-                 truncateLongString($(this),
-                                    <%= Constants::NAME_TRUNCATION_LENGTH %>);
-               });
-    }
-  );
-  var config = { childList: true };
-
-  observer.observe(target, config);
-}
-
 $(document).ready(function() {
   // Check if we are actually at new report page
   if ($(REPORT_CONTENT).length) {

app/assets/javascripts/sidebar.js.erb

@@ -252,30 +252,6 @@ function setupSidebarTree() {
   $(".tree li span.tree-link ").after("<div class='border-custom'></div>");
 }
 
-/**
- * Initialize the show/hide toggling of sidebar.
- */
-function initializeSidebarToggle() {
-  var wrapper = $("#wrapper");
-  var toggled = sessionIsSidebarToggled();
-
-  if (toggled || toggled === null && $(window).width() <
-      <%= Constants::SCREEN_WIDTH_LARGE %>) {
-    wrapper.addClass("no-animation");
-    wrapper.addClass("toggled");
-    // Cause reflow of the wrapper element
-    wrapper[0].offsetHeight;
-    wrapper.removeClass("no-animation");
-    $(".navbar-secondary").addClass("navbar-without-sidebar");
-  }
-
-  $(".toggle-sidebar-link").on("click", function() {
-    $("#wrapper").toggleClass("toggled");
-    sessionToggleSidebar();
-    $(".navbar-secondary").toggleClass("navbar-without-sidebar", sessionIsSidebarToggled());
-    return false;
-  });
-}
 
 // Resize the sidebar to accomodate to the page size
 function resizeSidebarContents() {

app/assets/stylesheets/reports.scss

@@ -8,27 +8,33 @@
 
 /* New page navbar */
 .navbar-report {
-  border-left: none;
+  background: $color-concrete;
-  border-top: none;
-  border-right: none;
   border-bottom: 4px solid $color-silver;
-  background: $color-concrete !important;
+  border-left: 0;
+  border-right: 0;
+  border-top: 0;
   margin-bottom: 0;
   min-width: 320px;
   padding: 0 15px;
-  z-index: 500;
+  padding-right: 100px;
   position: fixed;
   width: 100%;
+  z-index: 500;
 
   div.row {
     margin-right: 0;
   }
 
   #report-menu {
+    margin: 15px 0;
 
     form {
       display: inline-block;
     }
+
+    .form-group {
+      margin-bottom: 0;
+    }
   }
 
   & > div.row {
@@ -54,43 +60,6 @@ label {
   }
 }
 
-/* New page sidebar */
-.report-sidebar-wrapper {
-  background-color: $color-white !important;
-}
-
-// Some additional styling on the treeview
-.report-tree {
-  li {
-    padding: 0 0 0 15px;
-
-    a.report-nav-link:visited {
-      text-decoration: none;
-    }
-    a.report-nav-link:hover {
-      text-decoration: none;
-    }
-    [data-type='step']:not(.parent_li) {
-      padding-left: 27px;
-    }
-  }
-}
-.report-sidebar-panel-description {
-  margin: 10px 10px 0 10px;
-}
-
-.report-item-elements {
-  margin-top: 10px !important;
-  margin-left: 15px !important;
-
-  li {
-    margin: 5px 5px 5px 15px;
-  }
-
-  ul {
-    padding-left: 15px !important;
-  }
-}
 
 /**
  * Global fix for handsontable
@@ -115,19 +84,20 @@ label {
 .report-container {
   overflow-x: auto;
   overflow-y: auto;
-  padding-top: 30px;
+  padding-left: 0;
-  padding-bottom: 30px;
+  width: auto;
 }
 
 #report-content {
-  color: $color-black;
+  @include box-shadow(0 0 58px -10px $color-black);
   background: $color-white;
-  @include box-shadow(0px 0px 58px -10px $color-black);
+  color: $color-black;
-  max-width: 800px;
-  min-width: 230px;
-  min-height: 1200px;
   margin-left: auto;
   margin-right: auto;
+  margin-top: 50px;
+  max-width: 800px;
+  min-height: 1200px;
+  min-width: 230px;
   padding: 45px;
 }
 

app/controllers/reports_controller.rb

@@ -49,8 +49,6 @@ class ReportsController < ApplicationController
     result_contents
   )
 
-  layout 'fluid'
-
   # Index showing all reports of a single project
   def index
   end

app/views/reports/new.html.erb

@@ -1,9 +1,7 @@
 <% provide(:head_title, t("projects.reports.new.head_title", project: h(@project.name)).html_safe) %>
 <% provide(:body_class, "report-body") %>
-<% provide(:sidebar_wrapper_class, "report-sidebar-wrapper") %>
 <% provide(:container_class, "report-container") %>
 
-<%= render partial: "reports/new/report_sidebar" %>
 <%= render partial: "reports/new/report_navigation" %>
 
 <div

app/views/reports/new/_report_navigation.html.erb

@@ -1,65 +1,37 @@
-<% content_for :secondary_navigation do %>
+<div class="navbar-report">
-
+  <div class="center-block" id="report-menu">
-    <div class="navbar-report">
-      <div>
-        <ul class="breadcrumb" style="margin-left: 15px;">
-          <li>
-            <% if can_read_team?(@project.team) %>
-              <a id="team-link"
-                 href="<%= projects_path :team => @project.team.id %>">
-            <% end %>
-            <span class="hidden-sm hidden-md hidden-lg">Org</span>
-            <span class="hidden-xs"><%= @project.team.name %></span>
-            <% if can_read_team?(@project.team) %>
-              </a>
-            <% end %>
-          </li>
-            <li class="active">
-              <span class="hidden-sm hidden-md hidden-lg">Project</span>
-              <span class="hidden-xs"><%= @project.name %></span>
-            </li>
-          </ul>
-      </div>
-
-      <div class="center-block" id="report-menu">
-
-        <div class="dropdown" id="sort-report">
-          <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
-            <span class="glyphicon glyphicon-sort visible-xs-inline"></span>
-            <span class="hidden-xs"><%= t'projects.reports.new.nav_sort_by' %></span>
-            <span class="caret"></span>
-          </button>
-          <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
-            <li><a href="#" data-sort="desc"><%= t('projects.reports.new.nav_sort_desc') %></a></li>
-            <li><a href="#" data-sort="asc"><%= t('projects.reports.new.nav_sort_asc') %></a></li>
-          </ul>
-        </div>
-
-        <%= link_to "", class: "btn btn-primary", remote: true, id: "print-report" do %>
-          <span class="glyphicon glyphicon-print"></span>
-          <span class="hidden-xs"><%=t "projects.reports.new.nav_print" %></span>
-        <% end %>
-        <%= form_tag generate_project_reports_path(@project, format: :pdf), method: :post, target: "_blank", class: "get-report-pdf-form" do %>
-          <div class="form-group">
-          <%= hidden_field_tag "html", "" %>
-          <%= link_to "", class: "btn btn-primary", remote: true, id: "get-report-pdf" do %>
-            <span class="glyphicon glyphicon-save-file"></span>
-            <span class="hidden-xs"><%=t "projects.reports.new.nav_pdf" %></span>
-          <% end %>
-          </div>
-        <% end %>
-
-        <%= link_to "", class: "btn btn-primary", remote: true, id: "save-report-link" do %>
-          <span class="glyphicon glyphicon-ok"></span>
-          <span class="hidden-xs"><%=t "projects.reports.new.nav_save" %></span>
-        <% end %>
-
-        <%= link_to project_reports_path(@project), id: "cancel-report-link", class: "btn btn-default" do %>
-          <span class="glyphicon glyphicon-remove"></span>
-          <span class="hidden-xs"><%=t "projects.reports.new.nav_close" %></span>
-        <% end %>
-
-      </div>
 
+    <div class="dropdown" id="sort-report">
+      <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
+        <span class="glyphicon glyphicon-sort visible-xs-inline"></span>
+        <span class="hidden-xs"><%= t'projects.reports.new.nav_sort_by' %></span>
+        <span class="caret"></span>
+      </button>
+      <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
+        <li><a href="#" data-sort="desc"><%= t('projects.reports.new.nav_sort_desc') %></a></li>
+        <li><a href="#" data-sort="asc"><%= t('projects.reports.new.nav_sort_asc') %></a></li>
+      </ul>
     </div>
-<% end %>
+
+    <%= link_to "", class: "btn btn-primary", remote: true, id: "print-report" do %>
+      <span class="hidden-xs"><%=t "projects.reports.new.nav_print" %></span>
+    <% end %>
+    <%= form_tag generate_project_reports_path(@project, format: :pdf), method: :post, target: "_blank", class: "get-report-pdf-form" do %>
+      <div class="form-group">
+      <%= hidden_field_tag "html", "" %>
+      <%= link_to "", class: "btn btn-primary", remote: true, id: "get-report-pdf" do %>
+        <span class="hidden-xs"><%=t "projects.reports.new.nav_pdf" %></span>
+      <% end %>
+      </div>
+    <% end %>
+
+    <%= link_to "", class: "btn btn-primary", remote: true, id: "save-report-link" do %>
+      <span class="hidden-xs"><%=t "projects.reports.new.nav_save" %></span>
+    <% end %>
+
+    <%= link_to project_reports_path(@project), id: "cancel-report-link", class: "btn btn-default pull-right" do %>
+      <span class="hidden-xs"><%=t "projects.reports.new.nav_close" %></span>
+    <% end %>
+
+  </div>
+</div>

config/locales/en.yml

@@ -306,8 +306,8 @@ en:
         head_title: "%{project} | New report"
         nav_title: "Report for: "
         nav_print: "Print"
-        nav_pdf: "Export to PDF"
+        nav_pdf: "Download PDF"
-        nav_save: "Save report"
+        nav_save: "Save"
         nav_close: "Close"
         nav_sort_by: "Sort report by"
         nav_sort_asc: "Oldest on top"
@@ -323,7 +323,7 @@ en:
             tasks_tab: "Choose tasks"
             content_tab: "Choose content"
           project_contents_inner:
-            instructions: "Select projects/experiment/tasks to include in the report"
+            instructions: "Select experiments/tasks to include in the report"
             no_modules: "The project contains no tasks"
             no_module_group: "No workflow"
           module_contents: