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

Add list view for experiments [SCI-5365]

Browse source
This commit is contained in:
aignatov-bio 2021-02-04 16:39:29 +01:00
parent c5b286c764
commit a843aac769
6 changed files with 220 additions and 69 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
app/assets/javascripts/projects/show.js
View file

@ -44,6 +44,17 @@
}
function initProjectsViewModeSwitch() {
$(experimentsPage).on('click', '.cards-switch', function() {
let $btn = $(this);
$('.cards-switch').removeClass('active');
if ($btn.hasClass('view-switch-cards')) {
$(cardsWrapper).removeClass('list');
} else if ($btn.hasClass('view-switch-list')) {
$(cardsWrapper).addClass('list');
}
$btn.addClass('active');
});
$(experimentsPage).on('click', '.archive-switch', function() {
Turbolinks.visit($(this).data('url'));
});
@ -165,6 +176,15 @@
});
}
function initSelectAllCheckbox() {
$(experimentsPage).on('click', '.sci-checkbox.select-all', function() {
var selectAll = this.checked;
$.each($('.experiment-card-selector'), function() {
if (this.checked !== selectAll) this.click();
});
});
}
function initArchiveRestoreToolbarButtons() {
$(experimentsPage)
.on('ajax:before', '.archive-experiments-form, .restore-experiments-form', function() {
@ -238,6 +258,7 @@
initProjectsViewModeSwitch();
initExperimentsSelector();
initArchiveRestoreToolbarButtons();
initSelectAllCheckbox();
}
init();

129
app/assets/stylesheets/experiments.scss
View file

@ -14,12 +14,6 @@
}
}
&.archived {
[data-view-mode="active"] {
display: none !important;
}
}
.experiment-actions-menu {
.dropdown-menu {
a,
@ -65,10 +59,18 @@
.card {
grid-row: span 6;
&.experiment-card {
border-radius: 4px;
box-shadow: $flyout-shadow;
.workflow-img-container {
background-color: $color-concrete;
border-radius: 4px;
height: 76px;
width: 76px;
}
.experiment-name-cell {
@include font-h3;
-webkit-box-orient: vertical;
@ -91,7 +93,7 @@
top: .2em;
}
.dates-and-img-container{
.dates-and-img-container {
display: flex;
height: 6em;
width: 100%;
@ -99,13 +101,6 @@
.dates-container {
flex-grow: 1;
}
.workflow-img-container {
background-color: $color-concrete;
border-radius: 4px;
height: 76px;
width: 76px;
}
}
.data-row {
@ -131,6 +126,10 @@
}
}
.completed-task-cell {
width: 100%;
}
.description-cell {
.description-text {
-webkit-box-orient: vertical;
@ -138,7 +137,7 @@
height: 3em;
-webkit-line-clamp: 2;
overflow: hidden;
padding-top: 0.25em;
padding-top: .25em;
&::after {
background: linear-gradient(to right, transparent, $color-white 50%);
@ -162,12 +161,43 @@
}
&.list {
grid-auto-rows: 1px 5em;
grid-template-columns: max-content repeat(calc(var(--list-columns-number) - 2), minmax(100px, auto)) max-content;
grid-template-rows: 3em;
.card {
&.experiment-card {
.card-value {
font-weight: normal;
line-height: 2em;
}
.workflow-img-container {
height: 3.5em;
margin: .25em 1em .25em 0;
width: 3.5em;
}
.dates-and-img-container,
.dates-container {
display: contents;
}
.checkbox-cell {
align-items: normal;
padding-top: .5em;
}
.experiment-name-cell {
@include font-button;
color: $brand-primary;
display: flex;
font-weight: normal;
grid-column: 2;
height: 100%;
margin: 0;
padding: .25em 0;
}
.start-date-cell {
@ -184,10 +214,79 @@
.description-cell {
grid-column: 6;
position: relative;
.description-text::after {
bottom: 1.5em;
right: .5em;
}
.more-button {
bottom: 1.9em;
}
}
.actions-cell {
grid-column: 7;
position: initial;
}
}
&:hover {
.description-text::after {
background: linear-gradient(to right, transparent, $color-concrete 50%);
}
}
}
}
}
}
&.archived {
[data-view-mode="active"] {
display: none !important;
}
.project-show-container {
.cards-wrapper {
.card.experiment-card {
grid-row: span 7;
.dates-and-img-container {
height: 9em;
}
.description-cell {
.description-text::after {
background: linear-gradient(to right, transparent, $color-concrete 50%);
}
}
}
&.list {
--list-columns-number: 8;
.card.experiment-card {
.archived-date-cell {
grid-column: 5;
}
.completed-task-cell {
grid-column: 6;
}
.description-cell {
grid-column: 7;
}
.actions-cell {
grid-column: 8;
}
&:hover {
.description-text::after {
background: linear-gradient(to right, transparent, $color-alto 50%);
}
}
}
}

26
app/assets/stylesheets/projects.scss
View file

@ -812,16 +812,7 @@ li.module-hover {
grid-auto-rows: 2.5em;
.card.project-card {
background: $color-concrete;
box-shadow: none;
.data-row {
color: $color-silver-chalice;
.card-label {
color: $color-silver-chalice;
}
&.archived-date-cell {
color: $color-volcano;
@ -838,23 +829,6 @@ li.module-hover {
grid-template-columns: max-content repeat(calc(var(--list-columns-number) - 2), minmax(100px, auto)) max-content;
.card {
&::after {
background: $color-white;
}
&.project-card {
.table-cell {
background: $color-concrete;
color: $color-volcano;
}
}
&:hover {
.table-cell {
background: $color-alto;
}
}
&.folder-card {
.name {
grid-column: 6 span;

58
app/assets/stylesheets/shared/cards.scss
View file

@ -1,3 +1,7 @@
// scss-lint:disable SelectorDepth
// scss-lint:disable NestingDepth
// scss-lint:disable SelectorFormat
.cards-wrapper {
--card-min-width: 200px;
--list-columns-number: 5;
@ -15,8 +19,8 @@
&.no-results {
.no-results-container {
grid-row: 8;
grid-column: 1 / -1;
grid-row: 8;
}
.no-results-img {
@ -62,24 +66,33 @@
}
}
&:not(.list) {
[list-render="true"] {
display: none !important;
}
}
&.list {
grid-auto-flow: dense;
grid-auto-rows: 3em 1px;
grid-column-gap: 0;
grid-row-gap: 0;
grid-template-columns: repeat(var(--list-columns-number), minmax(100px, auto));
margin: 40px 0 0 6px;
[cards-render="true"] {
display: none !important;
}
.no-results-container {
grid-row: 12;
grid-column: 1 / -1;
grid-row: 12;
}
.card {
display: contents;
// Border element
&:after {
&::after {
background: $color-concrete;
content: "";
display: inline-block;
@ -122,7 +135,6 @@
position: sticky;
position: -webkit-sticky;
top: 13em;
width: calc(100% + 1em);
z-index: 2;
&.select-all-checkboxes {
@ -136,3 +148,39 @@
}
}
}
.content-pane.archived {
.cards-wrapper {
.card {
background: $color-concrete;
box-shadow: none;
.data-row {
color: $color-silver-chalice;
.card-label {
color: $color-silver-chalice;
}
}
}
&.list {
.card {
&::after {
background: $color-white;
}
.table-cell {
background: $color-concrete;
color: $color-volcano;
}
&:hover {
.table-cell {
background: $color-alto;
}
}
}
}
}
}

1
app/views/projects/show.html.erb
View file

@ -27,6 +27,7 @@
<div class="table-header-cell"><%= t('experiments.card.name') %></div>
<div class="table-header-cell"><%= t('experiments.card.start_date') %></div>
<div class="table-header-cell"><%= t('experiments.card.modified_date') %></div>
<div class="table-header-cell" data-view-mode="archived"><%= t('experiments.card.archived_date') %></div>
<div class="table-header-cell"><%= t('experiments.card.completed_task') %></div>
<div class="table-header-cell"><%= t('experiments.card.description') %></div>
<div class="table-header-cell"></div>

54
app/views/projects/show/_experiment_card.html.erb
View file

@ -4,7 +4,7 @@
data-editable="<%= can_manage_experiment?(experiment) %>"
data-moveable="<%= can_move_experiment?(experiment) %>"
data-archivable="<%= experiment.active? && can_archive_experiment?(experiment) %>"
data-restorable="<%= experiment.archived? && can_restore_experiment?(experiment) %>">
data-restorable="<%= experiment.archived? && can_restore_experiment?(experiment) %>"
>
<div class="checkbox-cell table-cell">
<div class="sci-checkbox-container">
@ -13,6 +13,8 @@
</div>
</div>
<div class="experiment-name-cell table-cell">
<div class="workflow-img-container" list-render="true">
</div>
<% if experiment.archived_branch? %>
<%= link_to experiment.name, module_archive_experiment_path(experiment), title: experiment.name %>
<% else %>
@ -20,48 +22,54 @@
<% end %>
</div>
<div class="actions actions-cell table-cell">
<div class="dropdown experiment-actions-menu">
<button class="btn btn-light dropdown-toggle icon-btn">
<i class="fas fa-ellipsis-h"></i>
</button>
</div>
<%= render partial: 'projects/show/experiment_actions_dropdown.html.erb', locals: { experiment: experiment } %>
</div>
<div class="dates-and-img-container">
<div class="dates-container">
<div class="data-row start-date-cell table-cell">
<span class="card-label"><%= t('experiments.card.start_date') %></span>
<span class="card-label" cards-render="true"><%= t('experiments.card.start_date') %></span>
<span class="card-value"><%= l(experiment.created_at, format: :full_date) %></span>
</div>
<div class="data-row modified-date-cell table-cell">
<span class="card-label"><%= t('experiments.card.modified_date') %></span>
<span class="card-label" cards-render="true"><%= t('experiments.card.modified_date') %></span>
<span class="card-value"><%= l(experiment.updated_at, format: :full_date) %></span>
</div>
<div class="data-row completed-task-cell table-cell">
<% if experiment.archived_branch? %>
<div class="data-row archived-date-cell table-cell">
<span class="card-label" cards-render="true"><%= t('experiments.card.archived_date') %></span>
<span class="card-value"><%= l(experiment.archived_on, format: :full_date) %></span>
</div>
<% end %>
<div class="data-row" cards-render="true">
<span class="card-label"><%= t('experiments.card.completed_task') %></span>
<span class="card-value"><%= t('experiments.card.completed_value', completed: 12, all: 16) %></span>
</div>
</div>
<div class="workflow-img-container">
<div class="workflow-img-container" cards-render="true">
</div>
</div>
<div class="progress-bar-container progress">
<% percentage = 40 %>
<div class="progress-bar"
role="progressbar"
aria-valuenow="<%= percentage %>%"
aria-valuemin="0"
aria-valuemax="100"
style="width:<%= percentage %>%; min-width: 2em;">
<div class="completed-task-cell table-cell">
<span class="card-value" list-render="true"><%= t('experiments.card.completed_value', completed: 12, all: 16) %></span>
<div class="progress-bar-container progress ">
<% percentage = 40 %>
<div class="progress-bar"
role="progressbar"
aria-valuenow="<%= percentage %>%"
aria-valuemin="0"
aria-valuemax="100"
style="width:<%= percentage %>%; min-width: 2em;">
</div>
</div>
</div>
<div class="description-cell table-cell">
<div class="description-text">
<%= custom_auto_link(experiment.description, team: current_team) %>
</div>
<%= link_to t('experiments.card.more'),
experiment_path(experiment),
class: 'more-button',
remote: true %>
<% if experiment.description.present? %>
<%= link_to t('experiments.card.more'),
experiment_path(experiment),
class: 'more-button',
remote: true %>
<% end %>
</div>
</div>