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