scinote-eln/scinote-web
1
1
Fork 0
mirror of https://github.com/scinote-eln/scinote-web.git synced 2025-09-08 14:15:35 +08:00
Code Issues Projects Releases Packages Wiki Activity

Add collapsing task status buttons [SCI-6721] (#4060)

Browse source
This commit is contained in:
artoscinote 2022-04-28 14:12:08 +02:00 • committed by GitHub
parent 6eaa8506e8
commit 2515ed5a32
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 203 additions and 107 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
app/assets/javascripts/my_modules/protocols.js
View file

@ -440,7 +440,13 @@ function initImport() {
});
}
function initDetailsDropdown() {
$('#task-details .task-section-caret').on('click', function() {
if (!$('.task-details').hasClass('collapsing')) {
$(this).closest('#task-details').toggleClass('expanded');
}
});
}
function initProtocolSectionOpenEvent() {
$('#protocol-container').on('shown.bs.collapse', function() {
@ -465,6 +471,7 @@ function init() {
refreshProtocolStatusBar();
initImport();
initProtocolSectionOpenEvent();
initDetailsDropdown();
}
init();

104
app/assets/stylesheets/my_modules/protocols/index.scss
View file

@ -507,26 +507,53 @@
}
.task-information {
column-gap: 1em;
display: grid;
grid-template-columns: auto minmax(max-content, 18em);
.task-section-header {
grid-column: 1 / span 1;
align-items: center;
display: flex;
flex-direction: row-reverse;
justify-content: space-between;
width: 100%;
}
.task-details {
grid-column: 1 / span 1;
grid-row: 2 / span 1;
.btn {
min-width: 230px;
}
.task-flows {
grid-column: 2 / span 1;
grid-row: 1 / span 2;
align-items: center;
display: flex;
justify-content: space-between;
#dropdownTaskFlowList {
min-width: 230px;
}
.status-label {
@include font-small;
flex-basis: 40%;
font-weight: bold;
margin-right: .5em;
text-align: right;
.status-note {
font-weight: normal;
}
}
.status-flow-dropdown {
&:last-child {
margin-right: 0;
}
}
.status-buttons {
align-items: flex-end;
display: flex;
flex-grow: 1;
:not(:first-child):not(.dropdown-menu) {
margin-left: .5em;
}
}
.status-transition-error {
@ -541,7 +568,62 @@
}
}
@media (max-width: 700px) {
.task-information .expanded {
align-items: flex-start;
height: 50px;
.task-flows,
.status-label,
.status-buttons {
display: block;
max-width: 230px;
}
.status-label {
margin: 0;
text-align: left;
}
.status-flow-dropdown {
margin: 0;
}
.status-buttons :not(:first-child):not(.dropdown-menu) {
margin-left: 0;
margin-top: .5em;
}
.modal .modal-footer .btn {
margin-top: 0;
}
}
@media (max-width: 810px) {
.task-information .task-section-header {
display: block;
.task-flows,
.status-label,
.status-buttons {
display: block;
max-width: 230px;
}
.status-label {
margin: 0;
text-align: left;
}
.status-buttons :not(:first-child):not(.dropdown-menu) {
margin-left: 0;
margin-top: .5em;
}
}
.task-information .expanded {
height: auto;
}
.content-pane.my-modules-protocols-index {
padding: 10px 0 0 0;
}

53
app/views/my_modules/protocols.html.erb
View file

@ -40,35 +40,38 @@
<div class="content-pane my-modules-protocols-index" data-task-id="<%= @my_module.id %>">
<div class="my-module-position-container">
<!-- Details -->
<div class="task-section task-information">
<div class="task-section-header">
<span id="taskDetailsLabel" class="task-section-title">
<h2>
<%= t('my_modules.details.title') %>
</h2>
</span>
<span class="dropdown task-details-dropdown-container">
<a href="#"
id="taskDetailsButton"
class="block-icon task-details-button dropdown-toggle"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="true">
<i class="fas fa-info-circle"></i>
<div class="task-section task-information hidden">
<div id="task-details" class="task-section-header">
<div class="task-flows">
<%= render partial: 'my_modules/status_flow/task_flow_button', locals: { my_module: @my_module } if @my_module.my_module_status_flow %>
</div>
<div class="task-details-container">
<a class="task-section-caret collapsed" role="button" data-toggle="collapse" href="#details-container" aria-expanded="false" aria-controls="details-container">
<i class="fas fa-caret-right"></i>
<span id="taskDetailsLabel" class="task-section-title">
<h2>
<%= t('my_modules.details.title') %>
</h2>
</span>
</a>
<div class="dropdown-menu" aria-labelledby="taskDetailsButton">
<%= render partial: "module_header_details_popover.html.erb" %>
</div>
</span>
<span class="dropdown task-details-dropdown-container">
<a href="#"
id="taskDetailsButton"
class="block-icon task-details-button dropdown-toggle"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="true">
<i class="fas fa-info-circle"></i>
</a>
<div class="dropdown-menu" aria-labelledby="taskDetailsButton">
<%= render partial: "module_header_details_popover.html.erb" %>
</div>
</span>
</div>
</div>
<div class="task-details">
<div id="details-container" class="task-details collapse">
<%= render partial: 'my_module_details' %>
</div>
<div class="task-flows">
<%= render partial: 'my_modules/status_flow/task_flow_button', locals: { my_module: @my_module } if @my_module.my_module_status_flow %>
</div>
</div>
<!-- Notes -->
<div class="task-section hidden">

144
app/views/my_modules/status_flow/_task_flow_button.html.erb
View file

@ -1,75 +1,79 @@
<% status = my_module.my_module_status %>
<div class="status-label">
<%= t('my_module_statuses.dropdown.status_label') %>
</div>
<div class="dropdown sci-dropdown status-flow-dropdown"
data-status-changing="<%= my_module.status_changing %>"
data-status-check-url="<%= status_state_my_module_path(my_module) %>">
<button class="btn btn-secondary dropdown-toggle <%= 'disabled' if my_module.status_changing || my_module.archived_branch? %>"
type="button"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="true"
style="<%= "background-color: #{status.color}" %>;">
<span>
<% if my_module.status_changing %>
<i class="fas fa-spinner fa-spin"></i>
<span><%= t('my_module_statuses.dropdown.status_transitioning_label') %></span>
<% end %>
<%= status.name %>
</span>
<span class="caret pull-right"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownTaskFlow" id="dropdownTaskFlowList" data-link-url="<%= update_state_my_module_url(my_module) %>">
<% if can_update_my_module_status?(@my_module) %>
<% unless status.initial_status? %>
<% previous_s = status.previous_status %>
<% previous_s_errors = previous_s.conditions_errors(my_module) %>
<li data-state-id="<%= previous_s.id %>" id="previousStatusSelector" class="<%= 'disabled' if previous_s_errors.any? %>">
<span><%= t('my_module_statuses.dropdown.return_label') %></span>
<i class="fas fa-long-arrow-alt-right"></i>
<div class=" status-container">
<div class="status-name" style="<%= "background-color: #{previous_s.color}" %>"><%= previous_s.name %></div>
</div>
</li>
<span class="error-message"><% previous_s_errors.each do |error| %>
<%= error %><br>
<% end %></span>
<% end %>
<% unless status.final_status? %>
<% next_s = status.next_status %>
<% next_s_errors = next_s.conditions_errors(my_module) %>
<li data-state-id="<%= next_s.id %>" id="nextStatusSelector" class="<%= 'disabled' if next_s_errors.any? %>">
<span><%= t('my_module_statuses.dropdown.move_label') %></span>
<i class="fas fa-long-arrow-alt-right"></i>
<div class="status-container">
<div class="status-name" style="<%= "background-color: #{next_s.color}" %>"><%= next_s.name %></div>
</div>
</li>
<span class="error-message" data-errors-for="next-status"><% next_s_errors.each do |error| %>
<%= error %><br>
<% end %></span>
<% end %>
<% else %>
<span class="error-message permission-error"><%= t('my_module_statuses.dropdown.no_permission_label') %></span>
<% end %>
<li id="viewTaskFlow">
<%= t('my_module_statuses.dropdown.view_flow_label') %>
</li>
</ul>
</div>
<% if my_module.last_transition_error %>
<div class="status-transition-error">
<i class="fas fa-exclamation-triangle"></i>
<% case my_module.last_transition_error["type"] %>
<% when "repository_snapshot" %>
<%= t(
"my_modules.status_error.repository_snapshot",
repository: Repository.find(my_module.last_transition_error["repository_id"]).name
) %>
<% else %>
<%= t("my_modules.status_error.general") %>
<div class="status-note">
<% if my_module.last_transition_error %>
<div class="status-transition-error">
<i class="fas fa-exclamation-triangle"></i>
<% case my_module.last_transition_error["type"] %>
<% when "repository_snapshot" %>
<%= t(
"my_modules.status_error.repository_snapshot",
repository: Repository.find(my_module.last_transition_error["repository_id"]).name
) %>
<% else %>
<%= t("my_modules.status_error.general") %>
<% end %>
</div>
<% end %>
</div>
<% end %>
</div>
<div class="status-buttons">
<div class="dropdown sci-dropdown status-flow-dropdown"
data-status-changing="<%= my_module.status_changing %>"
data-status-check-url="<%= status_state_my_module_path(my_module) %>">
<button class="btn btn-secondary dropdown-toggle <%= 'disabled' if my_module.status_changing || my_module.archived_branch? %>"
type="button"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="true"
style="<%= "background-color: #{status.color}" %>;">
<span>
<% if my_module.status_changing %>
<i class="fas fa-spinner fa-spin"></i>
<span><%= t('my_module_statuses.dropdown.status_transitioning_label') %></span>
<% end %>
<%= status.name %>
</span>
<span class="caret pull-right"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownTaskFlow" id="dropdownTaskFlowList" data-link-url="<%= update_state_my_module_url(my_module) %>">
<% if can_update_my_module_status?(@my_module) %>
<% unless status.initial_status? %>
<% previous_s = status.previous_status %>
<% previous_s_errors = previous_s.conditions_errors(my_module) %>
<li data-state-id="<%= previous_s.id %>" id="previousStatusSelector" class="<%= 'disabled' if previous_s_errors.any? %>">
<span><%= t('my_module_statuses.dropdown.return_label') %></span>
<i class="fas fa-long-arrow-alt-right"></i>
<div class=" status-container">
<div class="status-name" style="<%= "background-color: #{previous_s.color}" %>"><%= previous_s.name %></div>
</div>
</li>
<span class="error-message"><% previous_s_errors.each do |error| %>
<%= error %><br>
<% end %></span>
<% end %>
<% unless status.final_status? %>
<% next_s = status.next_status %>
<% next_s_errors = next_s.conditions_errors(my_module) %>
<li data-state-id="<%= next_s.id %>" id="nextStatusSelector" class="<%= 'disabled' if next_s_errors.any? %>">
<span><%= t('my_module_statuses.dropdown.move_label') %></span>
<i class="fas fa-long-arrow-alt-right"></i>
<div class="status-container">
<div class="status-name" style="<%= "background-color: #{next_s.color}" %>"><%= next_s.name %></div>
</div>
</li>
<span class="error-message" data-errors-for="next-status"><% next_s_errors.each do |error| %>
<%= error %><br>
<% end %></span>
<% end %>
<% else %>
<span class="error-message permission-error"><%= t('my_module_statuses.dropdown.no_permission_label') %></span>
<% end %>
<li id="viewTaskFlow">
<%= t('my_module_statuses.dropdown.view_flow_label') %>
</li>
</ul>
</div>
</div>