Commit 931274ba authored by Phil Hughes's avatar Phil Hughes

Added tooltip to label value in collapsed sidebar

Closes #19398
parent e5840a4d
......@@ -300,6 +300,8 @@ v 8.10.0
- Reduce size of HTML used by diff comment forms
- Protected branches have a "Developers can Merge" setting. !4892 (original implementation by Mathias Vestergaard)
- Fix user creation with stronger minimum password requirements. !4054 (nathan-pmt)
- Added tooltip listing label names to the labels value in the collapsed issuable sidebar
- Fix user creation with stronger minimum password requirements !4054 (nathan-pmt)
- Only show New Snippet button to users that can create snippets.
- PipelinesFinder uses git cache data
- Track a user who created a pipeline
......
......@@ -4,7 +4,7 @@
var _this;
_this = this;
$('.js-label-select').each(function(i, dropdown) {
var $block, $colorPreview, $dropdown, $form, $loading, $selectbox, $sidebarCollapsedValue, $value, abilityName, defaultLabel, enableLabelCreateButton, issueURLSplit, issueUpdateURL, labelHTMLTemplate, labelNoneHTMLTemplate, labelUrl, projectId, saveLabelData, selectedLabel, showAny, showNo;
var $block, $colorPreview, $dropdown, $form, $loading, $selectbox, $sidebarCollapsedValue, $value, abilityName, defaultLabel, enableLabelCreateButton, issueURLSplit, issueUpdateURL, labelHTMLTemplate, labelNoneHTMLTemplate, labelUrl, projectId, saveLabelData, selectedLabel, showAny, showNo, $sidebarLabelTooltip;
$dropdown = $(dropdown);
projectId = $dropdown.data('project-id');
labelUrl = $dropdown.data('labels');
......@@ -21,6 +21,7 @@
$block = $selectbox.closest('.block');
$form = $dropdown.closest('form');
$sidebarCollapsedValue = $block.find('.sidebar-collapsed-icon span');
$sidebarLabelTooltip = $block.find('.js-sidebar-labels-tooltip');
$value = $block.find('.value');
$loading = $block.find('.block-loading').fadeOut();
if (issueUpdateURL != null) {
......@@ -52,7 +53,7 @@
dataType: 'JSON',
data: data
}).done(function(data) {
var labelCount, template;
var labelCount, template, labelTooltipTitle;
$loading.fadeOut();
$dropdown.trigger('loaded.gl.dropdown');
$selectbox.hide();
......@@ -66,6 +67,31 @@
}
$value.removeAttr('style').html(template);
$sidebarCollapsedValue.text(labelCount);
if (data.labels.length) {
labelTooltipTitle = _.chain(data.labels)
.map(function (label, i) {
if (i < 5) {
return label.title;
}
})
.compact()
.values();
if (data.labels.length > 5) {
labelTooltipTitle.push('and ' + (data.labels.length - 5) + ' more');
}
labelTooltipTitle = labelTooltipTitle.join(', ');
} else {
labelTooltipTitle = '';
$sidebarLabelTooltip.tooltip('destroy');
}
$sidebarLabelTooltip
.attr('title', labelTooltipTitle)
.tooltip('fixTitle');
$('.has-tooltip', $value).tooltip({
container: 'body'
});
......
......@@ -72,6 +72,20 @@ module IssuablesHelper
end
end
def issuable_labels_tooltip(labels)
max_labels = 5
label_size = labels.size
label_names = labels.each_with_index.map do |label, i|
label.name unless i >= max_labels
end
if label_size > max_labels
label_names << "and #{label_size - max_labels} more"
end
label_names.compact.join(', ')
end
private
def sidebar_gutter_collapsed?
......
......@@ -109,7 +109,7 @@
- if issuable.project.labels.any?
.block.labels
.sidebar-collapsed-icon
.sidebar-collapsed-icon.js-sidebar-labels-tooltip{ title: issuable_labels_tooltip(issuable.labels_array), data: { placement: "left", container: "body" } }
= icon('tags')
%span
= issuable.labels_array.size
......
......@@ -73,6 +73,44 @@ feature 'Issue Sidebar', feature: true do
end
end
context 'update labels', js: true do
before do
project.team << [user, :developer]
visit_issue(project, issue)
end
context 'more than 5' do
before do
create(:label, project: project, title: 'a')
create(:label, project: project, title: 'b')
create(:label, project: project, title: 'c')
create(:label, project: project, title: 'd')
create(:label, project: project, title: 'e')
create(:label, project: project, title: 'f')
end
it 'should update the tooltip for collapsed sidebar' do
page.within('.block.labels') do
find('.edit-link').click
page.within('.dropdown-menu-labels') do
click_link 'a'
click_link 'b'
click_link 'c'
click_link 'd'
click_link 'e'
click_link 'f'
end
find('.edit-link').click
sleep 1
expect(find('.js-sidebar-labels-tooltip', visible: false)['data-original-title']).to eq('a, b, c, d, e, and 1 more')
end
end
end
end
def visit_issue(project, issue)
visit namespace_project_issue_path(project.namespace, project, issue)
end
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment