Update sorting dropdown

app/assets/javascripts/projects/index.js

@@ -538,12 +538,12 @@
   }
 
   function initSorting() {
-    $('#sortMenuDropdown li').click(function() {
+    $('#sortMenuDropdown a').click(function() {
       if (projectsCurrentSort !== $(this).data('sort')) {
-        $('#sortMenuDropdown li').removeClass('active');
+        $('#sortMenuDropdown a').removeClass('selected');
         projectsCurrentSort = $(this).data('sort');
         loadCardsView();
-        $(this).addClass('active');
+        $(this).addClass('selected');
         $('#sortMenu').dropdown('toggle');
       }
     });

app/assets/stylesheets/projects.scss

@@ -1,5 +1,8 @@
 // scss-lint:disable SelectorDepth
 // scss-lint:disable NestingDepth
+// scss-lint:disable SelectorFormat
+// scss-lint:disable IdSelector
+
 @import 'constants';
 @import "mixins";
 
@@ -557,19 +560,52 @@ li.module-hover {
     }
   }
 
-  .sort-projects-menu {
-    li.active::after {
-      @include font-awesome;
-      content: "\f00c";
-      position: absolute;
-      right: 1em;
-    }
-  }
-
   .header-actions {
     align-items: center;
     display: flex;
     margin-left: auto;
+
+    .projects-sort-menu {
+      display: inline-block;
+
+      #sortMenu {
+        background: $color-white;
+
+        &:focus,
+        &:active {
+          box-shadow: none;
+        }
+
+        &:hover {
+          background: $color-concrete;
+        }
+      }
+
+      .dropdown-menu {
+        @include font-button;
+        min-width: 150px;
+        padding: .5em 0;
+
+        a {
+          border-radius: unset;
+          cursor: pointer;
+          padding: .5em 1em;
+          text-align: left;
+
+          &:hover {
+            background: $color-concrete;
+          }
+
+          &.selected::after {
+            @include font-awesome;
+            content: $font-fas-check;
+            margin-left: auto;
+            position: absolute;
+            right: 1em;
+          }
+        }
+      }
+    }
   }
 
   .filter-container {

app/helpers/projects_helper.rb

@@ -25,9 +25,9 @@ module ProjectsHelper
                 records.sort_by { |c| c.name.downcase }
               when 'ztoa'
                 records.sort_by { |c| c.name.downcase }.reverse!
-              when 'archived_first'
+              when 'arch_old'
                 records.sort_by { |c| [c.class.to_s, c.archived_on] }
-              when 'archived_last'
+              when 'arch_new'
                 records.sort_by { |c| [c.class.to_s, -c.archived_on.to_i] }
               end
     folders_recursive_builder(nil, records)

app/models/team.rb

@@ -58,7 +58,7 @@ class Team < ApplicationRecord
 
   def validate_view_state(view_state)
     if %w(new old atoz ztoa).exclude?(view_state.state.dig('projects', 'active', 'sort')) ||
-       %w(new old atoz ztoa archived_first archived_last)
+       %w(new old atoz ztoa arch_new arch_old)
        .exclude?(view_state.state.dig('projects', 'archived', 'sort')) ||
        %w(active archived).exclude?(view_state.state.dig('projects', 'view_mode'))
       view_state.errors.add(:state, :wrong_state)

app/services/projects_overview_service.rb

@@ -19,7 +19,7 @@ class ProjectsOverviewService
     # Update sort if chanhed
     @sort = @view_state.state.dig('projects', @view_mode, 'sort')
     if @params[:sort] && @sort != @params[:sort] &&
-       %w(new old atoz ztoa archived_first archived_last).include?(@params[:sort])
+       %w(new old atoz ztoa arch_old arch_new).include?(@params[:sort])
       @view_state.state['projects'].merge!(Hash[@view_mode, { 'sort': @params[:sort] }.stringify_keys])
       @view_state.save!
       @sort = @view_state.state.dig('projects', @view_mode, 'sort')
@@ -168,9 +168,9 @@ class ProjectsOverviewService
       records.order(:name)
     when 'ztoa'
       records.order(name: :desc)
-    when 'archived_first'
+    when 'arch_old'
       records.order(archived_on: :asc)
-    when 'archived_last'
+    when 'arch_new'
       records.order(archived_on: :desc)
     else
       records
@@ -187,9 +187,9 @@ class ProjectsOverviewService
       records.sort_by { |c| c.name.downcase }
     when 'ztoa'
       records.sort_by { |c| c.name.downcase }.reverse!
-    when 'archived_first'
+    when 'arch_old'
       records.sort_by { |c| [c.class.to_s, c.archived_on] }
-    when 'archived_last'
+    when 'arch_new'
       records.sort_by { |c| [c.class.to_s, -c.archived_on.to_i] }
     end
   end

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

@@ -129,18 +129,21 @@
       </div>
     </div>
 
-    <div class="dropdown view-switch sort-switch">
+    <div class="dropdown projects-sort-menu">
       <button class="btn btn-light dropdown-toggle" type="button" id="sortMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
         <span><i class="fas fa-sort-amount-down"></i></span>
         <span class="caret"></span>
       </button>
       <ul id="sortMenuDropdown" class="dropdown-menu sort-projects-menu" aria-labelledby="sortMenu">
-        <% %w(new old atoz ztoa archived_first archived_last).each do |sort| %>
-          <li data-sort="<%= sort %>"
-              <%= %w(archived_first archived_last).include?(sort) ? 'data-view-mode=archived' : '' %>
-              class="<%= @current_sort == sort ? 'active' : '' %>">
-
-            <%= t("projects.index.sort.#{sort}") %>
+        <% %w(new old atoz ztoa arch_new arch_old).each_with_index do |sort, i| %>
+          <% if i.even? && i.positive? %>
+            <li class="divider" <%= i > 3 ? 'data-view-mode=archived' : '' %>></li>
+          <% end %>
+          <li <%= %w(arch_new arch_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>

config/locales/en.yml

@@ -425,13 +425,6 @@ en:
          none: "No projects"
          one: "Show project"
         clear_btn: "Clear"
-      sort:
-        new: "Started last"
-        old: "Started first"
-        atoz: "Name A - Z"
-        ztoa: "Name Z - A"
-        archived_first: "Archived first"
-        archived_last: "Archived last"
 
     export_projects:
       export_button: "Export"