diff --git a/app/assets/javascripts/boards/components/issue_card_inner.js b/app/assets/javascripts/boards/components/issue_card_inner.js index daef01bc93d..d3de1830895 100644 --- a/app/assets/javascripts/boards/components/issue_card_inner.js +++ b/app/assets/javascripts/boards/components/issue_card_inner.js @@ -97,9 +97,8 @@ gl.issueBoards.IssueCardInner = Vue.extend({ return `Avatar for ${assignee.name}`; }, showLabel(label) { - if (!this.list) return true; - - return !this.list.label || label.id !== this.list.label.id; + if (!this.list || !label) return true; + return true; }, filterByLabel(label, e) { if (!this.updateFilters) return; diff --git a/app/assets/stylesheets/pages/boards.scss b/app/assets/stylesheets/pages/boards.scss index 6039cda96d8..e5b467a2691 100644 --- a/app/assets/stylesheets/pages/boards.scss +++ b/app/assets/stylesheets/pages/boards.scss @@ -165,6 +165,7 @@ .board-title { padding-top: ($gl-padding - 3px); + padding-bottom: $gl-padding; } } } @@ -178,6 +179,7 @@ position: relative; margin: 0; padding: $gl-padding; + padding-bottom: ($gl-padding + 3px); font-size: 1em; border-bottom: 1px solid $border-color; } diff --git a/app/views/projects/boards/components/_board.html.haml b/app/views/projects/boards/components/_board.html.haml index 539ee087b14..64f5f6d7ba0 100644 --- a/app/views/projects/boards/components/_board.html.haml +++ b/app/views/projects/boards/components/_board.html.haml @@ -6,8 +6,16 @@ %i.fa.fa-fw.board-title-expandable-toggle{ "v-if": "list.isExpandable", ":class": "{ \"fa-caret-down\": list.isExpanded, \"fa-caret-right\": !list.isExpanded && list.position === -1, \"fa-caret-left\": !list.isExpanded && list.position !== -1 }", "aria-hidden": "true" } - %span.has-tooltip{ ":title" => '(list.label ? list.label.description : "")', - data: { container: "body", placement: "bottom" } } + + %span.has-tooltip{ "v-if": "list.type !== \"label\"", + ":title" => '(list.label ? list.label.description : "")' } + {{ list.title }} + + %span.has-tooltip{ "v-if": "list.type === \"label\"", + ":title" => '(list.label ? list.label.description : "")', + data: { container: "body", placement: "bottom" }, + class: "label color-label title", + ":style" => "{ backgroundColor: (list.label && list.label.color ? list.label.color : null), color: (list.label && list.label.color ? list.label.text_color : \"#2e2e2e\") }" } {{ list.title }} .issue-count-badge.pull-right.clearfix{ "v-if" => 'list.type !== "blank"' } %span.issue-count-badge-count.pull-left{ ":class" => '{ "has-btn": list.type !== "closed" && !disabled }' } diff --git a/spec/features/boards/boards_spec.rb b/spec/features/boards/boards_spec.rb index c51b81c1cff..ce458431c55 100644 --- a/spec/features/boards/boards_spec.rb +++ b/spec/features/boards/boards_spec.rb @@ -233,7 +233,7 @@ describe 'Issue Boards', js: true do wait_for_board_cards(4, 1) expect(find('.board:nth-child(3)')).to have_content(issue6.title) - expect(find('.board:nth-child(3)').all('.card').last).not_to have_content(development.title) + expect(find('.board:nth-child(3)').all('.card').last).to have_content(development.title) end it 'issue moves between lists' do @@ -244,7 +244,7 @@ describe 'Issue Boards', js: true do wait_for_board_cards(4, 1) expect(find('.board:nth-child(2)')).to have_content(issue7.title) - expect(find('.board:nth-child(2)').all('.card').first).not_to have_content(planning.title) + expect(find('.board:nth-child(2)').all('.card').first).to have_content(planning.title) end it 'issue moves from closed' do diff --git a/spec/features/boards/sidebar_spec.rb b/spec/features/boards/sidebar_spec.rb index 373cd92793e..8d3d4ff8773 100644 --- a/spec/features/boards/sidebar_spec.rb +++ b/spec/features/boards/sidebar_spec.rb @@ -257,7 +257,7 @@ describe 'Issue Boards', js: true do end end - expect(card).to have_selector('.label', count: 2) + expect(card).to have_selector('.label', count: 3) expect(card).to have_content(bug.title) end @@ -283,7 +283,7 @@ describe 'Issue Boards', js: true do end end - expect(card).to have_selector('.label', count: 3) + expect(card).to have_selector('.label', count: 4) expect(card).to have_content(bug.title) expect(card).to have_content(regression.title) end @@ -308,7 +308,7 @@ describe 'Issue Boards', js: true do end end - expect(card).not_to have_selector('.label') + expect(card).to have_selector('.label', count: 1) expect(card).not_to have_content(stretch.title) end end diff --git a/spec/javascripts/boards/issue_card_spec.js b/spec/javascripts/boards/issue_card_spec.js index bd9b4fbfdd3..69cfcbbce5a 100644 --- a/spec/javascripts/boards/issue_card_spec.js +++ b/spec/javascripts/boards/issue_card_spec.js @@ -238,12 +238,6 @@ describe('Issue card component', () => { }); describe('labels', () => { - it('does not render any', () => { - expect( - component.$el.querySelector('.label'), - ).toBeNull(); - }); - describe('exists', () => { beforeEach((done) => { component.issue.addLabel(label1); @@ -251,16 +245,21 @@ describe('Issue card component', () => { Vue.nextTick(() => done()); }); - it('does not render list label', () => { + it('renders list label', () => { expect( component.$el.querySelectorAll('.label').length, - ).toBe(1); + ).toBe(2); }); it('renders label', () => { + const nodes = []; + component.$el.querySelectorAll('.label').forEach((label) => { + nodes.push(label.title); + }); + expect( - component.$el.querySelector('.label').textContent, - ).toContain(label1.title); + nodes.includes(label1.description), + ).toBe(true); }); it('sets label description as title', () => { @@ -270,9 +269,14 @@ describe('Issue card component', () => { }); it('sets background color of button', () => { + const nodes = []; + component.$el.querySelectorAll('.label').forEach((label) => { + nodes.push(label.style.backgroundColor); + }); + expect( - component.$el.querySelector('.label').style.backgroundColor, - ).toContain(label1.color); + nodes.includes(label1.color), + ).toBe(true); }); }); });