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.

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;
     }
+
+  }
+
+  
 }
+

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

app/views/dashboard/_projects_head.html.haml

+- 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

app/views/dashboard/projects/_nav.html.haml

+
+- 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

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'

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

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

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

app/views/shared/projects/_dropdown.html.haml

 - @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' })
+.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 @sort == value) do
+          = link_to filter_projects_path(sort: value), class: ("is-active" if projects_sort_option_titles[@sort] == title) do
             = title
 
       %li.divider
@@ -39,3 +42,5 @@
           %li
             = link_to filter_projects_path(shared: 1), class: ("is-active" if params[:shared] == '1') do
               Hide group projects
+
+  = project_sort_direction_button(@sort)

app/views/shared/projects/_search_bar.html.haml

 - @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-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: 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
+        -# 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'

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",

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 ""