From 52252e70e8222e573901632a03d408f3f8698f63 Mon Sep 17 00:00:00 2001 From: Phil Hughes Date: Wed, 16 Aug 2017 09:14:06 +0100 Subject: [PATCH 01/18] Improvements to breadcrumbs Closes #35269 --- app/assets/stylesheets/new_nav.scss | 42 ++++++++------------ app/helpers/projects_helper.rb | 11 +++-- app/views/layouts/nav/_breadcrumbs.html.haml | 15 +++---- 3 files changed, 29 insertions(+), 39 deletions(-) diff --git a/app/assets/stylesheets/new_nav.scss b/app/assets/stylesheets/new_nav.scss index 3e2f23e6b2a..f39ccaac287 100644 --- a/app/assets/stylesheets/new_nav.scss +++ b/app/assets/stylesheets/new_nav.scss @@ -402,6 +402,20 @@ header.navbar-gitlab-new { } } +.breadcrumbs-list { + display: flex; + margin-bottom: 0; + + > li { + display: flex; + align-items: center; + } + + a { + color: $gl-text-color; + } +} + .breadcrumbs-extra { display: flex; flex: 0 0 auto; @@ -409,34 +423,10 @@ header.navbar-gitlab-new { } .breadcrumbs-sub-title { - margin: 2px 0; - font-size: 16px; + margin: 0; + font-size: $gl-font-size; font-weight: normal; line-height: 1; - - ul { - margin: 0; - } - - li { - display: inline-block; - - &:not(:last-child) { - &::after { - content: "/"; - margin: 0 2px 0 5px; - color: rgba($black, .65); - } - } - - &:last-child a { - font-weight: 600; - } - } - - a { - color: $gl-text-color; - } } .top-area { diff --git a/app/helpers/projects_helper.rb b/app/helpers/projects_helper.rb index bee4950e414..2fbb294a5ec 100644 --- a/app/helpers/projects_helper.rb +++ b/app/helpers/projects_helper.rb @@ -58,7 +58,7 @@ module ProjectsHelper link_to(simple_sanitize(owner.name), user_path(owner)) end - project_link = link_to project_path(project), { class: "project-item-select-holder" } do + project_link = link_to project_path(project), { class: ("project-item-select-holder" unless show_new_nav?) } do output = if show_new_nav? project_icon(project, alt: project.name, class: 'avatar-tile', width: 16, height: 16) @@ -70,13 +70,18 @@ module ProjectsHelper output.html_safe end - if current_user + if show_new_nav? + namespace_link = content_tag "li", namespace_link + project_link = content_tag "li", project_link + end + + if current_user && !show_new_nav? project_link << button_tag(type: 'button', class: 'dropdown-toggle-caret js-projects-dropdown-toggle', aria: { label: 'Toggle switch project dropdown' }, data: { target: '.js-dropdown-menu-projects', toggle: 'dropdown', order_by: 'last_activity_at' }) do icon("chevron-down") end end - "#{namespace_link} / #{project_link}".html_safe + "#{namespace_link} #{project_link}".html_safe end def remove_project_message(project) diff --git a/app/views/layouts/nav/_breadcrumbs.html.haml b/app/views/layouts/nav/_breadcrumbs.html.haml index 4db84771f4e..9c13395e3d6 100644 --- a/app/views/layouts/nav/_breadcrumbs.html.haml +++ b/app/views/layouts/nav/_breadcrumbs.html.haml @@ -7,21 +7,16 @@ = button_tag class: 'toggle-mobile-nav', type: 'button' do %span.sr-only Open sidebar = icon ('bars') - .breadcrumbs-links.js-title-container - - unless hide_top_links - .title - = link_to "GitLab", root_path - \/ + .breadcrumbs-links.js-title-container + %ul.list-unstyled.breadcrumbs-list - if content_for?(:header_title_before) - = yield :header_title_before - \/ + %li= yield :header_title_before = header_title - %h2.breadcrumbs-sub-title - %ul.list-unstyled - if @breadcrumbs_extra_links - @breadcrumbs_extra_links.each do |extra| %li= link_to extra[:text], extra[:link] - %li= link_to @breadcrumb_title, breadcrumb_link + %li + %h2.breadcrumbs-sub-title= link_to @breadcrumb_title, breadcrumb_link - if content_for?(:breadcrumbs_extra) .breadcrumbs-extra.hidden-xs= yield :breadcrumbs_extra = yield :header_content From 85b272b22365a7e4588d4897ad9ce78ea180f124 Mon Sep 17 00:00:00 2001 From: Phil Hughes Date: Wed, 16 Aug 2017 10:35:59 +0100 Subject: [PATCH 02/18] updated a bunch of breadcrumb titles [ci skip] --- app/assets/stylesheets/new_nav.scss | 97 +++++-------------- app/helpers/breadcrumbs_helper.rb | 8 ++ app/helpers/groups_helper.rb | 22 +++-- app/helpers/page_layout_helper.rb | 6 +- app/helpers/projects_helper.rb | 4 +- app/views/groups/edit.html.haml | 1 + app/views/groups/projects.html.haml | 1 + .../groups/settings/ci_cd/show.html.haml | 3 +- app/views/groups/show.html.haml | 2 +- app/views/layouts/nav/_breadcrumbs.html.haml | 9 +- app/views/profiles/show.html.haml | 2 +- app/views/projects/activity.html.haml | 4 +- app/views/projects/boards/_show.html.haml | 4 +- app/views/projects/branches/index.html.haml | 3 - app/views/projects/commit/show.html.haml | 1 + app/views/projects/commits/show.html.haml | 3 - app/views/projects/compare/index.html.haml | 2 - app/views/projects/compare/show.html.haml | 2 - .../projects/cycle_analytics/show.html.haml | 2 - app/views/projects/edit.html.haml | 1 + app/views/projects/empty.html.haml | 1 + .../projects/environments/index.html.haml | 3 - .../projects/environments/show.html.haml | 1 + app/views/projects/graphs/charts.html.haml | 2 - app/views/projects/graphs/show.html.haml | 3 - app/views/projects/issues/show.html.haml | 1 + app/views/projects/jobs/index.html.haml | 3 - app/views/projects/jobs/show.html.haml | 1 + .../projects/merge_requests/show.html.haml | 1 + app/views/projects/milestones/show.html.haml | 1 + app/views/projects/network/show.html.haml | 2 - app/views/projects/pipelines/charts.html.haml | 1 + app/views/projects/pipelines/show.html.haml | 1 + .../projects/project_members/index.html.haml | 3 - .../projects/settings/ci_cd/show.html.haml | 6 +- .../settings/integrations/show.html.haml | 3 +- .../settings/repository/show.html.haml | 4 +- app/views/projects/show.html.haml | 2 +- app/views/projects/snippets/show.html.haml | 1 + app/views/projects/tags/index.html.haml | 3 - app/views/projects/tags/show.html.haml | 1 + 41 files changed, 87 insertions(+), 134 deletions(-) diff --git a/app/assets/stylesheets/new_nav.scss b/app/assets/stylesheets/new_nav.scss index f39ccaac287..c1168734198 100644 --- a/app/assets/stylesheets/new_nav.scss +++ b/app/assets/stylesheets/new_nav.scss @@ -1,6 +1,7 @@ @import "framework/variables"; @import 'framework/tw_bootstrap_variables'; @import "bootstrap/variables"; +@import "framework/mixins"; header.navbar-gitlab-new { color: $white-light; @@ -293,45 +294,6 @@ header.navbar-gitlab-new { display: flex; min-height: 61px; color: $gl-text-color; - border-bottom: 1px solid $border-color; - - .dropdown-toggle-caret { - position: relative; - top: -1px; - padding: 0 5px; - color: $gl-text-color-secondary; - font-size: 10px; - line-height: 1; - background: none; - border: 0; - - &:focus { - outline: 0; - } - } - - // TODO: fallback to global style - .dropdown-menu { - .divider { - margin: 6px 0; - } - - li { - padding: 0 1px; - - a { - border-radius: 0; - padding: 8px 16px; - - &.is-focused, - &:hover, - &:active, - &:focus { - background-color: $gray-darker; - } - } - } - } } .breadcrumbs-container { @@ -339,42 +301,14 @@ header.navbar-gitlab-new { width: 100%; position: relative; align-items: center; - - .dropdown-menu-projects { - margin-top: -$gl-padding; - margin-left: $gl-padding; - } + border-bottom: 1px solid $border-color; } .breadcrumbs-links { flex: 1; min-width: 0; align-self: center; - color: $gl-text-color-quaternary; - - a { - color: $gl-text-color-secondary; - - &:not(:first-child), - &.group-path { - margin-left: 4px; - } - - &:not(:last-of-type), - &.group-path { - margin-right: 3px; - } - } - - .title { - display: inline-block; - - > a { - &:last-of-type:not(:first-child) { - font-weight: 600; - } - } - } + color: $gl-text-color-secondary; .avatar-tile { margin-right: 5px; @@ -409,13 +343,30 @@ header.navbar-gitlab-new { > li { display: flex; align-items: center; + position: relative; + + &:not(:last-child) { + margin-right: 10px; + } + + &:not(:first-child) { + margin-left: 10px; + } } a { - color: $gl-text-color; + @include str-truncated(128px); + color: currentColor; } } +.breadcrumbs-list-angle { + position: absolute; + right: -12px; + top: 50%; + transform: translateY(-50%); +} + .breadcrumbs-extra { display: flex; flex: 0 0 auto; @@ -425,8 +376,12 @@ header.navbar-gitlab-new { .breadcrumbs-sub-title { margin: 0; font-size: $gl-font-size; - font-weight: normal; + font-weight: 600; line-height: 1; + + a { + color: $gl-text-color; + } } .top-area { diff --git a/app/helpers/breadcrumbs_helper.rb b/app/helpers/breadcrumbs_helper.rb index abe8edd6a8c..044cc905eb4 100644 --- a/app/helpers/breadcrumbs_helper.rb +++ b/app/helpers/breadcrumbs_helper.rb @@ -22,4 +22,12 @@ module BreadcrumbsHelper @breadcrumb_title = title end + + def breadcrumb_list_item(link) + content_tag "li" do + output = link + output << icon("angle-right", class: "breadcrumbs-list-angle") + output + end + end end diff --git a/app/helpers/groups_helper.rb b/app/helpers/groups_helper.rb index 4123a96911f..1badaf721f2 100644 --- a/app/helpers/groups_helper.rb +++ b/app/helpers/groups_helper.rb @@ -15,17 +15,27 @@ module GroupsHelper @has_group_title = true full_title = '' - group.ancestors.reverse.each do |parent| - full_title += group_title_link(parent, hidable: true) - - full_title += ' / '.html_safe + group.ancestors.reverse.each_with_index do |parent, index| + full_title += if show_new_nav? + breadcrumb_list_item group_title_link(parent, hidable: index > 0) + else + group_title_link(parent, hidable: true) + end end - full_title += group_title_link(group) + full_title += if show_new_nav? + breadcrumb_list_item group_title_link(group) + else + group_title_link(group) + end full_title += ' · '.html_safe + link_to(simple_sanitize(name), url, class: 'group-path') if name - content_tag :span, class: 'group-title' do + if show_new_nav? full_title.html_safe + else + content_tag :span, class: 'group-title' do + full_title.html_safe + end end end diff --git a/app/helpers/page_layout_helper.rb b/app/helpers/page_layout_helper.rb index b30b2eb1d03..e2ed8f7cdff 100644 --- a/app/helpers/page_layout_helper.rb +++ b/app/helpers/page_layout_helper.rb @@ -80,7 +80,11 @@ module PageLayoutHelper @header_title = title @header_title_url = title_url else - @header_title_url ? link_to(@header_title, @header_title_url) : @header_title + if show_new_nav? + @header_title_url ? breadcrumb_list_item(link_to(@header_title, @header_title_url)) : @header_title + else + @header_title_url ? link_to(@header_title, @header_title_url) : @header_title + end end end diff --git a/app/helpers/projects_helper.rb b/app/helpers/projects_helper.rb index 2fbb294a5ec..9e325564d23 100644 --- a/app/helpers/projects_helper.rb +++ b/app/helpers/projects_helper.rb @@ -71,8 +71,8 @@ module ProjectsHelper end if show_new_nav? - namespace_link = content_tag "li", namespace_link - project_link = content_tag "li", project_link + namespace_link = breadcrumb_list_item(namespace_link) if project.group.nil? + project_link = breadcrumb_list_item project_link end if current_user && !show_new_nav? diff --git a/app/views/groups/edit.html.haml b/app/views/groups/edit.html.haml index 9ebb3894c55..839f23e69fd 100644 --- a/app/views/groups/edit.html.haml +++ b/app/views/groups/edit.html.haml @@ -1,3 +1,4 @@ +- breadcrumb_title "General Settings" = render "groups/settings_head" .panel.panel-default.prepend-top-default .panel-heading diff --git a/app/views/groups/projects.html.haml b/app/views/groups/projects.html.haml index 7a2e688a114..7f3f2f707f7 100644 --- a/app/views/groups/projects.html.haml +++ b/app/views/groups/projects.html.haml @@ -1,3 +1,4 @@ +- breadcrumb_title "Projects" = render "groups/settings_head" .panel.panel-default.prepend-top-default diff --git a/app/views/groups/settings/ci_cd/show.html.haml b/app/views/groups/settings/ci_cd/show.html.haml index bf36baf48ab..9f9ae01e7c5 100644 --- a/app/views/groups/settings/ci_cd/show.html.haml +++ b/app/views/groups/settings/ci_cd/show.html.haml @@ -1,4 +1,5 @@ -- page_title "Pipelines" +- breadcrumb_title "CI / CD Settings" +- page_title "CI / CD" = render "groups/settings_head" = render 'ci/variables/index' diff --git a/app/views/groups/show.html.haml b/app/views/groups/show.html.haml index e07f61c94e4..f4f76887422 100644 --- a/app/views/groups/show.html.haml +++ b/app/views/groups/show.html.haml @@ -1,5 +1,5 @@ - @no_container = true -- breadcrumb_title "Group" +- breadcrumb_title "Details" = content_for :meta_tags do = auto_discovery_link_tag(:atom, group_url(@group, rss_url_options), title: "#{@group.name} activity") diff --git a/app/views/layouts/nav/_breadcrumbs.html.haml b/app/views/layouts/nav/_breadcrumbs.html.haml index 9c13395e3d6..875b5b7be11 100644 --- a/app/views/layouts/nav/_breadcrumbs.html.haml +++ b/app/views/layouts/nav/_breadcrumbs.html.haml @@ -7,16 +7,17 @@ = button_tag class: 'toggle-mobile-nav', type: 'button' do %span.sr-only Open sidebar = icon ('bars') - .breadcrumbs-links.js-title-container - %ul.list-unstyled.breadcrumbs-list + .breadcrumbs-links.js-title-container + %ul.list-unstyled.breadcrumbs-list + - unless hide_top_links - if content_for?(:header_title_before) %li= yield :header_title_before = header_title - if @breadcrumbs_extra_links - @breadcrumbs_extra_links.each do |extra| %li= link_to extra[:text], extra[:link] - %li - %h2.breadcrumbs-sub-title= link_to @breadcrumb_title, breadcrumb_link + %li + %h2.breadcrumbs-sub-title= link_to @breadcrumb_title, breadcrumb_link - if content_for?(:breadcrumbs_extra) .breadcrumbs-extra.hidden-xs= yield :breadcrumbs_extra = yield :header_content diff --git a/app/views/profiles/show.html.haml b/app/views/profiles/show.html.haml index a8ae0b92334..aa8d5a8bc1a 100644 --- a/app/views/profiles/show.html.haml +++ b/app/views/profiles/show.html.haml @@ -1,4 +1,4 @@ -- breadcrumb_title "Profile" +- breadcrumb_title "Edit Profile" - @content_class = "limit-container-width" unless fluid_layout = render 'profiles/head' diff --git a/app/views/projects/activity.html.haml b/app/views/projects/activity.html.haml index 5452c6db6a6..f80dadb8037 100644 --- a/app/views/projects/activity.html.haml +++ b/app/views/projects/activity.html.haml @@ -1,9 +1,7 @@ - @no_container = true -- if show_new_nav? - - add_to_breadcrumbs(_("Project"), project_path(@project)) - - page_title _("Activity") + = render "projects/head" = render 'projects/last_push' diff --git a/app/views/projects/boards/_show.html.haml b/app/views/projects/boards/_show.html.haml index 2076e46fde8..66aa99e964b 100644 --- a/app/views/projects/boards/_show.html.haml +++ b/app/views/projects/boards/_show.html.haml @@ -1,10 +1,8 @@ - @no_container = true - @content_class = "issue-boards-content" +- breadcrumb_title "Issue Board" - page_title "Boards" -- if show_new_nav? - - add_to_breadcrumbs("Issues", project_issues_path(@project)) - - content_for :page_specific_javascripts do = webpack_bundle_tag 'common_vue' = webpack_bundle_tag 'filtered_search' diff --git a/app/views/projects/branches/index.html.haml b/app/views/projects/branches/index.html.haml index 945a5c11d6d..73583c6bbc2 100644 --- a/app/views/projects/branches/index.html.haml +++ b/app/views/projects/branches/index.html.haml @@ -2,9 +2,6 @@ - page_title "Branches" = render "projects/commits/head" -- if show_new_nav? - - add_to_breadcrumbs("Repository", project_tree_path(@project)) - %div{ class: container_class } .top-area.adjust - if can?(current_user, :admin_project, @project) diff --git a/app/views/projects/commit/show.html.haml b/app/views/projects/commit/show.html.haml index 07c83c0a590..b37b3bfd460 100644 --- a/app/views/projects/commit/show.html.haml +++ b/app/views/projects/commit/show.html.haml @@ -1,4 +1,5 @@ - @no_container = true +- breadcrumb_title "Commit #{@commit.short_id}" - container_class = !fluid_layout && diff_view == :inline ? 'container-limited' : '' - limited_container_width = fluid_layout ? '' : 'limit-container-width' - @content_class = limited_container_width diff --git a/app/views/projects/commits/show.html.haml b/app/views/projects/commits/show.html.haml index 7ae56086177..e873b931683 100644 --- a/app/views/projects/commits/show.html.haml +++ b/app/views/projects/commits/show.html.haml @@ -5,9 +5,6 @@ = content_for :meta_tags do = auto_discovery_link_tag(:atom, project_commits_url(@project, @ref, rss_url_options), title: "#{@project.name}:#{@ref} commits") -- if show_new_nav? - - add_to_breadcrumbs("Repository", project_tree_path(@project)) - = content_for :sub_nav do = render "head" diff --git a/app/views/projects/compare/index.html.haml b/app/views/projects/compare/index.html.haml index 05de21e8dbf..2cf14859f30 100644 --- a/app/views/projects/compare/index.html.haml +++ b/app/views/projects/compare/index.html.haml @@ -1,7 +1,5 @@ - @no_container = true - page_title "Compare" -- if show_new_nav? - - add_to_breadcrumbs("Repository", project_tree_path(@project)) = render "projects/commits/head" %div{ class: container_class } diff --git a/app/views/projects/compare/show.html.haml b/app/views/projects/compare/show.html.haml index 8bc863f77b3..8cfa279bd68 100644 --- a/app/views/projects/compare/show.html.haml +++ b/app/views/projects/compare/show.html.haml @@ -1,8 +1,6 @@ - @no_container = true - breadcrumb_title "Compare" - page_title "#{params[:from]}...#{params[:to]}" -- if show_new_nav? - - add_to_breadcrumbs("Repository", project_tree_path(@project)) = render "projects/commits/head" %div{ class: container_class } diff --git a/app/views/projects/cycle_analytics/show.html.haml b/app/views/projects/cycle_analytics/show.html.haml index 3467e357c49..8d008be5aae 100644 --- a/app/views/projects/cycle_analytics/show.html.haml +++ b/app/views/projects/cycle_analytics/show.html.haml @@ -1,7 +1,5 @@ - @no_container = true - page_title "Cycle Analytics" -- if show_new_nav? - - add_to_breadcrumbs("Project", project_path(@project)) - content_for :page_specific_javascripts do = page_specific_javascript_bundle_tag('common_vue') = page_specific_javascript_bundle_tag('cycle_analytics') diff --git a/app/views/projects/edit.html.haml b/app/views/projects/edit.html.haml index 6178abe9160..fcc4b5c06c7 100644 --- a/app/views/projects/edit.html.haml +++ b/app/views/projects/edit.html.haml @@ -1,3 +1,4 @@ +- breadcrumb_title "General Settings" - page_title "General" - @content_class = "limit-container-width" unless fluid_layout - expanded = Rails.env.test? diff --git a/app/views/projects/empty.html.haml b/app/views/projects/empty.html.haml index d17709380d5..5e980314307 100644 --- a/app/views/projects/empty.html.haml +++ b/app/views/projects/empty.html.haml @@ -1,4 +1,5 @@ - @no_container = true +- breadcrumb_title "Details" = render partial: 'flash_messages', locals: { project: @project } diff --git a/app/views/projects/environments/index.html.haml b/app/views/projects/environments/index.html.haml index d0f723af5bf..30cdbc5ae04 100644 --- a/app/views/projects/environments/index.html.haml +++ b/app/views/projects/environments/index.html.haml @@ -2,9 +2,6 @@ - page_title "Environments" = render "projects/pipelines/head" -- if show_new_nav? - - add_to_breadcrumbs("Pipelines", project_pipelines_path(@project)) - - content_for :page_specific_javascripts do = page_specific_javascript_bundle_tag('common_vue') = page_specific_javascript_bundle_tag("environments") diff --git a/app/views/projects/environments/show.html.haml b/app/views/projects/environments/show.html.haml index 0ce0f5465fc..0d0bc499dfa 100644 --- a/app/views/projects/environments/show.html.haml +++ b/app/views/projects/environments/show.html.haml @@ -1,4 +1,5 @@ - @no_container = true +- breadcrumb_title "Enviroment '#{@environment.name}'" - page_title "Environments" = render "projects/pipelines/head" diff --git a/app/views/projects/graphs/charts.html.haml b/app/views/projects/graphs/charts.html.haml index 9f5a1239a82..f0ef647ddb3 100644 --- a/app/views/projects/graphs/charts.html.haml +++ b/app/views/projects/graphs/charts.html.haml @@ -1,7 +1,5 @@ - @no_container = true - page_title "Charts" -- if show_new_nav? - - add_to_breadcrumbs("Repository", project_tree_path(@project)) - content_for :page_specific_javascripts do = webpack_bundle_tag('common_d3') = webpack_bundle_tag('graphs') diff --git a/app/views/projects/graphs/show.html.haml b/app/views/projects/graphs/show.html.haml index f41a0d8293b..08b38428b50 100644 --- a/app/views/projects/graphs/show.html.haml +++ b/app/views/projects/graphs/show.html.haml @@ -5,9 +5,6 @@ = webpack_bundle_tag('graphs') = webpack_bundle_tag('graphs_show') -- if show_new_nav? - - add_to_breadcrumbs("Repository", project_tree_path(@project)) - = render 'projects/commits/head' .js-graphs-show{ class: container_class, 'data-project-graph-path': project_graph_path(@project, current_ref, format: :json) } diff --git a/app/views/projects/issues/show.html.haml b/app/views/projects/issues/show.html.haml index ad5befc6ee5..4c27083f54f 100644 --- a/app/views/projects/issues/show.html.haml +++ b/app/views/projects/issues/show.html.haml @@ -1,4 +1,5 @@ - @content_class = "limit-container-width" unless fluid_layout +- breadcrumb_title "Issues #{@issue.to_reference}" - page_title "#{@issue.title} (#{@issue.to_reference})", "Issues" - page_description @issue.description - page_card_attributes @issue.card_attributes diff --git a/app/views/projects/jobs/index.html.haml b/app/views/projects/jobs/index.html.haml index d78891546f7..8604c7d3ea4 100644 --- a/app/views/projects/jobs/index.html.haml +++ b/app/views/projects/jobs/index.html.haml @@ -2,9 +2,6 @@ - page_title "Jobs" = render "projects/pipelines/head" -- if show_new_nav? - - add_to_breadcrumbs("Pipelines", project_pipelines_path(@project)) - %div{ class: container_class } .top-area - build_path_proc = ->(scope) { project_jobs_path(@project, scope: scope) } diff --git a/app/views/projects/jobs/show.html.haml b/app/views/projects/jobs/show.html.haml index fa086413fbe..2c76ca91155 100644 --- a/app/views/projects/jobs/show.html.haml +++ b/app/views/projects/jobs/show.html.haml @@ -1,4 +1,5 @@ - @no_container = true +- breadcrumb_title "Jobs ##{@build.id}" - page_title "#{@build.name} (##{@build.id})", "Jobs" = render "projects/pipelines/head" diff --git a/app/views/projects/merge_requests/show.html.haml b/app/views/projects/merge_requests/show.html.haml index d27e121beb4..f6132300c40 100644 --- a/app/views/projects/merge_requests/show.html.haml +++ b/app/views/projects/merge_requests/show.html.haml @@ -1,4 +1,5 @@ - @content_class = "limit-container-width" unless fluid_layout +- breadcrumb_title "Merge Requests #{@merge_request.to_reference}" - page_title "#{@merge_request.title} (#{@merge_request.to_reference})", "Merge Requests" - page_description @merge_request.description - page_card_attributes @merge_request.card_attributes diff --git a/app/views/projects/milestones/show.html.haml b/app/views/projects/milestones/show.html.haml index 0bf0e11c107..4137bddef6f 100644 --- a/app/views/projects/milestones/show.html.haml +++ b/app/views/projects/milestones/show.html.haml @@ -1,4 +1,5 @@ - @no_container = true +- breadcrumb_title "Milestone #{@milestone.title}" - page_title @milestone.title, "Milestones" - page_description @milestone.description = render "shared/mr_head" diff --git a/app/views/projects/network/show.html.haml b/app/views/projects/network/show.html.haml index ab948df4a3f..e29cb277389 100644 --- a/app/views/projects/network/show.html.haml +++ b/app/views/projects/network/show.html.haml @@ -2,8 +2,6 @@ - page_title "Graph", @ref - content_for :page_specific_javascripts do = page_specific_javascript_bundle_tag('network') -- if show_new_nav? - - add_to_breadcrumbs("Repository", project_tree_path(@project)) = render "projects/commits/head" = render "head" %div{ class: container_class } diff --git a/app/views/projects/pipelines/charts.html.haml b/app/views/projects/pipelines/charts.html.haml index fd3ad69d85d..96da90362c4 100644 --- a/app/views/projects/pipelines/charts.html.haml +++ b/app/views/projects/pipelines/charts.html.haml @@ -1,4 +1,5 @@ - @no_container = true +- breadcrumb_title "CI / CD Charts" - page_title _("Charts"), _("Pipelines") - if show_new_nav? - add_to_breadcrumbs("Pipelines", project_pipelines_path(@project)) diff --git a/app/views/projects/pipelines/show.html.haml b/app/views/projects/pipelines/show.html.haml index 63f85fc69a2..bb25cfb440c 100644 --- a/app/views/projects/pipelines/show.html.haml +++ b/app/views/projects/pipelines/show.html.haml @@ -1,4 +1,5 @@ - @no_container = true +- breadcrumb_title "Pipelines ##{@pipeline.id}" - page_title "Pipeline" = render "projects/pipelines/head" diff --git a/app/views/projects/project_members/index.html.haml b/app/views/projects/project_members/index.html.haml index 9f7c5a315eb..25153fd0b6f 100644 --- a/app/views/projects/project_members/index.html.haml +++ b/app/views/projects/project_members/index.html.haml @@ -1,8 +1,5 @@ - page_title "Members" -- if show_new_nav? - - add_to_breadcrumbs("Settings", edit_project_path(@project)) - .row.prepend-top-default .col-lg-12 %h4 diff --git a/app/views/projects/settings/ci_cd/show.html.haml b/app/views/projects/settings/ci_cd/show.html.haml index 0c4130857da..099e3b8493f 100644 --- a/app/views/projects/settings/ci_cd/show.html.haml +++ b/app/views/projects/settings/ci_cd/show.html.haml @@ -1,8 +1,6 @@ - @content_class = "limit-container-width" unless fluid_layout -- page_title "Pipelines" - -- if show_new_nav? - - add_to_breadcrumbs("Settings", edit_project_path(@project)) +- page_title "CI / CD Settings" +- page_title "CI / CD" = render "projects/settings/head" diff --git a/app/views/projects/settings/integrations/show.html.haml b/app/views/projects/settings/integrations/show.html.haml index 149da96d3f6..933daa7f549 100644 --- a/app/views/projects/settings/integrations/show.html.haml +++ b/app/views/projects/settings/integrations/show.html.haml @@ -1,7 +1,6 @@ - @content_class = "limit-container-width" unless fluid_layout +- breadcrumb_title "Integrations Settings" - page_title 'Integrations' -- if show_new_nav? - - add_to_breadcrumbs("Settings", edit_project_path(@project)) = render "projects/settings/head" = render 'projects/hooks/index' = render 'projects/services/index' diff --git a/app/views/projects/settings/repository/show.html.haml b/app/views/projects/settings/repository/show.html.haml index cb37f3c7580..6d4af72b8ea 100644 --- a/app/views/projects/settings/repository/show.html.haml +++ b/app/views/projects/settings/repository/show.html.haml @@ -1,9 +1,7 @@ +- breadcrumb_title "Repository Settings" - page_title "Repository" - @content_class = "limit-container-width" unless fluid_layout -- if show_new_nav? - - add_to_breadcrumbs("Settings", edit_project_path(@project)) - = render "projects/settings/head" - content_for :page_specific_javascripts do diff --git a/app/views/projects/show.html.haml b/app/views/projects/show.html.haml index a9b39cedb1d..3f0a24cfe83 100644 --- a/app/views/projects/show.html.haml +++ b/app/views/projects/show.html.haml @@ -1,5 +1,5 @@ - @no_container = true -- breadcrumb_title "Project" +- breadcrumb_title "Details" - @content_class = "limit-container-width" unless fluid_layout = content_for :meta_tags do diff --git a/app/views/projects/snippets/show.html.haml b/app/views/projects/snippets/show.html.haml index d8e448dd2af..ff59d26441f 100644 --- a/app/views/projects/snippets/show.html.haml +++ b/app/views/projects/snippets/show.html.haml @@ -1,4 +1,5 @@ - @content_class = "limit-container-width limited-inner-width-container" unless fluid_layout +- breadcrumb_title "Snippet #{@snippet.to_reference}" - page_title "#{@snippet.title} (#{@snippet.to_reference})", "Snippets" = render 'shared/snippets/header' diff --git a/app/views/projects/tags/index.html.haml b/app/views/projects/tags/index.html.haml index 00000e0667c..bf97cbc1f68 100644 --- a/app/views/projects/tags/index.html.haml +++ b/app/views/projects/tags/index.html.haml @@ -3,9 +3,6 @@ - page_title "Tags" = render "projects/commits/head" -- if show_new_nav? - - add_to_breadcrumbs("Repository", project_tree_path(@project)) - .flex-list{ class: container_class } .top-area.adjust .nav-text.row-main-content diff --git a/app/views/projects/tags/show.html.haml b/app/views/projects/tags/show.html.haml index d02cd70f4c3..3b6601f4dcf 100644 --- a/app/views/projects/tags/show.html.haml +++ b/app/views/projects/tags/show.html.haml @@ -1,4 +1,5 @@ - @no_container = true +- breadcrumb_title "Tags #{@tag.name}" - page_title @tag.name, "Tags" = render "projects/commits/head" From a10cc2202dffcf8b4a7bc7db22757ac83bf95eb4 Mon Sep 17 00:00:00 2001 From: Phil Hughes Date: Wed, 16 Aug 2017 13:13:34 +0100 Subject: [PATCH 03/18] added collapsible sub-groups & wiki pages [ci skip] --- app/assets/javascripts/breadcrumb.js | 20 +++++++++++++++++++ app/assets/javascripts/main.js | 3 +++ .../stylesheets/framework/dropdowns.scss | 4 ++++ app/assets/stylesheets/new_nav.scss | 20 ++++++------------- app/assets/stylesheets/pages/commits.scss | 2 +- app/helpers/breadcrumbs_helper.rb | 6 ++++++ app/helpers/groups_helper.rb | 20 +++++++++++++------ app/helpers/projects_helper.rb | 2 +- app/helpers/wiki_helper.rb | 11 ++++++++++ app/views/layouts/nav/_breadcrumbs.html.haml | 11 +++++----- .../breadcrumbs/_collapsed_dropdown.html.haml | 11 ++++++++++ app/views/projects/wikis/show.html.haml | 11 +++++++--- 12 files changed, 90 insertions(+), 31 deletions(-) create mode 100644 app/assets/javascripts/breadcrumb.js create mode 100644 app/views/layouts/nav/breadcrumbs/_collapsed_dropdown.html.haml diff --git a/app/assets/javascripts/breadcrumb.js b/app/assets/javascripts/breadcrumb.js new file mode 100644 index 00000000000..7dfdf844325 --- /dev/null +++ b/app/assets/javascripts/breadcrumb.js @@ -0,0 +1,20 @@ +export const addTooltipToEl = (el) => { + if (el.scrollWidth > el.offsetWidth) { + el.setAttribute('title', el.textContent); + el.setAttribute('data-container', 'body'); + el.classList.add('has-tooltip'); + } +}; + +export default () => { + const breadcrumbs = document.querySelector('.breadcrumbs-list'); + const topLevelLinks = breadcrumbs.querySelectorAll('.breadcrumbs-list > li > a'); + const $expander = $('.js-breadcrumbs-collapsed-expander'); + + topLevelLinks.forEach(el => addTooltipToEl(el)); + + $expander.closest('.dropdown') + .on('show.bs.dropdown hide.bs.dropdown', () => { + $expander.toggleClass('open'); + }); +}; diff --git a/app/assets/javascripts/main.js b/app/assets/javascripts/main.js index 6d7c7e3c930..928394f4fae 100644 --- a/app/assets/javascripts/main.js +++ b/app/assets/javascripts/main.js @@ -142,6 +142,7 @@ import './smart_interval'; import './star'; import './subscription'; import './subscription_select'; +import initBreadcrumbs from './breadcrumb'; import './dispatcher'; @@ -179,6 +180,8 @@ $(function () { var bootstrapBreakpoint = bp.getBreakpointSize(); var fitSidebarForSize; + initBreadcrumbs(); + // Set the default path for all cookies to GitLab's root directory Cookies.defaults.path = gon.relative_url_root || '/'; diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss index 958159b507a..b60f69a5d37 100644 --- a/app/assets/stylesheets/framework/dropdowns.scss +++ b/app/assets/stylesheets/framework/dropdowns.scss @@ -782,3 +782,7 @@ margin-top: 2px; } } + +.breadcrumbs-list { + @include new-style-dropdown; +} diff --git a/app/assets/stylesheets/new_nav.scss b/app/assets/stylesheets/new_nav.scss index c1168734198..b1d1ea1ba5f 100644 --- a/app/assets/stylesheets/new_nav.scss +++ b/app/assets/stylesheets/new_nav.scss @@ -315,19 +315,11 @@ header.navbar-gitlab-new { border: 1px solid $border-color; border-radius: 50%; vertical-align: sub; - - &.identicon { - float: left; - width: 16px; - height: 16px; - margin-top: 2px; - font-size: 10px; - } } .text-expander { - margin-left: 4px; - margin-right: 4px; + margin-left: 0; + margin-right: 2px; > i { position: relative; @@ -352,11 +344,11 @@ header.navbar-gitlab-new { &:not(:first-child) { margin-left: 10px; } - } - a { - @include str-truncated(128px); - color: currentColor; + > a { + @include str-truncated(128px); + color: currentColor; + } } } diff --git a/app/assets/stylesheets/pages/commits.scss b/app/assets/stylesheets/pages/commits.scss index 46fbfe5f91e..01f5d2b67aa 100644 --- a/app/assets/stylesheets/pages/commits.scss +++ b/app/assets/stylesheets/pages/commits.scss @@ -151,7 +151,7 @@ outline: none; &.open { - background: $gray-light; + background-color: darken($gray-light, 10%); box-shadow: inset 0 0 2px rgba($black, 0.2); } diff --git a/app/helpers/breadcrumbs_helper.rb b/app/helpers/breadcrumbs_helper.rb index 044cc905eb4..d4c3e1b3929 100644 --- a/app/helpers/breadcrumbs_helper.rb +++ b/app/helpers/breadcrumbs_helper.rb @@ -30,4 +30,10 @@ module BreadcrumbsHelper output end end + + def add_to_breadcrumb_dropdown(link, location: :before) + @breadcrumb_dropdown_links ||= {} + @breadcrumb_dropdown_links[location] = [] unless @breadcrumb_dropdown_links[location] + @breadcrumb_dropdown_links[location] << link + end end diff --git a/app/helpers/groups_helper.rb b/app/helpers/groups_helper.rb index 1badaf721f2..51acd557ea7 100644 --- a/app/helpers/groups_helper.rb +++ b/app/helpers/groups_helper.rb @@ -16,11 +16,19 @@ module GroupsHelper full_title = '' group.ancestors.reverse.each_with_index do |parent, index| - full_title += if show_new_nav? - breadcrumb_list_item group_title_link(parent, hidable: index > 0) - else - group_title_link(parent, hidable: true) - end + if show_new_nav? && index > 0 + add_to_breadcrumb_dropdown(group_title_link(parent, hidable: false), location: :before) + else + full_title += if show_new_nav? + breadcrumb_list_item group_title_link(parent, hidable: false) + else + group_title_link(parent, hidable: true) + end + end + end + + if show_new_nav? + full_title += render "layouts/nav/breadcrumbs/collapsed_dropdown", location: :before, title: _("Show parent subgroups") end full_title += if show_new_nav? @@ -78,7 +86,7 @@ module GroupsHelper def group_title_link(group, hidable: false) link_to(group_path(group), class: "group-path #{'hidable' if hidable}") do output = - if show_new_nav? + if show_new_nav? && group.try(:avatar_url) image_tag(group_icon(group), class: "avatar-tile", width: 16, height: 16) else "" diff --git a/app/helpers/projects_helper.rb b/app/helpers/projects_helper.rb index 9e325564d23..cd62835fd29 100644 --- a/app/helpers/projects_helper.rb +++ b/app/helpers/projects_helper.rb @@ -60,7 +60,7 @@ module ProjectsHelper project_link = link_to project_path(project), { class: ("project-item-select-holder" unless show_new_nav?) } do output = - if show_new_nav? + if show_new_nav? && project.avatar_url project_icon(project, alt: project.name, class: 'avatar-tile', width: 16, height: 16) else "" diff --git a/app/helpers/wiki_helper.rb b/app/helpers/wiki_helper.rb index 99212a3438f..3d26c92e58a 100644 --- a/app/helpers/wiki_helper.rb +++ b/app/helpers/wiki_helper.rb @@ -10,4 +10,15 @@ module WikiHelper .map { |dir_or_page| WikiPage.unhyphenize(dir_or_page).capitalize } .join(' / ') end + + def wiki_breadcrumb_dropdown_links(page_slug) + page_slug_split = page_slug.split('/') + page_slug_split.pop(1) + current_slug = "" + page_slug_split + .map do |dir_or_page| + current_slug = "#{current_slug}/#{dir_or_page}" + add_to_breadcrumb_dropdown link_to(WikiPage.unhyphenize(dir_or_page).capitalize, project_wiki_path(@project, current_slug)), location: :after + end + end end diff --git a/app/views/layouts/nav/_breadcrumbs.html.haml b/app/views/layouts/nav/_breadcrumbs.html.haml index 875b5b7be11..240aee19a9e 100644 --- a/app/views/layouts/nav/_breadcrumbs.html.haml +++ b/app/views/layouts/nav/_breadcrumbs.html.haml @@ -10,14 +10,13 @@ .breadcrumbs-links.js-title-container %ul.list-unstyled.breadcrumbs-list - unless hide_top_links - - if content_for?(:header_title_before) - %li= yield :header_title_before = header_title - - if @breadcrumbs_extra_links - - @breadcrumbs_extra_links.each do |extra| - %li= link_to extra[:text], extra[:link] + - if @breadcrumbs_extra_links + - @breadcrumbs_extra_links.each do |extra| + = breadcrumb_list_item link_to(extra[:text], extra[:link]) + = render "layouts/nav/breadcrumbs/collapsed_dropdown", location: :after %li - %h2.breadcrumbs-sub-title= link_to @breadcrumb_title, breadcrumb_link + %h2.breadcrumbs-sub-title= @breadcrumb_title - if content_for?(:breadcrumbs_extra) .breadcrumbs-extra.hidden-xs= yield :breadcrumbs_extra = yield :header_content diff --git a/app/views/layouts/nav/breadcrumbs/_collapsed_dropdown.html.haml b/app/views/layouts/nav/breadcrumbs/_collapsed_dropdown.html.haml new file mode 100644 index 00000000000..ddcc884b83b --- /dev/null +++ b/app/views/layouts/nav/breadcrumbs/_collapsed_dropdown.html.haml @@ -0,0 +1,11 @@ +- dropdown_location = local_assigns.fetch(:location, nil) +- button_tooltip = local_assigns.fetch(:title, _("Show parent pages")) +- if defined?(@breadcrumb_dropdown_links) && @breadcrumb_dropdown_links.key?(dropdown_location) + %li.dropdown + %button.text-expander.has-tooltip.js-breadcrumbs-collapsed-expander{ type: "button", data: { toggle: "dropdown", container: "body" }, "aria-label": button_tooltip, title: button_tooltip } + = icon("ellipsis-h") + = icon("angle-right", class: "breadcrumbs-list-angle") + .dropdown-menu + %ul + - @breadcrumb_dropdown_links[dropdown_location].each_with_index do |link, index| + %li{ style: "text-indent: #{[index * 15, 60].min}px;"}= link diff --git a/app/views/projects/wikis/show.html.haml b/app/views/projects/wikis/show.html.haml index 9dadd685ea2..5f93168bdde 100644 --- a/app/views/projects/wikis/show.html.haml +++ b/app/views/projects/wikis/show.html.haml @@ -1,13 +1,18 @@ - @content_class = "limit-container-width limit-container-width-sm" unless fluid_layout -- breadcrumb_title "Wiki" +- breadcrumb_title @page.title.capitalize +- wiki_breadcrumb_dropdown_links(@page.slug) - page_title @page.title.capitalize, "Wiki" +- if show_new_nav? + - add_to_breadcrumbs "Wiki", get_project_wiki_path(@project) + .wiki-page-header.has-sidebar-toggle %button.btn.btn-default.sidebar-toggle.js-sidebar-wiki-toggle{ role: "button", type: "button" } = icon('angle-double-left') - .wiki-breadcrumb - %span= breadcrumb(@page.slug) + - unless show_new_nav? + .wiki-breadcrumb + %span= breadcrumb(@page.slug) .nav-text %h2.wiki-page-title= @page.title.capitalize From dae629e5e9a75ef0594399b46191306dcbaab90b Mon Sep 17 00:00:00 2001 From: Phil Hughes Date: Thu, 17 Aug 2017 10:42:04 +0100 Subject: [PATCH 04/18] fix some inconsistencies with the breadcrumbs --- app/assets/javascripts/breadcrumb.js | 5 +++-- app/assets/stylesheets/new_nav.scss | 7 ++----- app/helpers/groups_helper.rb | 2 +- app/helpers/issuables_helper.rb | 19 ++++++++++++++----- app/helpers/projects_helper.rb | 2 +- app/views/layouts/nav/_breadcrumbs.html.haml | 5 ++--- app/views/projects/commit/show.html.haml | 3 ++- .../projects/environments/show.html.haml | 3 ++- app/views/projects/issues/show.html.haml | 3 ++- app/views/projects/jobs/show.html.haml | 3 ++- .../projects/merge_requests/show.html.haml | 3 ++- app/views/projects/milestones/show.html.haml | 3 ++- app/views/projects/pipelines/show.html.haml | 3 ++- app/views/projects/snippets/show.html.haml | 3 ++- app/views/projects/tags/show.html.haml | 3 ++- app/views/shared/snippets/_header.html.haml | 10 +++++++--- app/views/snippets/show.html.haml | 2 ++ 17 files changed, 50 insertions(+), 29 deletions(-) diff --git a/app/assets/javascripts/breadcrumb.js b/app/assets/javascripts/breadcrumb.js index 7dfdf844325..97340953c77 100644 --- a/app/assets/javascripts/breadcrumb.js +++ b/app/assets/javascripts/breadcrumb.js @@ -14,7 +14,8 @@ export default () => { topLevelLinks.forEach(el => addTooltipToEl(el)); $expander.closest('.dropdown') - .on('show.bs.dropdown hide.bs.dropdown', () => { - $expander.toggleClass('open'); + .on('show.bs.dropdown hide.bs.dropdown', (e) => { + $('.js-breadcrumbs-collapsed-expander', e.currentTarget).toggleClass('open') + .tooltip('hide'); }); }; diff --git a/app/assets/stylesheets/new_nav.scss b/app/assets/stylesheets/new_nav.scss index b1d1ea1ba5f..8beaf64e7a1 100644 --- a/app/assets/stylesheets/new_nav.scss +++ b/app/assets/stylesheets/new_nav.scss @@ -330,6 +330,7 @@ header.navbar-gitlab-new { .breadcrumbs-list { display: flex; + flex-wrap: wrap; margin-bottom: 0; > li { @@ -338,11 +339,7 @@ header.navbar-gitlab-new { position: relative; &:not(:last-child) { - margin-right: 10px; - } - - &:not(:first-child) { - margin-left: 10px; + margin-right: 20px; } > a { diff --git a/app/helpers/groups_helper.rb b/app/helpers/groups_helper.rb index 51acd557ea7..7f43e4106fc 100644 --- a/app/helpers/groups_helper.rb +++ b/app/helpers/groups_helper.rb @@ -22,7 +22,7 @@ module GroupsHelper full_title += if show_new_nav? breadcrumb_list_item group_title_link(parent, hidable: false) else - group_title_link(parent, hidable: true) + "#{group_title_link(parent, hidable: true)} / ".html_safe end end end diff --git a/app/helpers/issuables_helper.rb b/app/helpers/issuables_helper.rb index 197c90c4081..eba8aed05d3 100644 --- a/app/helpers/issuables_helper.rb +++ b/app/helpers/issuables_helper.rb @@ -126,12 +126,21 @@ module IssuablesHelper end def issuable_meta(issuable, project, text) - output = content_tag(:strong, class: "identifier") do - concat("#{text} ") - concat(to_url_reference(issuable)) + output = "" + + unless show_new_nav? + output << content_tag(:strong, class: "identifier") do + concat("#{text} ") + concat(to_url_reference(issuable)) + end end - output << " opened #{time_ago_with_tooltip(issuable.created_at)} by ".html_safe + opened_text = if show_new_nav? + "Opened" + else + " opened" + end + output << "#{opened_text} #{time_ago_with_tooltip(issuable.created_at)} by ".html_safe output << content_tag(:strong) do author_output = link_to_member(project, issuable.author, size: 24, mobile_classes: "hidden-xs", tooltip: true) author_output << link_to_member(project, issuable.author, size: 24, by_username: true, avatar: false, mobile_classes: "hidden-sm hidden-md hidden-lg") @@ -141,7 +150,7 @@ module IssuablesHelper output << content_tag(:span, (issuable.task_status if issuable.tasks?), id: "task_status", class: "hidden-xs hidden-sm") output << content_tag(:span, (issuable.task_status_short if issuable.tasks?), id: "task_status_short", class: "hidden-md hidden-lg") - output + output.html_safe end def issuable_todo(issuable) diff --git a/app/helpers/projects_helper.rb b/app/helpers/projects_helper.rb index cd62835fd29..867f3fadfb9 100644 --- a/app/helpers/projects_helper.rb +++ b/app/helpers/projects_helper.rb @@ -81,7 +81,7 @@ module ProjectsHelper end end - "#{namespace_link} #{project_link}".html_safe + "#{namespace_link} #{('/' unless show_new_nav?)} #{project_link}".html_safe end def remove_project_message(project) diff --git a/app/views/layouts/nav/_breadcrumbs.html.haml b/app/views/layouts/nav/_breadcrumbs.html.haml index 240aee19a9e..9f0cb2fad3a 100644 --- a/app/views/layouts/nav/_breadcrumbs.html.haml +++ b/app/views/layouts/nav/_breadcrumbs.html.haml @@ -1,8 +1,7 @@ -- breadcrumb_link = breadcrumb_title_link - hide_top_links = @hide_top_links || false -%nav.breadcrumbs{ role: "navigation" } - .breadcrumbs-container{ class: [container_class, @content_class] } +%nav.breadcrumbs{ role: "navigation", class: [container_class, @content_class] } + .breadcrumbs-container - if defined?(@new_sidebar) = button_tag class: 'toggle-mobile-nav', type: 'button' do %span.sr-only Open sidebar diff --git a/app/views/projects/commit/show.html.haml b/app/views/projects/commit/show.html.haml index b37b3bfd460..c282b1fe2f9 100644 --- a/app/views/projects/commit/show.html.haml +++ b/app/views/projects/commit/show.html.haml @@ -1,5 +1,6 @@ - @no_container = true -- breadcrumb_title "Commit #{@commit.short_id}" +- add_to_breadcrumbs "Commit", project_commits_path(@project) +- breadcrumb_title @commit.short_id - container_class = !fluid_layout && diff_view == :inline ? 'container-limited' : '' - limited_container_width = fluid_layout ? '' : 'limit-container-width' - @content_class = limited_container_width diff --git a/app/views/projects/environments/show.html.haml b/app/views/projects/environments/show.html.haml index 0d0bc499dfa..c35d1b5aaee 100644 --- a/app/views/projects/environments/show.html.haml +++ b/app/views/projects/environments/show.html.haml @@ -1,5 +1,6 @@ - @no_container = true -- breadcrumb_title "Enviroment '#{@environment.name}'" +- add_to_breadcrumbs "Environments", project_environments_path(@project) +- breadcrumb_title @environment.name - page_title "Environments" = render "projects/pipelines/head" diff --git a/app/views/projects/issues/show.html.haml b/app/views/projects/issues/show.html.haml index 4c27083f54f..fd4588ca101 100644 --- a/app/views/projects/issues/show.html.haml +++ b/app/views/projects/issues/show.html.haml @@ -1,5 +1,6 @@ - @content_class = "limit-container-width" unless fluid_layout -- breadcrumb_title "Issues #{@issue.to_reference}" +- add_to_breadcrumbs "Issues", project_issues_path(@project) +- breadcrumb_title @issue.to_reference - page_title "#{@issue.title} (#{@issue.to_reference})", "Issues" - page_description @issue.description - page_card_attributes @issue.card_attributes diff --git a/app/views/projects/jobs/show.html.haml b/app/views/projects/jobs/show.html.haml index 2c76ca91155..975c08c06e6 100644 --- a/app/views/projects/jobs/show.html.haml +++ b/app/views/projects/jobs/show.html.haml @@ -1,5 +1,6 @@ - @no_container = true -- breadcrumb_title "Jobs ##{@build.id}" +- add_to_breadcrumbs "Jobs", project_jobs_path(@project) +- breadcrumb_title "##{@build.id}" - page_title "#{@build.name} (##{@build.id})", "Jobs" = render "projects/pipelines/head" diff --git a/app/views/projects/merge_requests/show.html.haml b/app/views/projects/merge_requests/show.html.haml index f6132300c40..c2d16f7e731 100644 --- a/app/views/projects/merge_requests/show.html.haml +++ b/app/views/projects/merge_requests/show.html.haml @@ -1,5 +1,6 @@ - @content_class = "limit-container-width" unless fluid_layout -- breadcrumb_title "Merge Requests #{@merge_request.to_reference}" +- add_to_breadcrumbs "Merge Requests", project_merge_requests_path(@project) +- breadcrumb_title @merge_request.to_reference - page_title "#{@merge_request.title} (#{@merge_request.to_reference})", "Merge Requests" - page_description @merge_request.description - page_card_attributes @merge_request.card_attributes diff --git a/app/views/projects/milestones/show.html.haml b/app/views/projects/milestones/show.html.haml index 4137bddef6f..1f5f18801ad 100644 --- a/app/views/projects/milestones/show.html.haml +++ b/app/views/projects/milestones/show.html.haml @@ -1,5 +1,6 @@ - @no_container = true -- breadcrumb_title "Milestone #{@milestone.title}" +- add_to_breadcrumbs "Milestones", project_milestones_path(@project) +- breadcrumb_title @milestone.title - page_title @milestone.title, "Milestones" - page_description @milestone.description = render "shared/mr_head" diff --git a/app/views/projects/pipelines/show.html.haml b/app/views/projects/pipelines/show.html.haml index bb25cfb440c..7cc9fe79afd 100644 --- a/app/views/projects/pipelines/show.html.haml +++ b/app/views/projects/pipelines/show.html.haml @@ -1,5 +1,6 @@ - @no_container = true -- breadcrumb_title "Pipelines ##{@pipeline.id}" +- add_to_breadcrumbs "Pipelines", project_pipelines_path(@project) +- breadcrumb_title "##{@pipeline.id}" - page_title "Pipeline" = render "projects/pipelines/head" diff --git a/app/views/projects/snippets/show.html.haml b/app/views/projects/snippets/show.html.haml index ff59d26441f..fda068f08c2 100644 --- a/app/views/projects/snippets/show.html.haml +++ b/app/views/projects/snippets/show.html.haml @@ -1,5 +1,6 @@ - @content_class = "limit-container-width limited-inner-width-container" unless fluid_layout -- breadcrumb_title "Snippet #{@snippet.to_reference}" +- add_to_breadcrumbs "Snippets", dashboard_snippets_path +- breadcrumb_title @snippet.to_reference - page_title "#{@snippet.title} (#{@snippet.to_reference})", "Snippets" = render 'shared/snippets/header' diff --git a/app/views/projects/tags/show.html.haml b/app/views/projects/tags/show.html.haml index 3b6601f4dcf..5d6eb4f4026 100644 --- a/app/views/projects/tags/show.html.haml +++ b/app/views/projects/tags/show.html.haml @@ -1,5 +1,6 @@ - @no_container = true -- breadcrumb_title "Tags #{@tag.name}" +- add_to_breadcrumbs "Tags", project_tags_path(@project) +- breadcrumb_title @tag.name - page_title @tag.name, "Tags" = render "projects/commits/head" diff --git a/app/views/shared/snippets/_header.html.haml b/app/views/shared/snippets/_header.html.haml index 17b34c5eeb3..03bc0b25055 100644 --- a/app/views/shared/snippets/_header.html.haml +++ b/app/views/shared/snippets/_header.html.haml @@ -3,10 +3,14 @@ %span.sr-only = visibility_level_label(@snippet.visibility_level) = visibility_level_icon(@snippet.visibility_level, fw: false) - %strong.item-title - Snippet #{@snippet.to_reference} + - unless show_new_nav? + %strong.item-title + Snippet #{@snippet.to_reference} %span.creator - authored + - if show_new_nav? + Authored + - else + authored = time_ago_with_tooltip(@snippet.created_at, placement: 'bottom', html_class: 'snippet_updated_ago') by #{link_to_member(@project, @snippet.author, size: 24, author_class: "author item-title", avatar_class: "hidden-xs")} diff --git a/app/views/snippets/show.html.haml b/app/views/snippets/show.html.haml index 706f13dd004..578327883e5 100644 --- a/app/views/snippets/show.html.haml +++ b/app/views/snippets/show.html.haml @@ -1,5 +1,7 @@ - @hide_top_links = true - @content_class = "limit-container-width limited-inner-width-container" unless fluid_layout +- add_to_breadcrumbs "Snippets", dashboard_snippets_path +- breadcrumb_title @snippet.to_reference - page_title "#{@snippet.title} (#{@snippet.to_reference})", "Snippets" = render 'shared/snippets/header' From bec6ea20f6933f07cb616c29ce72efc076a97dc0 Mon Sep 17 00:00:00 2001 From: Phil Hughes Date: Thu, 17 Aug 2017 14:00:50 +0100 Subject: [PATCH 05/18] fixed breadcrumbs being undefined --- app/assets/javascripts/breadcrumb.js | 19 +++++++++++-------- 1 file changed, 11 insertions(+), 8 deletions(-) diff --git a/app/assets/javascripts/breadcrumb.js b/app/assets/javascripts/breadcrumb.js index 97340953c77..7433fcbbad1 100644 --- a/app/assets/javascripts/breadcrumb.js +++ b/app/assets/javascripts/breadcrumb.js @@ -8,14 +8,17 @@ export const addTooltipToEl = (el) => { export default () => { const breadcrumbs = document.querySelector('.breadcrumbs-list'); - const topLevelLinks = breadcrumbs.querySelectorAll('.breadcrumbs-list > li > a'); - const $expander = $('.js-breadcrumbs-collapsed-expander'); - topLevelLinks.forEach(el => addTooltipToEl(el)); + if (breadcrumbs) { + const topLevelLinks = breadcrumbs.querySelectorAll('.breadcrumbs-list > li > a'); + const $expander = $('.js-breadcrumbs-collapsed-expander'); - $expander.closest('.dropdown') - .on('show.bs.dropdown hide.bs.dropdown', (e) => { - $('.js-breadcrumbs-collapsed-expander', e.currentTarget).toggleClass('open') - .tooltip('hide'); - }); + topLevelLinks.forEach(el => addTooltipToEl(el)); + + $expander.closest('.dropdown') + .on('show.bs.dropdown hide.bs.dropdown', (e) => { + $('.js-breadcrumbs-collapsed-expander', e.currentTarget).toggleClass('open') + .tooltip('hide'); + }); + } }; From d5ab1000aa705558db7b7b1e2a8f49bbc72f3db2 Mon Sep 17 00:00:00 2001 From: Phil Hughes Date: Thu, 17 Aug 2017 15:53:50 +0100 Subject: [PATCH 06/18] various breadcrumb updates --- app/views/admin/applications/edit.html.haml | 2 ++ app/views/admin/cohorts/index.html.haml | 1 + app/views/admin/dashboard/index.html.haml | 1 + app/views/admin/groups/show.html.haml | 2 ++ app/views/admin/hooks/edit.html.haml | 1 + app/views/admin/jobs/index.html.haml | 1 + app/views/admin/labels/edit.html.haml | 2 ++ app/views/admin/projects/show.html.haml | 2 ++ app/views/admin/runners/index.html.haml | 1 + app/views/admin/services/edit.html.haml | 2 ++ app/views/admin/users/show.html.haml | 2 ++ app/views/layouts/nav/breadcrumbs/_collapsed_dropdown.html.haml | 2 +- app/views/profiles/passwords/edit.html.haml | 1 + app/views/profiles/personal_access_tokens/index.html.haml | 1 + app/views/projects/commit/show.html.haml | 2 +- app/views/projects/wikis/pages.html.haml | 2 ++ 16 files changed, 23 insertions(+), 2 deletions(-) diff --git a/app/views/admin/applications/edit.html.haml b/app/views/admin/applications/edit.html.haml index 13b583e6072..13c408914bb 100644 --- a/app/views/admin/applications/edit.html.haml +++ b/app/views/admin/applications/edit.html.haml @@ -1,3 +1,5 @@ +- add_to_breadcrumbs "Applications", admin_applications_path +- breadcrumb_title @application.name - page_title "Edit", @application.name, "Applications" %h3.page-title Edit application diff --git a/app/views/admin/cohorts/index.html.haml b/app/views/admin/cohorts/index.html.haml index be8644c0ca6..bff53da1d9a 100644 --- a/app/views/admin/cohorts/index.html.haml +++ b/app/views/admin/cohorts/index.html.haml @@ -1,3 +1,4 @@ +- breadcrumb_title "Cohorts" - @no_container = true = render "admin/dashboard/head" diff --git a/app/views/admin/dashboard/index.html.haml b/app/views/admin/dashboard/index.html.haml index 8e94e68bc11..069f8f89e0b 100644 --- a/app/views/admin/dashboard/index.html.haml +++ b/app/views/admin/dashboard/index.html.haml @@ -1,4 +1,5 @@ - @no_container = true +- breadcrumb_title "Dashboard" = render "admin/dashboard/head" %div{ class: container_class } diff --git a/app/views/admin/groups/show.html.haml b/app/views/admin/groups/show.html.haml index 2aadc071c75..3e02f7b1e16 100644 --- a/app/views/admin/groups/show.html.haml +++ b/app/views/admin/groups/show.html.haml @@ -1,3 +1,5 @@ +- add_to_breadcrumbs "Groups", admin_groups_path +- breadcrumb_title @group.name - page_title @group.name, "Groups" %h3.page-title Group: #{@group.full_name} diff --git a/app/views/admin/hooks/edit.html.haml b/app/views/admin/hooks/edit.html.haml index 665e8c7e74f..efb15ccc8df 100644 --- a/app/views/admin/hooks/edit.html.haml +++ b/app/views/admin/hooks/edit.html.haml @@ -1,3 +1,4 @@ +- add_to_breadcrumbs "System Hooks", admin_hooks_path - page_title 'Edit System Hook' %h3.page-title Edit System Hook diff --git a/app/views/admin/jobs/index.html.haml b/app/views/admin/jobs/index.html.haml index 09be17f07be..aa6e9db3900 100644 --- a/app/views/admin/jobs/index.html.haml +++ b/app/views/admin/jobs/index.html.haml @@ -1,3 +1,4 @@ +- breadcrumb_title "Jobs" - @no_container = true = render "admin/dashboard/head" diff --git a/app/views/admin/labels/edit.html.haml b/app/views/admin/labels/edit.html.haml index 309aedceded..96f0d404ac4 100644 --- a/app/views/admin/labels/edit.html.haml +++ b/app/views/admin/labels/edit.html.haml @@ -1,3 +1,5 @@ +- add_to_breadcrumbs "Labels", admin_labels_path +- breadcrumb_title "Edit Label" - page_title "Edit", @label.name, "Labels" %h3.page-title Edit Label diff --git a/app/views/admin/projects/show.html.haml b/app/views/admin/projects/show.html.haml index 7b1b15cfeb8..ab4165c0bf2 100644 --- a/app/views/admin/projects/show.html.haml +++ b/app/views/admin/projects/show.html.haml @@ -1,3 +1,5 @@ +- add_to_breadcrumbs "Projects", admin_projects_path +- breadcrumb_title @project.name_with_namespace - page_title @project.name_with_namespace, "Projects" %h3.page-title Project: #{@project.name_with_namespace} diff --git a/app/views/admin/runners/index.html.haml b/app/views/admin/runners/index.html.haml index 126550ee10e..6793ce557c4 100644 --- a/app/views/admin/runners/index.html.haml +++ b/app/views/admin/runners/index.html.haml @@ -1,3 +1,4 @@ +- breadcrumb_title "Runners" - @no_container = true = render "admin/dashboard/head" diff --git a/app/views/admin/services/edit.html.haml b/app/views/admin/services/edit.html.haml index 53d970e33c1..512176649e6 100644 --- a/app/views/admin/services/edit.html.haml +++ b/app/views/admin/services/edit.html.haml @@ -1,2 +1,4 @@ +- add_to_breadcrumbs "Service Templates", admin_application_settings_services_path +- breadcrumb_title @service.title - page_title @service.title, "Service Templates" = render 'form' diff --git a/app/views/admin/users/show.html.haml b/app/views/admin/users/show.html.haml index b556ff056c0..98ff592eb64 100644 --- a/app/views/admin/users/show.html.haml +++ b/app/views/admin/users/show.html.haml @@ -1,3 +1,5 @@ +- add_to_breadcrumbs "Users", admin_users_path +- breadcrumb_title @user.name - page_title @user.name, "Users" = render 'admin/users/head' diff --git a/app/views/layouts/nav/breadcrumbs/_collapsed_dropdown.html.haml b/app/views/layouts/nav/breadcrumbs/_collapsed_dropdown.html.haml index ddcc884b83b..5454e452a84 100644 --- a/app/views/layouts/nav/breadcrumbs/_collapsed_dropdown.html.haml +++ b/app/views/layouts/nav/breadcrumbs/_collapsed_dropdown.html.haml @@ -8,4 +8,4 @@ .dropdown-menu %ul - @breadcrumb_dropdown_links[dropdown_location].each_with_index do |link, index| - %li{ style: "text-indent: #{[index * 15, 60].min}px;"}= link + %li{ style: "text-indent: #{[index * 15, 60].min}px;" }= link diff --git a/app/views/profiles/passwords/edit.html.haml b/app/views/profiles/passwords/edit.html.haml index 985bb79508f..c606b5a1e6c 100644 --- a/app/views/profiles/passwords/edit.html.haml +++ b/app/views/profiles/passwords/edit.html.haml @@ -1,3 +1,4 @@ +- breadcrumb_title "Edit Password" - page_title "Password" - @content_class = "limit-container-width" unless fluid_layout diff --git a/app/views/profiles/personal_access_tokens/index.html.haml b/app/views/profiles/personal_access_tokens/index.html.haml index 2216708d354..06bb72b9f0d 100644 --- a/app/views/profiles/personal_access_tokens/index.html.haml +++ b/app/views/profiles/personal_access_tokens/index.html.haml @@ -1,3 +1,4 @@ +- breadcrumb_title "Access Tokens" - page_title "Personal Access Tokens" - @content_class = "limit-container-width" unless fluid_layout diff --git a/app/views/projects/commit/show.html.haml b/app/views/projects/commit/show.html.haml index c282b1fe2f9..717de85c5d2 100644 --- a/app/views/projects/commit/show.html.haml +++ b/app/views/projects/commit/show.html.haml @@ -1,5 +1,5 @@ - @no_container = true -- add_to_breadcrumbs "Commit", project_commits_path(@project) +- add_to_breadcrumbs "Commits", project_commits_path(@project) - breadcrumb_title @commit.short_id - container_class = !fluid_layout && diff_view == :inline ? 'container-limited' : '' - limited_container_width = fluid_layout ? '' : 'limit-container-width' diff --git a/app/views/projects/wikis/pages.html.haml b/app/views/projects/wikis/pages.html.haml index dece1fad0bb..d533c611a38 100644 --- a/app/views/projects/wikis/pages.html.haml +++ b/app/views/projects/wikis/pages.html.haml @@ -1,4 +1,6 @@ - @no_container = true +- add_to_breadcrumbs "Wiki", get_project_wiki_path(@project) +- breadcrumb_title "Pages" - page_title "Pages", "Wiki" %div{ class: container_class } From 4e74eb8178faaf364a421a5113877db434d365e8 Mon Sep 17 00:00:00 2001 From: Phil Hughes Date: Fri, 18 Aug 2017 13:54:48 +0100 Subject: [PATCH 07/18] removed bottom border from context-header link --- app/assets/stylesheets/new_sidebar.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/app/assets/stylesheets/new_sidebar.scss b/app/assets/stylesheets/new_sidebar.scss index cee5b22adb9..2642d16d33d 100644 --- a/app/assets/stylesheets/new_sidebar.scss +++ b/app/assets/stylesheets/new_sidebar.scss @@ -45,7 +45,6 @@ $new-sidebar-collapsed-width: 50px; margin-right: 2px; a { - border-bottom: 1px solid $border-color; font-weight: 600; display: flex; align-items: center; From a8460f215cc1949b993e774dc00bad0b506abcfa Mon Sep 17 00:00:00 2001 From: Phil Hughes Date: Fri, 18 Aug 2017 17:19:23 +0100 Subject: [PATCH 08/18] style updates fixed some more breadcrumb titles --- app/assets/stylesheets/new_nav.scss | 16 ++++++++++++---- app/helpers/groups_helper.rb | 6 +++--- app/helpers/projects_helper.rb | 4 ++-- app/views/groups/subgroups.html.haml | 1 + app/views/layouts/nav/_breadcrumbs.html.haml | 3 ++- .../breadcrumbs/_collapsed_dropdown.html.haml | 2 +- app/views/projects/boards/_show.html.haml | 2 +- app/views/projects/compare/index.html.haml | 1 + app/views/projects/compare/show.html.haml | 2 +- .../projects/pipeline_schedules/edit.html.haml | 2 ++ .../projects/pipeline_schedules/index.html.haml | 2 +- app/views/projects/releases/edit.html.haml | 2 ++ app/views/projects/snippets/edit.html.haml | 2 ++ app/views/projects/snippets/new.html.haml | 2 ++ 14 files changed, 33 insertions(+), 14 deletions(-) diff --git a/app/assets/stylesheets/new_nav.scss b/app/assets/stylesheets/new_nav.scss index 8beaf64e7a1..2ff1098b8e5 100644 --- a/app/assets/stylesheets/new_nav.scss +++ b/app/assets/stylesheets/new_nav.scss @@ -292,7 +292,7 @@ header.navbar-gitlab-new { .breadcrumbs { display: flex; - min-height: 61px; + min-height: 48px; color: $gl-text-color; } @@ -300,6 +300,8 @@ header.navbar-gitlab-new { display: flex; width: 100%; position: relative; + padding-top: $gl-padding; + padding-bottom: $gl-padding; align-items: center; border-bottom: 1px solid $border-color; } @@ -311,7 +313,7 @@ header.navbar-gitlab-new { color: $gl-text-color-secondary; .avatar-tile { - margin-right: 5px; + margin-right: 4px; border: 1px solid $border-color; border-radius: 50%; vertical-align: sub; @@ -332,6 +334,7 @@ header.navbar-gitlab-new { display: flex; flex-wrap: wrap; margin-bottom: 0; + line-height: 16px; > li { display: flex; @@ -343,16 +346,21 @@ header.navbar-gitlab-new { } > a { - @include str-truncated(128px); + font-size: 12px; color: currentColor; } } } +.breadcrumb-item-project-name { + @include str-truncated(128px); +} + .breadcrumbs-list-angle { position: absolute; right: -12px; top: 50%; + color: $gl-text-color-tertiary; transform: translateY(-50%); } @@ -364,7 +372,7 @@ header.navbar-gitlab-new { .breadcrumbs-sub-title { margin: 0; - font-size: $gl-font-size; + font-size: 12px; font-weight: 600; line-height: 1; diff --git a/app/helpers/groups_helper.rb b/app/helpers/groups_helper.rb index 7f43e4106fc..3edeb406b36 100644 --- a/app/helpers/groups_helper.rb +++ b/app/helpers/groups_helper.rb @@ -17,7 +17,7 @@ module GroupsHelper group.ancestors.reverse.each_with_index do |parent, index| if show_new_nav? && index > 0 - add_to_breadcrumb_dropdown(group_title_link(parent, hidable: false), location: :before) + add_to_breadcrumb_dropdown(group_title_link(parent, hidable: false, show_avatar: true), location: :before) else full_title += if show_new_nav? breadcrumb_list_item group_title_link(parent, hidable: false) @@ -83,10 +83,10 @@ module GroupsHelper private - def group_title_link(group, hidable: false) + def group_title_link(group, hidable: false, show_avatar: false) link_to(group_path(group), class: "group-path #{'hidable' if hidable}") do output = - if show_new_nav? && group.try(:avatar_url) + if show_new_nav? && group.try(:avatar_url) || (show_new_nav? && show_avatar) image_tag(group_icon(group), class: "avatar-tile", width: 16, height: 16) else "" diff --git a/app/helpers/projects_helper.rb b/app/helpers/projects_helper.rb index 867f3fadfb9..5f61dafaae5 100644 --- a/app/helpers/projects_helper.rb +++ b/app/helpers/projects_helper.rb @@ -52,7 +52,7 @@ module ProjectsHelper def project_title(project) namespace_link = if project.group - group_title(project.group) + group_title(project.group, nil, nil) else owner = project.namespace.owner link_to(simple_sanitize(owner.name), user_path(owner)) @@ -66,7 +66,7 @@ module ProjectsHelper "" end - output << simple_sanitize(project.name) + output << content_tag("span", simple_sanitize(project.name), class: "breadcrumb-item-project-name") output.html_safe end diff --git a/app/views/groups/subgroups.html.haml b/app/views/groups/subgroups.html.haml index 8f0724c0677..7abc84412c6 100644 --- a/app/views/groups/subgroups.html.haml +++ b/app/views/groups/subgroups.html.haml @@ -1,3 +1,4 @@ +- breadcrumb_title "Details" - @no_container = true = render 'head' diff --git a/app/views/layouts/nav/_breadcrumbs.html.haml b/app/views/layouts/nav/_breadcrumbs.html.haml index 9f0cb2fad3a..8933fdd14db 100644 --- a/app/views/layouts/nav/_breadcrumbs.html.haml +++ b/app/views/layouts/nav/_breadcrumbs.html.haml @@ -13,7 +13,8 @@ - if @breadcrumbs_extra_links - @breadcrumbs_extra_links.each do |extra| = breadcrumb_list_item link_to(extra[:text], extra[:link]) - = render "layouts/nav/breadcrumbs/collapsed_dropdown", location: :after + - if defined?(@breadcrumb_dropdown_links) && @breadcrumb_dropdown_links.key?(:after) + = render "layouts/nav/breadcrumbs/collapsed_dropdown", items: @breadcrumb_dropdown_links[:after] %li %h2.breadcrumbs-sub-title= @breadcrumb_title - if content_for?(:breadcrumbs_extra) diff --git a/app/views/layouts/nav/breadcrumbs/_collapsed_dropdown.html.haml b/app/views/layouts/nav/breadcrumbs/_collapsed_dropdown.html.haml index 5454e452a84..28022eebb19 100644 --- a/app/views/layouts/nav/breadcrumbs/_collapsed_dropdown.html.haml +++ b/app/views/layouts/nav/breadcrumbs/_collapsed_dropdown.html.haml @@ -8,4 +8,4 @@ .dropdown-menu %ul - @breadcrumb_dropdown_links[dropdown_location].each_with_index do |link, index| - %li{ style: "text-indent: #{[index * 15, 60].min}px;" }= link + %li{ style: "text-indent: #{[index * 16, 60].min}px;" }= link diff --git a/app/views/projects/boards/_show.html.haml b/app/views/projects/boards/_show.html.haml index 66aa99e964b..cea942f213d 100644 --- a/app/views/projects/boards/_show.html.haml +++ b/app/views/projects/boards/_show.html.haml @@ -1,6 +1,6 @@ - @no_container = true - @content_class = "issue-boards-content" -- breadcrumb_title "Issue Board" +- breadcrumb_title "Issues Board" - page_title "Boards" - content_for :page_specific_javascripts do diff --git a/app/views/projects/compare/index.html.haml b/app/views/projects/compare/index.html.haml index 2cf14859f30..2632fea6eba 100644 --- a/app/views/projects/compare/index.html.haml +++ b/app/views/projects/compare/index.html.haml @@ -1,4 +1,5 @@ - @no_container = true +- breadcrumb_title "Compare Revisions" - page_title "Compare" = render "projects/commits/head" diff --git a/app/views/projects/compare/show.html.haml b/app/views/projects/compare/show.html.haml index 8cfa279bd68..7cc42455394 100644 --- a/app/views/projects/compare/show.html.haml +++ b/app/views/projects/compare/show.html.haml @@ -1,5 +1,5 @@ - @no_container = true -- breadcrumb_title "Compare" +- add_to_breadcrumbs "Compare Revisions", project_compare_index_path(@project) - page_title "#{params[:from]}...#{params[:to]}" = render "projects/commits/head" diff --git a/app/views/projects/pipeline_schedules/edit.html.haml b/app/views/projects/pipeline_schedules/edit.html.haml index 9b2a7b5821d..d95fa6da903 100644 --- a/app/views/projects/pipeline_schedules/edit.html.haml +++ b/app/views/projects/pipeline_schedules/edit.html.haml @@ -1,3 +1,5 @@ +- add_to_breadcrumbs _("Schedules"), pipeline_schedules_path(@project) +- breadcrumb_title "##{@schedule.id}" - page_title _("Edit"), @schedule.description, _("Pipeline Schedule") %h3.page-title diff --git a/app/views/projects/pipeline_schedules/index.html.haml b/app/views/projects/pipeline_schedules/index.html.haml index 8426b29bb14..9197d9ae8fc 100644 --- a/app/views/projects/pipeline_schedules/index.html.haml +++ b/app/views/projects/pipeline_schedules/index.html.haml @@ -1,4 +1,4 @@ -- breadcrumb_title "Schedules" +- breadcrumb_title _("Schedules") - content_for :page_specific_javascripts do = webpack_bundle_tag 'common_vue' diff --git a/app/views/projects/releases/edit.html.haml b/app/views/projects/releases/edit.html.haml index 0a5a38a3694..c786298e341 100644 --- a/app/views/projects/releases/edit.html.haml +++ b/app/views/projects/releases/edit.html.haml @@ -1,4 +1,6 @@ - @no_container = true +- add_to_breadcrumbs "Tags", project_tags_path(@project) +- breadcrumb_title @tag.name - page_title "Edit", @tag.name, "Tags" = render "projects/commits/head" diff --git a/app/views/projects/snippets/edit.html.haml b/app/views/projects/snippets/edit.html.haml index d41cc8e0425..32844f5204a 100644 --- a/app/views/projects/snippets/edit.html.haml +++ b/app/views/projects/snippets/edit.html.haml @@ -1,3 +1,5 @@ +- add_to_breadcrumbs "Snippets", project_snippets_path(@project) +- breadcrumb_title @snippet.to_reference - page_title "Edit", "#{@snippet.title} (#{@snippet.to_reference})", "Snippets" %h3.page-title diff --git a/app/views/projects/snippets/new.html.haml b/app/views/projects/snippets/new.html.haml index d3e6b456f48..1359a815429 100644 --- a/app/views/projects/snippets/new.html.haml +++ b/app/views/projects/snippets/new.html.haml @@ -1,3 +1,5 @@ +- add_to_breadcrumbs "Snippets", project_snippets_path(@project) +- breadcrumb_title "New" - page_title "New Snippets" %h3.page-title From 38f15514529865eefd74c3b4618eae23c6eda892 Mon Sep 17 00:00:00 2001 From: Phil Hughes Date: Mon, 4 Sep 2017 15:47:19 +0100 Subject: [PATCH 09/18] fixed dropdown not showing in wiki spacing updates to expander button sub-title fixes --- app/assets/stylesheets/pages/commits.scss | 4 ++-- app/views/layouts/nav/_breadcrumbs.html.haml | 7 +++---- app/views/projects/artifacts/browse.html.haml | 4 ++++ app/views/projects/boards/_show.html.haml | 2 +- app/views/projects/pipeline_schedules/index.html.haml | 2 -- app/views/projects/pipelines/charts.html.haml | 2 -- 6 files changed, 10 insertions(+), 11 deletions(-) diff --git a/app/assets/stylesheets/pages/commits.scss b/app/assets/stylesheets/pages/commits.scss index b518036b01d..587a202d6dd 100644 --- a/app/assets/stylesheets/pages/commits.scss +++ b/app/assets/stylesheets/pages/commits.scss @@ -141,12 +141,12 @@ display: inline-block; background: $white-light; color: $gl-text-color-secondary; - padding: 0 5px; + padding: 0 4px; cursor: pointer; border: 1px solid $border-gray-dark; border-radius: $border-radius-default; margin-left: 5px; - font-size: $gl-font-size; + font-size: 12px; line-height: $gl-font-size; outline: none; diff --git a/app/views/layouts/nav/_breadcrumbs.html.haml b/app/views/layouts/nav/_breadcrumbs.html.haml index 6e2a959b86e..cc2cfff85ba 100644 --- a/app/views/layouts/nav/_breadcrumbs.html.haml +++ b/app/views/layouts/nav/_breadcrumbs.html.haml @@ -1,8 +1,8 @@ - container = @no_breadcrumb_container ? 'container-fluid' : container_class - hide_top_links = @hide_top_links || false -%nav.breadcrumbs{ role: "navigation" } - .breadcrumbs-container{ class: [container, @content_class] } +%nav.breadcrumbs{ role: "navigation", class: [container, @content_class] } + .breadcrumbs-container - if defined?(@new_sidebar) = button_tag class: 'toggle-mobile-nav', type: 'button' do %span.sr-only Open sidebar @@ -14,8 +14,7 @@ - if @breadcrumbs_extra_links - @breadcrumbs_extra_links.each do |extra| = breadcrumb_list_item link_to(extra[:text], extra[:link]) - - if defined?(@breadcrumb_dropdown_links) && @breadcrumb_dropdown_links.key?(:after) - = render "layouts/nav/breadcrumbs/collapsed_dropdown", items: @breadcrumb_dropdown_links[:after] + = render "layouts/nav/breadcrumbs/collapsed_dropdown", location: :after %li %h2.breadcrumbs-sub-title= @breadcrumb_title - if content_for?(:breadcrumbs_extra) diff --git a/app/views/projects/artifacts/browse.html.haml b/app/views/projects/artifacts/browse.html.haml index a33743c2f57..4cc3218d967 100644 --- a/app/views/projects/artifacts/browse.html.haml +++ b/app/views/projects/artifacts/browse.html.haml @@ -1,8 +1,12 @@ +- breadcrumb_title _('Artifacts') - page_title @path.presence, 'Artifacts', "#{@build.name} (##{@build.id})", 'Jobs' = render "projects/pipelines/head" = render "projects/jobs/header", show_controls: false +- add_to_breadcrumbs(_('Jobs'), project_jobs_path(@project)) +- add_to_breadcrumbs("##{@build.id}", project_jobs_path(@project)) + .tree-holder .nav-block %ul.breadcrumb.repo-breadcrumb diff --git a/app/views/projects/boards/_show.html.haml b/app/views/projects/boards/_show.html.haml index f6b5df4c91a..303e20e8780 100644 --- a/app/views/projects/boards/_show.html.haml +++ b/app/views/projects/boards/_show.html.haml @@ -1,7 +1,7 @@ - @no_breadcrumb_container = true - @no_container = true - @content_class = "issue-boards-content" -- breadcrumb_title "Issues Board" +- breadcrumb_title "Issue Board" - page_title "Boards" - content_for :page_specific_javascripts do diff --git a/app/views/projects/pipeline_schedules/index.html.haml b/app/views/projects/pipeline_schedules/index.html.haml index 9197d9ae8fc..69178aea32c 100644 --- a/app/views/projects/pipeline_schedules/index.html.haml +++ b/app/views/projects/pipeline_schedules/index.html.haml @@ -11,8 +11,6 @@ - content_for :breadcrumbs_extra do = link_to _('New schedule'), new_namespace_project_pipeline_schedule_path(@project.namespace, @project), class: 'btn btn-create' - - add_to_breadcrumbs("Pipelines", project_pipelines_path(@project)) - = render "projects/pipelines/head" %div{ class: container_class } diff --git a/app/views/projects/pipelines/charts.html.haml b/app/views/projects/pipelines/charts.html.haml index 96da90362c4..487ac87186d 100644 --- a/app/views/projects/pipelines/charts.html.haml +++ b/app/views/projects/pipelines/charts.html.haml @@ -1,8 +1,6 @@ - @no_container = true - breadcrumb_title "CI / CD Charts" - page_title _("Charts"), _("Pipelines") -- if show_new_nav? - - add_to_breadcrumbs("Pipelines", project_pipelines_path(@project)) - content_for :page_specific_javascripts do = page_specific_javascript_bundle_tag('common_d3') = page_specific_javascript_bundle_tag('graphs') From 3b1993a83e9b918accdc62be18ebaa4b198c4b90 Mon Sep 17 00:00:00 2001 From: Phil Hughes Date: Mon, 4 Sep 2017 19:23:57 +0100 Subject: [PATCH 10/18] rspec test fixes --- spec/features/issues/form_spec.rb | 6 ++---- spec/features/merge_requests/form_spec.rb | 7 ++----- spec/helpers/groups_helper_spec.rb | 4 +++- 3 files changed, 7 insertions(+), 10 deletions(-) diff --git a/spec/features/issues/form_spec.rb b/spec/features/issues/form_spec.rb index 4297bfff3d9..2db6f9a2982 100644 --- a/spec/features/issues/form_spec.rb +++ b/spec/features/issues/form_spec.rb @@ -166,12 +166,10 @@ describe 'New/edit issue', :js do end end - page.within '.issuable-meta' do + page.within '.breadcrumbs' do issue = Issue.find_by(title: 'title') - expect(page).to have_text("Issue #{issue.to_reference}") - # compare paths because the host differ in test - expect(find_link(issue.to_reference)[:href]).to end_with(issue_path(issue)) + expect(page).to have_text("Issues #{issue.to_reference}") end end diff --git a/spec/features/merge_requests/form_spec.rb b/spec/features/merge_requests/form_spec.rb index 89410b0e90f..de98b147d04 100644 --- a/spec/features/merge_requests/form_spec.rb +++ b/spec/features/merge_requests/form_spec.rb @@ -84,13 +84,10 @@ describe 'New/edit merge request', :js do end end - page.within '.issuable-meta' do + page.within '.breadcrumbs' do merge_request = MergeRequest.find_by(source_branch: 'fix') - expect(page).to have_text("Merge request #{merge_request.to_reference}") - # compare paths because the host differ in test - expect(find_link(merge_request.to_reference)[:href]) - .to end_with(merge_request_path(merge_request)) + expect(page).to have_text("Merge Requests #{merge_request.to_reference}") end end diff --git a/spec/helpers/groups_helper_spec.rb b/spec/helpers/groups_helper_spec.rb index 9d6e03e3868..a71450dcf8c 100644 --- a/spec/helpers/groups_helper_spec.rb +++ b/spec/helpers/groups_helper_spec.rb @@ -91,7 +91,9 @@ describe GroupsHelper do let!(:very_deep_nested_group) { create(:group, parent: deep_nested_group) } it 'outputs the groups in the correct order' do - expect(helper.group_title(very_deep_nested_group)).to match(/>#{group.name}<\/a>.*>#{nested_group.name}<\/a>.*>#{deep_nested_group.name}<\/a>/) + expect(helper.group_title(very_deep_nested_group)) + .to match(/
  • #{deep_nested_group.name}.*<\/li>.*#{very_deep_nested_group.name}<\/a>/m) + # expect(helper.group_title(very_deep_nested_group)).to match(/<\/li>.*#{very_deep_nested_group.name}<\/a>/) end end end From 78b0c35ce71b2e6083d655c47977766bf56fbe72 Mon Sep 17 00:00:00 2001 From: Phil Hughes Date: Mon, 4 Sep 2017 19:24:39 +0100 Subject: [PATCH 11/18] remove project title karma test --- spec/javascripts/project_title_spec.js | 59 -------------------------- 1 file changed, 59 deletions(-) delete mode 100644 spec/javascripts/project_title_spec.js diff --git a/spec/javascripts/project_title_spec.js b/spec/javascripts/project_title_spec.js deleted file mode 100644 index 3d36bb3e4d4..00000000000 --- a/spec/javascripts/project_title_spec.js +++ /dev/null @@ -1,59 +0,0 @@ -/* global Project */ - -import 'select2/select2'; -import '~/gl_dropdown'; -import '~/api'; -import '~/project_select'; -import '~/project'; - -describe('Project Title', () => { - const dummyApiVersion = 'v3000'; - preloadFixtures('issues/open-issue.html.raw'); - loadJSONFixtures('projects.json'); - - beforeEach(() => { - loadFixtures('issues/open-issue.html.raw'); - - window.gon = {}; - window.gon.api_version = dummyApiVersion; - - // eslint-disable-next-line no-new - new Project(); - }); - - describe('project list', () => { - let reqUrl; - let reqData; - - beforeEach(() => { - const fakeResponseData = getJSONFixture('projects.json'); - spyOn(jQuery, 'ajax').and.callFake((req) => { - const def = $.Deferred(); - reqUrl = req.url; - reqData = req.data; - def.resolve(fakeResponseData); - return def.promise(); - }); - }); - - it('toggles dropdown', () => { - const $menu = $('.js-dropdown-menu-projects'); - window.gon.current_user_id = 1; - $('.js-projects-dropdown-toggle').click(); - expect($menu).toHaveClass('open'); - expect(reqUrl).toBe(`/api/${dummyApiVersion}/projects.json?simple=true`); - expect(reqData).toEqual({ - search: '', - order_by: 'last_activity_at', - per_page: 20, - membership: true, - }); - $menu.find('.dropdown-menu-close-icon').click(); - expect($menu).not.toHaveClass('open'); - }); - }); - - afterEach(() => { - window.gon = {}; - }); -}); From a27c0013009ee36bc796a6b12c36b6320d05cce2 Mon Sep 17 00:00:00 2001 From: Phil Hughes Date: Tue, 5 Sep 2017 09:28:55 +0100 Subject: [PATCH 12/18] test fixes removed un-used file --- app/assets/javascripts/dispatcher.js | 5 -- app/assets/javascripts/group_name.js | 76 ------------------- features/steps/explore/projects.rb | 4 +- features/steps/project/redirects.rb | 2 +- .../projects/sub_group_issuables_spec.rb | 3 +- spec/features/projects_spec.rb | 43 ----------- 6 files changed, 4 insertions(+), 129 deletions(-) delete mode 100644 app/assets/javascripts/group_name.js diff --git a/app/assets/javascripts/dispatcher.js b/app/assets/javascripts/dispatcher.js index 3dec4de06ec..0445dd4e6ea 100644 --- a/app/assets/javascripts/dispatcher.js +++ b/app/assets/javascripts/dispatcher.js @@ -41,7 +41,6 @@ import Issue from './issue'; import BindInOut from './behaviors/bind_in_out'; import DeleteModal from './branches/branches_delete_modal'; import Group from './group'; -import GroupName from './group_name'; import GroupsList from './groups_list'; import ProjectsList from './projects_list'; import setupProjectEdit from './project_edit'; @@ -554,9 +553,6 @@ import initChangesDropdown from './init_changes_dropdown'; case 'root': new UserCallout(); break; - case 'groups': - new GroupName(); - break; case 'profiles': new NotificationsForm(); new NotificationsDropdown(); @@ -564,7 +560,6 @@ import initChangesDropdown from './init_changes_dropdown'; case 'projects': new Project(); new ProjectAvatar(); - new GroupName(); switch (path[1]) { case 'compare': new CompareAutocomplete(); diff --git a/app/assets/javascripts/group_name.js b/app/assets/javascripts/group_name.js deleted file mode 100644 index 3e483b69fd2..00000000000 --- a/app/assets/javascripts/group_name.js +++ /dev/null @@ -1,76 +0,0 @@ -import Cookies from 'js-cookie'; -import _ from 'underscore'; - -export default class GroupName { - constructor() { - this.titleContainer = document.querySelector('.js-title-container'); - this.title = this.titleContainer.querySelector('.title'); - - if (this.title) { - this.titleWidth = this.title.offsetWidth; - this.groupTitle = this.titleContainer.querySelector('.group-title'); - this.groups = this.titleContainer.querySelectorAll('.group-path'); - this.toggle = null; - this.isHidden = false; - this.init(); - } - } - - init() { - if (this.groups.length > 0) { - this.groups[this.groups.length - 1].classList.remove('hidable'); - this.toggleHandler(); - window.addEventListener('resize', _.debounce(this.toggleHandler.bind(this), 100)); - } - this.render(); - } - - toggleHandler() { - if (this.titleWidth > this.titleContainer.offsetWidth) { - if (!this.toggle) this.createToggle(); - this.showToggle(); - } else if (this.toggle) { - this.hideToggle(); - } - } - - createToggle() { - this.toggle = document.createElement('button'); - this.toggle.setAttribute('type', 'button'); - this.toggle.className = 'text-expander group-name-toggle'; - this.toggle.setAttribute('aria-label', 'Toggle full path'); - if (Cookies.get('new_nav') === 'true') { - this.toggle.innerHTML = ''; - } else { - this.toggle.innerHTML = '...'; - } - this.toggle.addEventListener('click', this.toggleGroups.bind(this)); - if (Cookies.get('new_nav') === 'true') { - this.title.insertBefore(this.toggle, this.groupTitle); - } else { - this.titleContainer.insertBefore(this.toggle, this.title); - } - this.toggleGroups(); - } - - showToggle() { - this.title.classList.add('wrap'); - this.toggle.classList.remove('hidden'); - if (this.isHidden) this.groupTitle.classList.add('hidden'); - } - - hideToggle() { - this.title.classList.remove('wrap'); - this.toggle.classList.add('hidden'); - if (this.isHidden) this.groupTitle.classList.remove('hidden'); - } - - toggleGroups() { - this.isHidden = !this.isHidden; - this.groupTitle.classList.toggle('hidden'); - } - - render() { - this.title.classList.remove('initializing'); - } -} diff --git a/features/steps/explore/projects.rb b/features/steps/explore/projects.rb index 8fb2ac34c32..90d0ff47ce7 100644 --- a/features/steps/explore/projects.rb +++ b/features/steps/explore/projects.rb @@ -36,13 +36,13 @@ class Spinach::Features::ExploreProjects < Spinach::FeatureSteps end step 'I should see project "Community" home page' do - page.within '.breadcrumbs .title' do + page.within '.breadcrumbs .breadcrumb-item-project-name' do expect(page).to have_content 'Community' end end step 'I should see project "Internal" home page' do - page.within '.breadcrumbs .title' do + page.within '.breadcrumbs .breadcrumb-item-project-name' do expect(page).to have_content 'Internal' end end diff --git a/features/steps/project/redirects.rb b/features/steps/project/redirects.rb index 100e674abed..ff9331b93fa 100644 --- a/features/steps/project/redirects.rb +++ b/features/steps/project/redirects.rb @@ -18,7 +18,7 @@ class Spinach::Features::ProjectRedirects < Spinach::FeatureSteps step 'I should see project "Community" home page' do Gitlab.config.gitlab.should_receive(:host).and_return("www.example.com") - page.within '.breadcrumbs .title' do + page.within '.breadcrumbs .breadcrumb-item-project-name' do expect(page).to have_content 'Community' end end diff --git a/spec/features/projects/sub_group_issuables_spec.rb b/spec/features/projects/sub_group_issuables_spec.rb index b2b39dbd24c..eb2d3ff50a0 100644 --- a/spec/features/projects/sub_group_issuables_spec.rb +++ b/spec/features/projects/sub_group_issuables_spec.rb @@ -26,7 +26,6 @@ describe 'Subgroup Issuables', :js, :nested_groups do def expect_to_have_full_subgroup_title title = find('.breadcrumbs-links') - expect(title).not_to have_selector '.initializing' - expect(title).to have_content 'group / subgroup / project' + expect(title).to have_content 'group subgroup project' end end diff --git a/spec/features/projects_spec.rb b/spec/features/projects_spec.rb index baf3d29e6c5..81f7ab80a04 100644 --- a/spec/features/projects_spec.rb +++ b/spec/features/projects_spec.rb @@ -95,49 +95,6 @@ feature 'Project' do end end - describe 'project title' do - let(:user) { create(:user) } - let(:project) { create(:project, namespace: user.namespace) } - - before do - sign_in(user) - project.add_user(user, Gitlab::Access::MASTER) - visit project_path(project) - end - - it 'clicks toggle and shows dropdown', js: true do - find('.js-projects-dropdown-toggle').click - expect(page).to have_css('.dropdown-menu-projects .dropdown-content li', count: 1) - end - end - - describe 'project title' do - let(:user) { create(:user) } - let(:project) { create(:project, namespace: user.namespace) } - let(:project2) { create(:project, namespace: user.namespace, path: 'test') } - let(:issue) { create(:issue, project: project) } - - context 'on issues page', js: true do - before do - sign_in(user) - project.add_user(user, Gitlab::Access::MASTER) - project2.add_user(user, Gitlab::Access::MASTER) - visit project_issue_path(project, issue) - end - - it 'clicks toggle and shows dropdown' do - find('.js-projects-dropdown-toggle').click - expect(page).to have_css('.dropdown-menu-projects .dropdown-content li', count: 2) - - page.within '.dropdown-menu-projects' do - click_link project.name_with_namespace - end - - expect(page).to have_content project.name - end - end - end - describe 'tree view (default view is set to Files)' do let(:user) { create(:user, project_view: 'files') } let(:project) { create(:forked_project_with_submodules) } From 402812829c1cf484417755bb7e50e59c7cfb385d Mon Sep 17 00:00:00 2001 From: Phil Hughes Date: Tue, 5 Sep 2017 11:22:53 +0100 Subject: [PATCH 13/18] added webkit prefix to fix failing tests --- app/assets/stylesheets/new_nav.scss | 3 +++ 1 file changed, 3 insertions(+) diff --git a/app/assets/stylesheets/new_nav.scss b/app/assets/stylesheets/new_nav.scss index 82ab7fd1c93..1a0296e6f9c 100644 --- a/app/assets/stylesheets/new_nav.scss +++ b/app/assets/stylesheets/new_nav.scss @@ -307,6 +307,7 @@ header.navbar-gitlab-new { } .breadcrumbs-container { + display: -webkit-flex; display: flex; width: 100%; position: relative; @@ -317,6 +318,7 @@ header.navbar-gitlab-new { } .breadcrumbs-links { + -webkit-flex: 1; flex: 1; min-width: 0; align-self: center; @@ -341,6 +343,7 @@ header.navbar-gitlab-new { } .breadcrumbs-list { + display: -webkit-flex; display: flex; flex-wrap: wrap; margin-bottom: 0; From 8f4ce0d6d46303bb79b647380b4bd81d8e9e3b39 Mon Sep 17 00:00:00 2001 From: Phil Hughes Date: Tue, 5 Sep 2017 11:25:28 +0100 Subject: [PATCH 14/18] fixed images changing height of breadcrumbs --- app/helpers/groups_helper.rb | 2 +- app/helpers/projects_helper.rb | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/app/helpers/groups_helper.rb b/app/helpers/groups_helper.rb index 4b8549dcb9b..05640d3cf3f 100644 --- a/app/helpers/groups_helper.rb +++ b/app/helpers/groups_helper.rb @@ -87,7 +87,7 @@ module GroupsHelper link_to(group_path(group), class: "group-path #{'hidable' if hidable}") do output = if (show_new_nav? && group.try(:avatar_url) || (show_new_nav? && show_avatar)) && !Rails.env.test? - image_tag(group_icon(group), class: "avatar-tile", width: 16, height: 16) + image_tag(group_icon(group), class: "avatar-tile", width: 15, height: 15) else "" end diff --git a/app/helpers/projects_helper.rb b/app/helpers/projects_helper.rb index 0dc820e5d03..be52ebdd696 100644 --- a/app/helpers/projects_helper.rb +++ b/app/helpers/projects_helper.rb @@ -63,7 +63,7 @@ module ProjectsHelper project_link = link_to project_path(project), { class: ("project-item-select-holder" unless show_new_nav?) } do output = if show_new_nav? && project.avatar_url && !Rails.env.test? - project_icon(project, alt: project.name, class: 'avatar-tile', width: 16, height: 16) + project_icon(project, alt: project.name, class: 'avatar-tile', width: 15, height: 15) else "" end From 9477f4a881cb3c9a54f6abd9bc0a20f161c9e9b3 Mon Sep 17 00:00:00 2001 From: Phil Hughes Date: Tue, 5 Sep 2017 14:02:04 +0100 Subject: [PATCH 15/18] removed comment from helper spec --- spec/helpers/groups_helper_spec.rb | 1 - 1 file changed, 1 deletion(-) diff --git a/spec/helpers/groups_helper_spec.rb b/spec/helpers/groups_helper_spec.rb index a71450dcf8c..05f969904f5 100644 --- a/spec/helpers/groups_helper_spec.rb +++ b/spec/helpers/groups_helper_spec.rb @@ -93,7 +93,6 @@ describe GroupsHelper do it 'outputs the groups in the correct order' do expect(helper.group_title(very_deep_nested_group)) .to match(/
  • #{deep_nested_group.name}.*<\/li>.*#{very_deep_nested_group.name}<\/a>/m) - # expect(helper.group_title(very_deep_nested_group)).to match(/<\/li>.*#{very_deep_nested_group.name}<\/a>/) end end end From df35410a9b908361843dcc9e36bcf73d4a704300 Mon Sep 17 00:00:00 2001 From: Phil Hughes Date: Tue, 5 Sep 2017 16:45:21 +0100 Subject: [PATCH 16/18] fixed karma spec --- .../service/projects_service_spec.js | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/spec/javascripts/projects_dropdown/service/projects_service_spec.js b/spec/javascripts/projects_dropdown/service/projects_service_spec.js index e9aabfaec1f..7abfa463582 100644 --- a/spec/javascripts/projects_dropdown/service/projects_service_spec.js +++ b/spec/javascripts/projects_dropdown/service/projects_service_spec.js @@ -12,12 +12,21 @@ FREQUENT_PROJECTS.MAX_COUNT = 3; describe('ProjectsService', () => { let service; + let originalGon; beforeEach(() => { - gon.api_version = currentSession.apiVersion; + originalGon = window.gon; + + window.gon = Object.assign({}, { + api_version: currentSession.apiVersion, + }); service = new ProjectsService(currentSession.username); }); + afterEach(() => { + window.gon = originalGon; + }); + describe('contructor', () => { it('should initialize default properties of class', () => { expect(service.isLocalStorageAvailable).toBeTruthy(); From de82bd8e447ae7b4b7e66f0368f5f43311848186 Mon Sep 17 00:00:00 2001 From: Phil Hughes Date: Wed, 6 Sep 2017 11:55:23 +0100 Subject: [PATCH 17/18] fixed up JS to use a js-* class fixed up Ruby based on review --- app/assets/javascripts/breadcrumb.js | 10 +++++++--- app/assets/stylesheets/new_nav.scss | 2 +- app/helpers/breadcrumbs_helper.rb | 6 ++---- app/helpers/groups_helper.rb | 4 ++-- app/helpers/page_layout_helper.rb | 6 ++++-- app/helpers/projects_helper.rb | 4 ++-- app/helpers/wiki_helper.rb | 2 +- app/views/layouts/nav/_breadcrumbs.html.haml | 2 +- features/steps/explore/projects.rb | 4 ++-- features/steps/project/redirects.rb | 2 +- 10 files changed, 23 insertions(+), 19 deletions(-) diff --git a/app/assets/javascripts/breadcrumb.js b/app/assets/javascripts/breadcrumb.js index 7433fcbbad1..10fbcfe96cf 100644 --- a/app/assets/javascripts/breadcrumb.js +++ b/app/assets/javascripts/breadcrumb.js @@ -1,5 +1,7 @@ export const addTooltipToEl = (el) => { - if (el.scrollWidth > el.offsetWidth) { + const textEl = el.querySelector('.js-breadcrumb-item-text'); + + if (textEl && textEl.scrollWidth > textEl.offsetWidth) { el.setAttribute('title', el.textContent); el.setAttribute('data-container', 'body'); el.classList.add('has-tooltip'); @@ -7,10 +9,12 @@ export const addTooltipToEl = (el) => { }; export default () => { - const breadcrumbs = document.querySelector('.breadcrumbs-list'); + const breadcrumbs = document.querySelector('.js-breadcrumbs-list'); if (breadcrumbs) { - const topLevelLinks = breadcrumbs.querySelectorAll('.breadcrumbs-list > li > a'); + const topLevelLinks = [...breadcrumbs.children].filter(el => !el.classList.contains('dropdown')) + .map(el => el.querySelector('a')) + .filter(el => el); const $expander = $('.js-breadcrumbs-collapsed-expander'); topLevelLinks.forEach(el => addTooltipToEl(el)); diff --git a/app/assets/stylesheets/new_nav.scss b/app/assets/stylesheets/new_nav.scss index 1a0296e6f9c..3ea67c76503 100644 --- a/app/assets/stylesheets/new_nav.scss +++ b/app/assets/stylesheets/new_nav.scss @@ -365,7 +365,7 @@ header.navbar-gitlab-new { } } -.breadcrumb-item-project-name { +.breadcrumb-item-text { @include str-truncated(128px); } diff --git a/app/helpers/breadcrumbs_helper.rb b/app/helpers/breadcrumbs_helper.rb index d4c3e1b3929..ee1b7ed083e 100644 --- a/app/helpers/breadcrumbs_helper.rb +++ b/app/helpers/breadcrumbs_helper.rb @@ -25,15 +25,13 @@ module BreadcrumbsHelper def breadcrumb_list_item(link) content_tag "li" do - output = link - output << icon("angle-right", class: "breadcrumbs-list-angle") - output + link + icon("angle-right", class: "breadcrumbs-list-angle") end end def add_to_breadcrumb_dropdown(link, location: :before) @breadcrumb_dropdown_links ||= {} - @breadcrumb_dropdown_links[location] = [] unless @breadcrumb_dropdown_links[location] + @breadcrumb_dropdown_links[location] ||= [] @breadcrumb_dropdown_links[location] << link end end diff --git a/app/helpers/groups_helper.rb b/app/helpers/groups_helper.rb index 05640d3cf3f..d330bd644e5 100644 --- a/app/helpers/groups_helper.rb +++ b/app/helpers/groups_helper.rb @@ -36,7 +36,7 @@ module GroupsHelper else group_title_link(group) end - full_title += ' · '.html_safe + link_to(simple_sanitize(name), url, class: 'group-path') if name + full_title += ' · '.html_safe + link_to(simple_sanitize(name), url, class: 'group-path breadcrumb-item-text js-breadcrumb-item-text') if name if show_new_nav? full_title.html_safe @@ -84,7 +84,7 @@ module GroupsHelper private def group_title_link(group, hidable: false, show_avatar: false) - link_to(group_path(group), class: "group-path #{'hidable' if hidable}") do + link_to(group_path(group), class: "group-path breadcrumb-item-text js-breadcrumb-item-text #{'hidable' if hidable}") do output = if (show_new_nav? && group.try(:avatar_url) || (show_new_nav? && show_avatar)) && !Rails.env.test? image_tag(group_icon(group), class: "avatar-tile", width: 15, height: 15) diff --git a/app/helpers/page_layout_helper.rb b/app/helpers/page_layout_helper.rb index e2ed8f7cdff..d2b2bd4b451 100644 --- a/app/helpers/page_layout_helper.rb +++ b/app/helpers/page_layout_helper.rb @@ -80,10 +80,12 @@ module PageLayoutHelper @header_title = title @header_title_url = title_url else + return @header_title unless @header_title_url + if show_new_nav? - @header_title_url ? breadcrumb_list_item(link_to(@header_title, @header_title_url)) : @header_title + breadcrumb_list_item(link_to(@header_title, @header_title_url)) else - @header_title_url ? link_to(@header_title, @header_title_url) : @header_title + link_to(@header_title, @header_title_url) end end end diff --git a/app/helpers/projects_helper.rb b/app/helpers/projects_helper.rb index 070bc163e75..9b6acedb40f 100644 --- a/app/helpers/projects_helper.rb +++ b/app/helpers/projects_helper.rb @@ -68,12 +68,12 @@ module ProjectsHelper "" end - output << content_tag("span", simple_sanitize(project.name), class: "breadcrumb-item-project-name") + output << content_tag("span", simple_sanitize(project.name), class: "breadcrumb-item-text js-breadcrumb-item-text") output.html_safe end if show_new_nav? - namespace_link = breadcrumb_list_item(namespace_link) if project.group.nil? + namespace_link = breadcrumb_list_item(namespace_link) unless project.group project_link = breadcrumb_list_item project_link end diff --git a/app/helpers/wiki_helper.rb b/app/helpers/wiki_helper.rb index 3d26c92e58a..815fab9e061 100644 --- a/app/helpers/wiki_helper.rb +++ b/app/helpers/wiki_helper.rb @@ -17,7 +17,7 @@ module WikiHelper current_slug = "" page_slug_split .map do |dir_or_page| - current_slug = "#{current_slug}/#{dir_or_page}" + current_slug = "#{current_slug}#{dir_or_page}/" add_to_breadcrumb_dropdown link_to(WikiPage.unhyphenize(dir_or_page).capitalize, project_wiki_path(@project, current_slug)), location: :after end end diff --git a/app/views/layouts/nav/_breadcrumbs.html.haml b/app/views/layouts/nav/_breadcrumbs.html.haml index cc2cfff85ba..3538646359e 100644 --- a/app/views/layouts/nav/_breadcrumbs.html.haml +++ b/app/views/layouts/nav/_breadcrumbs.html.haml @@ -8,7 +8,7 @@ %span.sr-only Open sidebar = icon ('bars') .breadcrumbs-links.js-title-container - %ul.list-unstyled.breadcrumbs-list + %ul.list-unstyled.breadcrumbs-list.js-breadcrumbs-list - unless hide_top_links = header_title - if @breadcrumbs_extra_links diff --git a/features/steps/explore/projects.rb b/features/steps/explore/projects.rb index 90d0ff47ce7..962e39dde9a 100644 --- a/features/steps/explore/projects.rb +++ b/features/steps/explore/projects.rb @@ -36,13 +36,13 @@ class Spinach::Features::ExploreProjects < Spinach::FeatureSteps end step 'I should see project "Community" home page' do - page.within '.breadcrumbs .breadcrumb-item-project-name' do + page.within '.breadcrumbs .breadcrumb-item-text' do expect(page).to have_content 'Community' end end step 'I should see project "Internal" home page' do - page.within '.breadcrumbs .breadcrumb-item-project-name' do + page.within '.breadcrumbs .breadcrumb-item-text' do expect(page).to have_content 'Internal' end end diff --git a/features/steps/project/redirects.rb b/features/steps/project/redirects.rb index ff9331b93fa..9ce86ca45d0 100644 --- a/features/steps/project/redirects.rb +++ b/features/steps/project/redirects.rb @@ -18,7 +18,7 @@ class Spinach::Features::ProjectRedirects < Spinach::FeatureSteps step 'I should see project "Community" home page' do Gitlab.config.gitlab.should_receive(:host).and_return("www.example.com") - page.within '.breadcrumbs .breadcrumb-item-project-name' do + page.within '.breadcrumbs .breadcrumb-item-text' do expect(page).to have_content 'Community' end end From 80a013ef4f1c6dc982023dc39c27063ab1d3e121 Mon Sep 17 00:00:00 2001 From: Phil Hughes Date: Wed, 6 Sep 2017 12:19:03 +0100 Subject: [PATCH 18/18] removed show_new_nav? references --- app/helpers/groups_helper.rb | 28 +++++---------------- app/helpers/issuables_helper.rb | 15 +---------- app/helpers/page_layout_helper.rb | 6 +---- app/helpers/projects_helper.rb | 10 +++----- app/views/projects/wikis/show.html.haml | 8 +----- app/views/shared/snippets/_header.html.haml | 8 +----- 6 files changed, 14 insertions(+), 61 deletions(-) diff --git a/app/helpers/groups_helper.rb b/app/helpers/groups_helper.rb index 9e7c25492b7..eab1feb8a1f 100644 --- a/app/helpers/groups_helper.rb +++ b/app/helpers/groups_helper.rb @@ -16,35 +16,19 @@ module GroupsHelper full_title = '' group.ancestors.reverse.each_with_index do |parent, index| - if show_new_nav? && index > 0 + if index > 0 add_to_breadcrumb_dropdown(group_title_link(parent, hidable: false, show_avatar: true), location: :before) else - full_title += if show_new_nav? - breadcrumb_list_item group_title_link(parent, hidable: false) - else - "#{group_title_link(parent, hidable: true)} / ".html_safe - end + full_title += breadcrumb_list_item group_title_link(parent, hidable: false) end end - if show_new_nav? - full_title += render "layouts/nav/breadcrumbs/collapsed_dropdown", location: :before, title: _("Show parent subgroups") - end + full_title += render "layouts/nav/breadcrumbs/collapsed_dropdown", location: :before, title: _("Show parent subgroups") - full_title += if show_new_nav? - breadcrumb_list_item group_title_link(group) - else - group_title_link(group) - end + full_title += breadcrumb_list_item group_title_link(group) full_title += ' · '.html_safe + link_to(simple_sanitize(name), url, class: 'group-path breadcrumb-item-text js-breadcrumb-item-text') if name - if show_new_nav? - full_title.html_safe - else - content_tag :span, class: 'group-title' do - full_title.html_safe - end - end + full_title.html_safe end def projects_lfs_status(group) @@ -86,7 +70,7 @@ module GroupsHelper def group_title_link(group, hidable: false, show_avatar: false) link_to(group_path(group), class: "group-path breadcrumb-item-text js-breadcrumb-item-text #{'hidable' if hidable}") do output = - if (group.try(:avatar_url) || show_avatar)) && !Rails.env.test? + if (group.try(:avatar_url) || show_avatar) && !Rails.env.test? image_tag(group_icon(group), class: "avatar-tile", width: 15, height: 15) else "" diff --git a/app/helpers/issuables_helper.rb b/app/helpers/issuables_helper.rb index e39d62ecf63..2cf2e7dddb0 100644 --- a/app/helpers/issuables_helper.rb +++ b/app/helpers/issuables_helper.rb @@ -127,20 +127,7 @@ module IssuablesHelper def issuable_meta(issuable, project, text) output = "" - - unless show_new_nav? - output << content_tag(:strong, class: "identifier") do - concat("#{text} ") - concat(to_url_reference(issuable)) - end - end - - opened_text = if show_new_nav? - "Opened" - else - " opened" - end - output << "#{opened_text} #{time_ago_with_tooltip(issuable.created_at)} by ".html_safe + output << "Opened #{time_ago_with_tooltip(issuable.created_at)} by ".html_safe output << content_tag(:strong) do author_output = link_to_member(project, issuable.author, size: 24, mobile_classes: "hidden-xs", tooltip: true) author_output << link_to_member(project, issuable.author, size: 24, by_username: true, avatar: false, mobile_classes: "hidden-sm hidden-md hidden-lg") diff --git a/app/helpers/page_layout_helper.rb b/app/helpers/page_layout_helper.rb index 38a66ae1de9..5946c475835 100644 --- a/app/helpers/page_layout_helper.rb +++ b/app/helpers/page_layout_helper.rb @@ -82,11 +82,7 @@ module PageLayoutHelper else return @header_title unless @header_title_url - if show_new_nav? - breadcrumb_list_item(link_to(@header_title, @header_title_url)) - else - link_to(@header_title, @header_title_url) - end + breadcrumb_list_item(link_to(@header_title, @header_title_url)) end end diff --git a/app/helpers/projects_helper.rb b/app/helpers/projects_helper.rb index b07cb7a775a..86665ea2aec 100644 --- a/app/helpers/projects_helper.rb +++ b/app/helpers/projects_helper.rb @@ -60,7 +60,7 @@ module ProjectsHelper link_to(simple_sanitize(owner.name), user_path(owner)) end - project_link = link_to project_path(project), { class: ("project-item-select-holder" unless show_new_nav?) } do + project_link = link_to project_path(project) do output = if project.avatar_url && !Rails.env.test? project_icon(project, alt: project.name, class: 'avatar-tile', width: 15, height: 15) @@ -72,12 +72,10 @@ module ProjectsHelper output.html_safe end - if show_new_nav? - namespace_link = breadcrumb_list_item(namespace_link) unless project.group - project_link = breadcrumb_list_item project_link - end + namespace_link = breadcrumb_list_item(namespace_link) unless project.group + project_link = breadcrumb_list_item project_link - "#{namespace_link} #{('/' unless show_new_nav?)} #{project_link}".html_safe + "#{namespace_link} #{project_link}".html_safe end def remove_project_message(project) diff --git a/app/views/projects/wikis/show.html.haml b/app/views/projects/wikis/show.html.haml index 5f93168bdde..b066a812ec8 100644 --- a/app/views/projects/wikis/show.html.haml +++ b/app/views/projects/wikis/show.html.haml @@ -2,18 +2,12 @@ - breadcrumb_title @page.title.capitalize - wiki_breadcrumb_dropdown_links(@page.slug) - page_title @page.title.capitalize, "Wiki" - -- if show_new_nav? - - add_to_breadcrumbs "Wiki", get_project_wiki_path(@project) +- add_to_breadcrumbs "Wiki", get_project_wiki_path(@project) .wiki-page-header.has-sidebar-toggle %button.btn.btn-default.sidebar-toggle.js-sidebar-wiki-toggle{ role: "button", type: "button" } = icon('angle-double-left') - - unless show_new_nav? - .wiki-breadcrumb - %span= breadcrumb(@page.slug) - .nav-text %h2.wiki-page-title= @page.title.capitalize %span.wiki-last-edit-by diff --git a/app/views/shared/snippets/_header.html.haml b/app/views/shared/snippets/_header.html.haml index 03bc0b25055..119d189f21d 100644 --- a/app/views/shared/snippets/_header.html.haml +++ b/app/views/shared/snippets/_header.html.haml @@ -3,14 +3,8 @@ %span.sr-only = visibility_level_label(@snippet.visibility_level) = visibility_level_icon(@snippet.visibility_level, fw: false) - - unless show_new_nav? - %strong.item-title - Snippet #{@snippet.to_reference} %span.creator - - if show_new_nav? - Authored - - else - authored + Authored = time_ago_with_tooltip(@snippet.created_at, placement: 'bottom', html_class: 'snippet_updated_ago') by #{link_to_member(@project, @snippet.author, size: 24, author_class: "author item-title", avatar_class: "hidden-xs")}