Clean up issuable lists

This commit is contained in:
Taurie Davis 2017-06-29 17:34:06 +00:00 committed by Annabel Dunstone Gray
parent dba763322c
commit 55c6be2fb0
8 changed files with 145 additions and 74 deletions

View file

@ -597,7 +597,38 @@
.issue-info-container {
-webkit-flex: 1;
flex: 1;
display: flex;
padding-right: $gl-padding;
.issue-main-info {
flex: 1 auto;
margin-right: 10px;
}
.issuable-meta {
display: flex;
flex-direction: column;
align-items: flex-end;
flex: 1 0 auto;
.controls {
margin-bottom: 2px;
line-height: 20px;
padding: 0;
}
.issue-updated-at {
line-height: 20px;
}
}
@media(max-width: $screen-xs-max) {
.issuable-meta {
.controls li {
margin-right: 0;
}
}
}
}
.issue-check {
@ -609,6 +640,30 @@
vertical-align: text-top;
}
}
.issuable-milestone,
.issuable-info,
.task-status,
.issuable-updated-at {
font-weight: normal;
color: $gl-text-color-secondary;
a {
color: $gl-text-color;
.fa {
color: $gl-text-color-secondary;
}
}
}
@media(max-width: $screen-md-max) {
.task-status,
.issuable-due-date,
.project-ref-path {
display: none;
}
}
}
}

View file

@ -279,5 +279,9 @@
.label-link {
display: inline-block;
vertical-align: text-top;
vertical-align: top;
.label {
vertical-align: inherit;
}
}

View file

@ -4,43 +4,49 @@
.issue-check.hidden
= check_box_tag dom_id(issue, "selected"), nil, false, 'data-id' => issue.id, class: "selected_issue"
.issue-info-container
.issue-title.title
%span.issue-title-text
= confidential_icon(issue)
= link_to issue.title, issue_path(issue)
.issue-main-info
.issue-title.title
%span.issue-title-text
= confidential_icon(issue)
= link_to issue.title, issue_path(issue)
- if issue.tasks?
%span.task-status.hidden-xs
 
= issue.task_status
.issuable-info
%span.issuable-reference
#{issuable_reference(issue)}
%span.issuable-authored.hidden-xs
·
opened #{time_ago_with_tooltip(issue.created_at, placement: 'bottom')}
by #{link_to_member(@project, issue.author, avatar: false)}
- if issue.milestone
%span.issuable-milestone.hidden-xs
 
= link_to namespace_project_issues_path(issue.project.namespace, issue.project, milestone_title: issue.milestone.title) do
= icon('clock-o')
= issue.milestone.title
- if issue.due_date
%span.issuable-due-date.hidden-xs{ class: "#{'cred' if issue.overdue?}" }
 
= icon('calendar')
= issue.due_date.to_s(:medium)
- if issue.labels.any?
 
- issue.labels.each do |label|
= link_to_label(label, subject: issue.project, css_class: 'label-link')
.issuable-meta
%ul.controls
- if issue.closed?
%li
%li.issuable-status
CLOSED
- if issue.assignees.any?
%li
= render 'shared/issuable/assignees', project: @project, issue: issue
= render 'shared/issuable_meta_data', issuable: issue
.issue-info
#{issuable_reference(issue)} ·
opened #{time_ago_with_tooltip(issue.created_at, placement: 'bottom')}
by #{link_to_member(@project, issue.author, avatar: false)}
- if issue.milestone
 
= link_to namespace_project_issues_path(issue.project.namespace, issue.project, milestone_title: issue.milestone.title) do
= icon('clock-o')
= issue.milestone.title
- if issue.due_date
%span{ class: "#{'cred' if issue.overdue?}" }
 
= icon('calendar')
= issue.due_date.to_s(:medium)
- if issue.labels.any?
 
- issue.labels.each do |label|
= link_to_label(label, subject: issue.project, css_class: 'label-link')
- if issue.tasks?
 
%span.task-status
= issue.task_status
.pull-right.issue-updated-at
.pull-right.issuable-updated-at.hidden-xs
%span updated #{time_ago_with_tooltip(issue.updated_at, placement: 'bottom', html_class: 'issue_update_ago')}

View file

@ -4,58 +4,60 @@
= check_box_tag dom_id(merge_request, "selected"), nil, false, 'data-id' => merge_request.id, class: "selected_issue"
.issue-info-container
.merge-request-title.title
%span.merge-request-title-text
= link_to merge_request.title, merge_request_path(merge_request)
.issue-main-info
.merge-request-title.title
%span.merge-request-title-text
= link_to merge_request.title, merge_request_path(merge_request)
- if merge_request.tasks?
%span.task-status.hidden-xs
 
