Updated layout for various breakpoints

Updated translations

Adds sort direction dropdown

Allows the project list sorting direction to be changed,
available options can be sorted ascending or descending.
Implements the changes from the UX review.

12 files changed, 304 insertions, 74 deletions

diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss
index 3b66006e26a..d6422a4d425 100644
--- a/app/assets/stylesheets/pages/projects.scss
+++ b/app/assets/stylesheets/pages/projects.scss
@@ -1448,6 +1448,14 @@ pre.light-well {
 }
 
 .project-filters {
+  .row-content-block {
+    border-top: 0;
+  }
+
+  .btn svg {
+    color: $gl-gray-700;
+  }
+
   .button-filter-group {
     .btn {
       width: 96px;
@@ -1462,9 +1470,144 @@ pre.light-well {
     }
   }
 
-  @include media-breakpoint-down(sm) {
+  .filter-with-icon {
+    border-radius: 3px 0 0 3px;
+  }
+
+  .filtered-search-wrapper {
+    flex-wrap: nowrap;
+    flex-direction: row;
+  }
+
+  .filtered-search-dropdown {
+    width: auto;
+    flex-direction: row;
+    align-items: center;
+  }
+
+  .filtered-search,
+  .filtered-search-nav,
+  .filtered-search-dropdown {
+    display: flex;
+    min-width: auto;
+    margin: 0;
+  }
+
+  .filtered-search-dropdown-label {
+    padding: 0 8px 0 16px;
+    font-weight: bold;
+    min-width: 76px;
+  }
+
+  .filtered-search {
+    margin: 0 0 0 16px;
+    min-width: 30%;
+    width: 100%;
+    flex: 1 1 0;
+
+    .project-filter-form .project-filter-form-field {
+      padding-right: 8px;
+    }
+  }
+
+  .filtered-search,
+  .filtered-search-dropdown {
+    .btn-group {
+      width: 100%;
+    }
+
+    .qa-reverse-sort {
+      max-width: 38px;
+    }
+  }
+
+  .filtered-search-box {
+    border-radius: 3px 0 0 3px;
+  }
+
+  @include media-breakpoint-down(lg) {
+    .filtered-search {
+      min-width: 15%;
+
+      .project-filter-form-field {
+        min-width: 150px;
+      }
+    }
+
+    .extended-filtered-search.filtered-search {
+      margin-left: 0;
+      min-width: 65%;
+    }
+  }
+
+  @include media-breakpoint-down(md) {
+    .filtered-search {
+      margin: 0 0 8px 16px;
+      min-width: 30%;
+    }
+
+    .filtered-search-nav {
+      margin: 0 0 8px;
+    }
+
+
+    .filtered-search-wrapper {
+      flex-wrap: wrap;
+    }
+
+    .filtered-search-dropdown {
+      width: 50%;
+    }
+
+    .filtered-search-dropdown .dropdown {
+      display: flex;
+      flex: 1 1 0;
+    }
+
+    .filtered-search-dropdown .dropdown button {
+      width: 100%;
+    }
+  }
+
+  @include media-breakpoint-down(xs) {
     .dropdown-menu-toggle {
       width: 100%;
     }
+
+    .filtered-search-wrapper {
+      display: flex;
+      flex-flow: column nowrap;
+    }
+
+    .filtered-search,
+    .filtered-search-nav,
+    .filtered-search-dropdown {
+      flex: 1 1 0;
+      width: 100%;
+    }
+
+    .filtered-search {
+      margin-left: 0;
+    }
+
+    .filtered-search-box {
+      margin: 0;
+    }
+
+    .filtered-search-nav .nav-block {
+      width: 100%;
+    }
+
+    .filtered-search-dropdown {
+      margin: 0 0 8px;
+    }
+
+    .filtered-search-dropdown-label {
+      padding-left: 0;
+    }
+
   }
-}
\ No newline at end of file
+
+  
+}
+
diff --git a/app/helpers/sorting_helper.rb b/app/helpers/sorting_helper.rb
index 6524ba55a16..bfba12972db 100644
--- a/app/helpers/sorting_helper.rb
+++ b/app/helpers/sorting_helper.rb
@@ -29,14 +29,13 @@ module SortingHelper
     }
   end
 
