Improved Commit diff -> Images. Red border for removed & green for added images

randx
1 parent b826a684
Showing 4 changed files with 125 additions and 101 deletions Show diff stats
app/assets/stylesheets/common.scss
app/assets/stylesheets/sections/commits.scss
app/helpers/commits_helper.rb
app/views/commits/_diffs.html.haml
@@ -450,106 +450,6 @@ input.git_clone_url {
   background:#fff !important;
 }
-/**
- * 
- * COMMIT SHOw
- *
- */
-.diff_file {
-  border:1px solid #CCC;
-  margin-bottom:1em;
-
-  .diff_file_header {
-    padding:7px 5px;
-    border-bottom:1px solid #CCC;
-    background: #eee;
-    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: -o-linear-gradient(#eee 6.6%, #dfdfdf);
-
-    span { 
-      font-size:14px;
-    }
-  }
-  .diff_file_content {
-    overflow:auto;
-    overflow-y:hidden;
-    background:#fff;
-    color:#333;
-    font-size: 12px;
-    font-family: 'Menlo', 'Courier New', 'andale mono','lucida console',monospace;
-  }
-  .diff_file_content_image {
-    background:#eee;
-    text-align:center;
-    img {
-      padding:50px;
-      max-width:400px;
-    }
-  }
-}
-
-.diff_file_content{
-  table { 
-    border:none;
-    margin:0px;
-    padding:0px;
-    tr {
-      td { 
-        font-size:12px;
-      }
-    }
-  }
-  .old_line, .new_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:35px;
-    width:35px;
-    moz-user-select: none;
-    -khtml-user-select: none;
-    user-select: none;
-    a { 
-      float:left;
-      width:35px;
-      font-weight:normal;
-      color:#666;
-      &:hover { 
-        text-decoration:underline;
-      }
-    }
-  }
-  .line_content { 
-    white-space:pre; 
-    height:14px;
-    margin:0px;
-    padding:0px;
-    border:none;
-    &.new { 
-      background: #CFD;
-    }
-    &.old { 
-      background: #FDD;
-    }
-    &.matched { 
-      color:#ccc;
-      background:#fafafa;
-    }
-  }
-}
-
-/** COMMIT BLOCK **/
-.commit-title{display: block;}
-.commit-title{margin-bottom: 10px}
-.commit-author, .commit-committer{display: block;color: #999; font-weight: normal; font-style: italic;}
-.commit-author strong, .commit-committer strong{font-weight: bold; font-style: normal;}
 /** bordered list **/
 ul.bordered-list { 
@@ -52,3 +52,117 @@
     }
   }
 }
