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

Added swipe view for image diff

22 files changed, 571 insertions, 233 deletions

diff --git a/app/assets/images/onion_skin_sprites.gif b/app/assets/images/onion_skin_sprites.gif
new file mode 100644
index 00000000000..85d20260edc
--- /dev/null
+++ b/app/assets/images/onion_skin_sprites.gif
diff --git a/app/assets/images/swipemode_sprites.gif b/app/assets/images/swipemode_sprites.gif
new file mode 100644
index 00000000000..327b3c31ffd
--- /dev/null
+++ b/app/assets/images/swipemode_sprites.gif
diff --git a/app/assets/javascripts/commit/file.js.coffee b/app/assets/javascripts/commit/file.js.coffee
new file mode 100644
index 00000000000..a45ee58d1b4
--- /dev/null
+++ b/app/assets/javascripts/commit/file.js.coffee
@@ -0,0 +1,7 @@
+class CommitFile
+  
+  constructor: (file) ->
+    if $('.image', file).length
+      new ImageFile(file)
+        
+this.CommitFile = CommitFile
\ No newline at end of file
diff --git a/app/assets/javascripts/commit/image-file.js.coffee b/app/assets/javascripts/commit/image-file.js.coffee
new file mode 100644
index 00000000000..f901a9e28ff
--- /dev/null
+++ b/app/assets/javascripts/commit/image-file.js.coffee
@@ -0,0 +1,128 @@
+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
diff --git a/app/assets/javascripts/commits.js b/app/assets/javascripts/commits.js
deleted file mode 100644
index b31fe485896..00000000000
--- a/app/assets/javascripts/commits.js
+++ /dev/null
@@ -1,59 +0,0 @@
-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();
-        }
-      });
-    }
-}
diff --git a/app/assets/javascripts/commits.js.coffee b/app/assets/javascripts/commits.js.coffee
new file mode 100644
index 00000000000..47d6fcf8089
--- /dev/null
+++ b/app/assets/javascripts/commits.js.coffee
@@ -0,0 +1,54 @@
+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
diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss
index 0d25b104bb5..1884c39bc61 100644
--- a/app/assets/stylesheets/common.scss
+++ b/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;
     }
diff --git a/app/assets/stylesheets/gitlab_bootstrap/files.scss b/app/assets/stylesheets/gitlab_bootstrap/files.scss
index 865a10e1fd7..279cfcd2103 100644
--- a/app/assets/stylesheets/gitlab_bootstrap/files.scss
+++ b/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;
diff --git a/app/assets/stylesheets/gitlab_bootstrap/fonts.scss b/app/assets/stylesheets/gitlab_bootstrap/fonts.scss
index b4217fa9cfa..a0c9a6c7b8a 100644
--- a/app/assets/stylesheets/gitlab_bootstrap/fonts.scss
+++ b/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;
diff --git a/app/assets/stylesheets/gitlab_bootstrap/typography.scss b/app/assets/stylesheets/gitlab_bootstrap/typography.scss
index e74a0de125b..781577c2147 100644
--- a/app/assets/stylesheets/gitlab_bootstrap/typography.scss
+++ b/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;
 }
 
 /**
diff --git a/app/assets/stylesheets/gitlab_bootstrap/variables.scss b/app/assets/stylesheets/gitlab_bootstrap/variables.scss
index 869eb168c0d..aeabe7ad2e8 100644
--- a/app/assets/stylesheets/gitlab_bootstrap/variables.scss
+++ b/app/assets/stylesheets/gitlab_bootstrap/variables.scss
@@ -1,5 +1,13 @@
-/** Colors **/
+/**
+ * General Colors
+ */
 $primary_color: #2FA0BB;
 $link_color: #3A89A3;
 $style_color: #474D57;
 $hover: #D9EDF7;
+
+/**
+ * Commit Diff Colors
+ */
+$added: #63c363;
+$deleted: #f77;
diff --git a/app/assets/stylesheets/sections/commits.scss b/app/assets/stylesheets/sections/commits.scss
index c60aae49eaa..8b93287ed1e 100644
--- a/app/assets/stylesheets/sections/commits.scss
+++ b/app/assets/stylesheets/sections/commits.scss
@@ -1,7 +1,5 @@
 /**
- *
- * 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;
 }
 
 
diff --git a/app/assets/stylesheets/sections/merge_requests.scss b/app/assets/stylesheets/sections/merge_requests.scss
index 5225a242726..ff715c0fd18 100644
--- a/app/assets/stylesheets/sections/merge_requests.scss
+++ b/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,
diff --git a/app/assets/stylesheets/sections/notes.scss b/app/assets/stylesheets/sections/notes.scss
index a7fadd4f641..7a1cc444e5d 100644
--- a/app/assets/stylesheets/sections/notes.scss
+++ b/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;
diff --git a/app/helpers/commits_helper.rb b/app/helpers/commits_helper.rb
index 4b5d8bd96a6..6d2ce2feea3 100644
--- a/app/helpers/commits_helper.rb
+++ b/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
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 }