From 1a9ef4a1d58cc1955384af577973da45baeaaeab Mon Sep 17 00:00:00 2001
From: Soufiane <soufiane@scinote.net>
Date: Thu, 29 Jun 2023 11:17:41 +0200
Subject: [PATCH] Update the Tasks screens for the Shareable-links feature
 [SCI-8649] (#5679)

Co-authored-by: Sboursen <dev.sboursen@gmail.com>
---
 app/assets/stylesheets/global_activities.scss |  2 +-
 .../my_modules/protocols/index.scss           | 10 ++++-
 .../my_modules/shared/layout_overrides.css    | 25 +++++++++++
 .../stylesheets/navigation/general.scss       |  1 +
 app/views/my_modules/_header.html.erb         | 43 +------------------
 app/views/my_modules/_header_actions.html.erb | 42 ++++++++++++++++++
 app/views/my_modules/activities.html.erb      |  2 +
 app/views/my_modules/archive.html.erb         |  4 +-
 app/views/my_modules/protocols.html.erb       |  2 +
 app/views/my_modules/results.html.erb         |  1 +
 config/initializers/assets.rb                 |  1 +
 11 files changed, 87 insertions(+), 46 deletions(-)
 create mode 100644 app/assets/stylesheets/my_modules/shared/layout_overrides.css
 create mode 100644 app/views/my_modules/_header_actions.html.erb

diff --git a/app/assets/stylesheets/global_activities.scss b/app/assets/stylesheets/global_activities.scss
index 189e4f45e..83b4e66a2 100644
--- a/app/assets/stylesheets/global_activities.scss
+++ b/app/assets/stylesheets/global_activities.scss
@@ -12,7 +12,7 @@
   padding: 0 15px;
 
   &.task-activities {
-    height: calc(100vh - 136px);
+    height: calc(100vh - var(--navbar-height) - var(--title-row-height) - 3rem);
     padding-top: 20px;
   }
 
diff --git a/app/assets/stylesheets/my_modules/protocols/index.scss b/app/assets/stylesheets/my_modules/protocols/index.scss
index 312d5bc46..342f9cd5c 100644
--- a/app/assets/stylesheets/my_modules/protocols/index.scss
+++ b/app/assets/stylesheets/my_modules/protocols/index.scss
@@ -22,6 +22,12 @@
       min-width: 5rem;
       width: 100%;
 
+      .view-mode {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
       .fas {
         margin-right: .5em;
       }
@@ -48,9 +54,9 @@
   .my-module-position-container {
     background-color: $color-white;
     box-shadow: $flyout-shadow;
-    margin: 1rem auto;
+    margin: 1rem auto 0 0;
     max-width: 900px;
-    padding: 1rem 0;
+    padding: 0 0 1rem;
     z-index: 2;
   }
 
diff --git a/app/assets/stylesheets/my_modules/shared/layout_overrides.css b/app/assets/stylesheets/my_modules/shared/layout_overrides.css
new file mode 100644
index 000000000..df5307e38
--- /dev/null
+++ b/app/assets/stylesheets/my_modules/shared/layout_overrides.css
@@ -0,0 +1,25 @@
+.sci--layout-navigation-breadcrumbs {
+  background-color: var(--sn-white);
+}
+
+.sci--layout-content {
+  background-color: var(--sn-white);
+
+  .content-pane {
+    .title-row {
+      background-color: var(--sn-white);
+    }
+
+    .header-actions {
+      background-color: var(--sn-white);
+      display: flex;
+      height: 3rem;
+      padding: 0rem 1rem;
+      align-items: center;
+      gap: 0.5rem;
+      align-self: stretch;
+      z-index: 205;
+      border-bottom: 1px solid var(--sn-light-grey);
+    }
+  }
+}
diff --git a/app/assets/stylesheets/navigation/general.scss b/app/assets/stylesheets/navigation/general.scss
index fa5e31ddb..e81a8b005 100644
--- a/app/assets/stylesheets/navigation/general.scss
+++ b/app/assets/stylesheets/navigation/general.scss
@@ -11,6 +11,7 @@ body.navigator-collapsed {
   --left-navigation-width: 192px;
   --navbar-height: calc(var(--top-navigation-height) + var(--breadcrumbs-navigation-height));
   --navigator-navigation-width: 240px;
+  --title-row-height: 4em;
   --top-navigation-height: 72px;
   display: grid;
   grid-template-areas: "left top top"
diff --git a/app/views/my_modules/_header.html.erb b/app/views/my_modules/_header.html.erb
index 3d349533e..a1e7cfadd 100644
--- a/app/views/my_modules/_header.html.erb
+++ b/app/views/my_modules/_header.html.erb
@@ -17,47 +17,6 @@
         </div>
       <% end %>
     </h1>
-    <div class="header-actions">
-      <div class="flex items-center uppercase text-bold">
-        <% if can_read_experiment?(@my_module.experiment) %>
-          <a class="p-4 border-b-4 border-transparent text-sn-grey hover:no-underline <%= "border-sn-blue" if is_module_protocols? %>"
-             href="<%= protocols_my_module_url(@my_module) %>"
-             title="<%= t("nav2.modules.steps") %>"
-          >
-            <%=t "nav2.modules.steps" %>
-          </a>
-          <a class="p-4 border-b-4 border-transparent text-sn-grey hover:no-underline <%= "border-sn-blue" if is_module_results? %>"
-             href="<%= results_my_module_url(@my_module) %>"
-             title="<%= t("nav2.modules.results") %>"
-          >
-            <%= t("nav2.modules.results") %>
-            <% @active_results_size = @my_module.results.where(archived:false).size %>
-            <% if @active_results_size.positive? %>
-              <sup class="navigation-results-counter"><%= @my_module.archived_branch? ? @my_module.results.size : @active_results_size %></sup>
-            <% end %>
-          </a>
-          <a class="p-4 border-b-4 border-transparent text-sn-grey hover:no-underline <%= "border-sn-blue" if is_module_activities? %>"
-             href="<%= activities_my_module_url(@my_module) %>"
-             title="<%= t("nav2.modules.activities") %>"
-          >
-            <%= t("nav2.modules.activities") %>
-          </a>
-        <% end %>
-
-        <div data-hook="secondary-navigation-tabs"></div>
-        <% if can_read_experiment?(@my_module.experiment) && !@my_module.archived_branch? %>
-          <a class="p-4 border-b-4 border-transparent text-sn-grey hover:no-underline <%= "border-sn-blue" if is_module_archive? %>"
-             href="<%= archive_my_module_url(@my_module) %>"
-             title="<%= t'nav2.modules.archive' %>"
-          >
-            <%= t("nav2.modules.archive") %>
-            <% @archived_results_size = @my_module.results.where(archived:true).size %>
-            <% if @archived_results_size.positive? %>
-              <sup class="navigation-results-counter"><%= @archived_results_size %></sup>
-            <% end %>
-          </a>
-        <% end %>
-      </div>
-    </div>
   </div>
 </div>
+<%= stylesheet_link_tag 'my_modules/shared/layout_overrides' %>
diff --git a/app/views/my_modules/_header_actions.html.erb b/app/views/my_modules/_header_actions.html.erb
new file mode 100644
index 000000000..d69893710
--- /dev/null
+++ b/app/views/my_modules/_header_actions.html.erb
@@ -0,0 +1,42 @@
+<div class="header-actions">
+  <div class="flex items-center uppercase text-bold">
+    <% if can_read_experiment?(@my_module.experiment) %>
+      <a class="p-4 border-b-4 border-transparent hover:no-underline capitalize <%= is_module_protocols? ? "text-sn-blue" : "text-sn-grey" %>"
+          href="<%= protocols_my_module_url(@my_module) %>"
+          title="<%= t("nav2.modules.steps") %>"
+      >
+        <%=t "nav2.modules.steps" %>
+      </a>
+      <a class="p-4 border-b-4 border-transparent hover:no-underline capitalize <%= is_module_results? ? "text-sn-blue" : "text-sn-grey" %>"
+          href="<%= results_my_module_url(@my_module) %>"
+          title="<%= t("nav2.modules.results") %>"
+      >
+        <%= t("nav2.modules.results") %>
+        <% @active_results_size = @my_module.results.where(archived:false).size %>
+        <% if @active_results_size.positive? %>
+          <sup class="navigation-results-counter"><%= @my_module.archived_branch? ? @my_module.results.size : @active_results_size %></sup>
+        <% end %>
+      </a>
+      <a class="p-4 border-b-4 border-transparent hover:no-underline capitalize <%= is_module_activities? ? "text-sn-blue" : "text-sn-grey" %>"
+          href="<%= activities_my_module_url(@my_module) %>"
+          title="<%= t("nav2.modules.activities") %>"
+      >
+        <%= t("nav2.modules.activities") %>
+      </a>
+    <% end %>
+
+    <div data-hook="secondary-navigation-tabs"></div>
+    <% if can_read_experiment?(@my_module.experiment) && !@my_module.archived_branch? %>
+      <a class="p-4 border-b-4 border-transparent hover:no-underline capitalize <%= is_module_archive? ? "text-sn-blue" : "text-sn-grey" %>"
+          href="<%= archive_my_module_url(@my_module) %>"
+          title="<%= t'nav2.modules.archive' %>"
+      >
+        <%= t("nav2.modules.archive") %>
+        <% @archived_results_size = @my_module.results.where(archived:true).size %>
+        <% if @archived_results_size.positive? %>
+          <sup class="navigation-results-counter"><%= @archived_results_size %></sup>
+        <% end %>
+      </a>
+    <% end %>
+  </div>
+</div>
diff --git a/app/views/my_modules/activities.html.erb b/app/views/my_modules/activities.html.erb
index b2a79a595..eef6bac91 100644
--- a/app/views/my_modules/activities.html.erb
+++ b/app/views/my_modules/activities.html.erb
@@ -13,6 +13,8 @@
 <% provide(:container_class, 'no-second-nav-container') %>
 <div class="content-pane flexible">
   <%= render partial: 'my_modules/header' %>
+  <!-- Header Actions -->
+  <%= render partial: 'my_modules/header_actions' %>
   <div class="global-activities-container container-flex task-activities">
       <div class="ga-top ">
         <%= render partial: "my_modules/activities/top_pane" %>
diff --git a/app/views/my_modules/archive.html.erb b/app/views/my_modules/archive.html.erb
index 5759ef0e8..7ee661db6 100644
--- a/app/views/my_modules/archive.html.erb
+++ b/app/views/my_modules/archive.html.erb
@@ -14,7 +14,9 @@
 <% provide(:container_class, 'no-second-nav-container') %>
 <div class="content-pane flexible">
   <%= render partial: 'my_modules/header' %>
-  <div class="row">
+  <!-- Header Actions -->
+  <%= render partial: 'my_modules/header_actions' %>
+  <div class="row mt-5">
     <% if @archived_results.any? %>
       <% @archived_results.each do |result| %>
         <div class="col-xs-3">
diff --git a/app/views/my_modules/protocols.html.erb b/app/views/my_modules/protocols.html.erb
index efa1a32b7..01cf1e211 100644
--- a/app/views/my_modules/protocols.html.erb
+++ b/app/views/my_modules/protocols.html.erb
@@ -40,6 +40,8 @@
 <div class="content-pane flexible my-modules-protocols-index" data-task-id="<%= @my_module.id %>">
   <%= render partial: 'my_modules/header' %>
   <div class="my-module-position-container">
+    <!-- Header Actions -->
+    <%= render partial: 'my_modules/header_actions' %>
     <!-- Details -->
     <div class="task-section task-information hidden">
       <div id="task-details" class="task-section-header">
diff --git a/app/views/my_modules/results.html.erb b/app/views/my_modules/results.html.erb
index 069634a81..ac3600f1c 100644
--- a/app/views/my_modules/results.html.erb
+++ b/app/views/my_modules/results.html.erb
@@ -16,6 +16,7 @@
 
 <div class="content-pane flexible">
   <%= render partial: 'my_modules/header' %>
+  <%= render partial: 'my_modules/header_actions' %>
   <div class="mt-5" id="results-toolbar">
     <% if can_manage_my_module?(@my_module) %>
       <div class="add-result-dropdown dropdown sci-dropdown">
diff --git a/config/initializers/assets.rb b/config/initializers/assets.rb
index 5c260f003..1c95a7bd0 100644
--- a/config/initializers/assets.rb
+++ b/config/initializers/assets.rb
@@ -124,6 +124,7 @@ Rails.application.config.assets.precompile += %w(results/result_texts/edit.js)
 Rails.application.config.assets.precompile += %w(shared/file_preview.js)
 Rails.application.config.assets.precompile += %w(users/shared/linkedin_sign_in_links.js)
 Rails.application.config.assets.precompile += %w(reports/template_helpers.js)
+Rails.application.config.assets.precompile += %w(my_modules/shared/layout_overrides.css)
 
 # Libraries needed for Handsontable formulas
 Rails.application.config.assets.precompile += %w(jquery.js)