Merge pull request #3652 from brodock/beautifull-diff

Diff with better colors and some spacing on the corners

Merge pull request #3652 from brodock/beautifull-diff
Diff with better colors and some spacing on the corners
Dmitriy Zaporozhets
2 parents 9e13160e a2be7956
Showing 3 changed files with 25 additions and 3 deletions Show diff stats
app/assets/stylesheets/sections/commits.scss
app/assets/stylesheets/sections/notes.scss
app/views/commits/_text_file.html.haml
@@ -99,12 +99,24 @@
         }
       }
     }
+    .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;
+      padding: 0px 0.5em;
       border: none;
       &.new {
         background: #CFD;
@@ -213,7 +213,17 @@ ul.notes {
 .reply-btn {
   @extend .btn-primary;
 }
-.file .content tr.line_holder:hover > td { background: $hover !important; }
+.file .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;
+  }
+}
 .file .content tr.line_holder:hover > td .line_note_link {
   opacity: 1.0;
   filter: alpha(opacity=100);
@@ -4,7 +4,7 @@
  
 %table.text-file{class: "#{'hide' if too_big}"}
   - each_diff_line(diff, index) do |line, type, line_code, line_new, line_old|
-    %tr.line_holder{ id: line_code }
+    %tr.line_holder{ id: line_code, class: "#{type}" }
       - if type == "match"
         %td.old_line= "..."
         %td.new_line= "..."
...	...	@@ -99,12 +99,24 @@
99	99	}
100	100	}
101	101	}
	102	+ .line_holder {
	103	+ &.old .old_line,
	104	+ &.old .new_line {
	105	+ background: #FCC;
	106	+ border-color: #E7BABA;
	107	+ }
	108	+ &.new .old_line,
	109	+ &.new .new_line {
	110	+ background: #CFC;
	111	+ border-color: #B9ECB9;
	112	+ }
	113	+ }
102	114	.line_content {
103	115	display: block;
104	116	white-space: pre;
105	117	height: 18px;
106	118	margin: 0px;
107		- padding: 0px;
	119	+ padding: 0px 0.5em;
108	120	border: none;
109	121	&.new {
110	122	background: #CFD;
...	...
...	...	@@ -213,7 +213,17 @@ ul.notes {
213	213	.reply-btn {
214	214	@extend .btn-primary;
215	215	}
216		-.file .content tr.line_holder:hover > td { background: $hover !important; }
	216	+.file .content tr.line_holder:hover {
	217	+ &> td.line_content {
	218	+ background: $hover !important;
	219	+ border-color: darken($hover, 10%) !important;
	220	+ }
	221	+ &> td.new_line,
	222	+ &> td.old_line {
	223	+ background: darken($hover, 4%) !important;
	224	+ border-color: darken($hover, 10%) !important;
	225	+ }
	226	+}
217	227	.file .content tr.line_holder:hover > td .line_note_link {
218	228	opacity: 1.0;
219	229	filter: alpha(opacity=100);
...	...
...	...	@@ -4,7 +4,7 @@
4	4
5	5	%table.text-file{class: "#{'hide' if too_big}"}
6	6	- each_diff_line(diff, index) do \|line, type, line_code, line_new, line_old\|
7		- %tr.line_holder{ id: line_code }
	7	+ %tr.line_holder{ id: line_code, class: "#{type}" }
8	8	- if type == "match"
9	9	%td.old_line= "..."
10	10	%td.new_line= "..."
...	...