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

Update protocols layout [SCI-7515]

Browse source
This commit is contained in:
Anton 2022-12-05 13:32:05 +01:00
parent 1a700b8359
commit fdeb22c6cd
8 changed files with 136 additions and 122 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
app/assets/javascripts/protocols/index.js
View file

@ -1,5 +1,5 @@
//= require protocols/import_export/import
/* global ProtocolRepositoryHeader PdfPreview */
/* global ProtocolRepositoryHeader PdfPreview DataTableHelpers */
// Global variables
var rowsSelected = [];
@ -27,7 +27,7 @@ function initProtocolsTable() {
protocolsDatatable = protocolsTableEl.DataTable({
order: [[1, "asc"]],
dom: "RB<'main-actions'lf>t<'pagination-row'ip>",
dom: "R<'main-actions hidden'<'toolbar'><'filter-container'f>>t<'pagination-row hidden'<'pagination-info'li><'pagination-actions'p>>",
stateSave: true,
sScrollX: '100%',
sScrollXInner: '100%',
@ -110,6 +110,12 @@ function initProtocolsTable() {
JSON.stringify(data)
);
},
fnInitComplete: function(e) {
var dataTableWrapper = $(e.nTableWrapper);
DataTableHelpers.initLengthAppearance(dataTableWrapper);
DataTableHelpers.initSearchField(dataTableWrapper, 'Enter...');
dataTableWrapper.find('.main-actions, .pagination-row').removeClass('hidden');
},
stateLoadCallback: function (settings) {
// Load the table state for the current team
var state = localStorage.getItem(
@ -123,6 +129,12 @@ function initProtocolsTable() {
return null;
}
});
$('#wrapper').on('sideBar::shown sideBar::hidden', function() {
if (protocolsDatatable) {
protocolsDatatable.columns.adjust();
}
});
}
function initRowSelection() {

4
app/assets/stylesheets/label_templates/index.scss
View file

@ -73,6 +73,10 @@
.dataTables_scrollHead {
flex-shrink: 0;
}
.dataTables_scrollBody {
height: 100%;
}
}
.pagination-row {

5
app/assets/stylesheets/partials/_sidebar.scss
View file

@ -165,9 +165,12 @@
font-weight: bold;
}
.fas {
margin-right: .5em;
}
.fa-folder {
color: $brand-primary-light;
margin-right: .5em;
}
&.back-button::before {

1
app/assets/stylesheets/protocol_management.scss
View file

@ -25,7 +25,6 @@
#protocols-index,
#load-from-repository-modal {
padding: 0;
.nav-tabs > li {
text-transform: uppercase;

26
app/assets/stylesheets/protocols/index.scss Normal file
View file

@ -0,0 +1,26 @@
// scss-lint:disable IdSelector
.protocols-index {
.protocols-datatable {
--content-header-size: 5em;
height: calc(100vh - var(--navbar-height) - var(--content-header-size));
#protocols-table_wrapper {
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
}
.dataTables_scroll {
display: flex;
flex-direction: column;
flex-grow: 1;
height: calc(100% - var(--datatable-pagination-row));
}
.dataTables_scrollBody {
height: 100%;
}
}
}

16
app/assets/stylesheets/themes/scinote.scss
View file

@ -533,22 +533,6 @@ a[data-toggle="tooltip"] {
}
.protocols-datatable {
.dataTables_wrapper {
clear: both;
.main-actions,
.pagination-row {
display: flex;
}
.dataTables_filter,
.dataTables_info,
.dataTables_paginate,
.dataTables_length {
flex-grow: 1;
}
}
table {
tbody tr.selected {
& > td:nth-child(3), td:nth-child(4) {

180
app/views/protocols/index.html.erb
View file

@ -9,110 +9,88 @@
<%= content_for :sidebar do %>
<%= render partial: "/shared/sidebar/templates_sidebar", locals: {active: :protocol} %>
<% end %>
<div class="content-pane flexible" id="protocols-index">
<ul class="nav nav-tabs nav-settings">
<li role="presentation" class="<%= "active" if @type == :public %>">
<%= link_to t("protocols.index.navigation.public"), protocols_path(team: @current_team, type: :public) %>
</li>
<li role="presentation" class="<%= "active" if @type == :private %>">
<%= link_to t("protocols.index.navigation.private"), protocols_path(team: @current_team, type: :private) %>
</li>
<li role="presentation" class="<%= "active" if @type == :external_protocols %>">
<%= link_to t("protocols.index.navigation.external_protocols"),
protocols_path(team: @current_team, type: :external_protocols) %>
</li>
<li role="presentation" class="<%= "active" if @type == :archive %>">
<%= link_to t("protocols.index.navigation.archive"), protocols_path(team: @current_team, type: :archive) %>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane tab-pane-settings tab-pane-protocols active <%= @type %>" role="tabpanel">
<!-- Buttons container -->
<% if @type.in? [:public, :private] %>
<div class="protocols-description">
<%= t(@type == :public ? "protocols.index.public_description" : "protocols.index.private_description") %>
</div>
<div class="sci-btn-group" role="group">
<%= button_to protocols_path(type: @type), disabled: !can_create_protocols_in_repository?(@current_team), class: 'btn btn-primary' do %>
<span class="fas fa-plus"></span>
<span class="hidden-xs">&nbsp;<%= t("protocols.index.create_new") %></span>
<% end %>
<button class="btn btn-light disabled hidden" data-action="clone">
<span class="fas fa-copy"></span>
<span class="hidden-xs">&nbsp;<%= t("protocols.index.clone_btn") %></span>
</button>
<% if @type == :public %>
<button class="btn btn-light disabled hidden" data-action="make-private" data-url="<%= make_private_protocols_path %>">
<span class="fas fa-eye-slash"></span>
<span class="hidden-xs">&nbsp;<%= t("protocols.index.make_private") %></span>
</button>
<% elsif @type == :private %>
<button class="btn btn-light disabled hidden" data-action="publish" data-url="<%= publish_protocols_path %>">
<span class="fas fa-eye"></span>
<span class="hidden-xs">&nbsp;<%= t("protocols.index.publish") %></span>
</button>
<% end %>
</div>
<div id="import-export-protocols" class="sci-btn-group" role="group">
<button class="btn btn-light btn-open-file <%= 'disabled hidden' unless can_create_protocols_in_repository?(@current_team) %>"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false">
<span class="fas fa-download"></span><span class="hidden-xs">&nbsp;<%= t("protocols.index.import") %></span>
</button>
<% if can_create_protocols_in_repository?(@current_team) %>
<ul class="dropdown-menu">
<li>
<a class="btn-link-alt btn-default-link btn-open-file" <%= can_create_protocols_in_repository?(@current_team) ? 'data-action="import"' : 'disabled="disabled"' %>>
<span class="fas fa-paperclip"></span>
<span class="hidden-xs"><%= t("protocols.index.import_alt") %></span>
<input type="file" value="" accept=".eln" data-role="import-file-input"
data-team-id="<%= @current_team.id %>"
data-type="<%= @type %>" data-import-url="<%= import_protocols_path %>"
<%= 'disabled="disabled"' unless can_create_protocols_in_repository?(@current_team) %>>
</a>
</li>
<li>
<%= link_to "#modal-import-json-protocol", data: { toggle: 'modal' } do %>
<span class="fas fa-paperclip"></span>
<span class="hidden-xs"><%= t("protocols.index.import_json") %></span>
<% end %>
</li>
</ul>
<% end %>
<button class="btn btn-light disabled hidden" data-action="export" data-export-url="<%= export_protocols_path() %>">
<span class="fas fa-upload"></span>
<span class="hidden-xs">&nbsp;<%= t("protocols.index.export") %></span>
</button>
</div>
<div class="sci-btn-group" role="group">
<button class="btn btn-light disabled hidden" data-action="archive" data-url="<%= archive_protocols_path %>">
<span class="fas fa-archive"></span>
<span class="hidden-xs">&nbsp;<%= t("protocols.index.archive_action") %></span>
</button>
</div>
<% elsif @type == :archive %>
<div class="protocols-description">
<%= t("protocols.index.archive.description") %>
</div>
<div class="sci-btn-group" role="group">
<button class="btn btn-light disabled hidden" data-action="restore" data-url="<%= restore_protocols_path %>">
<span class="fas fa-sync-alt"></span>
<span class="hidden-xs">&nbsp;<%= t("protocols.index.restore") %></span>
</button>
</div>
<% end %>
<%# Main tab content %>
<% if @type == :external_protocols %>
<%= render partial: "protocols/index/external_protocols_tab.html.erb" %>
<% else %>
<%= render partial: "protocols/index/protocols_datatable.html.erb" %>
<% end %>
<% provide(:container_class, 'no-second-nav-container') %>
<div class="content-pane flexible protocols-index">
<div class="content-header sticky-header">
<div class="title-row">
<h1><%= t('sidebar.templates.protocol_templates') %></h1>
</div>
</div>
<div class="protocols-container">
<!-- Refactor with new toolbar
<div class="sci-btn-group" role="group">
<%= button_to protocols_path(type: @type), disabled: !can_create_protocols_in_repository?(@current_team), class: 'btn btn-primary' do %>
<span class="fas fa-plus"></span>
<span class="hidden-xs">&nbsp;<%= t("protocols.index.create_new") %></span>
<% end %>
<button class="btn btn-light disabled hidden" data-action="clone">
<span class="fas fa-copy"></span>
<span class="hidden-xs">&nbsp;<%= t("protocols.index.clone_btn") %></span>
</button>
<% if @type == :public %>
<button class="btn btn-light disabled hidden" data-action="make-private" data-url="<%= make_private_protocols_path %>">
<span class="fas fa-eye-slash"></span>
<span class="hidden-xs">&nbsp;<%= t("protocols.index.make_private") %></span>
</button>
<% elsif @type == :private %>
<button class="btn btn-light disabled hidden" data-action="publish" data-url="<%= publish_protocols_path %>">
<span class="fas fa-eye"></span>
<span class="hidden-xs">&nbsp;<%= t("protocols.index.publish") %></span>
</button>
<% end %>
</div>
<div id="import-export-protocols" class="sci-btn-group" role="group">
<button class="btn btn-light btn-open-file <%= 'disabled hidden' unless can_create_protocols_in_repository?(@current_team) %>"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false">
<span class="fas fa-download"></span><span class="hidden-xs">&nbsp;<%= t("protocols.index.import") %></span>
</button>
<% if can_create_protocols_in_repository?(@current_team) %>
<ul class="dropdown-menu">
<li>
<a class="btn-link-alt btn-default-link btn-open-file" <%= can_create_protocols_in_repository?(@current_team) ? 'data-action="import"' : 'disabled="disabled"' %>>
<span class="fas fa-paperclip"></span>
<span class="hidden-xs"><%= t("protocols.index.import_alt") %></span>
<input type="file" value="" accept=".eln" data-role="import-file-input"
data-team-id="<%= @current_team.id %>"
data-type="<%= @type %>" data-import-url="<%= import_protocols_path %>"
<%= 'disabled="disabled"' unless can_create_protocols_in_repository?(@current_team) %>>
</a>
</li>
<li>
<%= link_to "#modal-import-json-protocol", data: { toggle: 'modal' } do %>
<span class="fas fa-paperclip"></span>
<span class="hidden-xs"><%= t("protocols.index.import_json") %></span>
<% end %>
</li>
</ul>
<% end %>
<button class="btn btn-light disabled hidden" data-action="export" data-export-url="<%= export_protocols_path() %>">
<span class="fas fa-upload"></span>
<span class="hidden-xs">&nbsp;<%= t("protocols.index.export") %></span>
</button>
</div>
<div class="sci-btn-group" role="group">
<button class="btn btn-light disabled hidden" data-action="archive" data-url="<%= archive_protocols_path %>">
<span class="fas fa-archive"></span>
<span class="hidden-xs">&nbsp;<%= t("protocols.index.archive_action") %></span>
</button>
</div>
<div class="protocols-description">
<%= t("protocols.index.archive.description") %>
</div>
<div class="sci-btn-group" role="group">
<button class="btn btn-light disabled hidden" data-action="restore" data-url="<%= restore_protocols_path %>">
<span class="fas fa-sync-alt"></span>
<span class="hidden-xs">&nbsp;<%= t("protocols.index.restore") %></span>
</button>
</div>
-->
<%= render partial: "protocols/index/protocols_datatable.html.erb" %>
</div>
</div>
<% end %>

10
app/views/shared/sidebar/_templates_sidebar.html.erb
View file

@ -1,8 +1,16 @@
<ul class="sidebar-branch">
<li class="sidebar-leaf">
<i class="fas fa-caret-right toggle-branch collapsed"></i>
<%= link_to t('sidebar.templates.protocol_templates'),
protocols_path,
class: "sidebar-link #{'selected' if active == :protocol}" %>
class: "sidebar-link #{'selected' if active == :protocol && params[:type] != 'archive'}" %>
<ul class="sidebar-branch">
<li class="sidebar-leaf">
<%= link_to protocols_path(type: :archive), class: "sidebar-link #{'selected' if active == :protocol && params[:type] == 'archive'}" do %>
<i class="fas fa-archive"></i>
<%= t("protocols.index.navigation.archive") %>
<% end %>
</ul>
</li>
<% if can_view_label_templates?(current_team) %>
<li class="sidebar-leaf">