Implement active/archive and view dropdowns (toolbar) [SCI-8293]

app/assets/javascripts/projects/index.js

@@ -516,12 +516,26 @@ var ProjectsIndex = (function() {
 
   function initProjectsViewModeSwitch() {
     let projectsPageSelector = '.projects-index';
+    $('.view-switch-btn-name').text($('.button-to.selected').text());
+    $('.button-to.selected').removeClass('btn-light');
+    $('.button-to.selected').addClass('form-dropdown-state-item');
+    $('.button-to.selected .view-switch-list-span').css('color', 'white');
+    $('.button-to.selected').removeClass('selected');
 
     $(projectsPageSelector)
       .on('ajax:success', '.change-projects-view-type-form', function(ev, data) {
+        $('.view-switch-btn-name').text($(ev.target).find('.button-to').text());
+
         $(cardsWrapper).removeClass('list cards').addClass(data.cards_view_type_class);
-        $(projectsPageSelector).find('.cards-switch .button-to').removeClass('selected');
-        $(ev.target).find('.button-to').addClass('selected');
+
+        $(projectsPageSelector).find('.cards-switch .button-to').removeClass('form-dropdown-state-item');
+        $(projectsPageSelector).find('.cards-switch .button-to').addClass('btn-light');
+        $(projectsPageSelector).find('.cards-switch .button-to .view-switch-list-span').css('color', 'black');
+
+        $(ev.target).find('.button-to').removeClass('btn-light');
+        $(ev.target).find('.button-to').addClass('form-dropdown-state-item');
+        $(ev.target).find('.button-to .view-switch-list-span').css('color', 'white');
+
         $(ev.target).parents('.dropdown.view-switch').removeClass('open');
         InfiniteScroll.loadMore(cardsWrapper);
       })

app/assets/javascripts/projects/show.js

@@ -53,11 +53,26 @@
   }
 
   function initProjectsViewModeSwitch() {
+    $('.view-switch-btn-name').text($('.button-to.selected').text());
+    $('.button-to.selected').removeClass('btn-light');
+    $('.button-to.selected').addClass('form-dropdown-state-item');
+    $('.button-to.selected .view-switch-list-span').css('color', 'white');
+    $('.button-to.selected').removeClass('selected');
+
     $(experimentsPage)
       .on('ajax:success', '.change-experiments-view-type-form', function(ev, data) {
+        $('.view-switch-btn-name').text($(ev.target).find('.button-to').text());
+
         $(cardsWrapper).removeClass('list cards').addClass(data.cards_view_type_class);
-        $(experimentsPage).find('.cards-switch .button-to').removeClass('selected');
-        $(ev.target).find('.button-to').addClass('selected');
+
+        $(experimentsPage).find('.cards-switch .button-to').removeClass('form-dropdown-state-item');
+        $(experimentsPage).find('.cards-switch .button-to').addClass('btn-light');
+        $(experimentsPage).find('.cards-switch .button-to .view-switch-list-span').css('color', 'black');
+
+        $(ev.target).find('.button-to').removeClass('btn-light');
+        $(ev.target).find('.button-to').addClass('form-dropdown-state-item');
+        $(ev.target).find('.button-to .view-switch-list-span').css('color', 'white');
+
         $(ev.target).parents('.dropdown.view-switch').removeClass('open');
       })
       .on('ajax:error', '.change-projects-view-type-form', function(ev, data) {

app/assets/javascripts/repositories/index.js

@@ -143,14 +143,28 @@
   }
 
   function initRepositoryViewSwitcher() {
+    $('.view-switch-active').addClass('form-dropdown-state-item');
+
     var viewSwitch = $('.view-switch');
     viewSwitch.on('click', '.view-switch-archived', function() {
       $('.repositories-index').removeClass('active').addClass('archived');
+
+      $('.view-switch-btn-name').text($('.view-switch-archived').text());
+
+      $('.view-switch-active').removeClass('form-dropdown-state-item');
+      $('.view-switch-archived').addClass('form-dropdown-state-item');
+
       initRepositoriesDataTable('#repositoriesList', true);
       reloadSidebar();
     });
     viewSwitch.on('click', '.view-switch-active', function() {
       $('.repositories-index').removeClass('archived').addClass('active');
+
+      $('.view-switch-btn-name').text($('.view-switch-active').text());
+
+      $('.view-switch-active').addClass('form-dropdown-state-item');
+      $('.view-switch-archived').removeClass('form-dropdown-state-item');
+
       initRepositoriesDataTable('#repositoriesList');
       reloadSidebar();
     });

app/assets/javascripts/repositories/show.js

@@ -148,14 +148,27 @@
   }
 
   function initRepositoryViewSwitcher() {
+    $('.view-switch-active').addClass('form-dropdown-state-item');
+
     var viewSwitch = $('.view-switch');
     viewSwitch.on('click', '.view-switch-archived', function() {
       $('.repository-show').removeClass('active').addClass('archived');
+
+      $('.view-switch-btn-name').text($('.view-switch-archived').text());
+
+      $('.view-switch-active').removeClass('form-dropdown-state-item');
+      $('.view-switch-archived').addClass('form-dropdown-state-item');
+
       $('#manage-repository-column').removeClass('active').addClass('archived');
       RepositoryDatatable.reload();
     });
     viewSwitch.on('click', '.view-switch-active', function() {
       $('.repository-show').removeClass('archived').addClass('active');
+
+      $('.view-switch-btn-name').text($('.view-switch-active').text());
+
+      $('.view-switch-active').addClass('form-dropdown-state-item');
+      $('.view-switch-archived').removeClass('form-dropdown-state-item');
       $('#manage-repository-column').removeClass('archived').addClass('active');
       RepositoryDatatable.reload();
     });

app/assets/stylesheets/shared/content_pane.scss

@@ -66,7 +66,7 @@
 
         .dropdown-menu {
           @include font-button;
-          min-width: 190px;
+          min-width: 100%;
 
           .divider-label {
             @include font-small;

app/assets/stylesheets/shared_styles/elements/dropdown.scss

@@ -58,6 +58,9 @@
     button {
       color: $color-black !important;
     }
+    .text-light {
+      color: $color-white;
+    }
 
     .form-dropdown-item-info {
       color: $color-silver-chalice !important;
@@ -98,4 +101,26 @@
       }
     }
   }
+
+  .form-dropdown-state-item {
+    background: $brand-primary;
+    border: 1px solid $brand-primary;
+    color: $color-white;
+
+    &:hover {
+      background: $brand-primary-hover !important;
+      color: $color-white;
+    }
+
+    &:active,
+    &.active {
+      background: $brand-primary-press;
+      color: $color-white;
+    }
+
+    &:focus {
+      box-shadow: 0 0 0 1px $brand-complementary;
+      color: $color-white;
+    }
+  }
 }

app/views/experiments/_show_header.html.erb

@@ -32,75 +32,75 @@
                               locals: { project: @project, experiment: @experiment, action_name: action_name } %>
       </span>
       <% end %>
-      <%= render layout: 'shared/view_switch', locals: { disabled: false } do %>
+      <%= 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 btn-light button-to #{ 'selected' if action_name == 'module_archive' }",
+                            class: "btn button-to #{ action_name == 'table' ? 'btn-primary' : 'btn-light' }",
                             form_class: 'change-my-modules-view-type-form',
-                            params: { experiment: { view_type: 'canvas', id: @experiment.id } }) do %>
-                <i class="fas fa-th-large fa-fw"></i>&nbsp;
-                <%= t('experiments.table.view.cards') %>
+                            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 btn-light button-to #{ 'selected' if action_name == 'table' }",
+                            class: "btn button-to #{ action_name == 'module_archive' ? 'btn-primary' : 'btn-light'}",
                             form_class: 'change-my-modules-view-type-form',
-                            params: { experiment: { view_type: 'table', id: @experiment.id  } }) do %>
-                <i class="fas fa-list fa-fw"></i>&nbsp;
-                <%= t('experiments.table.view.table') %>
+                            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 btn-light button-to #{'selected' if action_name == 'canvas'}",
-                          form_class: 'change-my-modules-view-type-form',
-                          params: { experiment: { view_type: 'canvas', id: @experiment.id } }) do %>
-                <i class="fas fa-dice-four button-icon"></i>
-                <%= t('experiments.table.view.canvas') %>
-              <% end %>
-            </li>
             <li class="form-dropdown-item">
               <%= button_to(view_type_experiment_path(@experiment),
                             method: :put,
                             remote: true,
-                            class: "btn btn-light button-to #{ 'selected' if action_name == 'table' }",
+                            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 %>
-                <i class="fas fa-list button-icon"></i>
-                <%= t('experiments.table.view.table') %>
+                <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 %>
 
-          <% if (action_name == 'module_archive' || params[:view_mode] == 'archived') %>
-            <% unless @experiment.archived_branch? %>
-              <div role="separator" class="divider"></div>
-              <li>
-                <%= link_to my_modules_experiment_path(@experiment) do %>
-                  <i class="fas fa-rocket button-icon"></i>
-                  <%= t('experiments.table.view.active_tasks') %>
-                <% end %>
-              </li>
-            <% end %>
-          <% else %>
-            <div role="separator" class="divider"></div>
+        <%= render layout: 'shared/state_view_switch', locals: { disabled: false } do %>
+          <% unless @experiment.archived_branch? %>
             <li>
-              <%= link_to my_modules_experiment_path(@experiment, view_mode: :archived) do %>
-                <i class="fas fa-archive button-icon"></i>
-                <%= t('experiments.table.view.archived_tasks') %>
+              <%= link_to my_modules_experiment_path(@experiment), class: "#{'form-dropdown-state-item' unless (action_name == 'module_archive' || params[:view_mode] == 'archived')}" do %>
+                <%= t('toolbar.active_state') %>
+              <% end %>
+            </li>
+            <li>
+              <%= link_to my_modules_experiment_path(@experiment, view_mode: :archived), class: "#{'form-dropdown-state-item' if (action_name == 'module_archive' || params[:view_mode] == 'archived')}"  do %>
+                <%= t('toolbar.archived_state') %>
               <% end %>
             </li>
           <% end %>
-      <% end %>
+        <% end %>
+
       <% if action_name == 'table' %>
         <%= render partial: 'table_filters.html.erb' %>
 

app/views/projects/index/_header.html.erb

@@ -22,19 +22,7 @@
     </h1>
 
     <div class="sci-btn-group header-actions">
-      <%= render layout: 'shared/view_switch', locals: { disabled: false } do %>
-        <li class="view-switch-list cards-switch form-dropdown-item">
-          <%= button_to(view_type_projects_path(format: :json),
-                        method: :put,
-                        remote: true,
-                        class: "btn btn-light button-to #{ @current_view_type == 'cards' ? 'selected' : ''}",
-                        form_class: 'change-projects-view-type-form',
-                        params: { projects: { view_type: 'cards' } }) do %>
-            <i class="fas fa-th-large"></i>
-            <%= t('projects.index.header.cards') %>
-          <% end %>
-        </li>
-
+      <%= render layout: 'shared/view_switch', locals: { disabled: false, name: t("toolbar.#{@current_view_type}_view") } do %>
         <li class="view-switch-list cards-switch form-dropdown-item">
           <%= button_to(view_type_projects_path(format: :json),
                         method: :put,
@@ -42,19 +30,38 @@
                         class: "btn btn-light button-to #{ @current_view_type == 'table' ? 'selected' : ''}",
                         form_class: 'change-projects-view-type-form',
                         params: { projects: { view_type: 'table' } }) do %>
-            <i class="fas fa-list"></i>
-            <%= t('projects.index.header.table') %>
+            <span class="view-switch-list-span table-switch"><%= t('toolbar.table_view') %></span>
           <% end %>
         </li>
-        <div role="separator" class="divider"></div>
-        <li class="view-switch-active archive-switch" data-view-mode="archived" data-url="<%= projects_path %>">
-          <i class="fas fa-rocket button-icon"></i> <%= t('projects.index.header.active_projects') %>
-        </li>
-
-        <li class="view-switch-archived archive-switch" data-view-mode="active" data-url="<%= projects_path(view_mode: 'archived') %>">
-          <i class="fas fa-archive button-icon"></i> <%= t('projects.index.header.archived_projects') %>
+        <li class="view-switch-list cards-switch form-dropdown-item">
+          <%= button_to(view_type_projects_path(format: :json),
+                        method: :put,
+                        remote: true,
+                        class: "btn btn-light button-to #{ @current_view_type == 'cards' ? 'selected' : ''}",
+                        form_class: 'change-projects-view-type-form',
+                        params: { projects: { view_type: 'cards' } }) do %>
+            <span class="view-switch-list-span cards-switch"><%= t('toolbar.cards_view') %></span>
+          <% end %>
         </li>
       <% end %>
+
+      <%= render layout: 'shared/state_view_switch', locals: { disabled: false } do %>
+        <li class="view-switch-list cards-switch form-dropdown-item">
+          <%= button_tag class: "btn btn-#{params[:view_mode] ? 'light' : 'primary'} state-view-switch archive-switch", data: { url: projects_path } do %>
+            <span class="<%= params[:view_mode] ? 'text-dark' : 'text-light' %>">
+              <%= t('toolbar.active_state') %>
+            </span>
+          <% end %>
+        </li>
+        <li class="view-switch-list cards-switch form-dropdown-item">
+          <%= button_tag class: "btn btn-#{params[:view_mode] ? 'primary' : 'light'} state-view-switch archive-switch", data: { url: projects_path(view_mode: 'archived') } do %>
+            <span class="<%= params[:view_mode] ? 'text-light' : 'text-dark' %>">
+              <%= t('toolbar.archived_state') %>
+            </span>
+          <% end %>
+        </li>
+      <% end %>
+      
       <%= render layout: 'shared/filter_dropdown', locals: {
         container_class: 'projects-filters',
         dropdown_title: t("filters_modal.title"),

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

@@ -21,19 +21,7 @@
     </h1>
     <div class="sci-btn-group header-actions">
       <!-- View switch dropdown -->
-      <%= render layout: 'shared/view_switch', locals: { disabled: false } do %>
-        <li class="view-switch-list cards-switch form-dropdown-item">
-          <%= button_to(view_type_project_path(@project, format: :json),
-                        method: :put,
-                        remote: true,
-                        class: "btn btn-light button-to #{ @current_view_type == 'cards' ? 'selected' : ''}",
-                        form_class: 'change-experiments-view-type-form',
-                        params: { project: { view_type: 'cards', project_id: @project.id } }) do %>
-            <i class="fas fa-th-large"></i>
-            <%= t('projects.index.header.cards') %>
-          <% end %>
-        </li>
-
+      <%= render layout: 'shared/view_switch', locals: { disabled: false, name:  t("toolbar.#{@current_view_type}_view") } do %>
         <li class="view-switch-list cards-switch form-dropdown-item">
           <%= button_to(view_type_project_path(@project, format: :json),
                         method: :put,
@@ -41,22 +29,38 @@
                         class: "btn btn-light button-to #{ @current_view_type == 'table' ? 'selected' : ''}",
                         form_class: 'change-experiments-view-type-form',
                         params: { project: { view_type: 'table', project_id: @project.id } }) do %>
-            <i class="fas fa-list"></i>
-            <%= t('projects.index.header.table') %>
+            <span class="view-switch-list-span table-switch"><%= t('toolbar.table_view') %></span>
+          <% end %>
+        </li>
+        <li class="view-switch-list cards-switch form-dropdown-item">
+          <%= button_to(view_type_project_path(@project, format: :json),
+                        method: :put,
+                        remote: true,
+                        class: "btn btn-light button-to #{ @current_view_type == 'cards' ? 'selected' : ''}",
+                        form_class: 'change-experiments-view-type-form',
+                        params: { project: { view_type: 'cards', project_id: @project.id } }) do %>
+            <span class="view-switch-list-span cards-switch"><%= t('toolbar.cards_view') %></span>
           <% end %>
         </li>
-
-        <% unless @project.archived?%>
-          <div role="separator" class="divider"></div>
-          <li class="view-switch-active archive-switch" data-view-mode="archived" data-url="<%= project_path(@project) %>">
-            <i class="fas fa-rocket button-icon"></i> <%= t('experiments.header.active_experiments') %>
-          </li>
-
-          <li class="view-switch-archived archive-switch" data-view-mode="active" data-url="<%= project_path(@project, view_mode: 'archived') %>">
-            <i class="fas fa-archive button-icon"></i> <%= t('experiments.header.archived_experiments') %>
-          </li>
-        <% end %>
       <% end %>
+
+      <%= render layout: 'shared/state_view_switch', locals: { disabled: false } do %>
+        <li class="view-switch-list cards-switch form-dropdown-item">
+          <%= button_tag class: "btn btn-#{params[:view_mode] ? 'light' : 'primary'} state-view-switch archive-switch", data: { url: project_path(@project) } do %>
+            <span class="<%= params[:view_mode] ? 'text-dark' : 'text-light' %>">
+              <%= t('toolbar.active_state') %>
+            </span>
+          <% end %>
+        </li>
+        <li class="view-switch-list cards-switch form-dropdown-item">
+          <%= button_tag class: "btn btn-#{params[:view_mode] ? 'primary' : 'light'} state-view-switch archive-switch", data: { url: project_path(@project, view_mode: 'archived') } do %>
+            <span class="<%= params[:view_mode] ? 'text-light' : 'text-dark' %>">
+              <%= t('toolbar.archived_state') %>
+            </span>
+          <% end %>
+        </li>
+      <% end %>
+      
       <%= render layout: 'shared/filter_dropdown', locals: {
         container_class: 'experiments-filters',
         dropdown_title: t("filters_modal.title"),

app/views/repositories/_view_archived_btn.html.erb

@@ -4,18 +4,16 @@
     <div class="title-row">
       <h1 data-view-mode="active"><%= t('libraries.index.head_title') %></h1>
       <h1 data-view-mode="archived"><i class="fas fa-archive"></i>&nbsp;<%= t('libraries.index.head_title_archived') %></h1>
-      <%= render layout: "shared/view_switch", locals: { disabled: false } do %>
-        <li class="view-switch-archived" data-view-mode="active">
-          <i class="fas fa-archive button-icon"></i>
-          <%= t('libraries.index.switch_view.archived') %>
+      <%= render layout: "shared/view_switch", locals: { disabled: false, name: params[:archived] ? t('toolbar.archived_state') : t('toolbar.active_state') } do %>
+        <li class="view-switch-active">
+          <%= t('toolbar.active_state') %>
         </li>
-        <li class="view-switch-active" data-view-mode="archived">
-          <i class="fas fa-rocket button-icon"></i>
-          <%= t('libraries.index.switch_view.active') %>
+        <li class="view-switch-archived">
+          <%= t('toolbar.archived_state') %>
         </li>
       <% end %>
     </div>
   </div>
   <div class="content-body">
   </div>
-</div>
+</div>

app/views/repositories/show.html.erb

@@ -64,14 +64,12 @@
           <span class="fas fa-cog"></span>&nbsp;<%= t('repositories.index.columns') %>
         </button>
           <% unless @repository.is_a?(BmtRepository) %>
-            <%= render layout: "shared/view_switch", locals: {disabled: @repository.archived?} do %>
-              <li class="view-switch-archived" data-view-mode="active">
-                <i class="fas fa-archive button-icon"></i>
-                <%= t('repositories.show.show_archived_items') %>
+            <%= render layout: "shared/view_switch", locals: {disabled: @repository.archived?, name: params[:archived] ? t('toolbar.archived_state') : t('toolbar.active_state') } do %>
+              <li class="view-switch-active">
+                <%= t('toolbar.active_state') %>
               </li>
-              <li class="view-switch-active" data-view-mode="archived">
-                <i class="fas fa-rocket button-icon"></i>
-                <%= t('repositories.show.show_active_items') %>
+              <li class="view-switch-archived">
+                <%= t('toolbar.archived_state') %>
               </li>
             <% end %>
           <% end %>

app/views/shared/_state_view_switch.html.erb

@@ -0,0 +1,9 @@
+<div class="dropdown view-switch" >
+  <a href="#" class="btn btn-light view-switch-button <%= "disabled" if disabled %>" id="viewSwitchButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
+    <span class="state-view-switch-btn-name""><%= params[:view_mode] ? t('toolbar.archived_state') : t('toolbar.active_state') %></span>
+    <span class="caret pull-right"></span>
+  </a>
+  <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="viewSwitchButton">
+    <%= yield %>
+  </ul>
+</div>

app/views/shared/_view_switch.html.erb

@@ -1,10 +1,9 @@
 <div class="dropdown view-switch" >
   <a href="#" class="btn btn-light view-switch-button <%= "disabled" if disabled %>" id="viewSwitchButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
-    <span><%= t('general.view') %></span>
+    <span class="view-switch-btn-name""><%= name %></span>
     <span class="caret pull-right"></span>
   </a>
   <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="viewSwitchButton">
-    <li class="divider-label"><%= t("general.set_view_type") %></li>
     <%= yield %>
   </ul>
 </div>

config/locales/en.yml

@@ -3595,3 +3595,9 @@ en:
       over_limit: "%{attribute} is too long (maximum number is %{limit} characters)"
       below_limit: "%{attribute} is too short (minimum number is %{limit} characters)"
       blank: "%{attribute} can't be empty"
+  toolbar:
+    table_view: "Table View"
+    cards_view: "Card View"
+    canvas_view: "Canvas View"
+    active_state: "Active State"
+    archived_state: "Archived State"