updated code to fit new state dropdown logic + updated card view

app/assets/stylesheets/experiment/show.scss

@@ -26,6 +26,7 @@
   .toolbar-row {
     align-items: center;
     display: flex;
+    justify-content: space-between;
     margin: 10px 0;
 
     .toolbar-right-block {
@@ -37,6 +38,86 @@
     .zoom-text {
       margin-right: .5em;
     }
+
+    .view-switch-button {
+      outline: 1px solid $color-alto;
+    }
+
+    .view-switch,
+    .filter-container {
+      display: inline-block;
+    }
+
+    .view-switch {
+      margin-left: auto;
+
+      .caret {
+        margin: 8px 0 8px 8px;
+      }
+
+      &.open {
+        .caret {
+          transform: rotateX(180deg);
+        }
+      }
+
+      .dropdown-menu {
+        @include font-button;
+        min-width: 100%;
+
+        .divider-label {
+          @include font-small;
+          color: $color-silver-chalice;
+          padding: .25em 1em;
+        }
+
+        .divider {
+          margin: 0;
+        }
+
+        li {
+          cursor: pointer;
+          padding: .5em 1em;
+          white-space: nowrap;
+
+          .button-icon {
+            margin-right: .5em;
+          }
+
+          &:hover:not(.divider-label) {
+            background: $color-concrete;
+          }
+
+          .btn {
+            height: 36px;
+          }
+
+          a {
+            display: inline-block;
+            margin: -1em;
+            padding: .5em 1em;
+            width: calc(100% + 2em);
+
+            &.selected::after {
+              @include font-awesome;
+              content: $font-fas-check;
+              margin-left: auto;
+              position: absolute;
+              right: 1em;
+            }
+          }
+        }
+      }
+
+      .cards-switch {
+        &.active::after {
+          @include font-awesome;
+          content: "\f00c";
+          position: absolute;
+          right: 1em;
+        }
+      }
+    }
   }
 }
 

app/assets/stylesheets/experiment/table.scss

@@ -30,6 +30,7 @@
     align-items: center;
     display: flex;
     height: var(--toolbar-height);
+    justify-content: space-between;
 
     .toolbar-left-block {
       display: flex;
@@ -39,6 +40,101 @@
       }
     }
 
+    .header-actions {
+      &.experiment-header {
+        column-gap: .25em;
+      }
+
+      .sort-task-menu {
+        &:not(.archived) {
+          [data-view-mode="archived"] {
+            display: none;
+          }
+        }
+      }
+    }
+
+    .view-switch-button {
+      outline: 1px solid $color-alto;
+    }
+
+    .view-switch,
+    .filter-container {
+      display: inline-block;
+    }
+
+    .view-switch {
+      margin-left: auto;
+
+      .caret {
+        margin: 8px 0 8px 8px;
+      }
+
+      &.open {
+        .caret {
+          transform: rotateX(180deg);
+        }
+      }
+
+      .dropdown-menu {
+        @include font-button;
+        min-width: 100%;
+
+        .divider-label {
+          @include font-small;
+          color: $color-silver-chalice;
+          padding: .25em 1em;
+        }
+
+        .divider {
+          margin: 0;
+        }
+
+        li {
+          cursor: pointer;
+          padding: .5em 1em;
+          white-space: nowrap;
+
+          .button-icon {
+            margin-right: .5em;
+          }
+
+          &:hover:not(.divider-label) {
+            background: $color-concrete;
+          }
+
+          .btn {
+            height: 36px;
+          }
+
+          a {
+            display: inline-block;
+            margin: -1em;
+            padding: .5em 1em;
+            width: calc(100% + 2em);
+
+            &.selected::after {
+              @include font-awesome;
+              content: $font-fas-check;
+              margin-left: auto;
+              position: absolute;
+              right: 1em;
+            }
+          }
+        }
+      }
+
+
+      .cards-switch {
+        &.active::after {
+          @include font-awesome;
+          content: "\f00c";
+          position: absolute;
+          right: 1em;
+        }
+      }
+    }
+
     .toolbar-right-block {
       margin-left: auto;
     }

app/assets/stylesheets/my_modules.scss