= merge_request.task_status
.issuable-info
%span.issuable-reference
#{issuable_reference(merge_request)}
%span.issuable-authored.hidden-xs
·
opened #{time_ago_with_tooltip(merge_request.created_at, placement: 'bottom')}
by #{link_to_member(@project, merge_request.author, avatar: false)}
- if merge_request.milestone
%span.issuable-milestone.hidden-xs
 
= link_to namespace_project_merge_requests_path(merge_request.project.namespace, merge_request.project, milestone_title: merge_request.milestone.title) do
= icon('clock-o')
= merge_request.milestone.title
- if merge_request.target_project.default_branch != merge_request.target_branch
%span.project-ref-path
 
= link_to project_ref_path(merge_request.project, merge_request.target_branch), class: 'ref-name' do
= icon('code-fork')
= merge_request.target_branch
- if merge_request.labels.any?
 
- merge_request.labels.each do |label|
= link_to_label(label, subject: merge_request.project, type: :merge_request, css_class: 'label-link')
.issuable-meta
%ul.controls
- if merge_request.merged?
%li
%li.issuable-status.hidden-xs
MERGED
- elsif merge_request.closed?
%li
%li.issuable-status.hidden-xs
= icon('ban')
CLOSED
- if merge_request.head_pipeline
%li
%li.issuable-pipeline-status.hidden-xs
= render_pipeline_status(merge_request.head_pipeline)
- if merge_request.open? && merge_request.broken?
%li
%li.issuable-pipeline-broken.hidden-xs
= link_to merge_request_path(merge_request), class: "has-tooltip", title: "Cannot be merged automatically", data: { container: 'body' } do
= icon('exclamation-triangle')
- if merge_request.assignee
%li
= link_to_member(merge_request.source_project, merge_request.assignee, name: false, title: "Assigned to :name")
= render 'shared/issuable_meta_data', issuable: merge_request
.merge-request-info
#{issuable_reference(merge_request)} ·
opened #{time_ago_with_tooltip(merge_request.created_at, placement: 'bottom')}
by #{link_to_member(@project, merge_request.author, avatar: false)}
- if merge_request.target_project.default_branch != merge_request.target_branch
 
= link_to project_ref_path(merge_request.project, merge_request.target_branch), class: 'ref-name' do
= icon('code-fork')
= merge_request.target_branch
- if merge_request.milestone
 
= link_to namespace_project_merge_requests_path(merge_request.project.namespace, merge_request.project, milestone_title: merge_request.milestone.title) do
= icon('clock-o')
= merge_request.milestone.title
- if merge_request.labels.any?
 
- merge_request.labels.each do |label|
= link_to_label(label, subject: merge_request.project, type: :merge_request, css_class: 'label-link')
- if merge_request.tasks?
 
%span.task-status
= merge_request.task_status
.pull-right.hidden-xs
.pull-right.issuable-updated-at.hidden-xs
%span updated #{time_ago_with_tooltip(merge_request.updated_at, placement: 'bottom', html_class: 'merge_request_updated_ago')}

View file

@ -5,21 +5,21 @@
- issuable_mr = @issuable_meta_data[issuable.id].merge_requests_count
- if issuable_mr > 0
%li
%li.issuable-mr.hidden-xs
= image_tag('icon-merge-request-unmerged.svg', class: 'icon-merge-request-unmerged')
= issuable_mr
- if upvotes > 0
%li
%li.issuable-upvotes.hidden-xs
= icon('thumbs-up')
= upvotes
- if downvotes > 0
%li
%li.issuable-downvotes.hidden-xs
= icon('thumbs-down')
= downvotes
%li
%li.issuable-comments.hidden-xs
= link_to issuable_url, class: ('no-comments' if note_count.zero?) do
= icon('comments')
= note_count

View file

@ -0,0 +1,4 @@
---
title: Clean up UI of issuable lists and make more responsive
merge_request:
author:

View file

@ -65,7 +65,7 @@ class Spinach::Features::ProjectMergeRequests < Spinach::FeatureSteps
end
step 'I should not see "master" branch' do
expect(find('.merge-request-info')).not_to have_content "master"
expect(find('.issuable-info')).not_to have_content "master"
end
step 'I should see "feature_conflict" branch' do

View file

@ -459,7 +459,7 @@ describe 'Filter issues', js: true, feature: true do
context 'issue label clicked' do
before do
find('.issues-list .issue .issue-info a .label', text: multiple_words_label.title).click
find('.issues-list .issue .issue-main-info .issuable-info a .label', text: multiple_words_label.title).click
end
it 'filters' do