Commit 64286985 authored by Dmitriy Zaporozhets's avatar Dmitriy Zaporozhets

Merge branch 'ui-improvements' into 'master'

UI improvements

Set of UI changes mostly for issue and merge request

* return edit/close buttons to old position (right of title)
* make 'Issue #1' header smaller
* move mr commits to separate tab
* change inline/side diff switcher to buttons from tabs
* make issue sidebar start with dicsussion block

See merge request !1351
parents e46f546b 40ff1bc8
...@@ -89,6 +89,9 @@ class @MergeRequest ...@@ -89,6 +89,9 @@ class @MergeRequest
this.$('.merge-request-tabs .diffs-tab').addClass 'active' this.$('.merge-request-tabs .diffs-tab').addClass 'active'
this.loadDiff() unless @diffs_loaded this.loadDiff() unless @diffs_loaded
this.$('.diffs').show() this.$('.diffs').show()
when 'commits'
this.$('.merge-request-tabs .commits-tab').addClass 'active'
this.$('.commits').show()
else else
this.$('.merge-request-tabs .notes-tab').addClass 'active' this.$('.merge-request-tabs .notes-tab').addClass 'active'
this.$('.notes').show() this.$('.notes').show()
......
...@@ -6,7 +6,9 @@ ...@@ -6,7 +6,9 @@
.issue-box { .issue-box {
display: inline-block; display: inline-block;
padding: 0 10px; padding: 7px 13px;
font-weight: normal;
margin-right: 5px;
&.issue-box-closed { &.issue-box-closed {
background-color: $bg_danger; background-color: $bg_danger;
......
...@@ -19,7 +19,8 @@ ...@@ -19,7 +19,8 @@
} }
} }
.merge-request .merge-request-tabs{ @media(min-width: $screen-sm-max) {
.merge-request .merge-request-tabs{
margin: 20px 0; margin: 20px 0;
li { li {
...@@ -28,6 +29,7 @@ ...@@ -28,6 +29,7 @@
font-size: 14px; font-size: 14px;
} }
} }
}
} }
.mr_source_commit, .mr_source_commit,
...@@ -102,6 +104,7 @@ ...@@ -102,6 +104,7 @@
.mr-state-widget { .mr-state-widget {
background: $box_bg; background: $box_bg;
margin-bottom: 20px; margin-bottom: 20px;
color: #666;
@include box-shadow(0 1px 1px rgba(0, 0, 0, 0.09)); @include box-shadow(0 1px 1px rgba(0, 0, 0, 0.09));
.ci_widget { .ci_widget {
...@@ -146,7 +149,6 @@ ...@@ -146,7 +149,6 @@
padding: 10px 15px; padding: 10px 15px;
h4 { h4 {
font-size: 20px;
font-weight: normal; font-weight: normal;
} }
......
...@@ -60,7 +60,7 @@ ...@@ -60,7 +60,7 @@
font-size: 13px; font-size: 13px;
line-height: 20px; line-height: 20px;
text-shadow: 0 1px 2px #FFF; text-shadow: 0 1px 2px #FFF;
padding-left: 67px; padding-left: 20px;
&:hover { &:hover {
text-decoration: none; text-decoration: none;
...@@ -75,6 +75,7 @@ ...@@ -75,6 +75,7 @@
i { i {
width: 20px; width: 20px;
color: #888; color: #888;
margin-right: 23px;
} }
} }
} }
...@@ -91,7 +92,7 @@ ...@@ -91,7 +92,7 @@
a { a {
padding: 5px 15px; padding: 5px 15px;
font-size: 12px; font-size: 12px;
padding-left: 67px; padding-left: 20px;
} }
} }
} }
......
...@@ -117,4 +117,22 @@ module DiffHelper ...@@ -117,4 +117,22 @@ module DiffHelper
[comments_left, comments_right] [comments_left, comments_right]
end end
def inline_diff_btn
params_copy = params.dup
params_copy[:view] = 'inline'
link_to url_for(params_copy), id: "commit-diff-viewtype", class: (params[:view] != 'parallel' ? 'btn active' : 'btn') do
'Inline'
end
end
def parallel_diff_btn
params_copy = params.dup
params_copy[:view] = 'parallel'
link_to url_for(params_copy), id: "commit-diff-viewtype", class: (params[:view] == 'parallel' ? 'btn active' : 'btn') do
'Side-by-side'
end
end
end end
...@@ -38,17 +38,19 @@ ...@@ -38,17 +38,19 @@
= link_to project_path(project), class: dom_class(project) do = link_to project_path(project), class: dom_class(project) do
= project.name_with_namespace = project.name_with_namespace
- if project.forked_from_project
 
