Updated commit diff view with some minor visual modifications

Prepared diff view for multiple view modes

Converted commits.js to coffeescript
image info in separate coffeescript file

Added swipe view mode

Added onion skin viewMode

app/assets/javascripts/commit/file.js.coffee

+class CommitFile
+  
+  constructor: (file) ->
+    if $('.image', file).length
+      new ImageFile(file)
+        
+this.CommitFile = CommitFile
\ No newline at end of file

app/assets/javascripts/commit/image-file.js.coffee

+class ImageFile
+
+  # Width where images must fits in, for 2-up this gets divided by 2
+  @availWidth = 900
+  @viewModes = ['two-up', 'swipe']
+
+  constructor: (@file) ->
+    # Determine if old and new file has same dimensions, if not show 'two-up' view
+    this.requestImageInfo $('.two-up.view .frame.deleted img', @file), (deletedWidth, deletedHeight) =>
+      this.requestImageInfo $('.two-up.view .frame.added img', @file), (width, height) =>
+        if width == deletedWidth && height == deletedHeight
+          this.initViewModes()
+        else
+          this.initView('two-up')
+
+  initViewModes: ->
+    viewMode = ImageFile.viewModes[0]
+
+    $('.view-modes', @file).removeClass 'hide'
+    $('.view-modes-menu', @file).on 'click', 'li', (event) =>
+      unless $(event.currentTarget).hasClass('active')
+        this.activateViewMode(event.currentTarget.className)
+
+    this.activateViewMode(viewMode)
+
+  activateViewMode: (viewMode) ->
+    $('.view-modes-menu li', @file)
+      .removeClass('active')
+      .filter(".#{viewMode}").addClass 'active'
+    $(".view:visible:not(.#{viewMode})", @file).fadeOut 200, =>
+      $(".view.#{viewMode}", @file).fadeIn(200)
+      this.initView viewMode
+
+  initView: (viewMode) ->
+    this.views[viewMode].call(this)
+
+  prepareFrames = (view) ->
+    maxWidth = 0
+    maxHeight = 0
+    $('.frame', view).each (index, frame) =>
+      width = $(frame).width()
+      height = $(frame).height()
+      maxWidth = if width > maxWidth then width else maxWidth
+      maxHeight = if height > maxHeight then height else maxHeight
+    .css
+      width: maxWidth
+      height: maxHeight
+    
+    [maxWidth, maxHeight]
+
+  views: 
+    'two-up': ->
+      $('.two-up.view .wrap', @file).each (index, wrap) =>
+        $('img', wrap).each ->
+          currentWidth = $(this).width()
+          if currentWidth > ImageFile.availWidth / 2
+            $(this).width ImageFile.availWidth / 2
+
+        this.requestImageInfo $('img', wrap), (width, height) ->
+          $('.image-info .meta-width', wrap).text "#{width}px"
+          $('.image-info .meta-height', wrap).text "#{height}px"
+          $('.image-info', wrap).removeClass('hide')
+
+    'swipe': ->
+      maxWidth = 0
+      maxHeight = 0
+
+      $('.swipe.view', @file).each (index, view) =>
+
+        [maxWidth, maxHeight] = prepareFrames(view)
+
+        $('.swipe-frame', view).css
+          width: maxWidth + 16
+          height: maxHeight + 28
+
+        $('.swipe-wrap', view).css
+          width: maxWidth + 1
+          height: maxHeight + 2
+
+        $('.swipe-bar', view).css
+          left: 0
+        .draggable
+          axis: 'x'
+          containment: 'parent'
+          drag: (event) ->
+            $('.swipe-wrap', view).width (maxWidth + 1) - $(this).position().left
+          stop: (event) ->
+            $('.swipe-wrap', view).width (maxWidth + 1) - $(this).position().left
+
+    'onion-skin': ->
+      maxWidth = 0
+      maxHeight = 0
+
+      dragTrackWidth = $('.drag-track', @file).width() - $('.dragger', @file).width()
+
+      $('.onion-skin.view', @file).each (index, view) =>
+
+        [maxWidth, maxHeight] = prepareFrames(view)
+
+        $('.onion-skin-frame', view).css
+          width: maxWidth + 16
+          height: maxHeight + 28
+
+        $('.swipe-wrap', view).css
+          width: maxWidth + 1
+          height: maxHeight + 2
+        
+        $('.dragger', view).css
+          left: dragTrackWidth
+        .draggable
+          axis: 'x'
+          containment: 'parent'
+          drag: (event) ->
+            $('.frame.added', view).css('opacity', $(this).position().left / dragTrackWidth)
+          stop: (event) ->
+            $('.frame.added', view).css('opacity', $(this).position().left / dragTrackWidth)
+        
+      
+
+  requestImageInfo: (img, callback) ->
+    domImg = img.get(0)
+    if domImg.complete
+      callback.call(this, domImg.naturalWidth, domImg.naturalHeight)
+    else
+      img.on 'load', =>
+        callback.call(this, domImg.naturalWidth, domImg.naturalHeight)
+
+this.ImageFile = ImageFile
\ No newline at end of file

