Merge pull request #2153 from koenpunt/commit-diff-views

Added swipe view for image diff

7 files changed, 100 insertions, 61 deletions

diff --git a/app/views/commit/show.html.haml b/app/views/commit/show.html.haml
index f920534e03a..6bee6493ac6 100644
--- a/app/views/commit/show.html.haml
+++ b/app/views/commit/show.html.haml
@@ -11,19 +11,7 @@
 
 :javascript
   $(function(){
-    var w, h;
-    $('.diff_file').each(function(){
-      $('.image.diff_removed img', this).on('load', $.proxy(function(event){
-        var w = event.currentTarget.naturalWidth
-          , h = event.currentTarget.naturalHeight;
-        $('.image.diff_removed .image-info', this).append(' | <b>W:</b> ' + w + 'px | <b>H:</b> ' + h + 'px');
-      }, this));
-      $('.image.diff_added img', this).on('load', $.proxy(function(event){
-        var w = event.currentTarget.naturalWidth
-          , h = event.currentTarget.naturalHeight;
-        $('.image.diff_added .image-info', this).append(' | <b>W:</b> ' + w + 'px | <b>H:</b> ' + h + 'px');
-      }, this));
-
+    $('.files .file').each(function(){
+      new CommitFile(this);
     });
-
   });
diff --git a/app/views/commits/_diffs.html.haml b/app/views/commits/_diffs.html.haml
index 7fe45aa25bc..9a9aed39b08 100644
--- a/app/views/commits/_diffs.html.haml
+++ b/app/views/commits/_diffs.html.haml
@@ -12,50 +12,38 @@
 .file-stats
   = render "commits/diff_head", diffs: diffs
 
-- unless @suppress_diff
-  - diffs.each_with_index do |diff, i|
-    - next if diff.diff.empty?
-    - file = (@commit.tree / diff.new_path)
-    - file = (@commit.prev_commit.tree / diff.old_path) unless file
-    - next unless file
-    .diff_file{id: "diff-#{i}"}
-      .diff_file_header
-        - if diff.deleted_file
-          %span= diff.old_path
+.files
+  - unless @suppress_diff
+    - diffs.each_with_index do |diff, i|
+      - next if diff.diff.empty?
+      - file = (@commit.tree / diff.new_path)
+      - file = (@commit.prev_commit.tree / diff.old_path) unless file
+      - next unless file
+      .file{id: "diff-#{i}"}
+        .header
+          - if diff.deleted_file
+            %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
+            - if @commit.prev_commit
+              = link_to project_tree_path(@project, tree_join(@commit.prev_commit_id, diff.new_path)), {:class => 'btn right view-file'} do
+                View file @
+                %span.commit-short-id= @commit.short_id(6)
+          - 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}"
+
+            = link_to project_tree_path(@project, tree_join(@commit.id, diff.new_path)), {:class => 'btn very_small right view-file'} do
               View file @
               %span.commit-short-id= @commit.short_id(6)
-        - 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}"
-
-          = link_to project_tree_path(@project, tree_join(@commit.id, diff.new_path)), {:class => 'btn very_small right view-commit'} do
-            View file @
-            %span.commit-short-id= @commit.short_id(6)
 
-        %br/
-      .diff_file_content
-        -# Skip all non-supported blobs
-        - next unless file.respond_to?('text?')
-        - if file.text?
-          = render "commits/text_diff", diff: diff, index: i
-        - elsif file.image?
-          - old_file = (@commit.prev_commit.tree / diff.old_path) if !@commit.prev_commit.nil?
-          - if diff.renamed_file || diff.new_file || diff.deleted_file
-            .diff_file_content_image
-              .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}"
+        .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 !@commit.prev_commit.nil?
+            = render "commits/image", diff: diff, old_file: old_file, file: file, index: i
           - else