%small
%i.fa.fa-code-fork
Forked from:
= link_to project.forked_from_project.name_with_namespace, project_path(project.forked_from_project)
- if current_user.can_leave_project?(project) - if current_user.can_leave_project?(project)
.pull-right .pull-right
= link_to leave_project_team_members_path(project), data: { confirm: "Leave project?"}, method: :delete, remote: true, class: "btn-tiny btn remove-row", title: 'Leave project' do = link_to leave_project_team_members_path(project), data: { confirm: "Leave project?"}, method: :delete, remote: true, class: "btn-tiny btn remove-row", title: 'Leave project' do
%i.fa.fa-sign-out %i.fa.fa-sign-out
Leave Leave
- if project.forked_from_project
%small.pull-right
%i.fa.fa-code-fork
Forked from:
= link_to project.forked_from_project.name_with_namespace, project_path(project.forked_from_project)
.project-info .project-info
.pull-right .pull-right
- if project.archived? - if project.archived?
......
...@@ -2,15 +2,9 @@ ...@@ -2,15 +2,9 @@
.col-md-8 .col-md-8
= render 'projects/diffs/stats', diffs: diffs = render 'projects/diffs/stats', diffs: diffs
.col-md-4 .col-md-4
%ul.nav.nav-tabs .btn-group.pull-right
%li.pull-right{class: params[:view] == 'parallel' ? 'active' : ''} = inline_diff_btn
- params_copy = params.dup = parallel_diff_btn
- params_copy[:view] = 'parallel'
= link_to "Side-by-side Diff", url_for(params_copy), {id: "commit-diff-viewtype"}
%li.pull-right{class: params[:view] != 'parallel' ? 'active' : ''}
- params_copy[:view] = 'inline'
= link_to "Inline Diff", url_for(params_copy), {id: "commit-diff-viewtype"}
- if show_diff_size_warning?(diffs) - if show_diff_size_warning?(diffs)
= render 'projects/diffs/warning', diffs: diffs = render 'projects/diffs/warning', diffs: diffs
......
- content_for :note_actions do
- if can?(current_user, :modify_issue, @issue)
- if @issue.closed?
= link_to 'Reopen Issue', project_issue_path(@project, @issue, issue: {state_event: :reopen }, status_only: true), method: :put, class: "btn btn-grouped btn-reopen js-note-target-reopen", title: 'Reopen Issue'
- else
= link_to 'Close Issue', project_issue_path(@project, @issue, issue: {state_event: :close }, status_only: true), method: :put, class: "btn btn-grouped btn-close js-note-target-close", title: "Close Issue"
.row
.col-md-9
.participants
%cite.cgray
= pluralize(@issue.participants.count, 'participant')
- @issue.participants.each do |participant|
= link_to_member(@project, participant, name: false, size: 24)
.voting_notes#notes= render "projects/notes/notes_with_form"
.col-md-3.hidden-sm.hidden-xs
%div
.clearfix
%span.slead.has_tooltip{:"data-original-title" => 'Cross-project reference'}
= cross_project_reference(@project, @issue)
%hr
.clearfix
.votes-holder
%h6 Votes
#votes= render 'votes/votes_block', votable: @issue
%hr
.context
%cite.cgray
= render partial: 'issue_context', locals: { issue: @issue }
- if @issue.labels.any?
%hr
%h6 Labels
.issue-show-labels
- @issue.labels.each do |label|
= link_to project_issues_path(@project, label_name: label.name) do
%p= render_colored_label(label)
%h3.page-title %h4.page-title
.issue-box{ class: issue_box_class(@issue) } .issue-box{ class: issue_box_class(@issue) }
- if @issue.closed? - if @issue.closed?
Closed Closed
- else - else
Open Open
Issue ##{@issue.iid} Issue ##{@issue.iid}
.pull-right.creator %small.creator
%small Created by #{link_to_member(@project, @issue.author)} #{issue_timestamp(@issue)} · created by #{link_to_member(@project, @issue.author)} #{issue_timestamp(@issue)}
%hr
.row
.col-sm-9
%h3.issue-title
= gfm escape_once(@issue.title)
%div
- if @issue.description.present?
.description
.wiki
= preserve do
= markdown(@issue.description, parse_tasks: true)
%hr
- content_for :note_actions do
- if can?(current_user, :modify_issue, @issue)
- if @issue.closed?
= link_to 'Reopen Issue', project_issue_path(@project, @issue, issue: {state_event: :reopen }, status_only: true), method: :put, class: "btn btn-grouped btn-reopen js-note-target-reopen", title: 'Reopen Issue'
- else
= link_to 'Close Issue', project_issue_path(@project, @issue, issue: {state_event: :close }, status_only: true), method: :put, class: "btn btn-grouped btn-close js-note-target-close", title: "Close Issue"
.participants
%cite.cgray
= pluralize(@issue.participants.count, 'participant')
- @issue.participants.each do |participant|
= link_to_member(@project, participant, name: false, size: 24)
.issue-show-labels.pull-right
- @issue.labels.each do |label|
= link_to project_issues_path(@project, label_name: label.name) do
= render_colored_label(label)
.voting_notes#notes= render "projects/notes/notes_with_form" .pull-right
.col-sm-3
%div
- if can?(current_user, :write_issue, @project) - if can?(current_user, :write_issue, @project)
= link_to new_project_issue_path(@project), class: "btn btn-block", title: "New Issue", id: "new_issue_link" do = link_to new_project_issue_path(@project), class: "btn btn-grouped", title: "New Issue", id: "new_issue_link" do
%i.fa.fa-plus %i.fa.fa-plus
New Issue New Issue
- if can?(current_user, :modify_issue, @issue) - if can?(current_user, :modify_issue, @issue)
- if @issue.closed? - if @issue.closed?
= link_to 'Reopen', project_issue_path(@project, @issue, issue: {state_event: :reopen }, status_only: true), method: :put, class: "btn btn-block btn-reopen" = link_to 'Reopen', project_issue_path(@project, @issue, issue: {state_event: :reopen }, status_only: true), method: :put, class: "btn btn-grouped btn-reopen"
- else - else
= link_to 'Close', project_issue_path(@project, @issue, issue: {state_event: :close }, status_only: true), method: :put, class: "btn btn-block btn-close", title: "Close Issue" = link_to 'Close', project_issue_path(@project, @issue, issue: {state_event: :close }, status_only: true), method: :put, class: "btn btn-grouped btn-close", title: "Close Issue"
= link_to edit_project_issue_path(@project, @issue), class: "btn btn-block issuable-edit" do = link_to edit_project_issue_path(@project, @issue), class: "btn btn-grouped issuable-edit" do
%i.fa.fa-pencil-square-o %i.fa.fa-pencil-square-o
Edit Edit
.clearfix
%span.slead.has_tooltip{:"data-original-title" => 'Cross-project reference'} %hr
= cross_project_reference(@project, @issue) %h3.issue-title
%hr = gfm escape_once(@issue.title)
.clearfix %div
.votes-holder - if @issue.description.present?
%h6 Votes .description
#votes= render 'votes/votes_block', votable: @issue .wiki
%hr = preserve do
.context = markdown(@issue.description, parse_tasks: true)
%cite.cgray
= render partial: 'issue_context', locals: { issue: @issue } %hr
= render "projects/issues/discussion"
- content_for :note_actions do
- if can?(current_user, :modify_merge_request, @merge_request)
- if @merge_request.open?
= link_to 'Close', project_merge_request_path(@project, @merge_request, merge_request: {state_event: :close }), method: :put, class: "btn btn-grouped btn-close close-mr-link js-note-target-close", title: "Close merge request"
- if @merge_request.closed?
= link_to 'Reopen', project_merge_request_path(@project, @merge_request, merge_request: {state_event: :reopen }), method: :put, class: "btn btn-grouped btn-reopen reopen-mr-link js-note-target-reopen", title: "Reopen merge request"
.row
.col-md-9
= render "projects/merge_requests/show/participants"
= render "projects/notes/notes_with_form"
.col-md-3.hidden-sm.hidden-xs
.clearfix
%span.slead.has_tooltip{:"data-original-title" => 'Cross-project reference'}
= cross_project_reference(@project, @merge_request)
%hr
.votes-holder.hidden-sm.hidden-xs
%h6 Votes
#votes= render 'votes/votes_block', votable: @merge_request
%hr
.context
%cite.cgray
= render partial: 'projects/merge_requests/show/context', locals: { merge_request: @merge_request }
- if @merge_request.labels.any?
%hr
%h6 Labels
.merge-request-show-labels
- @merge_request.labels.each do |label|
= link_to project_merge_requests_path(@project, label_name: label.name) do
%p= render_colored_label(label)
.merge-request .merge-request
= render "projects/merge_requests/show/mr_title" = render "projects/merge_requests/show/mr_title"
%hr %hr
.row
.col-sm-9
= render "projects/merge_requests/show/how_to_merge"
= render "projects/merge_requests/show/mr_box" = render "projects/merge_requests/show/mr_box"
%hr %hr
.append-bottom-20 .append-bottom-20
%p.slead .slead
%span From %span From
- if @merge_request.for_fork? - if @merge_request.for_fork?
%strong.label-branch< %strong.label-branch<
...@@ -22,15 +19,8 @@ ...@@ -22,15 +19,8 @@
%strong.label-branch #{@merge_request.source_branch} %strong.label-branch #{@merge_request.source_branch}
%span into %span into
%strong.label-branch #{@merge_request.target_branch} %strong.label-branch #{@merge_request.target_branch}
= render "projects/merge_requests/show/state_widget"
= render "projects/merge_requests/show/commits"
= render "projects/merge_requests/show/participants"
.col-sm-3
.issue-btn-group
- if can?(current_user, :modify_merge_request, @merge_request)
- if @merge_request.open? - if @merge_request.open?
.btn-group-justified.append-bottom-20 %span.pull-right
.btn-group .btn-group
%a.btn.dropdown-toggle{ data: {toggle: :dropdown} } %a.btn.dropdown-toggle{ data: {toggle: :dropdown} }
%i.fa.fa-download %i.fa.fa-download
...@@ -39,51 +29,36 @@ ...@@ -39,51 +29,36 @@
%ul.dropdown-menu %ul.dropdown-menu
%li= link_to "Email Patches", project_merge_request_path(@project, @merge_request, format: :patch) %li= link_to "Email Patches", project_merge_request_path(@project, @merge_request, format: :patch)
%li= link_to "Plain Diff", project_merge_request_path(@project, @merge_request, format: :diff) %li= link_to "Plain Diff", project_merge_request_path(@project, @merge_request, format: :diff)
= link_to 'Close', project_merge_request_path(@project, @merge_request, merge_request: { state_event: :close }), method: :put, class: "btn btn-block btn-close", title: "Close merge request"
= link_to edit_project_merge_request_path(@project, @merge_request), class: "btn btn-block issuable-edit", id: "edit_merge_request" do = render "projects/merge_requests/show/how_to_merge"
%i.fa.fa-pencil-square-o = render "projects/merge_requests/show/state_widget"
Edit
- if @merge_request.closed?
= link_to 'Reopen', project_merge_request_path(@project, @merge_request, merge_request: {state_event: :reopen }), method: :put, class: "btn btn-block btn-reopen reopen-mr-link", title: "Close merge request"
.clearfix
%span.slead.has_tooltip{:"data-original-title" => 'Cross-project reference'}
= cross_project_reference(@project, @merge_request)
%hr
.votes-holder.hidden-sm.hidden-xs
%h6 Votes
#votes= render 'votes/votes_block', votable: @merge_request
%hr
.context
%cite.cgray
= render partial: 'projects/merge_requests/show/context', locals: { merge_request: @merge_request }
- if @commits.present? - if @commits.present?
%ul.nav.nav-tabs.merge-request-tabs %ul.nav.nav-tabs.merge-request-tabs
%li.notes-tab{data: {action: 'notes'}} %li.notes-tab{data: {action: 'notes'}}
= link_to project_merge_request_path(@project, @merge_request) do = link_to project_merge_request_path(@project, @merge_request) do
%i.fa.fa-comment %i.fa.fa-comments
Discussion Discussion
%span.badge= @merge_request.mr_and_commit_notes.count %span.badge= @merge_request.mr_and_commit_notes.count
%li.commits-tab{data: {action: 'commits'}}
= link_to project_merge_request_path(@project, @merge_request), title: 'Commits' do
%i.fa.fa-database
Commits
%span.badge= @commits.size
%li.diffs-tab{data: {action: 'diffs'}} %li.diffs-tab{data: {action: 'diffs'}}
= link_to diffs_project_merge_request_path(@project, @merge_request) do = link_to diffs_project_merge_request_path(@project, @merge_request) do
%i.fa.fa-list-alt %i.fa.fa-list-alt
Changes Changes
%span.badge= @merge_request.diffs.size %span.badge= @merge_request.diffs.size
- content_for :note_actions do .notes.tab-content.voting_notes#notes{ class: (controller.action_name == 'show') ? "" : "hide" }
- if can?(current_user, :modify_merge_request, @merge_request) = render "projects/merge_requests/discussion"
- if @merge_request.open? .commits.tab-content
= link_to 'Close', project_merge_request_path(@project, @merge_request, merge_request: {state_event: :close }), method: :put, class: "btn btn-grouped btn-close close-mr-link js-note-target-close", title: "Close merge request" = render "projects/merge_requests/show/commits"
- if @merge_request.closed?
= link_to 'Reopen', project_merge_request_path(@project, @merge_request, merge_request: {state_event: :reopen }), method: :put, class: "btn btn-grouped btn-reopen reopen-mr-link js-note-target-reopen", title: "Reopen merge request"
.diffs.tab-content .diffs.tab-content
- if current_page?(action: 'diffs') - if current_page?(action: 'diffs')
= render "projects/merge_requests/show/diffs" = render "projects/merge_requests/show/diffs"
.notes.tab-content.voting_notes#notes{ class: (controller.action_name == 'show') ? "" : "hide" }
.row
.col-sm-9
= render "projects/notes/notes_with_form"
.mr-loading-status .mr-loading-status
= spinner = spinner
......
%h3.page-title %h4.page-title
.issue-box{ class: issue_box_class(@merge_request) } .issue-box{ class: issue_box_class(@merge_request) }
- if @merge_request.merged? - if @merge_request.merged?
Merged Merged
...@@ -7,5 +7,16 @@ ...@@ -7,5 +7,16 @@
- else - else
Open Open
= "Merge Request ##{@merge_request.iid}" = "Merge Request ##{@merge_request.iid}"
.pull-right.creator %small.creator
%small Created by #{link_to_member(@project, @merge_request.author)} #{time_ago_with_tooltip(@merge_request.created_at)} &middot;
created by #{link_to_member(@project, @merge_request.author)} #{time_ago_with_tooltip(@merge_request.created_at)}
.issue-btn-group.pull-right
- if can?(current_user, :modify_merge_request, @merge_request)
- if @merge_request.open?
= link_to 'Close', project_merge_request_path(@project, @merge_request, merge_request: { state_event: :close }), method: :put, class: "btn btn-grouped btn-close", title: "Close merge request"
= link_to edit_project_merge_request_path(@project, @merge_request), class: "btn btn-grouped issuable-edit", id: "edit_merge_request" do
%i.fa.fa-pencil-square-o
Edit
- if @merge_request.closed?
= link_to 'Reopen', project_merge_request_path(@project, @merge_request, merge_request: {state_event: :reopen }), method: :put, class: "btn btn-grouped btn-reopen reopen-mr-link", title: "Close merge request"
...@@ -2,8 +2,3 @@ ...@@ -2,8 +2,3 @@
%cite.cgray #{@merge_request.participants.count} participants %cite.cgray #{@merge_request.participants.count} participants
- @merge_request.participants.each do |participant| - @merge_request.participants.each do |participant|
= link_to_member(@project, participant, name: false, size: 24) = link_to_member(@project, participant, name: false, size: 24)
.merge-request-show-labels.pull-right
- @merge_request.labels.each do |label|
= link_to project_merge_requests_path(@project, label_name: label.name) do
= render_colored_label(label)
...@@ -78,14 +78,14 @@ class Spinach::Features::ProjectCommits < Spinach::FeatureSteps ...@@ -78,14 +78,14 @@ class Spinach::Features::ProjectCommits < Spinach::FeatureSteps
end end
step 'I click side-by-side diff button' do step 'I click side-by-side diff button' do
click_link "Side-by-side Diff" click_link "Side-by-side"
end end
step 'I see side-by-side diff button' do step 'I see side-by-side diff button' do
page.should have_content "Side-by-side Diff" page.should have_content "Side-by-side"
end end
step 'I see inline diff button' do step 'I see inline diff button' do
page.should have_content "Inline Diff" page.should have_content "Inline"
end end
end end
...@@ -109,6 +109,10 @@ class Spinach::Features::ProjectMergeRequests < Spinach::FeatureSteps ...@@ -109,6 +109,10 @@ class Spinach::Features::ProjectMergeRequests < Spinach::FeatureSteps
end end
step 'I click on the commit in the merge request' do step 'I click on the commit in the merge request' do
within '.merge-request-tabs' do
click_link 'Commits'
end
within '.mr-commits' do within '.mr-commits' do
click_link Commit.truncate_sha(sample_commit.id) click_link Commit.truncate_sha(sample_commit.id)
end end
...@@ -261,7 +265,7 @@ class Spinach::Features::ProjectMergeRequests < Spinach::FeatureSteps ...@@ -261,7 +265,7 @@ class Spinach::Features::ProjectMergeRequests < Spinach::FeatureSteps
end end
step 'I click Side-by-side Diff tab' do step 'I click Side-by-side Diff tab' do
click_link 'Side-by-side Diff' click_link 'Side-by-side'
end end
step 'I should see comments on the side-by-side diff page' do step 'I should see comments on the side-by-side diff page' do
......
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