Merge branch 'issueable-list-cleanup' into 'master'
Clean up issuable lists Closes #26818 See merge request !11991
This commit is contained in:
commit
d635114b9f
8 changed files with 145 additions and 74 deletions
|
@ -597,7 +597,38 @@
|
||||||
.issue-info-container {
|
.issue-info-container {
|
||||||
-webkit-flex: 1;
|
-webkit-flex: 1;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
padding-right: $gl-padding;
|
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 {
|
.issue-check {
|
||||||
|
@ -609,6 +640,30 @@
|
||||||
vertical-align: text-top;
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -279,5 +279,9 @@
|
||||||
|
|
||||||
.label-link {
|
.label-link {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
vertical-align: text-top;
|
vertical-align: top;
|
||||||
|
|
||||||
|
.label {
|
||||||
|
vertical-align: inherit;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -4,43 +4,49 @@
|
||||||
.issue-check.hidden
|
.issue-check.hidden
|
||||||
= check_box_tag dom_id(issue, "selected"), nil, false, 'data-id' => issue.id, class: "selected_issue"
|
= check_box_tag dom_id(issue, "selected"), nil, false, 'data-id' => issue.id, class: "selected_issue"
|
||||||
.issue-info-container
|
.issue-info-container
|
||||||
.issue-title.title
|
.issue-main-info
|
||||||
%span.issue-title-text
|
.issue-title.title
|
||||||
= confidential_icon(issue)
|
%span.issue-title-text
|
||||||
= link_to issue.title, issue_path(issue)
|
= 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
|
%ul.controls
|
||||||
- if issue.closed?
|
- if issue.closed?
|
||||||
%li
|
%li.issuable-status
|
||||||
CLOSED
|
CLOSED
|
||||||
|
|
||||||
- if issue.assignees.any?
|
- if issue.assignees.any?
|
||||||
%li
|
%li
|
||||||
= render 'shared/issuable/assignees', project: @project, issue: issue
|
= render 'shared/issuable/assignees', project: @project, issue: issue
|
||||||
|
|
||||||
= render 'shared/issuable_meta_data', issuable: issue
|
= render 'shared/issuable_meta_data', issuable: issue
|
||||||
|
|
||||||
.issue-info
|
.pull-right.issuable-updated-at.hidden-xs
|
||||||
#{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
|
|
||||||
%span updated #{time_ago_with_tooltip(issue.updated_at, placement: 'bottom', html_class: 'issue_update_ago')}
|
%span updated #{time_ago_with_tooltip(issue.updated_at, placement: 'bottom', html_class: 'issue_update_ago')}
|
||||||
|
|
|
@ -4,58 +4,60 @@
|
||||||
= check_box_tag dom_id(merge_request, "selected"), nil, false, 'data-id' => merge_request.id, class: "selected_issue"
|
= check_box_tag dom_id(merge_request, "selected"), nil, false, 'data-id' => merge_request.id, class: "selected_issue"
|
||||||
|
|
||||||
.issue-info-container
|
.issue-info-container
|
||||||
.merge-request-title.title
|
.issue-main-info
|
||||||
%span.merge-request-title-text
|
.merge-request-title.title
|
||||||
= link_to merge_request.title, merge_request_path(merge_request)
|
%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
|
%ul.controls
|
||||||
- if merge_request.merged?
|
- if merge_request.merged?
|
||||||
%li
|
%li.issuable-status.hidden-xs
|
||||||
MERGED
|
MERGED
|
||||||
- elsif merge_request.closed?
|
- elsif merge_request.closed?
|
||||||
%li
|
%li.issuable-status.hidden-xs
|
||||||
= icon('ban')
|
= icon('ban')
|
||||||
CLOSED
|
CLOSED
|
||||||
|
|
||||||
- if merge_request.head_pipeline
|
- if merge_request.head_pipeline
|
||||||
%li
|
%li.issuable-pipeline-status.hidden-xs
|
||||||
= render_pipeline_status(merge_request.head_pipeline)
|
= render_pipeline_status(merge_request.head_pipeline)
|
||||||
|
|
||||||
- if merge_request.open? && merge_request.broken?
|
- 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
|
= link_to merge_request_path(merge_request), class: "has-tooltip", title: "Cannot be merged automatically", data: { container: 'body' } do
|
||||||
= icon('exclamation-triangle')
|
= icon('exclamation-triangle')
|
||||||
|
|
||||||
- if merge_request.assignee
|
- if merge_request.assignee
|
||||||
%li
|
%li
|
||||||
= link_to_member(merge_request.source_project, merge_request.assignee, name: false, title: "Assigned to :name")
|
= link_to_member(merge_request.source_project, merge_request.assignee, name: false, title: "Assigned to :name")
|
||||||
|
|
||||||
= render 'shared/issuable_meta_data', issuable: merge_request
|
= render 'shared/issuable_meta_data', issuable: merge_request
|
||||||
|
|
||||||
.merge-request-info
|
.pull-right.issuable-updated-at.hidden-xs
|
||||||
#{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
|
|
||||||
%span updated #{time_ago_with_tooltip(merge_request.updated_at, placement: 'bottom', html_class: 'merge_request_updated_ago')}
|
%span updated #{time_ago_with_tooltip(merge_request.updated_at, placement: 'bottom', html_class: 'merge_request_updated_ago')}
|
||||||
|
|
|
@ -5,21 +5,21 @@
|
||||||
- issuable_mr = @issuable_meta_data[issuable.id].merge_requests_count
|
- issuable_mr = @issuable_meta_data[issuable.id].merge_requests_count
|
||||||
|
|
||||||
- if issuable_mr > 0
|
- if issuable_mr > 0
|
||||||
%li
|
%li.issuable-mr.hidden-xs
|
||||||
= image_tag('icon-merge-request-unmerged.svg', class: 'icon-merge-request-unmerged')
|
= image_tag('icon-merge-request-unmerged.svg', class: 'icon-merge-request-unmerged')
|
||||||
= issuable_mr
|
= issuable_mr
|
||||||
|
|
||||||
- if upvotes > 0
|
- if upvotes > 0
|
||||||
%li
|
%li.issuable-upvotes.hidden-xs
|
||||||
= icon('thumbs-up')
|
= icon('thumbs-up')
|
||||||
= upvotes
|
= upvotes
|
||||||
|
|
||||||
- if downvotes > 0
|
- if downvotes > 0
|
||||||
%li
|
%li.issuable-downvotes.hidden-xs
|
||||||
= icon('thumbs-down')
|
= icon('thumbs-down')
|
||||||
= downvotes
|
= downvotes
|
||||||
|
|
||||||
%li
|
%li.issuable-comments.hidden-xs
|
||||||
= link_to issuable_url, class: ('no-comments' if note_count.zero?) do
|
= link_to issuable_url, class: ('no-comments' if note_count.zero?) do
|
||||||
= icon('comments')
|
= icon('comments')
|
||||||
= note_count
|
= note_count
|
||||||
|
|
4
changelogs/unreleased/issueable-list-cleanup.yml
Normal file
4
changelogs/unreleased/issueable-list-cleanup.yml
Normal file
|
@ -0,0 +1,4 @@
|
||||||
|
---
|
||||||
|
title: Clean up UI of issuable lists and make more responsive
|
||||||
|
merge_request:
|
||||||
|
author:
|
|
@ -65,7 +65,7 @@ class Spinach::Features::ProjectMergeRequests < Spinach::FeatureSteps
|
||||||
end
|
end
|
||||||
|
|
||||||
step 'I should not see "master" branch' do
|
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
|
end
|
||||||
|
|
||||||
step 'I should see "feature_conflict" branch' do
|
step 'I should see "feature_conflict" branch' do
|
||||||
|
|
|
@ -459,7 +459,7 @@ describe 'Filter issues', js: true, feature: true do
|
||||||
|
|
||||||
context 'issue label clicked' do
|
context 'issue label clicked' do
|
||||||
before 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
|
end
|
||||||
|
|
||||||
it 'filters' do
|
it 'filters' do
|
||||||
|
|
Loading…
Reference in a new issue