app/assets/javascripts/commits.js

-var CommitsList = {
-  ref:null,
-  limit:0,
-  offset:0,
-  disable:false,
-
-  init:
-    function(ref, limit) {
-      $(".day-commits-table li.commit").live('click', function(e){
-        if(e.target.nodeName != "A") {
-          location.href = $(this).attr("url");
-          e.stopPropagation();
-          return false;
-        }
-      });
-
-      this.ref=ref;
-      this.limit=limit;
-      this.offset=limit;
-      this.initLoadMore();
-      $('.loading').show();
-    },
-
-  getOld:
-    function() {
-      $('.loading').show();
-      $.ajax({
-        type: "GET",
-        url: location.href,
-        data: "limit=" + this.limit + "&offset=" + this.offset + "&ref=" + this.ref,
-        complete: function(){ $('.loading').hide()},
-        dataType: "script"});
-    },
-
-  append:
-    function(count, html) {
-      $("#commits_list").append(html);
-      if(count > 0) {
-        this.offset += count;
-      } else { 
-        this.disable = true;
-      }
-    },
-
-  initLoadMore:
-    function() {
-      $(document).endlessScroll({
-        bottomPixels: 400,
-        fireDelay: 1000,
-        fireOnce:true,
-        ceaseFire: function() { 
-          return CommitsList.disable;
-        },
-        callback: function(i) {
-          CommitsList.getOld();
-        }
-      });
-    }
-}

app/assets/javascripts/commits.js.coffee

+class CommitsList
+  @data =
+    ref: null
+    limit: 0
+    offset: 0
+  @disable = false
+  
+  @showProgress: ->
+    $('.loading').show()
+    
+  @hideProgress: ->
+    $('.loading').hide()
+  
+  @init: (ref, limit) ->
+    $(".day-commits-table li.commit").live 'click', (event) ->
+      if event.target.nodeName != "A"
+        location.href = $(this).attr("url")
+        e.stopPropagation()
+        return false
+
+    @data.ref = ref
+    @data.limit = limit
+    @data.offset = limit
+    
+    this.initLoadMore()
+    this.showProgress();
+
+  @getOld: ->
+    this.showProgress()
+    $.ajax
+      type: "GET"
+      url: location.href
+      data: @data
+      complete: this.hideProgress
+      dataType: "script"
+
+  @append: (count, html) ->
+    $("#commits-list").append(html)
+    if count > 0
+      @data.offset += count
+    else
+      @disable = true
+  
+  @initLoadMore: -> 
+    $(document).endlessScroll
+      bottomPixels: 400
+      fireDelay: 1000
+      fireOnce: true
+      ceaseFire: =>
+        @disable
+      callback: =>
+        this.getOld()
+
+this.CommitsList = CommitsList
\ No newline at end of file

app/assets/stylesheets/common.scss

