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

Add new task general layout and add notes section [SCI-4483] [SCI-4486]
This commit is contained in:
mlorb 2020-03-31 13:18:54 +02:00 committed by GitHub
commit 404be29fc0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 158 additions and 95 deletions

View file

@ -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,13 +257,26 @@
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;
}
}
.my-module-recent-protocols {
flex-grow: 1;
height: 36px;

View file

@ -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',

View file

@ -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 } %>

View file

@ -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>

View file

@ -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>

View file

@ -5,55 +5,62 @@
<%= render partial: "shared/secondary_navigation" %>
<div class="content-pane my-modules-protocols-index">
<span class="module-header">
<%= render partial: "module_header" %>
</span>
<div class="protocol-title">
<%= 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>
<!-- Details -->
<div class="task-section">
<span class="task-section-title">
<h2><%= t('my_modules.details.title') %></h2>
</span>
<div class="task-details">
<%= render partial: "my_module_details" %>
</div>
</div>
<div data-role="steps-container">
<%= render partial: "protocols/steps.html.erb" %>
<!-- 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>
</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" %>

View file

@ -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"

View file

@ -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