diff options
author | Ezekiel Kigbo <ekigbo@gitlab.com> | 2019-04-05 15:41:28 +0300 |
---|---|---|
committer | Ezekiel Kigbo <ekigbo@gitlab.com> | 2019-05-06 18:41:46 +0300 |
commit | 6daec21a161821816b1eda03b52369d61685fe48 (patch) | |
tree | d2a967ffaf26efac40c95e4482109f632f6b9fa7 /app/views | |
parent | 6bab1f8dde3365007c83f3719758a96589673225 (diff) |
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.
Diffstat (limited to 'app/views')
-rw-r--r-- | app/views/dashboard/_projects_head.html.haml | 15 | ||||
-rw-r--r-- | app/views/dashboard/projects/_nav.html.haml | 18 | ||||
-rw-r--r-- | app/views/dashboard/projects/starred.html.haml | 3 | ||||
-rw-r--r-- | app/views/explore/projects/index.html.haml | 5 | ||||
-rw-r--r-- | app/views/explore/projects/starred.html.haml | 5 | ||||
-rw-r--r-- | app/views/explore/projects/trending.html.haml | 5 | ||||
-rw-r--r-- | app/views/shared/projects/_dropdown.html.haml | 71 | ||||
-rw-r--r-- | app/views/shared/projects/_search_bar.html.haml | 37 | ||||
-rw-r--r-- | app/views/shared/projects/_search_form.html.haml | 2 |
9 files changed, 93 insertions, 68 deletions
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", |