Commit 923a2adc authored by Clement Ho's avatar Clement Ho Committed by Jacob Schatz

Update issue board cards design

parent 69bf7bfa
...@@ -20,6 +20,7 @@ import eventHub from '../eventhub'; ...@@ -20,6 +20,7 @@ import eventHub from '../eventhub';
list: { list: {
type: Object, type: Object,
required: false, required: false,
default: () => ({}),
}, },
rootPath: { rootPath: {
type: String, type: String,
...@@ -31,6 +32,26 @@ import eventHub from '../eventhub'; ...@@ -31,6 +32,26 @@ import eventHub from '../eventhub';
default: false, default: false,
}, },
}, },
computed: {
cardUrl() {
return `${this.issueLinkBase}/${this.issue.id}`;
},
assigneeUrl() {
return `${this.rootPath}${this.issue.assignee.username}`;
},
assigneeUrlTitle() {
return `Assigned to ${this.issue.assignee.name}`;
},
avatarUrlTitle() {
return `Avatar for ${this.issue.assignee.name}`;
},
issueId() {
return `#${this.issue.id}`;
},
showLabelFooter() {
return this.issue.labels.find(l => this.showLabel(l)) !== undefined;
},
},
methods: { methods: {
showLabel(label) { showLabel(label) {
if (!this.list) return true; if (!this.list) return true;
...@@ -67,35 +88,41 @@ import eventHub from '../eventhub'; ...@@ -67,35 +88,41 @@ import eventHub from '../eventhub';
}, },
template: ` template: `
<div> <div>
<h4 class="card-title"> <div class="card-header">
<i <h4 class="card-title">
class="fa fa-eye-slash confidential-icon" <i
v-if="issue.confidential"></i> class="fa fa-eye-slash confidential-icon"
<a v-if="issue.confidential"
:href="issueLinkBase + '/' + issue.id" aria-hidden="true"
:title="issue.title"> />
{{ issue.title }} <a
</a> class="js-no-trigger"
</h4> :href="cardUrl"
<div class="card-footer"> :title="issue.title">{{ issue.title }}</a>
<span <span
class="card-number" class="card-number"
v-if="issue.id"> v-if="issue.id"
#{{ issue.id }} >
</span> {{ issueId }}
</span>
</h4>
<a <a
class="card-assignee has-tooltip js-no-trigger" class="card-assignee has-tooltip js-no-trigger"
:href="rootPath + issue.assignee.username" :href="assigneeUrl"
:title="'Assigned to ' + issue.assignee.name" :title="assigneeUrlTitle"
v-if="issue.assignee" v-if="issue.assignee"
data-container="body"> data-container="body"
>
<img <img
class="avatar avatar-inline s20 js-no-trigger" class="avatar avatar-inline s20 js-no-trigger"
:src="issue.assignee.avatar" :src="issue.assignee.avatar"
width="20" width="20"
height="20" height="20"
:alt="'Avatar for ' + issue.assignee.name" /> :alt="avatarUrlTitle"
/>
</a> </a>
</div>
<div class="card-footer" v-if="showLabelFooter">
<button <button
class="label color-label has-tooltip js-no-trigger" class="label color-label has-tooltip js-no-trigger"
v-for="label in issue.labels" v-for="label in issue.labels"
......
...@@ -197,7 +197,7 @@ ...@@ -197,7 +197,7 @@
.card { .card {
position: relative; position: relative;
padding: 10px $gl-padding; padding: 11px 10px 11px $gl-padding;
background: $white-light; background: $white-light;
border-radius: $border-radius-default; border-radius: $border-radius-default;
box-shadow: 0 1px 2px $issue-boards-card-shadow; box-shadow: 0 1px 2px $issue-boards-card-shadow;
...@@ -217,6 +217,8 @@ ...@@ -217,6 +217,8 @@
} }
.confidential-icon { .confidential-icon {
position: relative;
top: 1px;
margin-right: 5px; margin-right: 5px;
} }
} }
...@@ -224,34 +226,43 @@ ...@@ -224,34 +226,43 @@
.card-title { .card-title {
margin: 0; margin: 0;
font-size: 1em; font-size: 1em;
line-height: inherit;
a { a {
color: inherit; color: $gl-text-color;
word-wrap: break-word; word-wrap: break-word;
margin-right: 2px;
} }
} }
.card-footer { .card-header {
margin-top: 5px; display: flex;
line-height: 25px; min-height: 20px;
.label {
margin-right: 5px;
font-size: (14px / $issue-boards-font-size) * 1em;
}
.card-assignee { .card-assignee {
margin-left: auto;
margin-right: 5px; margin-right: 5px;
padding-left: 10px;
height: 20px;
} }
.avatar { .avatar {
margin-left: 0; margin: 0;
margin-right: 0; }
}
.card-footer {
margin: 0 0 5px;
.label {
margin-top: 5px;
margin-right: 6px;
} }
} }
.card-number { .card-number {
margin-right: 5px; font-size: 12px;
color: $gl-text-color-secondary;
} }
.issue-boards-search { .issue-boards-search {
......
---
title: Update issue board cards design
merge_request: 10353
author:
...@@ -145,7 +145,7 @@ describe 'Issue Boards add issue modal', :feature, :js do ...@@ -145,7 +145,7 @@ describe 'Issue Boards add issue modal', :feature, :js do
context 'selecing issues' do context 'selecing issues' do
it 'selects single issue' do it 'selects single issue' do
page.within('.add-issues-modal') do page.within('.add-issues-modal') do
first('.card').click first('.card .card-number').click
page.within('.nav-links') do page.within('.nav-links') do
expect(page).to have_content('Selected issues 1') expect(page).to have_content('Selected issues 1')
...@@ -155,7 +155,7 @@ describe 'Issue Boards add issue modal', :feature, :js do ...@@ -155,7 +155,7 @@ describe 'Issue Boards add issue modal', :feature, :js do
it 'changes button text' do it 'changes button text' do
page.within('.add-issues-modal') do page.within('.add-issues-modal') do
first('.card').click first('.card .card-number').click
expect(first('.add-issues-footer .btn')).to have_content('Add 1 issue') expect(first('.add-issues-footer .btn')).to have_content('Add 1 issue')
end end
...@@ -163,7 +163,7 @@ describe 'Issue Boards add issue modal', :feature, :js do ...@@ -163,7 +163,7 @@ describe 'Issue Boards add issue modal', :feature, :js do
it 'changes button text with plural' do it 'changes button text with plural' do
page.within('.add-issues-modal') do page.within('.add-issues-modal') do
all('.card').each do |el| all('.card .card-number').each do |el|
el.click el.click
end end
...@@ -173,7 +173,7 @@ describe 'Issue Boards add issue modal', :feature, :js do ...@@ -173,7 +173,7 @@ describe 'Issue Boards add issue modal', :feature, :js do
it 'shows only selected issues on selected tab' do it 'shows only selected issues on selected tab' do
page.within('.add-issues-modal') do page.within('.add-issues-modal') do
first('.card').click first('.card .card-number').click
click_link 'Selected issues' click_link 'Selected issues'
...@@ -203,7 +203,7 @@ describe 'Issue Boards add issue modal', :feature, :js do ...@@ -203,7 +203,7 @@ describe 'Issue Boards add issue modal', :feature, :js do
it 'selects all that arent already selected' do it 'selects all that arent already selected' do
page.within('.add-issues-modal') do page.within('.add-issues-modal') do
first('.card').click first('.card .card-number').click
expect(page).to have_selector('.is-active', count: 1) expect(page).to have_selector('.is-active', count: 1)
...@@ -215,11 +215,11 @@ describe 'Issue Boards add issue modal', :feature, :js do ...@@ -215,11 +215,11 @@ describe 'Issue Boards add issue modal', :feature, :js do
it 'unselects from selected tab' do it 'unselects from selected tab' do
page.within('.add-issues-modal') do page.within('.add-issues-modal') do
first('.card').click first('.card .card-number').click
click_link 'Selected issues' click_link 'Selected issues'
first('.card').click first('.card .card-number').click
expect(page).not_to have_selector('.is-active') expect(page).not_to have_selector('.is-active')
end end
...@@ -229,7 +229,7 @@ describe 'Issue Boards add issue modal', :feature, :js do ...@@ -229,7 +229,7 @@ describe 'Issue Boards add issue modal', :feature, :js do
context 'adding issues' do context 'adding issues' do
it 'adds to board' do it 'adds to board' do
page.within('.add-issues-modal') do page.within('.add-issues-modal') do
first('.card').click first('.card .card-number').click
click_button 'Add 1 issue' click_button 'Add 1 issue'
end end
...@@ -241,7 +241,7 @@ describe 'Issue Boards add issue modal', :feature, :js do ...@@ -241,7 +241,7 @@ describe 'Issue Boards add issue modal', :feature, :js do
it 'adds to second list' do it 'adds to second list' do
page.within('.add-issues-modal') do page.within('.add-issues-modal') do
first('.card').click first('.card .card-number').click
click_button planning.title click_button planning.title
......
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