@@ -255,6 +255,97 @@ html {
 
   .toolbar {
     margin-top: 1em;
+    display: flex;
+    display: flex;
+    justify-content: space-between;
+
+    .left {
+      justify-self: flex-start;
+    }
+
+    .middle {
+      margin: 0 auto;
+    }
+
+    .view-switch,
+    .filter-container {
+      display: inline-block;
+    }
+
+    .view-switch-button {
+      outline: 1px solid $color-alto;
+    }
+
+    .view-switch {
+      margin-left: auto;
+
+      .caret {
+        margin: 8px 0 8px 8px;
+      }
+
+      &.open {
+        .caret {
+          transform: rotateX(180deg);
+        }
+      }
+
+      .dropdown-menu {
+        @include font-button;
+        min-width: 100%;
+
+        .divider-label {
+          @include font-small;
+          color: $color-silver-chalice;
+          padding: .25em 1em;
+        }
+
+        .divider {
+          margin: 0;
+        }
+
+        li {
+          cursor: pointer;
+          padding: .5em 1em;
+          white-space: nowrap;
+
+          .button-icon {
+            margin-right: .5em;
+          }
+
+          &:hover:not(.divider-label) {
+            background: $color-concrete;
+          }
+
+          .btn {
+            height: 36px;
+          }
+
+          a {
+            display: inline-block;
+            margin: -1em;
+            padding: .5em 1em;
+            width: calc(100% + 2em);
+
+            &.selected::after {
+              @include font-awesome;
+              content: $font-fas-check;
+              margin-left: auto;
+              position: absolute;
+              right: 1em;
+            }
+          }
+        }
+      }
+
+      .cards-switch {
+        &.active::after {
+          @include font-awesome;
+          content: "\f00c";
+          position: absolute;
+          right: 1em;
+        }
+      }
+    }
   }
 
   .module-container {

app/views/experiments/_show_header.html.erb

@@ -17,103 +17,5 @@
         </div>
       <% end %>
     </h1>
-    <div class="header-actions experiment-header">
-      <% if can_manage_experiment?(@experiment) || can_clone_experiment?(@experiment)  %>
-        <!-- experiment actions -->
-        <span class="dropdown actions-button">
-          <button class="btn btn-light dropdown-toggle" type="button" id="exActionsMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
-            <span class="hidden-xs"><%= t('experiments.canvas.actions') %></span>
-            <span class="visible-xs-inline"><i class="fas fa-sort"></i></span>
-            <span class="caret"></span>
-          </button>
-          <%= render partial: 'experiments/dropdown_actions.html.erb',
-                              locals: { project: @project, experiment: @experiment, action_name: action_name } %>
-      </span>
-      <% end %>
-      <%= render layout: 'shared/view_switch', locals: { disabled: false, name: t("toolbar.#{action_name == 'module_archive' ? 'cards' : action_name }_view") } do %>
-          <% if params[:view_mode] == 'archived' || params[:action] == "module_archive" %>
-            <li class="form-dropdown-item">
-              <%= button_to(view_type_experiment_path(@experiment, view_mode: 'archived'),
-                            method: :put,
-                            remote: true,
-                            class: "btn button-to #{ action_name == 'table' ? 'btn-primary' : 'btn-light' }",
-                            form_class: 'change-my-modules-view-type-form',
-                            params: { experiment: { view_type: 'table', id: @experiment.id  } }) do %>
-                <span class="<%= 'text-light' if action_name == 'table' %>">
-                  <%= t('toolbar.table_view') %>
-                </span>
-              <% end %>
-            </li>
-            <li class="form-dropdown-item">
-              <%= button_to(view_type_experiment_path(@experiment, view_mode: 'archived'),
-                            method: :put,
-                            remote: true,
-                            class: "btn button-to #{ action_name == 'module_archive' ? 'btn-primary' : 'btn-light'}",
-                            form_class: 'change-my-modules-view-type-form',
-                            params: { experiment: { view_type: 'canvas', id: @experiment.id } }) do %>
-                <span class="<%= 'text-light' if action_name == 'module_archive' %>">
-                  <%= t('toolbar.cards_view') %>
-                </span>
-              <% end %>
-            </li>
-          <% else %>
-            <li class="form-dropdown-item">
-              <%= button_to(view_type_experiment_path(@experiment),
-                            method: :put,
-                            remote: true,
-                            class: "btn button-to #{ action_name == 'table' ? 'btn-primary text-light' : 'btn-light' }",
-                            form_class: 'change-my-modules-view-type-form',
-                            params: { experiment: { view_type: 'table', id: @experiment.id  } }) do %>
-                <span class="<%= 'text-light' if action_name == 'table' %>">
-                  <%= t('toolbar.table_view') %>
-                </span>
-              <% end %>
-            </li>
-            <li class="form-dropdown-item">
-            <%= button_to(view_type_experiment_path(@experiment),
-                          method: :put,
-                          remote: true,
-                          class: "btn button-to #{ action_name == 'canvas' ? 'btn-primary text-light' : 'btn-light'}",
-                          form_class: 'change-my-modules-view-type-form',
-                          params: { experiment: { view_type: 'canvas', id: @experiment.id } }) do %>
-                <span class="<%= 'text-light' if action_name == 'canvas' %>">
-                  <%= t('toolbar.canvas_view') %>
-                </span>
-              <% end %>
-            </li>
-          <% end %>
-        <% end %>
-
-        <%= render partial: 'shared/state_view_switch', locals: {
-          disabled: false,
-          switchable: !@experiment.archived_branch?,
-          archived: action_name == 'module_archive' || params[:view_mode] == 'archived',
-          active_url: my_modules_experiment_path(@experiment),
-          archived_url: my_modules_experiment_path(@experiment, view_mode: :archived),
-        } %>
-
-      <% if action_name == 'table' %>
-        <%= render partial: 'table_filters.html.erb' %>
-
-        <div class="dropdown sort-menu">
-          <button class="btn btn-light icon-btn dropdown-toggle" type="button" id="sortMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
-            <i class="fas fa-sort-amount-up"></i>
-          </button>
-          <ul id="sortMenuDropdown" class="dropdown-menu sort-task-menu <%= params[:view_mode] %> dropdown-menu-right" aria-labelledby="sortMenu">
-              <% %w(atoz ztoa due_first due_last archived_old archived_new).each_with_index do |sort, i| %>
-                <% if i.even? && i.positive? %>
-                  <li class="divider" <%= i > 3 ? 'data-view-mode=archived' : '' %>></li>
-                <% end %>
-                <li <%= %w(archived_new archived_old).include?(sort) ? 'data-view-mode=archived' : '' %>>
-                  <a class="<%= 'selected' if @current_sort == sort %>"
-                    data-sort="<%= sort %>" >
-                    <%= t("general.sort.#{sort}_html") %>
-                  </a>
-                </li>
-              <% end %>
-            </ul>
-        </div>
-      <% end %>
-    </div>
   </div>
 </div>

app/views/experiments/_table_toolbar.html.erb

@@ -1,5 +1,5 @@
 <div class="toolbar-row">
-  <div class="toolbar-left-block">
+  <span class="left">
     <% if can_manage_experiment?(@experiment) %>
       <%= link_to modules_new_experiment_path(@experiment, view_mode:'table'),
                     class: 'btn btn-primary new-my-module-button only-active',
@@ -10,34 +10,39 @@
                 <span class="hidden-xs"><%= t('experiments.table.toolbar.new') %></span>
         <% end %>
     <% end %>
-    <button id="editTask" class="btn btn-light single-object-action hidden only-active" data-for="editable" >
-      <i class="fas fa-pen"></i>
-      <span class="button-text"><%= t("experiments.table.toolbar.edit") %></span>
-    </button>
-    <% if can_manage_experiment?(@experiment) %>
-      <button id="duplicateTasks" class="btn btn-light multiple-object-action hidden only-active" data-url="<%= batch_clone_my_modules_experiment_path(@experiment) %>">
-        <i class="fas fa-copy"></i>
-        <span class="button-text"><%= t("experiments.table.toolbar.duplicate") %></span>
-      </button>
-    <% end %>
-    <button id="moveTask" class="btn btn-light multiple-object-action hidden" data-for="moveable">
-      <i class="fas fa-arrow-right"></i>
-      <span class="button-text"><%= t("experiments.table.toolbar.move") %></span>
-    </button>
-    <button id="archiveTask" class="btn btn-light multiple-object-action hidden only-active" data-url="<%= archive_my_modules_experiment_path(@experiment) %>"  data-for="archivable">
-      <i class="fas fa-archive"></i>
-      <span class="button-text"><%= t("experiments.table.toolbar.archive") %></span>
-    </button>
-    <button id="restoreTask" class="btn btn-light multiple-object-action hidden only-archive" data-url="<%= restore_my_modules_experiment_path(@experiment) %>"  data-for="restorable">
-      <i class="fas fa-undo"></i>
-      <span class="button-text"><%= t("experiments.table.toolbar.restore") %></span>
-    </button>
-  </div>
-  <div class="toolbar-right-block">
-    <button id="taskDataDisplay" class="btn btn-light" data-toggle="modal" data-target="#tableDisplayModal">
-      <i class="fas fa-eye"></i>
-      <span class="button-text"><%= t("experiments.table.toolbar.task_data") %></span>
-    </button>
+  </span>
+
+  <%= render partial: 'task_view_dropdowns.html.erb' %>
+
+  <div class="content-header sticky-header">
+    <div class="title-row">
+      <div class="header-actions experiment-header">
+        <% if action_name == 'table' %>
+          <%= render partial: 'table_filters.html.erb' %>
+        <button id="taskDataDisplay" class="btn btn-light" data-toggle="modal" data-target="#tableDisplayModal">
+          <i class="fas fa-columns"></i>
+        </button>
+          <div class="dropdown sort-menu">
+            <button class="btn btn-light icon-btn dropdown-toggle" type="button" id="sortMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
+              <i class="fas fa-sort-amount-up"></i>
+            </button>
+            <ul id="sortMenuDropdown" class="dropdown-menu sort-task-menu <%= params[:view_mode] %> dropdown-menu-right" aria-labelledby="sortMenu">
+                <% %w(atoz ztoa due_first due_last archived_old archived_new).each_with_index do |sort, i| %>
+                  <% if i.even? && i.positive? %>
+                    <li class="divider" <%= i > 3 ? 'data-view-mode=archived' : '' %>></li>
+                  <% end %>
+                  <li <%= %w(archived_new archived_old).include?(sort) ? 'data-view-mode=archived' : '' %>>
+                    <a class="<%= 'selected' if @current_sort == sort %>"
+                      data-sort="<%= sort %>" >
+                      <%= t("general.sort.#{sort}_html") %>
+                    </a>
+                  </li>
+                <% end %>
+              </ul>
+          </div>
+        <% end %>
+      </div>
+    </div>
   </div>
 </div>
 

app/views/experiments/_task_view_dropdowns.html.erb

@@ -0,0 +1,64 @@
+
+<span class="middle">
+  <%= render layout: 'shared/view_switch', locals: { disabled: false, name: t("toolbar.#{action_name == 'module_archive' ? 'cards' : action_name }_view") } do %>
+    <% if params[:view_mode] == 'archived' || params[:action] == "module_archive" %>
+      <li class="form-dropdown-item">
+        <%= button_to(view_type_experiment_path(@experiment, view_mode: 'archived'),
+                      method: :put,
+                      remote: true,
+                      class: "btn button-to #{ action_name == 'table' ? 'btn-primary' : 'btn-light' }",
+                      form_class: 'change-my-modules-view-type-form',
+                      params: { experiment: { view_type: 'table', id: @experiment.id  } }) do %>
+          <span class="<%= 'text-light' if action_name == 'table' %>">
+            <%= t('toolbar.table_view') %>
+          </span>
+        <% end %>
+      </li>
+      <li class="form-dropdown-item">
+        <%= button_to(view_type_experiment_path(@experiment, view_mode: 'archived'),
+                      method: :put,
+                      remote: true,
+                      class: "btn button-to #{ action_name == 'module_archive' ? 'btn-primary' : 'btn-light'}",
+                      form_class: 'change-my-modules-view-type-form',
+                      params: { experiment: { view_type: 'canvas', id: @experiment.id } }) do %>
+          <span class="<%= 'text-light' if action_name == 'module_archive' %>">
+            <%= t('toolbar.cards_view') %>
+          </span>
+        <% end %>
+      </li>
+    <% else %>
+      <li class="form-dropdown-item">
+        <%= button_to(view_type_experiment_path(@experiment),
+                      method: :put,
+                      remote: true,
+                      class: "btn button-to #{ action_name == 'table' ? 'btn-primary text-light' : 'btn-light' }",
+                      form_class: 'change-my-modules-view-type-form',
+                      params: { experiment: { view_type: 'table', id: @experiment.id  } }) do %>
+          <span class="<%= 'text-light' if action_name == 'table' %>">
+            <%= t('toolbar.table_view') %>
+          </span>
+        <% end %>
+      </li>
+      <li class="form-dropdown-item">
+      <%= button_to(view_type_experiment_path(@experiment),
+                    method: :put,
+                    remote: true,
+                    class: "btn button-to #{ action_name == 'canvas' ? 'btn-primary text-light' : 'btn-light'}",
+                    form_class: 'change-my-modules-view-type-form',
+                    params: { experiment: { view_type: 'canvas', id: @experiment.id } }) do %>
+          <span class="<%= 'text-light' if action_name == 'canvas' %>">
+            <%= t('toolbar.canvas_view') %>
+          </span>
+        <% end %>
+      </li>
+    <% end %>
+  <% end %>
+  
+  <%= render partial: 'shared/state_view_switch', locals: {
+    disabled: false,
+    switchable: !@experiment.archived_branch?,
+    archived: action_name == 'module_archive' || params[:view_mode] == 'archived',
+    active_url: my_modules_experiment_path(@experiment),
+    archived_url: my_modules_experiment_path(@experiment, view_mode: :archived),
+  } %>
+</span>

app/views/experiments/canvas.html.erb

@@ -10,7 +10,7 @@
 <div class="content-pane flexible experiment-new-my_module" id="experiment-canvas">
   <%= render partial: 'experiments/show_header' %>
   <div class="toolbar-row" id="diagram-buttons">
-    <div id="toolbar-left-block">
+    <span class="left" id="toolbar-left-block">
       <% if can_manage_experiment?(@experiment) %>
         <%= link_to modules_new_experiment_path(@experiment, view_mode: 'canvas'),
                     class: 'btn btn-primary new-my-module-button',
@@ -29,10 +29,13 @@
                 <span class="hidden-sm hidden-xs"><%= t('experiments.canvas.canvas_edit') %></span>
               <% end %>
       <% end %>
-    </div>
-    <div class="toolbar-right-block">
-      <span class="hidden-sm hidden-xs zoom-text"><%=t 'experiments.canvas.zoom' %></span>
+    </span>
+
+    <%= render partial: 'task_view_dropdowns.html.erb' %>
+
+    <span class="right">
       <div id="zoom-level-buttons" class="sci-toggles-group change-canvas-view" data-toggle="buttons">
+      <span class="hidden-sm hidden-xs zoom-text"><%=t 'experiments.canvas.zoom' %></span>
         <input type="radio" name="canvas-format" class="sci-toggle-item" checked>
         <%=link_to canvas_full_zoom_experiment_path(@experiment), remote: true, type: "button", class: "ajax sci-toggle-item-label", "data-action" => "full_zoom", "data-toggle" => "button", "aria-pressed" => true do %>
           <%= render partial: 'experiments/canvas_svg_icons', locals: { type: 'full' } %>
@@ -46,7 +49,7 @@
           <%= render partial: 'experiments/canvas_svg_icons', locals: { type: 'small' } %>
         <% end %>
       </div>
-    </div>
+    </span>
   </div>
 
   <div id="canvas-container" data-project-id="<%= @project.id %>" data-module-tags-url="<%= my_module_tags_experiment_path(@experiment, format: :json) %>">

app/views/experiments/module_archive.html.erb

@@ -11,13 +11,16 @@
   <div class="toolbar">
     <% if @my_modules.present? %>
       <% if can_manage_experiment?(@experiment) %>
-        <div class="restore-button-container collapse">
-          <%= button_to restore_my_modules_experiment_path(@experiment), class: 'btn btn-light', method: :post do %>
-            <span class="fas fa-undo"></span>
-            <%= t('experiments.module_archive.restore_option') %>
-          <% end %>
-        </div>
+        <span class="left">
+          <div class="restore-button-container collapse">
+            <%= button_to restore_my_modules_experiment_path(@experiment), class: 'btn btn-light', method: :post do %>
+              <span class="fas fa-undo"></span>
+              <%= t('experiments.module_archive.restore_option') %>
+            <% end %>
+          </div>
+        </span>
       <% end %>
+    <%= render partial: 'task_view_dropdowns.html.erb' %>
   </div>
 
     <div class="row" style="margin-top: 10px;">
@@ -27,18 +30,19 @@
         </div>
       <% end %>
     </div>
-  <% else %>
-    <div class="row">
-      <div class="col-xs-12">
-        <em><%= t('experiments.module_archive.no_archived_modules') %></em>
-      </div>
-    </div>
   <% end %>
 
   <!-- Manage tags modal -->
   <%= render partial: 'my_modules/modals/manage_module_tags_modal', locals: { my_module: nil } %>
 
 </div>
+<% unless  @my_modules.present? %>
+  <div class="row">
+    <div class="flex justify-center items-center pt-10">
+      <em><%= t('experiments.module_archive.no_archived_modules') %></em>
+    </div>
+  </div>
+<% end %>
 
 <%= javascript_include_tag('projects/canvas') %>
 <%= javascript_include_tag('my_modules/archived') %>

config/locales/en.yml

@@ -1488,11 +1488,11 @@ en:
         no_module_id: "to be assigned after saving"
         options_header: "Options"
         edit_module: "Rename task"
-        task_access: "Task access"
+        task_access: "Access"
         clone_module: "Duplicate task as template (only Protocols steps duplicated)"
         clone_module_group: "Duplicate workflow as template (only Protocols steps duplicated)"
         clone_prefix: "Clone -"
-        move_module: "Move task to another experiment"
+        move_module: "Move"
         move_module_group: "Move workflow to another experiment"
         delete_module: "Archive task"
         delete_module_group: "Archive workflow"