From cc34376253bdcb127954006bcae8dbc069319454 Mon Sep 17 00:00:00 2001 From: mlorb Date: Wed, 18 Apr 2018 14:40:53 +0200 Subject: [PATCH] update reports show page to work with new navigation --- app/assets/javascripts/reports/new.js.erb | 228 +----------------- app/assets/javascripts/sidebar.js.erb | 24 -- app/assets/stylesheets/reports.scss | 68 ++---- app/controllers/reports_controller.rb | 2 - app/views/reports/new.html.erb | 2 - .../reports/new/_report_navigation.html.erb | 98 +++----- config/locales/en.yml | 6 +- 7 files changed, 60 insertions(+), 368 deletions(-) diff --git a/app/assets/javascripts/reports/new.js.erb b/app/assets/javascripts/reports/new.js.erb index 50d3ba047..656f595db 100644 --- a/app/assets/javascripts/reports/new.js.erb +++ b/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
  • element for the specified report element. - * @param reportEl - The .report-element in the report. - * @return The corresponding sidebar
  • . - */ -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 element for the specified - * sidebar element. - * @param sidebarEl - The
  • 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
  • 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) { diff --git a/app/assets/javascripts/sidebar.js.erb b/app/assets/javascripts/sidebar.js.erb index 2d2558fbf..121639c68 100644 --- a/app/assets/javascripts/sidebar.js.erb +++ b/app/assets/javascripts/sidebar.js.erb @@ -252,30 +252,6 @@ function setupSidebarTree() { $(".tree li span.tree-link ").after("
    "); } -/** - * 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() { diff --git a/app/assets/stylesheets/reports.scss b/app/assets/stylesheets/reports.scss index 180cb7c48..bf2ae8481 100644 --- a/app/assets/stylesheets/reports.scss +++ b/app/assets/stylesheets/reports.scss @@ -8,27 +8,33 @@ /* New page navbar */ .navbar-report { - border-left: none; - border-top: none; - border-right: none; + background: $color-concrete; 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-bottom: 30px; + padding-left: 0; + 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); - max-width: 800px; - min-width: 230px; - min-height: 1200px; + color: $color-black; margin-left: auto; margin-right: auto; + margin-top: 50px; + max-width: 800px; + min-height: 1200px; + min-width: 230px; padding: 45px; } diff --git a/app/controllers/reports_controller.rb b/app/controllers/reports_controller.rb index 83cd7850e..b4daa5dd8 100644 --- a/app/controllers/reports_controller.rb +++ b/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 diff --git a/app/views/reports/new.html.erb b/app/views/reports/new.html.erb index 41c43a58f..21916d75f 100644 --- a/app/views/reports/new.html.erb +++ b/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" %>
    - -
    -
    - -
    - -
    - - - - <%= link_to "", class: "btn btn-primary", remote: true, id: "print-report" do %> - - - <% end %> - <%= form_tag generate_project_reports_path(@project, format: :pdf), method: :post, target: "_blank", class: "get-report-pdf-form" do %> -
    - <%= hidden_field_tag "html", "" %> - <%= link_to "", class: "btn btn-primary", remote: true, id: "get-report-pdf" do %> - - - <% end %> -
    - <% end %> - - <%= link_to "", class: "btn btn-primary", remote: true, id: "save-report-link" do %> - - - <% end %> - - <%= link_to project_reports_path(@project), id: "cancel-report-link", class: "btn btn-default" do %> - - - <% end %> - -
    +
    +
    + -<% end %> + + <%= link_to "", class: "btn btn-primary", remote: true, id: "print-report" do %> + + <% end %> + <%= form_tag generate_project_reports_path(@project, format: :pdf), method: :post, target: "_blank", class: "get-report-pdf-form" do %> +
    + <%= hidden_field_tag "html", "" %> + <%= link_to "", class: "btn btn-primary", remote: true, id: "get-report-pdf" do %> + + <% end %> +
    + <% end %> + + <%= link_to "", class: "btn btn-primary", remote: true, id: "save-report-link" do %> + + <% end %> + + <%= link_to project_reports_path(@project), id: "cancel-report-link", class: "btn btn-default pull-right" do %> + + <% end %> + +
    +
    diff --git a/config/locales/en.yml b/config/locales/en.yml index efb2a7dde..65800dd1c 100644 --- a/config/locales/en.yml +++ b/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_save: "Save report" + nav_pdf: "Download PDF" + 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: