kotovalexarian-likes-gitlab/gitlab-org--gitlab-foss
1
0
Fork 0
Code Releases Activity

Merge branch 'file_css' into 'master'

Browse source 
Better css class names for diff elements
This commit is contained in:
Dmitriy Zaporozhets 2014-02-24 11:50:21 +00:00
commit ac98d74adb
10 changed files with 407 additions and 408 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
app/assets/javascripts/main.js.coffee
View file

@ -117,11 +117,11 @@ $ ->
# Commit show suppressed diff
$(".content").on "click", ".supp_diff_link", ->
$(".diff-content").on "click", ".supp_diff_link", ->
$(@).next('table').show()
$(@).remove()
$(".content").on "click", ".js-details-expand", ->
$(".diff-content").on "click", ".js-details-expand", ->
$(@).next('.js-details-contain').removeClass("hide")
$(@).remove()

1
app/assets/stylesheets/application.scss
View file

@ -48,6 +48,7 @@
@import "sections/header.scss";
@import "sections/nav.scss";
@import "sections/commits.scss";
@import "sections/diff.scss";
@import "sections/issues.scss";
@import "sections/projects.scss";
@import "sections/snippets.scss";

330
app/assets/stylesheets/sections/commits.scss
View file

@ -10,336 +10,6 @@
}
}
.file {
border: 1px solid #CCC;
margin-bottom: 1em;
.header {
@extend .clearfix;
background: #DDD;
border-bottom: 1px solid #CCC;
padding: 5px 5px 5px 10px;
color: #555;
> span {
font-family: $monospace_font;
font-size: 14px;
line-height: 2;
}
.diff-btn-group {
float: right;
.btn {
background-color: #EEE;
color: #666;
font-weight: bolder;
}
}
.commit-short-id {
font-family: $monospace_font;
font-size: smaller;
}
.file-mode {
font-family: $monospace_font;
}
}
.content {
overflow: auto;
overflow-y: hidden;
background: #FFF;
color: #333;
font-size: 12px;
.old {
span.idiff {
background-color: #FAA;
}
}
.new {
span.idiff {
background-color: #AFA;
}
}
table {
width: 100%;
font-family: $monospace_font;
border: none;
margin: 0px;
padding: 0px;
td {
line-height: 18px;
font-size: 12px;
}
}
.old_line, .new_line, .diff_line {
margin: 0px;
padding: 0px;
border: none;
background: #EEE;
color: #666;
padding: 0px 5px;
border-right: 1px solid #ccc;
text-align: right;
min-width: 35px;
max-width: 50px;
width: 35px;
@include user-select(none);
a {
float: left;
width: 35px;
font-weight: normal;
color: #666;
&:hover {
text-decoration: underline;
}
}
&.new {
background: #CFD;
}
&.old {
background: #FDD;
}
}
.diff_line {
padding: 0;
}
.line_holder {
&.old .old_line,
&.old .new_line {
background: #FCC;
border-color: #E7BABA;
}
&.new .old_line,
&.new .new_line {
background: #CFC;
border-color: #B9ECB9;
}
}
.line_content {
display: block;
white-space: pre;
height: 18px;
margin: 0px;
padding: 0px 0.5em;
border: none;
&.new {
background: #CFD;
}
&.old {
background: #FDD;
}
&.matched {
color: #ccc;
background: #fafafa;
}
&.parallel {
display: table-cell;
overflow: hidden;
width: 50%;
}
}
}
.image {
background: #ddd;
text-align: center;
padding: 30px;
.wrap{
display: inline-block;
}
.frame {
display: inline-block;
background-color: #fff;
line-height: 0;
img{
border: 1px solid #FFF;
background: url('trans_bg.gif');
max-width: 100%;
}
&.deleted {
border: 1px solid $deleted;
}
&.added {
border: 1px solid $added;
}
}
.image-info{
font-size: 12px;
margin: 5px 0 0 0;
color: grey;
}
.view.swipe{
position: relative;
.swipe-frame{
display: block;
margin: auto;
position: relative;
}
.swipe-wrap{
overflow: hidden;
border-left: 1px solid #999;
position: absolute;
display: block;
top: 13px;
right: 7px;
}
.frame{
top: 0;
right: 0;
position: absolute;
&.deleted{
margin: 0;
display: block;
top: 13px;
right: 7px;
}
}
.swipe-bar{
display: block;
height: 100%;
width: 15px;
z-index: 100;
position: absolute;
cursor: pointer;
&:hover{
.top-handle{
background-position: -15px 3px;
}
.bottom-handle{
background-position: -15px -11px;
}
};
.top-handle{
display: block;
height: 14px;
width: 15px;
position: absolute;
top: 0px;
background: url('swipemode_sprites.gif') 0 3px no-repeat;
}
.bottom-handle{
display: block;
height: 14px;
width: 15px;
position: absolute;
bottom: 0px;
background: url('swipemode_sprites.gif') 0 -11px no-repeat;
}
}
} //.view.swipe
.view.onion-skin{
.onion-skin-frame{
display: block;
margin: auto;
position: relative;
}
.frame.added, .frame.deleted {
position: absolute;
display: block;
top: 0px;
left: 0px;
}
.controls{
display: block;
height: 14px;
width: 300px;
z-index: 100;
position: absolute;
bottom: 0px;
left: 50%;
margin-left: -150px;
.drag-track{
display: block;
position: absolute;
left: 12px;
height: 10px;
width: 276px;
background: url('onion_skin_sprites.gif') -4px -20px repeat-x;
}
.dragger {
display: block;
position: absolute;
left: 0px;
top: 0px;
height: 14px;
width: 14px;
background: url('onion_skin_sprites.gif') 0px -34px repeat-x;
cursor: pointer;
}
.transparent {
display: block;
position: absolute;
top: 2px;
right: 0px;
height: 10px;
width: 10px;
background: url('onion_skin_sprites.gif') -2px 0px no-repeat;
}
.opaque {
display: block;
position: absolute;
top: 2px;
left: 0px;
height: 10px;
width: 10px;
background: url('onion_skin_sprites.gif') -2px -10px no-repeat;
}
}
} //.view.onion-skin
}
.view-modes{
padding: 10px;
text-align: center;
background-image: -webkit-gradient(linear, 0 0, 0 30, color-stop(0.066, #eee), to(#dfdfdf));
background-image: -webkit-linear-gradient(#eee 6.6%, #dfdfdf);
background-image: -moz-linear-gradient(#eee 6.6%, #dfdfdf);
background-image: -ms-linear-gradient(#eee 6.6%, #dfdfdf);
background-image: -o-linear-gradient(#eee 6.6%, #dfdfdf);
ul, li{
list-style: none;
margin: 0;
padding: 0;
display: inline-block;
}
li{
color: grey;
border-left: 1px solid #c1c1c1;
padding: 0 12px 0 16px;
cursor: pointer;
&:first-child{
border-left: none;
}
&:hover{
text-decoration: underline;
}
&.active{
&:hover{
text-decoration: none;
}
cursor: default;
color: #333;
}
&.disabled{
display: none;
}
}
}
}
/** COMMIT BLOCK **/
.commit-title{
display: block;

329
app/assets/stylesheets/sections/diff.scss Normal file
View file

@ -0,0 +1,329 @@
.diff-file {
border: 1px solid #CCC;
margin-bottom: 1em;
.diff-header {
@extend .clearfix;
background: #DDD;
border-bottom: 1px solid #CCC;
padding: 5px 5px 5px 10px;
color: #555;
> span {
font-family: $monospace_font;
font-size: 14px;
line-height: 2;
}
.diff-btn-group {
float: right;
.btn {
background-color: #EEE;
color: #666;
font-weight: bolder;
}
}
.commit-short-id {
font-family: $monospace_font;
font-size: smaller;
}
.file-mode {
font-family: $monospace_font;
}
}
.diff-content {
overflow: auto;
overflow-y: hidden;
background: #FFF;
color: #333;
font-size: 12px;
.old {
span.idiff {
background-color: #FAA;
}
}
.new {
span.idiff {
background-color: #AFA;
}
}
table {
width: 100%;
font-family: $monospace_font;
border: none;
margin: 0px;
padding: 0px;
td {
line-height: 18px;
font-size: 12px;
}
}
.old_line, .new_line, .diff_line {
margin: 0px;
padding: 0px;
border: none;
background: #EEE;
color: #666;
padding: 0px 5px;
border-right: 1px solid #ccc;
text-align: right;
min-width: 35px;
max-width: 50px;
width: 35px;
@include user-select(none);
a {
float: left;
width: 35px;
font-weight: normal;
color: #666;
&:hover {
text-decoration: underline;
}
}
&.new {
background: #CFD;
}
&.old {
background: #FDD;
}
}
.diff_line {
padding: 0;
}
.line_holder {
&.old .old_line,
&.old .new_line {
background: #FCC;
border-color: #E7BABA;
}
&.new .old_line,
&.new .new_line {
background: #CFC;
border-color: #B9ECB9;
}
}
.line_content {
display: block;
white-space: pre;
height: 18px;
margin: 0px;
padding: 0px 0.5em;
border: none;
&.new {
background: #CFD;
}
&.old {
background: #FDD;
}
&.matched {
color: #ccc;
background: #fafafa;
}
&.parallel {
display: table-cell;
overflow: hidden;
width: 50%;
}
}
}
.image {
background: #ddd;
text-align: center;
padding: 30px;
.wrap{
display: inline-block;
}
.frame {
display: inline-block;
background-color: #fff;
line-height: 0;
img{
border: 1px solid #FFF;
background: url('trans_bg.gif');
max-width: 100%;
}
&.deleted {
border: 1px solid $deleted;
}
&.added {
border: 1px solid $added;
}
}
.image-info{
font-size: 12px;
margin: 5px 0 0 0;
color: grey;
}
.view.swipe{
position: relative;
.swipe-frame{
display: block;
margin: auto;
position: relative;
}
.swipe-wrap{
overflow: hidden;
border-left: 1px solid #999;
position: absolute;
display: block;
top: 13px;
right: 7px;
}
.frame{
top: 0;
right: 0;
position: absolute;
&.deleted{
margin: 0;
display: block;
top: 13px;
right: 7px;
}
}
.swipe-bar{
display: block;
height: 100%;
width: 15px;
z-index: 100;
position: absolute;
cursor: pointer;
&:hover{
.top-handle{
background-position: -15px 3px;
}
.bottom-handle{
background-position: -15px -11px;
}
};
.top-handle{
display: block;
height: 14px;
width: 15px;
position: absolute;
top: 0px;
background: url('swipemode_sprites.gif') 0 3px no-repeat;
}
.bottom-handle{
display: block;
height: 14px;
width: 15px;
position: absolute;
bottom: 0px;
background: url('swipemode_sprites.gif') 0 -11px no-repeat;
}
}
} //.view.swipe
.view.onion-skin{
.onion-skin-frame{
display: block;
margin: auto;
position: relative;
}
.frame.added, .frame.deleted {
position: absolute;
display: block;
top: 0px;
left: 0px;
}
.controls{
display: block;
height: 14px;
width: 300px;
z-index: 100;
position: absolute;
bottom: 0px;
left: 50%;
margin-left: -150px;
.drag-track{
display: block;
position: absolute;
left: 12px;
height: 10px;
width: 276px;
background: url('onion_skin_sprites.gif') -4px -20px repeat-x;
}
.dragger {
display: block;
position: absolute;
left: 0px;
top: 0px;
height: 14px;
width: 14px;
background: url('onion_skin_sprites.gif') 0px -34px repeat-x;
cursor: pointer;
}
.transparent {
display: block;
position: absolute;
top: 2px;
right: 0px;
height: 10px;
width: 10px;
background: url('onion_skin_sprites.gif') -2px 0px no-repeat;
}
.opaque {
display: block;
position: absolute;
top: 2px;
left: 0px;
height: 10px;
width: 10px;
background: url('onion_skin_sprites.gif') -2px -10px no-repeat;
}
}
} //.view.onion-skin
}
.view-modes{
padding: 10px;
text-align: center;
background-image: -webkit-gradient(linear, 0 0, 0 30, color-stop(0.066, #eee), to(#dfdfdf));
background-image: -webkit-linear-gradient(#eee 6.6%, #dfdfdf);
background-image: -moz-linear-gradient(#eee 6.6%, #dfdfdf);
background-image: -ms-linear-gradient(#eee 6.6%, #dfdfdf);
background-image: -o-linear-gradient(#eee 6.6%, #dfdfdf);
ul, li{
list-style: none;
margin: 0;
padding: 0;
display: inline-block;
}
li{
color: grey;
border-left: 1px solid #c1c1c1;
padding: 0 12px 0 16px;
cursor: pointer;
&:first-child{
border-left: none;
}
&:hover{
text-decoration: underline;
}
&.active{
&:hover{
text-decoration: none;
}
cursor: default;
color: #333;
}
&.disabled{
display: none;
}
}
}
}

39
app/assets/stylesheets/sections/notes.scss
View file

@ -47,13 +47,13 @@ ul.notes {
.discussion-body {
margin-left: 50px;
.file,
.diff-file,
.discussion-hidden,
.notes {
@extend .borders;
background-color: #F9F9F9;
}
.file .notes {
.diff-file .notes {
/* reset */
background: inherit;
border: none;
@ -114,7 +114,7 @@ ul.notes {
}
}
.file .notes_holder {
.diff-file .notes_holder {
font-size: 13px;
line-height: 18px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
@ -184,7 +184,7 @@ ul.notes {
}
}
}
.file .note .note-actions {
.diff-file .note .note-actions {
right: 0;
top: 0;
}
@ -195,7 +195,7 @@ ul.notes {
* Line note button on the side of diffs
*/
.file tr.line_holder {
.diff-file tr.line_holder {
.add-diff-note {
background: url("diff_note_add.png") no-repeat left 0;
height: 22px;
@ -235,22 +235,25 @@ ul.notes {
.reply-btn {
@extend .btn-primary;
}
.file .content tr.line_holder:hover {
&> td.line_content {
background: $hover !important;
border-color: darken($hover, 10%) !important;
.diff-file .diff-content {
tr.line_holder:hover {
&> td.line_content {
background: $hover !important;
border-color: darken($hover, 10%) !important;
}
&> td.new_line,
&> td.old_line {
background: darken($hover, 4%) !important;
border-color: darken($hover, 10%) !important;
}
}
&> td.new_line,
&> td.old_line {
background: darken($hover, 4%) !important;
border-color: darken($hover, 10%) !important;
tr.line_holder:hover > td .line_note_link {
opacity: 1.0;
filter: alpha(opacity=100);
}
}
.file .content tr.line_holder:hover > td .line_note_link {
opacity: 1.0;
filter: alpha(opacity=100);
}
.file,
.diff-file,
.discussion {
.new_note {
margin: 0;

6
app/views/projects/commits/_diffs.html.haml
View file

@ -44,8 +44,8 @@
- file = project.repository.blob_at(@commit.id, diff.new_path)
- file = project.repository.blob_at(@commit.parent_id, diff.old_path) unless file
- next unless file
.file{id: "diff-#{i}"}
.header
.diff-file{id: "diff-#{i}"}
.diff-header
- if diff.deleted_file
%span= diff.old_path
@ -70,7 +70,7 @@
%span.commit-short-id= @commit.short_id(6)
.content
.diff-content
-# Skipp all non non-supported blobs
- next unless file.respond_to?('text?')
- if file.text?

17
app/views/projects/notes/_discussion.html.haml
View file

@ -36,21 +36,17 @@
.discussion-body
- if note.for_diff_line?
- if note.active?
.content
.file= render "projects/notes/discussion_diff", discussion_notes: discussion_notes, note: note
= render "projects/notes/discussion_diff", discussion_notes: discussion_notes, note: note
- else
= link_to 'show outdated discussion', '#', class: 'js-show-outdated-discussion'
%div.hide.outdated-discussion
.content
.notes{ rel: discussion_notes.first.discussion_id }
= render discussion_notes
.notes{ rel: discussion_notes.first.discussion_id }
= render discussion_notes
- else
.content
.notes{ rel: discussion_notes.first.discussion_id }
= render discussion_notes
= render "projects/notes/discussion_reply_button", note: discussion_notes.first
.notes{ rel: discussion_notes.first.discussion_id }
= render discussion_notes
= render "projects/notes/discussion_reply_button", note: discussion_notes.first
-# will be shown when the other one is hidden
.discussion-hidden.content.hide
@ -59,4 +55,3 @@
= link_to "javascript:;", class: "js-details-target js-toggler-target" do
%i.icon-eye-open
Show

45
app/views/projects/notes/_discussion_diff.html.haml
View file

@ -1,24 +1,25 @@
- diff = note.diff
.header
- if diff.deleted_file
%span= diff.old_path
- else
%span= diff.new_path
- if diff.a_mode && diff.b_mode && diff.a_mode != diff.b_mode
%span.file-mode= "#{diff.a_mode} → #{diff.b_mode}"
%br/
.content
%table
- each_diff_line_near(diff, note.diff_file_index, note.line_code) do |line, type, line_code, line_new, line_old|
%tr.line_holder{ id: line_code }
- if type == "match"
%td.old_line= "..."
%td.new_line= "..."
%td.line_content.matched= line
- else
%td.old_line= raw(type == "new" ? " " : line_old)
%td.new_line= raw(type == "old" ? " " : line_new)
%td.line_content{class: "noteable_line #{type} #{line_code}", "line_code" => line_code}= raw "#{line}  "
.diff-file
.diff-header
- if diff.deleted_file
%span= diff.old_path
- else
%span= diff.new_path
- if diff.a_mode && diff.b_mode && diff.a_mode != diff.b_mode
%span.file-mode= "#{diff.a_mode} → #{diff.b_mode}"
%br/
.diff-content
%table
- each_diff_line_near(diff, note.diff_file_index, note.line_code) do |line, type, line_code, line_new, line_old|
%tr.line_holder{ id: line_code }
- if type == "match"
%td.old_line= "..."
%td.new_line= "..."
%td.line_content.matched= line
- else
%td.old_line= raw(type == "new" ? " " : line_old)
%td.new_line= raw(type == "old" ? " " : line_new)
%td.line_content{class: "noteable_line #{type} #{line_code}", "line_code" => line_code}= raw "#{line}  "
- if line_code == note.line_code
= render "projects/notes/diff_notes_with_reply", notes: discussion_notes
- if line_code == note.line_code
= render "projects/notes/diff_notes_with_reply", notes: discussion_notes

42
features/steps/shared/diff_note.rb
View file

@ -2,7 +2,7 @@ module SharedDiffNote
include Spinach::DSL
Given 'I cancel the diff comment' do
within(".file") do
within(".diff-file") do
find(".js-close-discussion-note-form").click
end
end
@ -13,14 +13,14 @@ module SharedDiffNote
end
Given 'I haven\'t written any diff comment text' do
within(".file") do
within(".diff-file") do
fill_in "note[note]", with: ""
end
end
Given 'I leave a diff comment like "Typo, please fix"' do
find('a[data-line-code="586fb7c4e1add2d4d24e27566ed7064680098646_29_14"]').click
within(".file form[rel$='586fb7c4e1add2d4d24e27566ed7064680098646_29_14']") do
within(".diff-file form[rel$='586fb7c4e1add2d4d24e27566ed7064680098646_29_14']") do
fill_in "note[note]", with: "Typo, please fix"
find(".js-comment-button").trigger("click")
sleep 0.05
@ -29,7 +29,7 @@ module SharedDiffNote
Given 'I preview a diff comment text like "Should fix it :smile:"' do
find('a[data-line-code="586fb7c4e1add2d4d24e27566ed7064680098646_29_14"]').click
within(".file form[rel$='586fb7c4e1add2d4d24e27566ed7064680098646_29_14']") do
within(".diff-file form[rel$='586fb7c4e1add2d4d24e27566ed7064680098646_29_14']") do
fill_in "note[note]", with: "Should fix it :smile:"
find(".js-note-preview-button").trigger("click")
end
@ -38,7 +38,7 @@ module SharedDiffNote
Given 'I preview another diff comment text like "DRY this up"' do
find('a[data-line-code="586fb7c4e1add2d4d24e27566ed7064680098646_57_41"]').click
within(".file form[rel$='586fb7c4e1add2d4d24e27566ed7064680098646_57_41']") do
within(".diff-file form[rel$='586fb7c4e1add2d4d24e27566ed7064680098646_57_41']") do
fill_in "note[note]", with: "DRY this up"
find(".js-note-preview-button").trigger("click")
end
@ -53,13 +53,13 @@ module SharedDiffNote
end
Given 'I write a diff comment like ":-1: I don\'t like this"' do
within(".file") do
within(".diff-file") do
fill_in "note[note]", with: ":-1: I don\'t like this"
end
end
Given 'I submit the diff comment' do
within(".file") do
within(".diff-file") do
click_button("Add Comment")
end
end
@ -67,49 +67,49 @@ module SharedDiffNote
Then 'I should not see the diff comment form' do
within(".file") do
within(".diff-file") do
page.should_not have_css("form.new_note")
end
end
Then 'I should not see the diff comment preview button' do
within(".file") do
within(".diff-file") do
page.should have_css(".js-note-preview-button", visible: false)
end
end
Then 'I should not see the diff comment text field' do
within(".file") do
within(".diff-file") do
page.should have_css(".js-note-text", visible: false)
end
end
Then 'I should only see one diff form' do
within(".file") do
within(".diff-file") do
page.should have_css("form.new_note", count: 1)
end
end
Then 'I should see a diff comment form with ":-1: I don\'t like this"' do
within(".file") do
within(".diff-file") do
page.should have_field("note[note]", with: ":-1: I don\'t like this")
end
end
Then 'I should see a diff comment saying "Typo, please fix"' do
within(".file .note") do
within(".diff-file .note") do
page.should have_content("Typo, please fix")
end
end
Then 'I should see a discussion reply button' do
within(".file") do
within(".diff-file") do
page.should have_link("Reply")
end
end
Then 'I should see a temporary diff comment form' do
within(".file") do
within(".diff-file") do
page.should have_css(".js-temp-notes-holder form.new_note")
end
end
@ -119,37 +119,37 @@ module SharedDiffNote
end
Then 'I should see an empty diff comment form' do
within(".file") do
within(".diff-file") do
page.should have_field("note[note]", with: "")
end
end
Then 'I should see the cancel comment button' do
within(".file form") do
within(".diff-file form") do
page.should have_css(".js-close-discussion-note-form", text: "Cancel")
end
end
Then 'I should see the diff comment preview' do
within(".file form") do
within(".diff-file form") do
page.should have_css(".js-note-preview", visible: false)
end
end
Then 'I should see the diff comment edit button' do
within(".file") do
within(".diff-file") do
page.should have_css(".js-note-edit-button", visible: true)
end
end
Then 'I should see the diff comment preview button' do
within(".file") do
within(".diff-file") do
page.should have_css(".js-note-preview-button", visible: true)
end
end
Then 'I should see two separate previews' do
within(".file") do
within(".diff-file") do
page.should have_css(".js-note-preview", visible: true, count: 2)
page.should have_content("Should fix it")
page.should have_content("DRY this up")

2
spec/features/notes_on_merge_requests_spec.rb
View file

@ -166,7 +166,7 @@ describe "On a merge request diff", js: true, focus: true do
end
it "should be removed when canceled" do
within(".file form[rel$='4735dfc552ad7bf15ca468adc3cad9d05b624490_172_185']") do
within(".diff-file form[rel$='4735dfc552ad7bf15ca468adc3cad9d05b624490_172_185']") do
find(".js-close-discussion-note-form").trigger("click")
end