diff options
author | Filipa Lacerda <filipa@gitlab.com> | 2017-06-14 11:42:07 +0300 |
---|---|---|
committer | Filipa Lacerda <filipa@gitlab.com> | 2017-06-14 11:42:07 +0300 |
commit | 14d528f65321d86f212c842e2e3740f28ca3483a (patch) | |
tree | e82fa510c20e57b465365de5bac7ee513ae3bf6c | |
parent | f469a4686880d8bc9c1b46cf30f0dc57b6f2a534 (diff) | |
parent | d9f6cf98d7593e07a8d15ce082eb6c7cb4ef28ec (diff) |
Merge branch 'backport-related-issues-board-issue-count-badge-styles' into 'master'
Backport issue count badge style refactor for re-use from EE related issues
See merge request !12152
-rw-r--r-- | app/assets/stylesheets/pages/boards.scss | 28 | ||||
-rw-r--r-- | app/assets/stylesheets/pages/issues.scss | 2 | ||||
-rw-r--r-- | app/assets/stylesheets/pages/issues/issue_count_badge.scss | 29 | ||||
-rw-r--r-- | app/views/projects/boards/components/_board.html.haml | 6 | ||||
-rw-r--r-- | spec/features/boards/new_issue_spec.rb | 16 |
5 files changed, 45 insertions, 36 deletions
diff --git a/app/assets/stylesheets/pages/boards.scss b/app/assets/stylesheets/pages/boards.scss index 740e383dbb5..85109fec91a 100644 --- a/app/assets/stylesheets/pages/boards.scss +++ b/app/assets/stylesheets/pages/boards.scss @@ -1,3 +1,5 @@ +@import "./issues/issue_count_badge"; + [v-cloak] { display: none; } @@ -133,7 +135,7 @@ } .board-list-component, - .board-issue-count-holder { + .issue-count-badge { display: none; } } @@ -429,30 +431,6 @@ margin: 5px; } -.board-issue-count-holder { - margin-top: -3px; - - .btn { - line-height: 12px; - border-top-left-radius: 0; - border-bottom-left-radius: 0; - } -} - -.board-issue-count { - padding-right: 10px; - padding-left: 10px; - line-height: 21px; - border-radius: $border-radius-base; - border: 1px solid $border-color; - - &.has-btn { - border-top-right-radius: 0; - border-bottom-right-radius: 0; - border-width: 1px 0 1px 1px; - } -} - .page-with-layout-nav.page-with-sub-nav .issue-boards-sidebar { &.right-sidebar { top: 0; diff --git a/app/assets/stylesheets/pages/issues.scss b/app/assets/stylesheets/pages/issues.scss index f923a1104a9..8cdb3f34ae5 100644 --- a/app/assets/stylesheets/pages/issues.scss +++ b/app/assets/stylesheets/pages/issues.scss @@ -1,3 +1,5 @@ +@import "./issues/issue_count_badge"; + .issues-list { .issue { padding: 10px 0 10px $gl-padding; diff --git a/app/assets/stylesheets/pages/issues/issue_count_badge.scss b/app/assets/stylesheets/pages/issues/issue_count_badge.scss new file mode 100644 index 00000000000..ccb62bfed18 --- /dev/null +++ b/app/assets/stylesheets/pages/issues/issue_count_badge.scss @@ -0,0 +1,29 @@ +.issue-count-badge { + display: inline-flex; + align-items: stretch; + height: 24px; +} + +.issue-count-badge-count { + display: flex; + align-items: center; + padding-right: 10px; + padding-left: 10px; + border: 1px solid $border-color; + border-radius: $border-radius-base; + line-height: 1; + + &.has-btn { + border-right: 0; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } +} + +.issue-count-badge-add-button { + display: flex; + align-items: center; + border: 1px solid $border-color; + border-radius: 0 $border-radius-base $border-radius-base 0; + line-height: 1; +} diff --git a/app/views/projects/boards/components/_board.html.haml b/app/views/projects/boards/components/_board.html.haml index 55c4d51be14..539ee087b14 100644 --- a/app/views/projects/boards/components/_board.html.haml +++ b/app/views/projects/boards/components/_board.html.haml @@ -9,11 +9,11 @@ %span.has-tooltip{ ":title" => '(list.label ? list.label.description : "")', data: { container: "body", placement: "bottom" } } {{ list.title }} - .board-issue-count-holder.pull-right.clearfix{ "v-if" => 'list.type !== "blank"' } - %span.board-issue-count.pull-left{ ":class" => '{ "has-btn": list.type !== "closed" && !disabled }' } + .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 }' } {{ list.issuesSize }} - if can?(current_user, :admin_issue, @project) - %button.btn.btn-small.btn-default.pull-right.has-tooltip.js-no-trigger-collapse{ type: "button", + %button.issue-count-badge-add-button.btn.btn-small.btn-default.has-tooltip.js-no-trigger-collapse{ type: "button", "@click" => "showNewIssueForm", "v-if" => 'list.type !== "closed"', "aria-label" => "New issue", diff --git a/spec/features/boards/new_issue_spec.rb b/spec/features/boards/new_issue_spec.rb index 056224dc436..7ba60247587 100644 --- a/spec/features/boards/new_issue_spec.rb +++ b/spec/features/boards/new_issue_spec.rb @@ -19,18 +19,18 @@ describe 'Issue Boards new issue', feature: true, js: true do end it 'displays new issue button' do - expect(first('.board')).to have_selector('.board-issue-count-holder .btn', count: 1) + expect(first('.board')).to have_selector('.issue-count-badge-add-button', count: 1) end it 'does not display new issue button in closed list' do page.within('.board:nth-child(3)') do - expect(page).not_to have_selector('.board-issue-count-holder .btn') + expect(page).not_to have_selector('.issue-count-badge-add-button') end end it 'shows form when clicking button' do page.within(first('.board')) do - find('.board-issue-count-holder .btn').click + find('.issue-count-badge-add-button').click expect(page).to have_selector('.board-new-issue-form') end @@ -38,7 +38,7 @@ describe 'Issue Boards new issue', feature: true, js: true do it 'hides form when clicking cancel' do page.within(first('.board')) do - find('.board-issue-count-holder .btn').click + find('.issue-count-badge-add-button').click expect(page).to have_selector('.board-new-issue-form') @@ -50,7 +50,7 @@ describe 'Issue Boards new issue', feature: true, js: true do it 'creates new issue' do page.within(first('.board')) do - find('.board-issue-count-holder .btn').click + find('.issue-count-badge-add-button').click end page.within(first('.board-new-issue-form')) do @@ -60,14 +60,14 @@ describe 'Issue Boards new issue', feature: true, js: true do wait_for_requests - page.within(first('.board .board-issue-count')) do + page.within(first('.board .issue-count-badge-count')) do expect(page).to have_content('1') end end it 'shows sidebar when creating new issue' do page.within(first('.board')) do - find('.board-issue-count-holder .btn').click + find('.issue-count-badge-add-button').click end page.within(first('.board-new-issue-form')) do @@ -88,7 +88,7 @@ describe 'Issue Boards new issue', feature: true, js: true do end it 'does not display new issue button' do - expect(page).to have_selector('.board-issue-count-holder .btn', count: 0) + expect(page).to have_selector('.issue-count-badge-add-button', count: 0) end end end |