Merge pull request #2011 from koenpunt/extended-image-diff

Optimized commit diff views, now showing file size and file mode changes

app/assets/stylesheets/main.scss

@@ -11,6 +11,7 @@ $hover_border: #ADF;
 
 /** GitLab Fonts **/
 @font-face { font-family: Korolev; src: font-url('korolev-medium-compressed.otf'); }
+$monospace: 'Menlo', 'Liberation Mono', 'Consolas', 'Courier New', 'andale mono', 'lucida console', monospace;
 
 /** MIXINS **/
 @mixin shade {

app/assets/stylesheets/sections/commits.scss

@@ -74,16 +74,33 @@
   margin-bottom:1em;
 
   .diff_file_header {
-    padding:7px 5px;
-    border-bottom:1px solid #CCC;
+    @extend .clearfix;
+    padding: 5px 5px 5px 10px;
+    color: #555;
+    border-bottom:1px solid #D8D8D8;
     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;
+    > span {
+      font-family: $monospace;
+      font-size:12px;
+      line-height: 30px;
+    }
+    
+    a.view-commit{
+      font-weight: bold;
+    }
+    
+    .commit-short-id{
+      font-family: $monospace;
+      font-size: smaller;
+    }
+    
+    .file-mode{
+      font-family: $monospace;
     }
   }
   .diff_file_content {
@@ -92,7 +109,7 @@
     background:#fff;
     color:#333;
     font-size: 12px;
-    font-family: 'Menlo', 'Liberation Mono', 'Consolas', 'Courier New', 'andale mono','lucida console',monospace;
+    font-family: $monospace;
     .old{
       span.idiff{
         background-color:#FAA;
@@ -113,22 +130,31 @@
   .diff_file_content_image {
     background:#eee;
     text-align:center;
-    img {
+    .image {
+      display: inline-block;
       margin:50px;
       padding:1px;
       max-width:400px;
 
-      &.diff_image_removed {
-        border: 1px solid #C00;
+      &.diff_removed {
+        img{
+          border: 1px solid #C00;
+        }
       }
 
-      &.diff_image_added {
-        border: 1px solid #0C0;;
+      &.diff_added {
+        img{
+          border: 1px solid #0C0;
+        }
+      }
+      
+      .image-info{
+        margin: 5px 0 0 0;
       }
     }
 
     &.img_compared {
-      img {
+      .image {
         max-width:300px;
       }
     }
@@ -225,7 +251,7 @@
     float:left;
     @extend .lined;
     min-width:65px;
-    font-family: 'Menlo', 'Liberation Mono', 'Consolas', 'Courier New', 'andale mono','lucida console',monospace;
+    font-family: $monospace;
   }
 
   .commit-author-name {
@@ -237,17 +263,29 @@
 }
 
 .diff_file_header a,
-.file_stats a {
-  color:$style_color;
+.file-stats a {
+  color: $style_color;
 }
 
-.file_stats {
-  span {
-    img {
-      width:14px;
-      float:left;
-      margin-right:6px;
-      padding:2px 0;
+.file-stats {
+  .new-file{
+    i{
+      color: #1BCF00;
+    }
+  }
+  .renamed-file{
+    i{
+      color: #FE9300;
+    }
+  }
+  .deleted-file{
+    i{
+      color: #FF0000;
+    }
+  }
+  .edit-file{
+    i{
+      color: #555;
     }
   }
 }
@@ -259,5 +297,5 @@
   font-size:13px;
   background: #474D57;
   color:#fff;
-  font-family: 'Menlo', 'Liberation Mono', 'Consolas', 'Courier New', 'andale mono','lucida console',monospace;
+  font-family: $monospace;
 }

app/helpers/commits_helper.rb

@@ -57,9 +57,9 @@ module CommitsHelper
 
   def image_diff_class(diff)
     if diff.deleted_file
-      "diff_image_removed"
+      "diff_removed"
     elsif diff.new_file
-      "diff_image_added"
+      "diff_added"
     else
       nil
     end

app/views/commits/_diff_head.html.haml

 %ul.bordered-list
-  - diffs.each do |diff|
+  - diffs.each_with_index do |diff, i|
     %li
       - if diff.deleted_file
-        %span.removed_file
-          %a{href: "##{diff.old_path}"}
+        %span.deleted-file
+          %a{href: "#diff-#{i}"}
+            %i.icon-minus
             = diff.old_path
-            = image_tag "diff_file_delete.png"
       - elsif diff.renamed_file
-        %span.moved_file
-          %a{href: "##{diff.new_path}"}
+        %span.renamed-file
+          %a{href: "#diff-#{i}"}
+            %i.icon-minus
             = diff.old_path
             = "->"
             = diff.new_path
-            = image_tag "diff_file_notice.png"
       - elsif diff.new_file
-        %span.new_file
-          %a{href: "##{diff.new_path}"}
+        %span.new-file
+          %a{href: "#diff-#{i}"}
+            %i.icon-plus
             = diff.new_path
-            = image_tag "diff_file_add.png"
       - else
-        %span.edit_file
-          %a{href: "##{diff.new_path}"}
+        %span.edit-file
+          %a{href: "#diff-#{i}"}
+            %i.icon-adjust
             = diff.new_path
-            = image_tag "diff_file_info.png"
 

app/views/commits/_diffs.html.haml

@@ -9,7 +9,7 @@
 
 %p.cgray
   Showing #{pluralize(diffs.count, "changed file")}
-.file_stats
+.file-stats
   = render "commits/diff_head", diffs: diffs
 
 - unless @suppress_diff
@@ -18,30 +18,44 @@
     - file = (@commit.tree / diff.new_path)
     - file = (@commit.prev_commit.tree / diff.old_path) unless file
     - next unless file
-    .diff_file
+    .diff_file{id: "diff-#{i}"}
       .diff_file_header
         - if diff.deleted_file
-          %i.icon-file
-          %span{id: "#{diff.old_path}"}= diff.old_path
+          %span= diff.old_path
+          
+          - if @commit.prev_commit
+            = link_to project_tree_path(@project, tree_join(@commit.prev_commit_id, diff.new_path)), {:class => 'btn right view-commit'} do
+              View file @
+              %span.commit-short-id= @commit.short_id(6)
         - else
-          = link_to project_tree_path(@project, tree_join(@commit.id, diff.new_path)) do
-            %i.icon-file
-            %span{id: "#{diff.new_path}"}= diff.new_path
+          %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}"
+          
+          = link_to project_tree_path(@project, tree_join(@commit.id, diff.new_path)), {:class => 'btn right view-commit'} do
+            View file @
+            %span.commit-short-id= @commit.short_id(6)
+            
         %br/
       .diff_file_content
         -# Skipp all non non-supported blobs
         - next unless file.respond_to?('text?')
-
         - if file.text?
           = render "commits/text_file", diff: diff, index: i
         - elsif file.image?
+          - old_file = (@commit.prev_commit.tree / diff.old_path)
           - if diff.renamed_file || diff.new_file || diff.deleted_file
             .diff_file_content_image
-              %img{class: image_diff_class(diff), src: "data:#{file.mime_type};base64,#{Base64.encode64(file.data)}"}
+              .image{class: image_diff_class(diff)}
+                %img{src: "data:#{file.mime_type};base64,#{Base64.encode64(file.data)}"}
+                %div.image-info= "#{number_to_human_size file.size}"
           - else
-            - old_file = (@commit.prev_commit.tree / diff.old_path)
             .diff_file_content_image.img_compared
-              %img{class: "diff_image_removed", src: "data:#{file.mime_type};base64,#{Base64.encode64(old_file.data)}"}
-              %img{class: "diff_image_added", src: "data:#{file.mime_type};base64,#{Base64.encode64(file.data)}"}
+              .image.diff_removed 
+                %img{src: "data:#{file.mime_type};base64,#{Base64.encode64(old_file.data)}"}
+                %div.image-info= "#{number_to_human_size file.size}"
+              .image.diff_added 
+                %img{src: "data:#{file.mime_type};base64,#{Base64.encode64(file.data)}"}
+                %div.image-info= "#{number_to_human_size file.size}"
         - else
           %p.nothing_here_message No preview for this file type