1 files changed, 68 insertions, 0 deletions
diff --git a/app/views/projects/diffs/viewers/_image.html.haml b/app/views/projects/diffs/viewers/_image.html.haml
new file mode 100644
index 00000000000..ea75373581e
--- /dev/null
+++ b/app/views/projects/diffs/viewers/_image.html.haml
@@ -0,0 +1,68 @@
+- blob = diff_file.blob
+- old_blob = diff_file.old_blob
+- blob_raw_path = diff_file_blob_raw_path(diff_file)
+- old_blob_raw_path = diff_file_old_blob_raw_path(diff_file)
+
+- if diff_file.new_file? || diff_file.deleted_file?
+  .image
+    %span.wrap
+      .frame{ class: (diff_file.deleted_file? ? 'deleted' : 'added') }
+        %img{ src: blob_raw_path, alt: diff_file.file_path }
+      %p.image-info= number_to_human_size(blob.size)
+- else
+  .image
+    .two-up.view
+      %span.wrap
+        .frame.deleted
+          %a{ href: namespace_project_blob_path(@project.namespace, @project, tree_join(diff_file.old_content_sha, diff_file.old_path)) }
+            %img{ src: old_blob_raw_path, alt: diff_file.old_path }
+        %p.image-info.hide
+          %span.meta-filesize= number_to_human_size(old_blob.size)
+          |
+          %b W:
+          %span.meta-width
+          |
+          %b H:
+          %span.meta-height
+      %span.wrap
+        .frame.added
+          %a{ href: namespace_project_blob_path(@project.namespace, @project, tree_join(diff_file.content_sha, diff_file.new_path)) }
+            %img{ src: blob_raw_path, alt: diff_file.new_path }
+        %p.image-info.hide
+          %span.meta-filesize= number_to_human_size(blob.size)
+          |
+          %b W:
+          %span.meta-width
+          |
+          %b H:
+          %span.meta-height
+
+    .swipe.view.hide
+      .swipe-frame
+        .frame.deleted
+          %img{ src: old_blob_raw_path, alt: diff_file.old_path }
+        .swipe-wrap
+          .frame.added
+            %img{ src: blob_raw_path, alt: diff_file.new_path }
+        %span.swipe-bar
+          %span.top-handle
+          %span.bottom-handle
+
+    .onion-skin.view.hide
+      .onion-skin-frame
+        .frame.deleted
+          %img{ src: old_blob_raw_path, alt: diff_file.old_path }
+        .frame.added
+          %img{ src: blob_raw_path, alt: diff_file.new_path }
+        .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