Revamp of (top) toolbar + search field - inventories [SCI-8306]

app/assets/javascripts/repositories/index.js

@@ -110,6 +110,12 @@
           DataTableHelpers.initSearchField(dataTableWrapper, I18n.t('repositories.index.filter_inventory'));
           $('.content-body .toolbar').html($('#repositoriesListButtons').html());
           dataTableWrapper.find('.main-actions, .pagination-row').removeClass('hidden');
+          var childHtml = $('.repo-view-switch').detach().html();
+          $('.main-actions').append(childHtml);
+          var removedDivs = $('.main-actions .filter-container').detach();
+          $('.main-actions').append(removedDivs);
+          initRepositoryViewSwitcher();
+
           $('#createRepoBtn').initSubmitModal('#create-repo-modal', 'repository');
           $('#deleteRepoBtn').initSubmitModal('#delete-repo-modal', 'repository');
           $('#renameRepoBtn').initSubmitModal('#rename-repo-modal', 'repository');
@@ -143,7 +149,13 @@
   }
 
   function initRepositoryViewSwitcher() {
+    if ($('.repositories-index').hasClass('active')) {
+      $('.view-switch-btn-name').text(I18n.t('toolbar.active_state'));
       $('.view-switch-active').addClass('form-dropdown-state-item');
+    } else {
+      $('.view-switch-btn-name').text(I18n.t('toolbar.archived_state'));
+      $('.view-switch-archived').addClass('form-dropdown-state-item');
+    }
 
     var viewSwitch = $('.view-switch');
     viewSwitch.on('click', '.view-switch-archived', function() {

app/assets/stylesheets/repository/index.scss

@@ -1,4 +1,9 @@
 .repositories-index {
+
+  .toolbar-wrapper {
+    display: flex;
+    justify-content: space-between;
+  }
   &.active {
     [data-view-mode="archived"] {
       display: none !important;
@@ -42,7 +47,88 @@
   }
 }
 
+.dataTables_wrapper {
+  .main-actions {
+    .toolbar {
+      flex-grow: 0 !important;
+    }
+  }
+}
+
 .main-actions {
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
+
+  .view-switch {
+    .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;
+      }
+    }
+  }
+
   .dropdown-menu {
     font-size: 14px;
   }

app/assets/stylesheets/shared/datatable.scss

@@ -19,7 +19,6 @@
       display: none;
     }
 
-    @media (max-width: 900px) {
     .search-icon:not(.collapsed) {
       display: initial;
     }
@@ -28,7 +27,6 @@
       display: none;
     }
   }
-  }
 
   .dataTables_scrollHead {
     .dataTable {

app/views/repositories/_view_archived_btn.html.erb

@@ -4,14 +4,6 @@
     <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, 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-archived">
-          <%= t('toolbar.archived_state') %>
-        </li>
-      <% end %>
     </div>
   </div>
   <div class="content-body">

app/views/repositories/index.html.erb

@@ -46,6 +46,19 @@
     <span class="hidden-xs"><%= t('libraries.index.no_libraries.create_new_button') %></span>
   </a>
 <% end %>
+
+<div class="content-header repo-view-switch">
+  <%= 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-archived">
+      <%= t('toolbar.archived_state') %>
+    </li>
+  <% end %>
+</div>
+
+  <!--
   <a id="renameRepoBtn" class="btn btn-light disabled hidden" data-view-mode="active" href="#" data-action-mode="single" data-remote="true">
     <span class="fas fa-pencil-alt"></span>
     <%= t('libraries.index.buttons.edit') %>
@@ -76,6 +89,7 @@
     <span class="fas fa-trash"></span>
     <%= t('libraries.index.buttons.delete') %>
   </a>
+  -->
 </template>
 
 <%= javascript_include_tag "repositories/index" %>