Toggle project name if too long
This commit is contained in:
parent
cc64eda987
commit
db59e735ae
|
@ -37,6 +37,7 @@ import PrometheusGraph from './monitoring/prometheus_graph'; // TODO: Maybe Make
|
||||||
import Issue from './issue';
|
import Issue from './issue';
|
||||||
|
|
||||||
import BindInOut from './behaviors/bind_in_out';
|
import BindInOut from './behaviors/bind_in_out';
|
||||||
|
import GroupName from './group_name';
|
||||||
import GroupsList from './groups_list';
|
import GroupsList from './groups_list';
|
||||||
import ProjectsList from './projects_list';
|
import ProjectsList from './projects_list';
|
||||||
import MiniPipelineGraph from './mini_pipeline_graph_dropdown';
|
import MiniPipelineGraph from './mini_pipeline_graph_dropdown';
|
||||||
|
@ -342,6 +343,9 @@ const UserCallout = require('./user_callout');
|
||||||
shortcut_handler = new ShortcutsDashboardNavigation();
|
shortcut_handler = new ShortcutsDashboardNavigation();
|
||||||
new UserCallout();
|
new UserCallout();
|
||||||
break;
|
break;
|
||||||
|
case 'groups':
|
||||||
|
new GroupName();
|
||||||
|
break;
|
||||||
case 'profiles':
|
case 'profiles':
|
||||||
new NotificationsForm();
|
new NotificationsForm();
|
||||||
new NotificationsDropdown();
|
new NotificationsDropdown();
|
||||||
|
@ -349,6 +353,7 @@ const UserCallout = require('./user_callout');
|
||||||
case 'projects':
|
case 'projects':
|
||||||
new Project();
|
new Project();
|
||||||
new ProjectAvatar();
|
new ProjectAvatar();
|
||||||
|
new GroupName();
|
||||||
switch (path[1]) {
|
switch (path[1]) {
|
||||||
case 'compare':
|
case 'compare':
|
||||||
new CompareAutocomplete();
|
new CompareAutocomplete();
|
||||||
|
|
|
@ -0,0 +1,40 @@
|
||||||
|
const GROUP_LIMIT = 2;
|
||||||
|
|
||||||
|
export default class GroupName {
|
||||||
|
constructor() {
|
||||||
|
this.titleContainer = document.querySelector('.title');
|
||||||
|
this.groups = document.querySelectorAll('.group-path');
|
||||||
|
this.groupTitle = document.querySelector('.group-title');
|
||||||
|
this.toggle = null;
|
||||||
|
this.isHidden = false;
|
||||||
|
this.init();
|
||||||
|
}
|
||||||
|
|
||||||
|
init() {
|
||||||
|
if (this.groups.length > GROUP_LIMIT) {
|
||||||
|
this.groups[this.groups.length - 1].classList.remove('hidable');
|
||||||
|
this.addToggle();
|
||||||
|
}
|
||||||
|
this.render();
|
||||||
|
}
|
||||||
|
|
||||||
|
addToggle() {
|
||||||
|
const header = document.querySelector('.header-content');
|
||||||
|
this.toggle = document.createElement('button');
|
||||||
|
this.toggle.className = 'text-expander group-name-toggle';
|
||||||
|
this.toggle.setAttribute('aria-label', 'Toggle full path');
|
||||||
|
this.toggle.innerHTML = '...';
|
||||||
|
this.toggle.addEventListener('click', this.toggleGroups.bind(this));
|
||||||
|
header.insertBefore(this.toggle, this.titleContainer);
|
||||||
|
this.toggleGroups();
|
||||||
|
}
|
||||||
|
|
||||||
|
toggleGroups() {
|
||||||
|
this.isHidden = !this.isHidden;
|
||||||
|
this.groupTitle.classList.toggle('is-hidden');
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
this.titleContainer.classList.remove('initializing');
|
||||||
|
}
|
||||||
|
}
|
|
@ -164,11 +164,25 @@ header {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.group-name-toggle {
|
||||||
|
margin: 0 5px;
|
||||||
|
vertical-align: sub;
|
||||||
|
}
|
||||||
|
|
||||||
|
.group-title {
|
||||||
|
&.is-hidden {
|
||||||
|
.hidable:not(:last-of-type) {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
position: relative;
|
position: relative;
|
||||||
padding-right: 20px;
|
padding-right: 20px;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
|
max-width: 385px;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
line-height: $header-height;
|
line-height: $header-height;
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
|
@ -178,6 +192,14 @@ header {
|
||||||
vertical-align: top;
|
vertical-align: top;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
|
|
||||||
|
&.initializing {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
|
||||||
|
max-width: 300px;
|
||||||
|
}
|
||||||
|
|
||||||
@media (max-width: $screen-xs-max) {
|
@media (max-width: $screen-xs-max) {
|
||||||
max-width: 190px;
|
max-width: 190px;
|
||||||
}
|
}
|
||||||
|
|
|
@ -12,17 +12,18 @@ module GroupsHelper
|
||||||
end
|
end
|
||||||
|
|
||||||
def group_title(group, name = nil, url = nil)
|
def group_title(group, name = nil, url = nil)
|
||||||
|
@has_group_title = true
|
||||||
full_title = ''
|
full_title = ''
|
||||||
|
|
||||||
group.ancestors.each do |parent|
|
group.ancestors.each do |parent|
|
||||||
full_title += link_to(simple_sanitize(parent.name), group_path(parent))
|
full_title += link_to(simple_sanitize(parent.name), group_path(parent), class: 'group-path hidable')
|
||||||
full_title += ' / '.html_safe
|
full_title += '<span class="hidable"> / </span>'.html_safe
|
||||||
end
|
end
|
||||||
|
|
||||||
full_title += link_to(simple_sanitize(group.name), group_path(group))
|
full_title += link_to(simple_sanitize(group.name), group_path(group), class: 'group-path')
|
||||||
full_title += ' · '.html_safe + link_to(simple_sanitize(name), url) if name
|
full_title += ' · '.html_safe + link_to(simple_sanitize(name), url, class: 'group-path') if name
|
||||||
|
|
||||||
content_tag :span do
|
content_tag :span, class: 'group-title' do
|
||||||
full_title.html_safe
|
full_title.html_safe
|
||||||
end
|
end
|
||||||
end
|
end
|
||||||
|
|
|
@ -67,7 +67,7 @@
|
||||||
= link_to root_path, class: 'home', title: 'Dashboard', id: 'logo' do
|
= link_to root_path, class: 'home', title: 'Dashboard', id: 'logo' do
|
||||||
= brand_header_logo
|
= brand_header_logo
|
||||||
|
|
||||||
%h1.title= title
|
%h1.title{ class: ('initializing' if @has_group_title) }= title
|
||||||
|
|
||||||
= yield :header_content
|
= yield :header_content
|
||||||
|
|
||||||
|
|
|
@ -0,0 +1,4 @@
|
||||||
|
---
|
||||||
|
title: Use toggle button to expand / collapse mulit-nested groups
|
||||||
|
merge_request: 9501
|
||||||
|
author:
|
|
@ -0,0 +1,44 @@
|
||||||
|
require 'spec_helper'
|
||||||
|
|
||||||
|
feature 'Group name toggle', js: true do
|
||||||
|
let(:group) { create(:group) }
|
||||||
|
let(:nested_group_1) { create(:group, parent: group) }
|
||||||
|
let(:nested_group_2) { create(:group, parent: nested_group_1) }
|
||||||
|
let(:nested_group_3) { create(:group, parent: nested_group_2) }
|
||||||
|
|
||||||
|
before do
|
||||||
|
login_as :user
|
||||||
|
end
|
||||||
|
|
||||||
|
it 'is not present for less than 3 groups' do
|
||||||
|
visit group_path(group)
|
||||||
|
expect(page).not_to have_css('.group-name-toggle')
|
||||||
|
|
||||||
|
visit group_path(nested_group_1)
|
||||||
|
expect(page).not_to have_css('.group-name-toggle')
|
||||||
|
end
|
||||||
|
|
||||||
|
it 'is present for nested group of 3 or more in the namespace' do
|
||||||
|
visit group_path(nested_group_2)
|
||||||
|
expect(page).to have_css('.group-name-toggle')
|
||||||
|
|
||||||
|
visit group_path(nested_group_3)
|
||||||
|
expect(page).to have_css('.group-name-toggle')
|
||||||
|
end
|
||||||
|
|
||||||
|
context 'for group with at least 3 groups' do
|
||||||
|
before do
|
||||||
|
visit group_path(nested_group_2)
|
||||||
|
end
|
||||||
|
|
||||||
|
it 'should show the full group namespace when toggled' do
|
||||||
|
expect(page).not_to have_content(group.name)
|
||||||
|
expect(page).to have_css('.group-path.hidable', visible: false)
|
||||||
|
|
||||||
|
click_button '...'
|
||||||
|
|
||||||
|
expect(page).to have_content(group.name)
|
||||||
|
expect(page).to have_css('.group-path.hidable', visible: true)
|
||||||
|
end
|
||||||
|
end
|
||||||
|
end
|
Loading…
Reference in New Issue