+
+/**
+ * 
+ * COMMIT SHOw
+ *
+ */
+.diff_file {
+  border:1px solid #CCC;
+  margin-bottom:1em;
+
+  .diff_file_header {
+    padding:7px 5px;
+    border-bottom:1px solid #CCC;
+    background: #eee;
+    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: -o-linear-gradient(#eee 6.6%, #dfdfdf);
+
+    span { 
+      font-size:14px;
+    }
+  }
+  .diff_file_content {
+    overflow:auto;
+    overflow-y:hidden;
+    background:#fff;
+    color:#333;
+    font-size: 12px;
+    font-family: 'Menlo', 'Courier New', 'andale mono','lucida console',monospace;
+  }
+  .diff_file_content_image {
+    background:#eee;
+    text-align:center;
+    img {
+      margin:50px;
+      padding:1px;
+      max-width:400px;
+    }
+    &.diff_image_removed { 
+      img {
+        border: 1px solid #C00;
+      }
+    }
+
+    &.diff_image_added { 
+      img {
+        border: 1px solid #0C0;;
+      }
+    }
+  }
+}
+
+.diff_file_content{
+  table { 
+    border:none;
+    margin:0px;
+    padding:0px;
+    tr {
+      td { 
+        font-size:12px;
+      }
+    }
+  }
+  .old_line, .new_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:35px;
+    width:35px;
+    moz-user-select: none;
+    -khtml-user-select: none;
+    user-select: none;
+    a { 
+      float:left;
+      width:35px;
+      font-weight:normal;
+      color:#666;
+      &:hover { 
+        text-decoration:underline;
+      }
+    }
+  }
+  .line_content { 
+    white-space:pre; 
+    height:14px;
+    margin:0px;
+    padding:0px;
+    border:none;
+    &.new { 
+      background: #CFD;
+    }
+    &.old { 
+      background: #FDD;
+    }
+    &.matched { 
+      color:#ccc;
+      background:#fafafa;
+    }
+  }
+}
+
+/** COMMIT BLOCK **/
+.commit-title{display: block;}
+.commit-title{margin-bottom: 10px}
+.commit-author, .commit-committer{display: block;color: #999; font-weight: normal; font-style: italic;}
+.commit-author strong, .commit-committer strong{font-weight: bold; font-style: normal;}
+
@@ -86,4 +86,14 @@ module CommitsHelper
       end
     end
   end
+
+  def image_diff_class(diff)
+    if diff.deleted_file
+      "diff_image_removed"
+    elsif diff.new_file
+      "diff_image_added"
+    else
+      nil
+    end
+  end
 end
@@ -34,7 +34,7 @@
         - if file.text?
           = render "commits/text_file", :diff => diff, :index => i
         - elsif file.image?
-          .diff_file_content_image
+          .diff_file_content_image{:class => image_diff_class(diff)}
             %img{:src => "data:#{file.mime_type};base64,#{Base64.encode64(file.data)}"}
         - else
           %p
	@@ -450,106 +450,6 @@ input.git_clone_url {		@@ -450,106 +450,6 @@ input.git_clone_url {
450	background:#fff !important;	450	background:#fff !important;
451	}	451	}
452		452
453	-/**
454	- *
455	- * COMMIT SHOw
456	- *
457	- */
458	-.diff_file {
459	- border:1px solid #CCC;
460	- margin-bottom:1em;
461	-
462	- .diff_file_header {
463	- padding:7px 5px;
464	- border-bottom:1px solid #CCC;
465	- background: #eee;
466	- background-image: -webkit-gradient(linear, 0 0, 0 30, color-stop(0.066, #eee), to(#dfdfdf));
467	- background-image: -webkit-linear-gradient(#eee 6.6%, #dfdfdf);
468	- background-image: -moz-linear-gradient(#eee 6.6%, #dfdfdf);
469	- background-image: -o-linear-gradient(#eee 6.6%, #dfdfdf);
470	-
471	- span {
472	- font-size:14px;
473	- }
474	- }
475	- .diff_file_content {
476	- overflow:auto;
477	- overflow-y:hidden;
478	- background:#fff;
479	- color:#333;
480	- font-size: 12px;
481	- font-family: 'Menlo', 'Courier New', 'andale mono','lucida console',monospace;
482	- }
483	- .diff_file_content_image {
484	- background:#eee;
485	- text-align:center;
486	- img {
487	- padding:50px;
488	- max-width:400px;
489	- }
490	- }
491	-}
492	-
493	-.diff_file_content{
494	- table {
495	- border:none;
496	- margin:0px;
497	- padding:0px;
498	- tr {
499	- td {
500	- font-size:12px;
501	- }
502	- }
503	- }
504	- .old_line, .new_line {
505	- margin:0px;
506	- padding:0px;
507	- border:none;
508	- background:#EEE;
509	- color:#666;
510	- padding: 0px 5px;
511	- border-right: 1px solid #ccc;
512	- text-align:right;
513	- min-width:35px;
514	- max-width:35px;
515	- width:35px;
516	- moz-user-select: none;
517	- -khtml-user-select: none;
518	- user-select: none;
519	- a {
520	- float:left;
521	- width:35px;
522	- font-weight:normal;
523	- color:#666;
524	- &:hover {
525	- text-decoration:underline;
526	- }
527	- }
528	- }
529	- .line_content {
530	- white-space:pre;
531	- height:14px;
532	- margin:0px;
533	- padding:0px;
534	- border:none;
535	- &.new {
536	- background: #CFD;
537	- }
538	- &.old {
539	- background: #FDD;
540	- }
541	- &.matched {
542	- color:#ccc;
543	- background:#fafafa;
544	- }
545	- }
546	-}
547	-
548	-/ COMMIT BLOCK /
549	-.commit-title{display: block;}
550	-.commit-title{margin-bottom: 10px}
551	-.commit-author, .commit-committer{display: block;color: #999; font-weight: normal; font-style: italic;}
552	-.commit-author strong, .commit-committer strong{font-weight: bold; font-style: normal;}
553		453
554	/ bordered list /	454	/ bordered list /
555	ul.bordered-list {	455	ul.bordered-list {
	@@ -52,3 +52,117 @@		@@ -52,3 +52,117 @@
52	}	52	}
53	}	53	}
54	}	54	}
		55	+
		56	+/**
		57	+ *
		58	+ * COMMIT SHOw
		59	+ *
		60	+ */
		61	+.diff_file {
		62	+ border:1px solid #CCC;
		63	+ margin-bottom:1em;
		64	+
		65	+ .diff_file_header {
		66	+ padding:7px 5px;
		67	+ border-bottom:1px solid #CCC;
		68	+ background: #eee;
		69	+ background-image: -webkit-gradient(linear, 0 0, 0 30, color-stop(0.066, #eee), to(#dfdfdf));
		70	+ background-image: -webkit-linear-gradient(#eee 6.6%, #dfdfdf);
		71	+ background-image: -moz-linear-gradient(#eee 6.6%, #dfdfdf);
		72	+ background-image: -o-linear-gradient(#eee 6.6%, #dfdfdf);
		73	+
		74	+ span {
		75	+ font-size:14px;
		76	+ }
		77	+ }
		78	+ .diff_file_content {
		79	+ overflow:auto;
		80	+ overflow-y:hidden;
		81	+ background:#fff;
		82	+ color:#333;
		83	+ font-size: 12px;
		84	+ font-family: 'Menlo', 'Courier New', 'andale mono','lucida console',monospace;
		85	+ }
		86	+ .diff_file_content_image {
		87	+ background:#eee;
		88	+ text-align:center;
		89	+ img {
		90	+ margin:50px;
		91	+ padding:1px;
		92	+ max-width:400px;
		93	+ }
		94	+ &.diff_image_removed {
		95	+ img {
		96	+ border: 1px solid #C00;
		97	+ }
		98	+ }
		99	+
		100	+ &.diff_image_added {
		101	+ img {
		102	+ border: 1px solid #0C0;;
		103	+ }
		104	+ }
		105	+ }
		106	+}
		107	+
		108	+.diff_file_content{
		109	+ table {
		110	+ border:none;
		111	+ margin:0px;
		112	+ padding:0px;
		113	+ tr {
		114	+ td {
		115	+ font-size:12px;
		116	+ }
		117	+ }
		118	+ }
		119	+ .old_line, .new_line {
		120	+ margin:0px;
		121	+ padding:0px;
		122	+ border:none;
		123	+ background:#EEE;
		124	+ color:#666;
		125	+ padding: 0px 5px;
		126	+ border-right: 1px solid #ccc;
		127	+ text-align:right;
		128	+ min-width:35px;
		129	+ max-width:35px;
		130	+ width:35px;
		131	+ moz-user-select: none;
		132	+ -khtml-user-select: none;
		133	+ user-select: none;
		134	+ a {
		135	+ float:left;
		136	+ width:35px;
		137	+ font-weight:normal;
		138	+ color:#666;
		139	+ &:hover {
		140	+ text-decoration:underline;
		141	+ }
		142	+ }
		143	+ }
		144	+ .line_content {
		145	+ white-space:pre;
		146	+ height:14px;
		147	+ margin:0px;
		148	+ padding:0px;
		149	+ border:none;
		150	+ &.new {
		151	+ background: #CFD;
		152	+ }
		153	+ &.old {
		154	+ background: #FDD;
		155	+ }
		156	+ &.matched {
		157	+ color:#ccc;
		158	+ background:#fafafa;
		159	+ }
		160	+ }
		161	+}
		162	+
		163	+/ COMMIT BLOCK /
		164	+.commit-title{display: block;}
		165	+.commit-title{margin-bottom: 10px}
		166	+.commit-author, .commit-committer{display: block;color: #999; font-weight: normal; font-style: italic;}
		167	+.commit-author strong, .commit-committer strong{font-weight: bold; font-style: normal;}
		168	+
	@@ -86,4 +86,14 @@ module CommitsHelper		@@ -86,4 +86,14 @@ module CommitsHelper
86	end	86	end
87	end	87	end
88	end	88	end
		89	+
		90	+ def image_diff_class(diff)
		91	+ if diff.deleted_file
		92	+ "diff_image_removed"
		93	+ elsif diff.new_file
		94	+ "diff_image_added"
		95	+ else
		96	+ nil
		97	+ end
		98	+ end
89	end	99	end
	@@ -34,7 +34,7 @@		@@ -34,7 +34,7 @@
34	- if file.text?	34	- if file.text?
35	= render "commits/text_file", :diff => diff, :index => i	35	= render "commits/text_file", :diff => diff, :index => i
36	- elsif file.image?	36	- elsif file.image?
37	- .diff_file_content_image	37	+ .diff_file_content_image{:class => image_diff_class(diff)}
38	%img{:src => "data:#{file.mime_type};base64,#{Base64.encode64(file.data)}"}	38	%img{:src => "data:#{file.mime_type};base64,#{Base64.encode64(file.data)}"}
39	- else	39	- else
40	%p	40	%p