Merge pull request #2495 from mlorb/ml-sci-4483-sci-4486

Add new task general layout and add notes section [SCI-4483] [SCI-4486]

app/assets/stylesheets/my_modules/protocols/index.scss

@@ -6,25 +6,51 @@
 @import "constants";
 @import "mixins";
 
-#manage-module-tags-modal {
+.content-pane.my-modules-protocols-index {
+  padding: 10px;
+}
 
+.task-section {
+  border-left: 3px solid $color-concrete;
+  margin: 16px 0;
+  padding-left: 16px;
+
+  .task-section-caret {
+    color: $color-volcano;
+    display: inline-block;
+    text-decoration: none;
+
+    .fas {
+      margin-right: 5px;
+    }
+
+    &:not(.collapsed) .fas {
+      @include rotate(90deg);
+    }
+  }
+
+  .task-section-title {
+    display: inline-block;
+
+    h2 {
+      margin-bottom: 8px;
+      margin-top: 11px;
+    }
+  }
+}
+
+#manage-module-tags-modal {
   .well {
     border: 0;
     box-shadow: none;
   }
 }
 
-.module-header {
+.task-details {
   display: inline-block;
   position: relative;
   width: 100%;
 
-  + .protocol-title {
-    font-size: 22px;
-    font-weight: bold;
-    margin: 10px 0 15px;
-  }
-
   .fas.block-icon {
     color: $color-silver;
     font-size: 18px;
@@ -126,25 +152,6 @@
     }
   }
 
-  .module-description {
-    float: left;
-    width: 100%;
-
-    .no-description {
-      font-size: 16px;
-    }
-
-    .title {
-      font-size: 22px;
-      font-weight: bold;
-      padding: 20px 0 5px;
-    }
-
-    .my-module-description-content {
-      margin-left: 10px;
-    }
-  }
-
   .module-tags {
     float: left;
     width: 100%;
@@ -250,10 +257,23 @@
             float: left;
             line-height: 36px;
           }
+        }
+      }
+    }
+  }
+}
 
+.task-notes {
+  display: inline-block;
+  position: relative;
+  width: 100%;
+
+  .no-description {
+    font-size: 16px;
   }
-      }
+
-    }
+  .task-notes-content {
+    margin-left: 10px;
   }
 }
 

app/views/my_modules/_description_form.html.erb

@@ -2,7 +2,7 @@
   <%= render partial: 'shared/tiny_mce_extra_buttons.html.erb' %>
   <div id="my_module_description_view"
        class="ql-editor tinymce-view"
