added collapsible sub-groups & wiki pages

[ci skip]

app/assets/javascripts/breadcrumb.js

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

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 || '/';
 

app/assets/stylesheets/framework/dropdowns.scss

@@ -782,3 +782,7 @@
     margin-top: 2px;
   }
 }
+
+.breadcrumbs-list {
+  @include new-style-dropdown;
+}

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,12 +344,12 @@ header.navbar-gitlab-new {
     &:not(:first-child) {
       margin-left: 10px;
     }
-  }
 
-  a {
+    > a {
       @include str-truncated(128px);
       color: currentColor;
     }
+  }
 }
 
 .breadcrumbs-list-angle {

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

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

app/helpers/groups_helper.rb

@@ -16,12 +16,20 @@ module GroupsHelper
     full_title = ''
 
     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)
+      else
         full_title += if show_new_nav?
-                      breadcrumb_list_item group_title_link(parent, hidable: index > 0)
+                        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?
                     breadcrumb_list_item group_title_link(group)
@@ -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
           ""

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

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

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

app/views/layouts/nav/breadcrumbs/_collapsed_dropdown.html.haml

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

app/views/projects/wikis/show.html.haml

 - @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')
 
+  - unless show_new_nav?
     .wiki-breadcrumb
       %span= breadcrumb(@page.slug)