-            .diff_file_content_image.img_compared
-              .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
+            %p.nothing_here_message No preview for this file type
diff --git a/app/views/commits/_image.html.haml b/app/views/commits/_image.html.haml
new file mode 100644
index 00000000000..db02fa333b9
--- /dev/null
+++ b/app/views/commits/_image.html.haml
@@ -0,0 +1,63 @@
+- if diff.renamed_file || diff.new_file || diff.deleted_file
+  .image
+    %span.wrap
+      .frame{class: image_diff_class(diff)}
+        %img{src: "data:#{file.mime_type};base64,#{Base64.encode64(file.data)}"}
+      %p.image-info= "#{number_to_human_size file.size}"
+- else
+  .image
+    %div.two-up.view
+      %span.wrap
+        .frame.deleted
+          %a{href: project_tree_path(@project, tree_join(@commit.id, diff.old_path))}
+            %img{src: "data:#{old_file.mime_type};base64,#{Base64.encode64(old_file.data)}"}
+        %p.image-info.hide
+          %span.meta-filesize= "#{number_to_human_size old_file.size}"
+          |
+          %b W:
+          %span.meta-width 
+          |
+          %b H:
+          %span.meta-height
+      %span.wrap
+        .frame.added
+          %a{href: project_tree_path(@project, tree_join(@commit.id, diff.new_path))}
+            %img{src: "data:#{file.mime_type};base64,#{Base64.encode64(file.data)}"}
+        %p.image-info.hide
+          %span.meta-filesize= "#{number_to_human_size file.size}"
+          |
+          %b W:
+          %span.meta-width 
+          |
+          %b H:
+          %span.meta-height
+
+    %div.swipe.view.hide
+      .swipe-frame
+        .frame.deleted
+          %img{src: "data:#{old_file.mime_type};base64,#{Base64.encode64(old_file.data)}"}
+        .swipe-wrap
+          .frame.added
+            %img{src: "data:#{file.mime_type};base64,#{Base64.encode64(file.data)}"}
+        %span.swipe-bar
+          %span.top-handle
+          %span.bottom-handle
+
+    %div.onion-skin.view.hide
+      .onion-skin-frame
+        .frame.deleted
+          %img{src: "data:#{old_file.mime_type};base64,#{Base64.encode64(old_file.data)}"}
+        .frame.added
+          %img{src: "data:#{file.mime_type};base64,#{Base64.encode64(file.data)}"}
+        .controls
+          .transparent
+          .drag-track
+            .dragger{:style => "left: 0px;"}
+          .opaque
+
+
+  .view-modes.hide
+    %ul.view-modes-menu
+      %li.two-up{data: {mode: 'two-up'}} 2-up
+      %li.swipe{data: {mode: 'swipe'}} Swipe
+      %li.onion-skin{data: {mode: 'onion-skin'}} Onion skin
\ No newline at end of file
diff --git a/app/views/commits/_text_diff.html.haml b/app/views/commits/_text_file.html.haml
index 8afad96bde2..760fd07ed8b 100644
--- a/app/views/commits/_text_diff.html.haml
+++ b/app/views/commits/_text_file.html.haml
@@ -2,7 +2,7 @@
 - if too_big
   %a.supp_diff_link Diff suppressed. Click to show
 
-%table{class: "#{'hide' if too_big}"}
+%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 }
       - if type == "match"
diff --git a/app/views/commits/show.html.haml b/app/views/commits/show.html.haml
index 9451a038df0..d180b8ec426 100644
--- a/app/views/commits/show.html.haml
+++ b/app/views/commits/show.html.haml
@@ -5,7 +5,7 @@
     = breadcrumbs
 
 %div{id: dom_id(@project)}
-  #commits_list= render "commits"
+  #commits-list= render "commits"
 .clear
 .loading{ style: "display:none;"}
 
diff --git a/app/views/notes/_discussion.html.haml b/app/views/notes/_discussion.html.haml
index a9a11fc2d7e..24cb4228174 100644
--- a/app/views/notes/_discussion.html.haml
+++ b/app/views/notes/_discussion.html.haml
@@ -38,7 +38,7 @@
     - if note.for_diff_line?
       - if note.diff
         .content
-          .diff_file= render "notes/discussion_diff", discussion_notes: discussion_notes, note: note
+          .file= render "notes/discussion_diff", discussion_notes: discussion_notes, note: note
       - else
         = link_to 'show outdated discussion', '#', class: 'js-show-outdated-discussion'
         %div.hide.outdated-discussion
diff --git a/app/views/notes/_discussion_diff.html.haml b/app/views/notes/_discussion_diff.html.haml
index 93ab59c72c5..790b77333d5 100644
--- a/app/views/notes/_discussion_diff.html.haml
+++ b/app/views/notes/_discussion_diff.html.haml
@@ -1,5 +1,5 @@
 - diff = note.diff
-.diff_file_header
+.header
   - if diff.deleted_file
     %span= diff.old_path
   - else
@@ -7,7 +7,7 @@
     - if diff.a_mode && diff.b_mode && diff.a_mode != diff.b_mode
       %span.file-mode= "#{diff.a_mode} → #{diff.b_mode}"
   %br/
-.diff_file_content
+.content
   %table
     - each_diff_line(diff, note.diff_file_index) do |line, type, line_code, line_new, line_old|
       %tr.line_holder{ id: line_code }