Add list view for experiments [SCI-5365]

app/assets/javascripts/projects/show.js

@@ -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();

app/assets/stylesheets/experiments.scss

@@ -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%);
+              }
             }
           }
         }

app/assets/stylesheets/projects.scss

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

app/assets/stylesheets/shared/cards.scss

@@ -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;
+          }
+        }
+      }
+    }
+  }
+}

app/views/projects/show.html.erb

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

app/views/projects/show/_experiment_card.html.erb

@@ -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,31 +22,35 @@
     <% end %>
   </div>
   <div class="actions actions-cell table-cell">
-    <div class="dropdown experiment-actions-menu">
+    <%= render partial: 'projects/show/experiment_actions_dropdown.html.erb', locals: { experiment: experiment } %>
-      <button class="btn btn-light dropdown-toggle icon-btn">
-        <i class="fas fa-ellipsis-h"></i>
-      </button>
-    </div>
   </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">
+  <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"
@@ -54,14 +60,16 @@
            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>
+    <% if experiment.description.present? %>
       <%= link_to t('experiments.card.more'),
             experiment_path(experiment),
             class: 'more-button',
             remote: true %>
-
+    <% end %>
   </div>
 </div>