Diff with better colors and some spacing on the corners

Gabriel Mazetto
1 parent 44d63b4c
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,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	.line_content {	114	.line_content {
103	display: block;	115	display: block;
104	white-space: pre;	116	white-space: pre;
105	height: 18px;	117	height: 18px;
106	margin: 0px;	118	margin: 0px;
107	- padding: 0px;	119	+ padding: 0px 0.5em;
108	border: none;	120	border: none;
109	&.new {	121	&.new {
110	background: #CFD;	122	background: #CFD;
	@@ -213,7 +213,17 @@ ul.notes {		@@ -213,7 +213,17 @@ ul.notes {
213	.reply-btn {	213	.reply-btn {
214	@extend .btn-primary;	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	.file .content tr.line_holder:hover > td .line_note_link {	227	.file .content tr.line_holder:hover > td .line_note_link {
218	opacity: 1.0;	228	opacity: 1.0;
219	filter: alpha(opacity=100);	229	filter: alpha(opacity=100);
	@@ -4,7 +4,7 @@		@@ -4,7 +4,7 @@
4		4
5	%table.text-file{class: "#{'hide' if too_big}"}	5	%table.text-file{class: "#{'hide' if too_big}"}
6	- each_diff_line(diff, index) do \|line, type, line_code, line_new, line_old\|	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	- if type == "match"	8	- if type == "match"
9	%td.old_line= "..."	9	%td.old_line= "..."
10	%td.new_line= "..."	10	%td.new_line= "..."