@@ -338,7 +338,7 @@ li.note {
     li {
       border-bottom:none !important;
     }
-    .file {
+    .attachment {
       padding-left: 20px;
       background:url("icon-attachment.png") no-repeat left center;
     }

app/assets/stylesheets/gitlab_bootstrap/files.scss

@@ -135,7 +135,7 @@
         pre {
           border: none;
           border-radius: 0;
-          font-family: 'Menlo', 'Liberation Mono', 'Consolas', 'Courier New', 'andale mono','lucida console',monospace;
+          font-family: $monospace_font;
           font-size: 12px !important;
           line-height: 16px !important;
           margin: 0;

app/assets/stylesheets/gitlab_bootstrap/fonts.scss

@@ -4,4 +4,4 @@
 }
 
 /** Typo **/
-$monospace: 'Menlo', 'Liberation Mono', 'Consolas', 'Courier New', 'andale mono', 'lucida console', monospace;
+$monospace_font: 'Menlo', 'Liberation Mono', 'Consolas', 'Courier New', 'andale mono', 'lucida console', monospace;

app/assets/stylesheets/gitlab_bootstrap/typography.scss

@@ -21,7 +21,7 @@ h6 {
 
 /** CODE **/
 pre {
-  font-family:'Menlo', 'Liberation Mono', 'Consolas', 'Courier New', 'andale mono','lucida console',monospace;
+  font-family: $monospace_font;
 
   &.dark {
     background: #333;
@@ -79,7 +79,7 @@ a:focus {
 }
 
 .monospace {
-  font-family: 'Menlo', 'Liberation Mono', 'Consolas', 'Courier New', 'andale mono','lucida console',monospace;
+  font-family: $monospace_font;
 }
 
 /**

app/assets/stylesheets/gitlab_bootstrap/variables.scss

-/** Colors **/
+/**
+ * General Colors
+ */
 $primary_color: #2FA0BB;
 $link_color: #3A89A3;
 $style_color: #474D57;
 $hover: #D9EDF7;
+
+/**
+ * Commit Diff Colors
+ */
+$added: #63c363;
+$deleted: #f77;

app/assets/stylesheets/sections/commits.scss

 /**
- *
- * COMMIT SHOw
- *
+ * Commit file
  */
 .commit-committer-link,
 .commit-author-link {
@@ -12,11 +10,11 @@
   }
 }
 
-.diff_file {
+.file {
   border: 1px solid #CCC;
   margin-bottom: 1em;
 
-  .diff_file_header {
+  .header {
     @extend .clearfix;
     padding: 5px 5px 5px 10px;
     color: #555;
@@ -28,32 +26,35 @@
     background-image: -moz-linear-gradient(#eee 6.6%, #dfdfdf);
     background-image: -o-linear-gradient(#eee 6.6%, #dfdfdf);
 
+    a{
+      color: $style_color;
+    }
+    
     > span {
-      font-family: $monospace;
+      font-family: $monospace_font;
       font-size: 14px;
       line-height: 30px;
     }
 
-    a.view-commit{
+    a.view-file{
       font-weight: bold;
     }
 
     .commit-short-id{
-      font-family: $monospace;
+      font-family: $monospace_font;
       font-size: smaller;
     }
 
     .file-mode{
-      font-family: $monospace;
+      font-family: $monospace_font;
     }
   }
-  .diff_file_content {
+  .content {
     overflow: auto;
     overflow-y: hidden;
-    background: #fff;
+    background: #FFF;
     color: #333;
     font-size: 12px;
-    font-family: $monospace;
     .old{
       span.idiff{
         background-color: #FAA;
@@ -66,114 +67,274 @@
     }
 
     table {
+      font-family: $monospace_font;
+      border: none;
+      margin: 0px;
+      padding: 0px;
       td {
         line-height: 18px;
+        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;
+      @include 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;
       }
     }
   }
-  .diff_file_content_image {
-    background: #eee;
+  .image {
+    background: #ddd;
     text-align: center;
-    .image {
+    padding: 30px;
+    .wrap{
       display: inline-block;
-      margin: 50px;
-      max-width: 400px;
-
+    }
+    
+    .frame {
+      display: inline-block;
+      background-color: #fff;
+      line-height: 0;
       img{
+        border: 1px solid #FFF;
         background: url('trans_bg.gif');
       }
+      &.deleted {
+        border: 1px solid $deleted;
+      }
 
-      &.diff_removed {
-        img{
-          border: 1px solid #C00;
-        }
+      &.added {
+        border: 1px solid $added;
       }
+    }
+    .image-info{
+      font-size: 12px;
+      margin: 5px 0 0 0;
+      color: grey;
+    }
 
-      &.diff_added {
-        img{
-          border: 1px solid #0C0;
+    .view.swipe{
+      position: relative;
+      
+      .swipe-frame{
+        display: block;
+        margin: auto;
+        position: relative;
+      }
+      .swipe-wrap{
+        overflow: hidden;
+        border-left: 1px solid #999;
+        position: absolute;
+        display: block;
+        top: 13px;
+        right: 7px;
+      }
+      .frame{
+        top: 0;
+        right: 0;
+        position: absolute;
+        &.deleted{
+          margin: 0;
+          display: block;
+          top: 13px;
+          right: 7px;
         }
       }
-
-      .image-info{
-        margin: 5px 0 0 0;
+      .swipe-bar{
+        display: block;
+        height: 100%;
+        width: 15px;
+        z-index: 100;
+        position: absolute;
+        cursor: pointer;
+        &:hover{
+          .top-handle{
+            background-position: -15px 3px;
+          }
+          .bottom-handle{
+            background-position: -15px -11px;
+          }
+        };
+        .top-handle{
+          display: block;
+          height: 14px;
+          width: 15px;
+          position: absolute;
+          top: 0px;
+          background: url('swipemode_sprites.gif') 0 3px no-repeat;
+        }
+        .bottom-handle{
+          display: block;
+          height: 14px;
+          width: 15px;
+          position: absolute;
+          bottom: 0px;
+          background: url('swipemode_sprites.gif') 0 -11px no-repeat;
+        }
       }
-    }
-
-    &.img_compared {
-      .image {
-        max-width: 300px;
+    } //.view.swipe
+    .view.onion-skin{
+      .onion-skin-frame{
+        display: block;
+        margin: auto;
+        position: relative;
       }
-    }
+      .frame.added, .frame.deleted {
+        position: absolute;
+        display: block;
+        top: 0px;
+        left: 0px;
+      }
+      .controls{
+        display: block;
+        height: 14px;
+        width: 300px;
+        z-index: 100;
+        position: absolute;
+        bottom: 0px;
+        left: 50%;
+        margin-left: -150px;
+        
+        .drag-track{
+          display: block;
+          position: absolute;
+          left: 12px;
+          height: 10px;
+          width: 276px;
+          background: url('onion_skin_sprites.gif') -4px -20px repeat-x;
+        }
+        
+        .dragger {
+          display: block;
+          position: absolute;
+          left: 0px;
+          top: 0px;
+          height: 14px;
+          width: 14px;
+          background: url('onion_skin_sprites.gif') 0px -34px repeat-x;
+          cursor: pointer;
+        }
+        
+        .transparent {
+          display: block;
+          position: absolute;
+          top: 2px;
+          right: 0px;
+          height: 10px;
+          width: 10px;
+          background: url('onion_skin_sprites.gif') -2px 0px no-repeat;
+        }
+        
+        .opaque {
+          display: block;
+          position: absolute;
+          top: 2px;
+          left: 0px;
+          height: 10px;
+          width: 10px;
+          background: url('onion_skin_sprites.gif') -2px -10px no-repeat;
+        }
+      }
+    } //.view.onion-skin
   }
-}
+  .view-modes{
 
-.diff_file_content{
-  table {
-    border: none;
-    margin: 0px;
-    padding: 0px;
-    tr {
-      td {
-        font-size: 12px;
-      }
+    padding: 10px;
+    text-align: center;
+    
+    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);
+    
+    ul, li{
+      list-style: none;
+      margin: 0;
+      padding: 0;
+      display: inline-block;
     }
-  }
-  .new_line,
-  .old_line,
-  .notes_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 {
+    
+    li{
+      color: grey;
+      border-left: 1px solid #c1c1c1;
+      padding: 0 12px 0 16px;
+      cursor: pointer;
+      &:first-child{
+        border-left: none;
+      }
+      &: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;
+      &.active{
+        &:hover{
+          text-decoration: none;
+        }
+        cursor: default;
+        color: #333;
+      }
+      &.disabled{
+        display: none;
+      }
     }
   }
 }
 
 /** 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;}
+.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;
+}
 
 
-/** COMMIT ROW **/
+/**
+ * COMMIT ROW
+ */
 .commit {
   .browse_code_link_holder {
     @extend .span2;
@@ -199,11 +360,10 @@
     float: left;
     @extend .lined;
     min-width: 65px;
-    font-family: $monospace;
+    font-family: $monospace_font;
   }
 }
 
-.diff_file_header a,
 .file-stats a {
   color: $style_color;
 }
@@ -237,7 +397,7 @@
   font-size: 13px;
   background: #474D57;
   color: #fff;
-  font-family: $monospace;
+  font-family: $monospace_font;
 }
 
 

app/assets/stylesheets/sections/merge_requests.scss

@@ -77,7 +77,7 @@ li.merge_request {
   font-size: 14px;
   background: #474D57;
   color: #fff;
-  font-family: 'Menlo', 'Liberation Mono', 'Consolas', 'Courier New', 'andale mono','lucida console',monospace;
+  font-family: $monospace_font;
 }
 
 .mr_source_commit,

app/assets/stylesheets/sections/notes.scss

@@ -40,13 +40,13 @@ ul.notes {
     .discussion-body {
       margin-left: 50px;
 
-      .diff_file,
+      .file,
       .discussion-hidden,
       .notes {
         @extend .borders;
         background-color: #F9F9F9;
       }
-      .diff_file .notes {
+      .file .notes {
         /* reset */
         background: inherit;
         border: none;
@@ -109,7 +109,7 @@ ul.notes {
   }
 }
 
-.diff_file .notes_holder {
+.file .notes_holder {
   font-family: $sansFontFamily;
   font-size: 13px;
   line-height: 18px;
@@ -134,8 +134,6 @@ ul.notes {
   }
 }
 
-
-
 /**
  * Actions for Discussions/Notes
  */
@@ -171,7 +169,7 @@ ul.notes {
     }
   }
 }
-.diff_file .note .note-actions {
+.file .note .note-actions {
   right: 0;
   top: 0;
 }
@@ -182,7 +180,7 @@ ul.notes {
  * Line note button on the side of diffs
  */
 
-.diff_file tr.line_holder {
+.file tr.line_holder {
   .add-diff-note {
     background: url("diff_note_add.png") no-repeat left 0;
     height: 22px;
@@ -212,8 +210,6 @@ ul.notes {
   }
 }
 
-
-
 /**
  * Note Form
  */
@@ -222,7 +218,12 @@ ul.notes {
 .reply-btn {
   @extend .save-btn;
 }
-.diff_file,
+.file .content tr.line_holder:hover > td { background: $hover !important; }
+.file .content tr.line_holder:hover > td .line_note_link {
+  opacity: 1.0;
+  filter: alpha(opacity=100);
+}
+.file,
 .discussion {
   .new_note {
     margin: 8px 5px 8px 0;

app/helpers/commits_helper.rb

@@ -59,9 +59,9 @@ module CommitsHelper
 
   def image_diff_class(diff)
     if diff.deleted_file
-      "diff_removed"
+      "deleted"
     elsif diff.new_file
-      "diff_added"
+      "added"
     else
       nil
     end

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);
     });
-
   });

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

app/views/commits/_image.html.haml

+- 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

app/views/commits/_text_diff.html.haml → 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"

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;"}
 

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

app/views/notes/_discussion_diff.html.haml

 - 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 }

features/steps/shared/diff_note.rb

@@ -2,27 +2,27 @@ module SharedDiffNote
   include Spinach::DSL
 
   Given 'I cancel the diff comment' do
-    within(".diff_file") do
+    within(".file") do
       find(".js-close-discussion-note-form").trigger("click")
     end
   end
 
   Given 'I delete a diff comment' do
     sleep 1
-    within(".diff_file") do
+    within(".file") do
       first(".js-note-delete").trigger("click")
     end
   end
 
   Given 'I haven\'t written any diff comment text' do
-    within(".diff_file") do
+    within(".file") do
       fill_in "note[note]", with: ""
     end
   end
 
   Given 'I leave a diff comment like "Typo, please fix"' do
     find("#586fb7c4e1add2d4d24e27566ed7064680098646_29_14.line_holder .js-add-diff-note-button").trigger("click")
-    within(".diff_file") do
+    within(".file") do
       fill_in "note[note]", with: "Typo, please fix"
       #click_button("Add Comment")
       find(".js-comment-button").trigger("click")
@@ -32,7 +32,7 @@ module SharedDiffNote
 
   Given 'I preview a diff comment text like "Should fix it :smile:"' do
     find("#586fb7c4e1add2d4d24e27566ed7064680098646_29_14.line_holder .js-add-diff-note-button").trigger("click")
-    within(".diff_file") do
+    within(".file") do
       fill_in "note[note]", with: "Should fix it :smile:"
       find(".js-note-preview-button").trigger("click")
     end
@@ -40,7 +40,7 @@ module SharedDiffNote
 
   Given 'I preview another diff comment text like "DRY this up"' do
     find("#586fb7c4e1add2d4d24e27566ed7064680098646_57_41.line_holder .js-add-diff-note-button").trigger("click")
-    within(".diff_file") do
+    within(".file") do
       fill_in "note[note]", with: "DRY this up"
       find(".js-note-preview-button").trigger("click")
     end
@@ -55,13 +55,13 @@ module SharedDiffNote
   end
 
   Given 'I write a diff comment like ":-1: I don\'t like this"' do
-    within(".diff_file") do
+    within(".file") do
       fill_in "note[note]", with: ":-1: I don\'t like this"
     end
   end
 
   Given 'I submit the diff comment' do
-    within(".diff_file") do
+    within(".file") do
       click_button("Add Comment")
     end
   end
@@ -69,49 +69,49 @@ module SharedDiffNote
 
 
   Then 'I should not see the diff comment form' do
-    within(".diff_file") do
+    within(".file") do
       page.should_not have_css("form.new_note")
     end
   end
 
   Then 'I should not see the diff comment preview button' do
-    within(".diff_file") do
+    within(".file") do
       page.should have_css(".js-note-preview-button", visible: false)
     end
   end
 
   Then 'I should not see the diff comment text field' do
-    within(".diff_file") do
+    within(".file") do
       page.should have_css(".js-note-text", visible: false)
     end
   end
 
   Then 'I should only see one diff form' do
-    within(".diff_file") do
+    within(".file") do
       page.should have_css("form.new_note", count: 1)
     end
   end
 
   Then 'I should see a diff comment form with ":-1: I don\'t like this"' do
-    within(".diff_file") do
+    within(".file") do
       page.should have_field("note[note]", with: ":-1: I don\'t like this")
     end
   end
 
   Then 'I should see a diff comment saying "Typo, please fix"' do
-    within(".diff_file .note") do
+    within(".file .note") do
       page.should have_content("Typo, please fix")
     end
   end
 
   Then 'I should see a discussion reply button' do
-    within(".diff_file") do
+    within(".file") do
       page.should have_link("Reply")
     end
   end
 
   Then 'I should see a temporary diff comment form' do
-    within(".diff_file") do
+    within(".file") do
       page.should have_css(".js-temp-notes-holder form.new_note")
     end
   end
@@ -121,37 +121,37 @@ module SharedDiffNote
   end
 
   Then 'I should see an empty diff comment form' do
-    within(".diff_file") do
+    within(".file") do
       page.should have_field("note[note]", with: "")
     end
   end
 
   Then 'I should see the cancel comment button' do
-    within(".diff_file form") do
+    within(".file form") do
       page.should have_css(".js-close-discussion-note-form", text: "Cancel")
     end
   end
 
   Then 'I should see the diff comment preview' do
-    within(".diff_file form") do
+    within(".file form") do
       page.should have_css(".js-note-preview", visible: false)
     end
   end
 
   Then 'I should see the diff comment edit button' do
-    within(".diff_file") do
+    within(".file") do
       page.should have_css(".js-note-edit-button", visible: true)
     end
   end
 
   Then 'I should see the diff comment preview button' do
-    within(".diff_file") do
+    within(".file") do
       page.should have_css(".js-note-preview-button", visible: true)
     end
   end
 
   Then 'I should see two separate previews' do
-    within(".diff_file") do
+    within(".file") do
       page.should have_css(".js-note-preview", visible: true, count: 2)
       page.should have_content("Should fix it")
       page.should have_content("DRY this up")