+  # TODO: stars_asc doesnt seem to work
   def projects_sort_options_hash
     options = {
       sort_value_latest_activity  => sort_title_latest_activity,
-      sort_value_name             => sort_title_name,
-      sort_value_oldest_activity  => sort_title_oldest_activity,
-      sort_value_oldest_created   => sort_title_oldest_created,
       sort_value_recently_created => sort_title_recently_created,
-      sort_value_most_stars       => sort_title_most_stars
+      sort_value_name             => sort_title_name,
+      sort_value_most_stars       => sort_title_stars
     }
 
     if current_controller?('admin/projects')
@@ -46,6 +45,32 @@ module SortingHelper
     options
   end
 
+  def projects_sort_option_titles
+    {
+      sort_value_latest_activity  => sort_title_latest_activity,
+      sort_value_recently_created => sort_title_recently_created,
+      sort_value_name             => sort_title_name,
+      sort_value_most_stars       => sort_title_stars,
+      sort_value_oldest_activity  => sort_title_latest_activity,
+      sort_value_oldest_created   => sort_title_recently_created,
+      sort_value_name_desc        => sort_title_name,
+      sort_value_most_stars_asc   => sort_title_stars
+    }
+  end
+
+  def projects_reverse_sort_options_hash
+    {
+      sort_value_latest_activity  => sort_value_oldest_activity,
+      sort_value_recently_created => sort_value_oldest_created,
+      sort_value_name             => sort_value_name_desc,
+      sort_value_most_stars       => sort_value_most_stars_asc,
+      sort_value_oldest_activity  => sort_value_latest_activity,
+      sort_value_oldest_created   => sort_value_recently_created,
+      sort_value_name_desc        => sort_value_name,
+      sort_value_most_stars_asc   => sort_value_most_stars
+    }
+  end
+
   def groups_sort_options_hash
     {
       sort_value_name             => sort_title_name,
@@ -192,6 +217,22 @@ module SortingHelper
     end
   end
 
+  def project_sort_direction_button(sort_value)
+    link_class = 'btn btn-default has-tooltip reverse-sort-btn qa-reverse-sort'
+    reverse_sort = projects_reverse_sort_options_hash[sort_value]
+
+    if reverse_sort
+      reverse_url = filter_projects_path(sort: reverse_sort)
+    else
+      reverse_url = '#'
+      link_class += ' disabled'
+    end
+
+    link_to(reverse_url, type: 'button', class: link_class, title: 'Sort direction') do
+      sprite_icon("sort-#{issuable_sort_icon_suffix(sort_value)}", size: 16)
+    end
+  end
+
   # Titles.
   def sort_title_access_level_asc
     s_('SortOptions|Access level, ascending')
@@ -325,6 +366,10 @@ module SortingHelper
     s_('SortOptions|Most stars')
   end
 
+  def sort_title_stars
+    s_('SortOptions|Stars')
+  end
+
   def sort_title_oldest_last_activity
     s_('SortOptions|Oldest last activity')
   end
@@ -470,6 +515,11 @@ module SortingHelper
     'stars_desc'
   end
 
+  # TODO: currently not implemented AFAIK
+  def sort_value_most_stars_asc
+    'stars_asc'
+  end
+
   def sort_value_oldest_last_activity
     'last_activity_on_asc'
   end
diff --git a/app/views/dashboard/_projects_head.html.haml b/app/views/dashboard/_projects_head.html.haml
index bb14b33079d..f52f4eec36a 100644
--- a/app/views/dashboard/_projects_head.html.haml
+++ b/app/views/dashboard/_projects_head.html.haml
@@ -1,3 +1,6 @@
+- is_explore = local_assigns.fetch(:is_explore, false)
+- is_explore_trending = local_assigns.fetch(:is_explore_trending, false)
+- without_tabs = local_assigns.fetch(:without_tabs, false)
 = content_for :flash_message do
   = render 'shared/project_limit'
 
@@ -6,27 +9,27 @@
 
   - if current_user.can_create_project?
     .page-title-controls
-      = link_to "New project", new_project_path, class: "btn btn-success"
+      = link_to _("New project"), new_project_path, class: "btn btn-success"
 
 .top-area.scrolling-tabs-container.inner-page-scroll-tabs
   .fade-left= icon('angle-left')
   .fade-right= icon('angle-right')
-  %ul.nav-links.scrolling-tabs.mobile-separator.nav.nav-tabs
+  %ul.nav-links.scrolling-tabs.mobile-separator.nav.nav-tabs.border-0
     = nav_link(page: [dashboard_projects_path, root_path]) do
       = link_to dashboard_projects_path, class: 'shortcuts-activity', data: {placement: 'right'} do
-        Your projects
+        = _("Your projects")
         %span.badge.badge-pill= limited_counter_with_delimiter(@total_user_projects_count)
     = nav_link(page: starred_dashboard_projects_path) do
       = link_to starred_dashboard_projects_path, data: {placement: 'right'} do
-        Starred projects
+        = _("Starred projects")
         %span.badge.badge-pill= limited_counter_with_delimiter(@total_starred_projects_count)
     = nav_link(page: [explore_root_path, trending_explore_projects_path, starred_explore_projects_path, explore_projects_path]) do
       = link_to explore_root_path, data: {placement: 'right'} do
-        Explore projects
+        = _("Explore projects")
   - unless Feature.enabled?(:project_list_filter_bar)
     .nav-controls
       = render 'shared/projects/search_form'
       = render 'shared/projects/dropdown'
 - if Feature.enabled?(:project_list_filter_bar)
   .project-filters
-    = render 'shared/projects/search_bar'
+    = render 'shared/projects/search_bar', is_explore: is_explore, is_explore_trending: is_explore_trending, without_tabs: without_tabs
diff --git a/app/views/dashboard/projects/_nav.html.haml b/app/views/dashboard/projects/_nav.html.haml
index 2aff1f1f3a3..8f4a517d918 100644
--- a/app/views/dashboard/projects/_nav.html.haml
+++ b/app/views/dashboard/projects/_nav.html.haml
@@ -1,3 +1,8 @@
+
+- is_explore = local_assigns.fetch(:is_explore, false)
+- inactive_class = 'btn p-2'
+- active_class = 'btn p-2 active'
+- is_explore_trending = local_assigns.fetch(:is_explore_trending, false)
 .nav-block
   - if !Feature.enabled?(:project_list_filter_bar)
     %ul.nav-links.mobile-separator.nav.nav-tabs
@@ -6,8 +11,11 @@
       = nav_link(html_options: { class: ("active" if params[:personal].present?) }) do
         = link_to s_('DashboardProjects|Personal'), filter_projects_path(personal: true)
   - else
-    %ul.btn-group.button-filter-group.d-flex.m-0.p-0
-      = nav_link(html_options: { class: params[:personal].present? ? "btn p-2" : "btn p-2 active" }) do
-        = link_to s_('DashboardProjects|All'), dashboard_projects_path
-      = nav_link(html_options: { class: params[:personal].present? ? "btn p-2 active" : "btn p-2" }) do
-        = link_to s_('DashboardProjects|Personal'), filter_projects_path(personal: true)
+    -# %ul.btn-group.button-filter-group.d-flex.m-0.p-0
+    %div.btn-group.button-filter-group.d-flex.m-0.p-0
+      - if is_explore
+        = link_to s_('DashboardProjects|Trending'), trending_explore_projects_path, class: is_explore_trending ? active_class : inactive_class
+        = link_to s_('DashboardProjects|All'), explore_projects_path, class: is_explore_trending ? inactive_class : active_class
+      - else
+        = link_to s_('DashboardProjects|All'), dashboard_projects_path, class: params[:personal].present? ? inactive_class : active_class
+        = link_to s_('DashboardProjects|Personal'), filter_projects_path(personal: true), class: params[:personal].present? ? active_class : inactive_class
diff --git a/app/views/dashboard/projects/starred.html.haml b/app/views/dashboard/projects/starred.html.haml
index a0d85446e5f..a9075e462db 100644
--- a/app/views/dashboard/projects/starred.html.haml
+++ b/app/views/dashboard/projects/starred.html.haml
@@ -3,12 +3,13 @@
 - breadcrumb_title _("Projects")
 - page_title _("Starred Projects")
 - header_title _("Projects"), dashboard_projects_path
+- without_tabs = true
 
 = render_dashboard_gold_trial(current_user)
 
 %div{ class: container_class }
   = render "projects/last_push"
-  = render 'dashboard/projects_head'
+  = render 'dashboard/projects_head', without_tabs: without_tabs
 
   - if params[:filter_projects] || any_projects?(@projects)
     = render 'projects'
diff --git a/app/views/explore/projects/index.html.haml b/app/views/explore/projects/index.html.haml
index dd2bf6a5ef8..fed226a184c 100644
--- a/app/views/explore/projects/index.html.haml
+++ b/app/views/explore/projects/index.html.haml
@@ -5,9 +5,10 @@
 = render_dashboard_gold_trial(current_user)
 
 - if current_user
-  = render 'dashboard/projects_head'
+  = render 'dashboard/projects_head', is_explore: true
 - else
   = render 'explore/head'
 
-= render 'explore/projects/nav'
+- unless Feature.enabled?(:project_list_filter_bar)
+  = render 'explore/projects/nav'
 = render 'projects', projects: @projects
diff --git a/app/views/explore/projects/starred.html.haml b/app/views/explore/projects/starred.html.haml
index dd2bf6a5ef8..fed226a184c 100644
--- a/app/views/explore/projects/starred.html.haml
+++ b/app/views/explore/projects/starred.html.haml
@@ -5,9 +5,10 @@
 = render_dashboard_gold_trial(current_user)
 
 - if current_user
-  = render 'dashboard/projects_head'
+  = render 'dashboard/projects_head', is_explore: true
 - else
   = render 'explore/head'
 
-= render 'explore/projects/nav'
+- unless Feature.enabled?(:project_list_filter_bar)
+  = render 'explore/projects/nav'
 = render 'projects', projects: @projects
diff --git a/app/views/explore/projects/trending.html.haml b/app/views/explore/projects/trending.html.haml
index dd2bf6a5ef8..e4e612175f5 100644
--- a/app/views/explore/projects/trending.html.haml
+++ b/app/views/explore/projects/trending.html.haml
@@ -5,9 +5,10 @@
 = render_dashboard_gold_trial(current_user)
 
 - if current_user
-  = render 'dashboard/projects_head'
+  = render 'dashboard/projects_head', is_explore: true, is_explore_trending: true
 - else
   = render 'explore/head'
 
-= render 'explore/projects/nav'
+- unless Feature.enabled?(:project_list_filter_bar)
+  = render 'explore/projects/nav'
 = render 'projects', projects: @projects
diff --git a/app/views/shared/projects/_dropdown.html.haml b/app/views/shared/projects/_dropdown.html.haml
index 98b258d9275..4cecfd16bc1 100644
--- a/app/views/shared/projects/_dropdown.html.haml
+++ b/app/views/shared/projects/_dropdown.html.haml
@@ -1,41 +1,46 @@
 - @sort ||= sort_value_latest_activity
-.dropdown.js-project-filter-dropdown-wrap
-  - toggle_text = projects_sort_options_hash[@sort]
-  = dropdown_toggle(toggle_text, { toggle: 'dropdown', display: 'static' }, { id: 'sort-projects-dropdown' })
-  %ul.dropdown-menu.dropdown-menu-right.dropdown-menu-selectable
-    %li.dropdown-header
-      Sort by
-    - projects_sort_options_hash.each do |value, title|
-      %li
-        = link_to filter_projects_path(sort: value), class: ("is-active" if @sort == value) do
-          = title
+.btn-group{ role: "group" }
+  .btn-group.dropdown.js-project-filter-dropdown-wrap.filter-with-icon{ role: "group" }
+    - toggle_text = projects_sort_option_titles[@sort]
+    %button.dropdown-menu-toggle{ id: 'sort-projects-dropdown', type: 'button', data: { toggle: 'dropdown', display: 'static' }, class: 'btn btn-default' }
+      = toggle_text
+      = icon('chevron-down')
+    %ul.dropdown-menu.dropdown-menu-right.dropdown-menu-selectable
+      %li.dropdown-header
+        Sort by
+      - projects_sort_options_hash.each do |value, title|
+        %li
+          = link_to filter_projects_path(sort: value), class: ("is-active" if projects_sort_option_titles[@sort] == title) do
+            = title
 
-    %li.divider
-    %li
-      = link_to filter_projects_path(archived: nil), class: ("is-active" unless params[:archived].present?) do
-        Hide archived projects
-    %li
-      = link_to filter_projects_path(archived: true), class: ("is-active" if Gitlab::Utils.to_boolean(params[:archived])) do
-        Show archived projects
-    %li
-      = link_to filter_projects_path(archived: 'only'), class: ("is-active" if params[:archived] == 'only') do
-        Show archived projects only
-    - if current_user
       %li.divider
       %li
-        = link_to filter_projects_path(personal: nil), class: ("is-active" unless params[:personal].present?) do
-          Owned by anyone
+        = link_to filter_projects_path(archived: nil), class: ("is-active" unless params[:archived].present?) do
+          Hide archived projects
+      %li
+        = link_to filter_projects_path(archived: true), class: ("is-active" if Gitlab::Utils.to_boolean(params[:archived])) do
+          Show archived projects
       %li
-        = link_to filter_projects_path(personal: true), class: ("is-active" if params[:personal].present?) do
-          Owned by me
-      - if @group && @group.shared_projects.present?
+        = link_to filter_projects_path(archived: 'only'), class: ("is-active" if params[:archived] == 'only') do
+          Show archived projects only
+      - if current_user
         %li.divider
         %li
-          = link_to filter_projects_path(shared: nil), class: ("is-active" unless params[:shared].present?) do
-            All projects
+          = link_to filter_projects_path(personal: nil), class: ("is-active" unless params[:personal].present?) do
+            Owned by anyone
         %li
-          = link_to filter_projects_path(shared: 0), class: ("is-active" if params[:shared] == '0') do
-            Hide shared projects
-        %li
-          = link_to filter_projects_path(shared: 1), class: ("is-active" if params[:shared] == '1') do
-            Hide group projects
+          = link_to filter_projects_path(personal: true), class: ("is-active" if params[:personal].present?) do
+            Owned by me
+        - if @group && @group.shared_projects.present?
+          %li.divider
+          %li
+            = link_to filter_projects_path(shared: nil), class: ("is-active" unless params[:shared].present?) do
+              All projects
+          %li
+            = link_to filter_projects_path(shared: 0), class: ("is-active" if params[:shared] == '0') do
+              Hide shared projects
+          %li
+            = link_to filter_projects_path(shared: 1), class: ("is-active" if params[:shared] == '1') do
+              Hide group projects
+
+  = project_sort_direction_button(@sort)
diff --git a/app/views/shared/projects/_search_bar.html.haml b/app/views/shared/projects/_search_bar.html.haml
index b05bbdeebc8..7941a0b9173 100644
--- a/app/views/shared/projects/_search_bar.html.haml
+++ b/app/views/shared/projects/_search_bar.html.haml
@@ -1,25 +1,30 @@
 - @sort ||= sort_value_latest_activity
--# TODO: simplify multiple utility classes into single class?
+- is_explore = local_assigns.fetch(:is_explore, false)
+- is_explore_trending = local_assigns.fetch(:is_explore_trending, false)
+- without_tabs = local_assigns.fetch(:without_tabs, false)
 .filtered-search-block.row-content-block
-  .filtered-search-wrapper.d-flex.flex-column.flex-md-row.mt-2.mt-md-0
-    .d-inline.d-md-flex.mb-2.mb-md-0
-      = render 'dashboard/projects/nav'
-    .filtered-search-box.mb-2.mb-md-0.ml-md-2
-      .filtered-search-box-input-container.pl-2
-        = render 'shared/projects/search_form', admin_view: false, search_form_placeholder: _("Search projects...")
-      -# TODO: double check if theres a point to this button, or is it just aesthetic for now
-      -# TODO: fix right hand border
-      %button.input-group-append.btn.btn-secondary{ type: 'submit' }
-        = sprite_icon('search', size: 18, css_class: 'search-icon ')
-    -# TODO: need to double check visibility is applying correctly
-    .d-inline.d-md-flex.mb-2.mb-md-0.ml-md-2.flex-row
-      .d-flex.align-items-center.px-2.font-weight-bold
+  .filtered-search-wrapper.d-flex.mt-2.mt-lg-0
+    - unless without_tabs
+      .filtered-search-nav
+        = render 'dashboard/projects/nav', is_explore: is_explore, is_explore_trending: is_explore_trending
+    .filtered-search.field-with-icon
+      .btn-group{ role: "group" }
+        .btn-group{ role: "group" }
+          .filtered-search-box{ class: without_tabs ? "extended-filtered-search-box" : "" }
+            .filtered-search-box-input-container.pl-2
+              = render 'shared/projects/search_form', admin_view: false, search_form_placeholder: _("Search projects...")
+        -# TODO: since we are no longer triggering search when we type
+        -#       we might be able to remove the `js-projects-list-filter` 
+        %button.btn.btn-secondary{ type: 'submit', form: 'project-filter-form' }
+          = sprite_icon('search', size: 16, css_class: 'search-icon ')
+    .filtered-search-dropdown
+      .filtered-search-dropdown-label
         %span
           = _("Visibility")
       .dropdown.js-project-filter-dropdown-wrap.inline-md
         = render 'explore/projects/filter', has_label: true
-    .d-inline.d-md-flex.mb-2.mb-md-0.ml-md-2.flex-row
-      .d-flex.align-items-center.px-2.font-weight-bold
+    .filtered-search-dropdown
+      .filtered-search-dropdown-label
         %span
           = _("Sort by")
       = render 'shared/projects/dropdown'
diff --git a/app/views/shared/projects/_search_form.html.haml b/app/views/shared/projects/_search_form.html.haml
index f563a8aeffa..b85f51f37c5 100644
--- a/app/views/shared/projects/_search_form.html.haml
+++ b/app/views/shared/projects/_search_form.html.haml
@@ -4,7 +4,7 @@
 = form_tag filter_projects_path, method: :get, class: 'project-filter-form', id: 'project-filter-form' do |f|
   = search_field_tag :name, params[:name],
     placeholder: placeholder,
-    class: "project-filter-form-field form-control js-projects-list-filter #{form_field_classes}",
+    class: "project-filter-form-field form-control #{form_field_classes}",
     spellcheck: false,
     id: 'project-filter-form-field',
     tabindex: "2",
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 445984c7847..c269f4702d5 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -3072,6 +3072,9 @@ msgstr ""
 msgid "DashboardProjects|Personal"
 msgstr ""
 
+msgid "DashboardProjects|Trending"
+msgstr ""
+
 msgid "Data is still calculating..."
 msgstr ""
 
@@ -8223,6 +8226,9 @@ msgstr ""
 msgid "Search projects"
 msgstr ""
 
+msgid "Search projects..."
+msgstr ""
+
 msgid "Search users"
 msgstr ""
 
@@ -8786,6 +8792,9 @@ msgstr ""
 msgid "SortOptions|Recent sign in"
 msgstr ""
 
+msgid "SortOptions|Stars"
+msgstr ""
+
 msgid "SortOptions|Start later"
 msgstr ""
 
@@ -10544,6 +10553,9 @@ msgstr ""
 msgid "Viewing commit"
 msgstr ""
 
+msgid "Visibility"
+msgstr ""
+
 msgid "Visibility and access controls"
 msgstr ""