diff options
author | Phil Hughes <me@iamphill.com> | 2017-08-16 15:13:34 +0300 |
---|---|---|
committer | Phil Hughes <me@iamphill.com> | 2017-08-18 13:07:05 +0300 |
commit | a10cc2202dffcf8b4a7bc7db22757ac83bf95eb4 (patch) | |
tree | 23df31ffcbc60fba465286c1dffa7dff23e03933 /app | |
parent | 85b272b22365a7e4588d4897ad9ce78ea180f124 (diff) |
added collapsible sub-groups & wiki pages
[ci skip]
Diffstat (limited to 'app')
-rw-r--r-- | app/assets/javascripts/breadcrumb.js | 20 | ||||
-rw-r--r-- | app/assets/javascripts/main.js | 3 | ||||
-rw-r--r-- | app/assets/stylesheets/framework/dropdowns.scss | 4 | ||||
-rw-r--r-- | app/assets/stylesheets/new_nav.scss | 20 | ||||
-rw-r--r-- | app/assets/stylesheets/pages/commits.scss | 2 | ||||
-rw-r--r-- | app/helpers/breadcrumbs_helper.rb | 6 | ||||
-rw-r--r-- | app/helpers/groups_helper.rb | 20 | ||||
-rw-r--r-- | app/helpers/projects_helper.rb | 2 | ||||
-rw-r--r-- | app/helpers/wiki_helper.rb | 11 | ||||
-rw-r--r-- | app/views/layouts/nav/_breadcrumbs.html.haml | 11 | ||||
-rw-r--r-- | app/views/layouts/nav/breadcrumbs/_collapsed_dropdown.html.haml | 11 | ||||
-rw-r--r-- | app/views/projects/wikis/show.html.haml | 11 |
12 files changed, 90 insertions, 31 deletions
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 |