-       data-placeholder="<%= t('my_modules.module_header.empty_description_edit_label') %>"
+       data-placeholder="<%= t('my_modules.notes.empty_description_edit_label') %>"
        data-tinymce-init="tinymce-my-module-description-<%= @my_module.id %>"
   ><%= custom_auto_link(@my_module.tinymce_render(:description),
                         simple_format: false,
@@ -11,7 +11,7 @@
   <%= f.tiny_mce_editor(:description,
                         id: :my_module_description_textarea,
                         class: 'hidden',
-                        placeholder:  t('my_modules.module_header.empty_description_edit_label'),
+                        placeholder:  t('my_modules.notes.empty_description_edit_label'),
                         hide_label: true,
                         value: sanitize_input(@my_module.tinymce_render(:description)),
                         autocomplete: 'off',

app/views/my_modules/_my_module_details.html.erb

@@ -16,8 +16,6 @@
     </div>
   </div>
 
-
-
   <div class="flex-block">
     <div class="flex-block-label">
       <span class="fas block-icon fa-tachometer-alt"></span>
@@ -42,24 +40,5 @@
   </div>
 </div>
 
-
-<div class="module-description">
-    <div class="title">
-      <%= t('my_modules.module_header.description_label') %>
-    </div>
-    <div class="my-module-description-content">
-      <% if can_manage_module?(@my_module) %>
-        <%= render partial: "description_form" %>
-      <% elsif @my_module.description.present? %>
-        <%= custom_auto_link(@my_module.tinymce_render(:description),
-                             simple_format: false,
-                             tags: %w(img),
-                             team: current_team) %>
-      <% else %>
-        <span class="no-description"><%= t('my_modules.module_header.no_description') %></span>
-      <% end %>
-    </div>
-</div>
-
 <!-- Manage tags modal -->
 <%= render partial: "my_modules/modals/manage_module_tags_modal", locals: { my_module: @my_module } %>

app/views/my_modules/_my_module_notes.html.erb

@@ -0,0 +1,14 @@
+<div class="task-notes">
+  <div class="task-notes-content">
+    <% if can_manage_module?(@my_module) %>
+      <%= render partial: "description_form" %>
+    <% elsif @my_module.description.present? %>
+      <%= custom_auto_link(@my_module.tinymce_render(:description),
+                           simple_format: false,
+                           tags: %w(img),
+                           team: current_team) %>
+    <% else %>
+      <span class="no-description"><%= t('my_modules.notes.no_description') %></span>
+    <% end %>
+  </div>
+</div>

app/views/my_modules/_my_module_protocol.html.erb

@@ -0,0 +1,35 @@
+<div class="protocol-status-container">
+  <div class="protocol-status-bar" data-role="protocol-status-bar">
+    <%= render partial: "my_modules/protocols/protocol_status_bar.html.erb" %>
+  </div>
+  <%= render partial: "my_modules/protocols/protocol_buttons.html.erb" %>
+  <% if can_manage_protocol_in_module?(@protocol) %>
+    <%= render partial: "my_modules/recent_protocol_dropdown.html.erb", locals: {protocol: @my_module.protocol}%>
+  <% end %>
+</div>
+
+<div class="row">
+  <div class="col-xs-12">
+    <div class="protocol-description-content">
+      <% if can_manage_module?(@my_module) %>
+        <%= render partial: "my_modules/protocols/protocol_description_form", locals:
+          {
+            protocol: @my_module.protocol,
+            update_url: update_protocol_description_my_module_path(@my_module, format: :json)
+          }
+        %>
+      <% elsif @my_module.protocol.description.present? %>
+        <%= custom_auto_link(@my_module.protocol.tinymce_render(:description),
+                             simple_format: false,
+                             tags: %w(img),
+                             team: current_team) %>
+      <% else %>
+        <span style="font-size: 16px"><%= t('my_modules.protocols.protocol_status_bar.no_description') %></span>
+      <% end %>
+    </div>
+  </div>
+</div>
+
+<div data-role="steps-container">
+  <%= render partial: "protocols/steps.html.erb" %>
+</div>

app/views/my_modules/protocols.html.erb

@@ -5,55 +5,62 @@
 <%= render partial: "shared/secondary_navigation" %>
 
 <div class="content-pane my-modules-protocols-index">
-  <span class="module-header">
+  <!-- Details -->
-    <%= render partial: "module_header" %>
+  <div class="task-section">
+    <span class="task-section-title">
+      <h2><%= t('my_modules.details.title') %></h2>
     </span>
-
+    <div class="task-details">
-  <div class="protocol-title">
+      <%= render partial: "my_module_details" %>
-    <%= t('Protocol') %>
-  </div>
-
-  <div class="protocol-status-container">
-    <div class="protocol-status-bar" data-role="protocol-status-bar">
-      <%= render partial: "my_modules/protocols/protocol_status_bar.html.erb" %>
-    </div>
-    <%= render partial: "my_modules/protocols/protocol_buttons.html.erb" %>
-    <% if can_manage_protocol_in_module?(@protocol) %>
-      <%= render partial: "my_modules/recent_protocol_dropdown.html.erb", locals: {protocol: @my_module.protocol}%>
-    <% end %>
-  </div>
-
-  <div class="row">
-    <div class="col-xs-12">
-      <div class="protocol-description-content">
-        <% if can_manage_module?(@my_module) %>
-          <%= render partial: "my_modules/protocols/protocol_description_form", locals:
-            {
-              protocol: @my_module.protocol,
-              update_url: update_protocol_description_my_module_path(@my_module, format: :json)
-            }
-          %>
-        <% elsif @my_module.protocol.description.present? %>
-          <%= custom_auto_link(@my_module.protocol.tinymce_render(:description),
-                               simple_format: false,
-                               tags: %w(img),
-                               team: current_team) %>
-        <% else %>
-          <span style="font-size: 16px"><%= t('my_modules.protocols.protocol_status_bar.no_description') %></span>
-        <% end %>
     </div>
   </div>
+  <!-- Notes -->
+  <div class="task-section">
+    <div class="task-section-header">
+      <a class="task-section-caret" role="button" data-toggle="collapse" href="#notes-container" aria-expanded="true" aria-controls="notes-container">
+        <i class="fas fa-caret-right"></i>
+        <span class="task-section-title">
+          <h2><%= t('my_modules.notes.title') %></h2>
+        </span>
+      </a>
+    </div>
+    <div class="collapse in" id="notes-container" aria-expanded="true">
+      <%= render partial: "my_module_notes" %>
+    </div>
+  </div>
+  <!-- Assigned items -->
+  <div class="task-section">
+    <div class="task-section-header">
+      <a class="task-section-caret collapsed" role="button" data-toggle="collapse" href="#assigned-items-container" aria-expanded="false" aria-controls="assigned-items-container">
+        <i class="fas fa-caret-right"></i>
+        <span class="task-section-title">
+          <h2><%= t('my_modules.assigned_items.title') %></h2>
+        </span>
+    </a>
+    </div>
+    <div class="collapse" id="assigned-items-container">
+      ...
+    </div>
+  </div>
+  <!-- Protocol -->
+  <div class="task-section">
+    <div class="task-section-header">
+      <a class="task-section-caret collapsed" role="button" data-toggle="collapse" href="#protocol-container" aria-expanded="false" aria-controls="protocol-container">
+        <i class="fas fa-caret-right"></i>
+        <div class="task-section-title">
+          <h2><%= t('my_modules.protocol.title') %></h2>
+        </div>
+      </a>
+    </div>
+    <div class="collapse" id="protocol-container">
+      <%= render partial: "my_module_protocol" %>
     </div>
-
-  <div data-role="steps-container">
-    <%= render partial: "protocols/steps.html.erb" %>
   </div>
 </div>
 
 <!-- URL for status bar refreshing -->
 <div class="hidden" data-role="protocol-status-bar-url" data-url="<%= protocol_status_bar_protocol_path(@protocol) %>"></div>
 
-
 <!-- Confirm link update modal -->
 <%= render partial: "my_modules/protocols/confirm_link_update_modal.html.erb" %>
 

config/locales/en.yml

@@ -593,6 +593,16 @@ en:
       can_add_user_to_project: "Can not add user to the project."
 
   my_modules:
+    details:
+      title: "Details"
+    notes:
+      title: "Notes"
+      no_description: "No task description"
+      empty_description_edit_label: "Click here to start writing notes"
+    assigned_items:
+      title: "Assigned items"
+    protocol:
+      title: "Protocol"
     buttons:
       complete: "Complete Task"
       uncomplete: "Uncomplete Task"
@@ -632,9 +642,6 @@ en:
       no_tags: "Add new Task Tags (optional)"
       manage_tags: "Manage tags"
       create_new_tag: "create new"
-      no_description: "No task description"
-      description_label: "Description"
-      empty_description_edit_label: "Click here to enter Task Description (optional)"
       recent_protocols_from_repository: "Recent protocols from the Repository"
     protocols:
       head_title: "%{project} | %{module} | Protocols"

features/protocol_step.feature

@@ -42,6 +42,7 @@ Scenario: Successful add new step to a task
 @javascript
 Scenario: Successful add new step to a task
   Given I'm on the Protocols page of a "qPCR" task
+  And I click "Protocol" link
   And I click first "New Step" link
   Then I fill in "PES" in "#step_name" field
   Then I fill in "zivali pa so se odpravile dalje po svetu." in "#step_description_textarea" rich text editor field