Commit 8da32451 authored by Ezekiel Kigbo's avatar Ezekiel Kigbo
Browse files

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.
parent 844f266b9e4d
......@@ -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
}
......@@ -29,14 +29,13 @@ def sort_options_hash
}
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 @@ def projects_sort_options_hash
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 @@ def issuable_sort_direction_button(sort_value)
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 @@ def sort_title_most_stars
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 @@ def sort_value_most_stars
'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
......
- 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
- 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
......@@ -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'
......
......@@ -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
......@@ -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
......@@ -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
- @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)
- @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'
......
......@@ -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",
......
......@@ -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 ""
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment