From e33debc2147966525246bad999d0cacc4e676585 Mon Sep 17 00:00:00 2001 From: Koen Punt Date: Sat, 1 Dec 2012 13:49:21 +0100 Subject: [PATCH] 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/images/onion_skin_sprites.gif | Bin 0 -> 1584 bytes app/assets/images/swipemode_sprites.gif | Bin 0 -> 1540 bytes app/assets/javascripts/commit/file.js.coffee | 7 + .../javascripts/commit/image-file.js.coffee | 128 ++++++ app/assets/javascripts/commits.js | 59 --- app/assets/javascripts/commits.js.coffee | 54 +++ app/assets/stylesheets/common.scss | 2 +- .../stylesheets/gitlab_bootstrap/files.scss | 2 +- .../stylesheets/gitlab_bootstrap/fonts.scss | 2 +- .../gitlab_bootstrap/typography.scss | 4 +- .../gitlab_bootstrap/variables.scss | 10 +- app/assets/stylesheets/sections/commits.scss | 370 +++++++++++++----- .../stylesheets/sections/merge_requests.scss | 2 +- app/assets/stylesheets/sections/notes.scss | 21 +- app/helpers/commits_helper.rb | 4 +- app/views/commit/show.html.haml | 16 +- app/views/commits/_diffs.html.haml | 72 ++-- app/views/commits/_image.html.haml | 63 +++ ...xt_diff.html.haml => _text_file.html.haml} | 2 +- app/views/commits/show.html.haml | 2 +- app/views/notes/_discussion.html.haml | 2 +- app/views/notes/_discussion_diff.html.haml | 4 +- features/steps/shared/diff_note.rb | 44 +-- 23 files changed, 604 insertions(+), 266 deletions(-) create mode 100644 app/assets/images/onion_skin_sprites.gif create mode 100644 app/assets/images/swipemode_sprites.gif create mode 100644 app/assets/javascripts/commit/file.js.coffee create mode 100644 app/assets/javascripts/commit/image-file.js.coffee delete mode 100644 app/assets/javascripts/commits.js create mode 100644 app/assets/javascripts/commits.js.coffee create mode 100644 app/views/commits/_image.html.haml rename app/views/commits/{_text_diff.html.haml => _text_file.html.haml} (95%) diff --git a/app/assets/images/onion_skin_sprites.gif b/app/assets/images/onion_skin_sprites.gif new file mode 100644 index 0000000000000000000000000000000000000000..85d20260edcad0f13825b8b70d930133c9e54beb GIT binary patch literal 1584 zcmZ?wbhEHbC+QckY}xaUw4-@ABo#t5>g{H*emiO`9%Wym;iuk*=<; zi4!LtJ$iKW=FRKYt(!l8{^`@FOG-+bo13p(xpMpV?Xzdk?%cWa`Sa)J&!1ngV8Nk7 zhYAY|&z(EBYSpUZ;^Ku17al);eD2)2t*xy$Z{Ez!&E39z``Wc@3knJjA3l8Gz=4jA zjx}r6Y}l}&t*!0ZvuFSR|DQQ?=9x2R($doIf&l{|p!lCV!Z$#{C9xzCNZZ&~6eK2R zrKPiFn46pHC>R+S8t5As=^Gm98k$=f8(A3`C_sS{(6*wKG^-#NH>h1eo~=?w zNlAf~zJ7Umxn8-kUVc%!zM-Y1CCCgTBVC{h-Qvo;lEez#ykcdT2`;I{$wiq3C7Jno z3Lp~`lk!VTY?Xj6g?J&iz}FXUa9*(<*h6~B`MLTPi3R$GdItKrxgdXmRTq~8r6Qbx zRdsPlWkITbP-=00X;E@2P`NTpGcfG%TLe-Fbd8mNQ6?}_5_4SglS^|`^GZBjY?XjA zdMTMHR&M6zZia^DCI;q424)t9h89Lfj;Yvo*& znpl!w6q28x14{t`8Tlpo#Toep3eLf%3ciWSnRy^SD0(2ibxAGCEK5ysE6UGR0Ee$t zCKmfK{B7ZE=ICbR>}=xVW@zdPbUQ?E3OQk>4|I$^C~+Vq7MKt)1%jCHqz~l4Gf!$B zFvk=Dvj*e;e}Dh{{`K?6_itaneE#(D!~1t{-@JbH^2PIKPoF$~^zgy`dw1{LzIF4) z^=ntJT)uSi!ufM&&zwGW^2G6DM~@snbnw9beS7!p-nDbb_HA3YY~HkS!}@h=*Q{Q( za>epxOP4HOv~a=vd2{E?o;7pE^l4M4OrA7xLVsUxPj^>mM|)dqOLJ3WLw#LsO?6de zMR{3iNpVqOL4ICtPIgviMtWLmN^(+SLVR3oOmtLaM0i+eNN`YKfWM!wkGGenhr64r zi?frXgT0-tjkT4fg}IrjiLntdTk7fRXlrR|sH>@}C@U!{$jiyfNJ~jdh>MAe2nz`c z@bmHVaC32Tu(PqUFf%bSFev_H0g@&RI-r6GRAw@;y>*b%b<>e*Jv1ZdWX!P%htocH zhIq{lcs*6CC1&H*^*z#mCvCm7xo~c*{Oa{TPP>-Refs%VY~1$rkG1Kw6-}irk|zX9hu5yhR_tUKiy*GlYUU(L6ZV=c$I3zyb1?l54L-6?r`t;T_!OdEJ^^DAsM zW?^~r;p3;z8x3XNs4;u1^KM`bKOfbru+gQpLsjt5TCWW$2enwe&ukRB@FDR?&aad$ f6E+-aJ`}36E~4S8!s9lfHws4<9G?^_z+epkWwdW0 literal 0 HcmV?d00001 diff --git a/app/assets/images/swipemode_sprites.gif b/app/assets/images/swipemode_sprites.gif new file mode 100644 index 0000000000000000000000000000000000000000..327b3c31ffd3547bbc0e4b9fa7c81c4bcfdfc59e GIT binary patch literal 1540 zcmZ?wbhEHblw%NMxT?l*>(;H?w{LfKb*)>sE;l!K?%cWi_wQf4cyW1o`TF(imo8m; z{P^*C^X4sIzP!G^J})n?xw(1u>ebt}ZQHwd@5+@cSFKvr)6=tT*|Gx%4y;(QV&A@f zO-)UinVE+VAHIJ5`s~@WFJHdAVZ(;IckkZ0b7$tvnQ3Wh|NsAIpdL{C&mG|#px}~N zk_e=2>?;Zqle1Gx6p~WYGxKbf-tXS8q>!0ns}yePYv5bpoSKp8QB{;0T;&&%T$P<{ znWAKGr(jcIRgqhen_7~nP?4LHS8P>btCX0MpOk6^WP^nDl@!2AO0sR096=HaAUmD& zi&7O#^^A3s4Gawx%*^x*O-#+q40RNY3=EC*4S>i@*U-eu)Xd7rTmcG{fVLH-q*(>I zxIyg#@@$ndN=gc>^!0&(u2*iXmtT~wZ)j<02{OaTNEfI=x41H|B(Xv_uUHvof=g;~ za#3bMNoIbY0?5R~r2NtnTP2`NAzsKWfE$}vtOxdvUUGh}ennz|zM-B0$V)JVzP|XC z=H|jx7ncO3BHWAB;NpiyW)Z+ZoqU2Pda%GTJ1y;^Qsfi`|MIrh5Ij~R+$jC3r zFV4s>P;d@5Q_%2DOwP;$321_K`1)FT<`tJD<|U_ky4WfK&CtutOtEsbbg?uuH*hvK zadkB`bTx8xbar%dvM_NqHgz_2F>!+Fb;(aI%}vcKf$2>_=yk!V7nB%s3xGDeq!wkC zrKY$Q<>xAZJ#CeV+bxbb&4cPq!R;0&oO<#DphYAP1iGQ}cl7 zy$G1F8UO$L`{(zspFh5T`}*bcr;i`rzkB=U^{baJoVgs zyL#pFrHdENpF4Zz^r@34jvqUEVojbN~+qz}*ri~lcuUorj^{SOC zmM>enWbvYf3+B(8J7@N+nKPzOn>uCkq=^&y`+9r2yE;4C+ge+in;IMH>uPJNt12tX z%Sua%iwXi?qaq{1!$L!Xg8~Em{d|4Ay*xeK-CSLq zog5wP?QCtVtt>6f%}h;lT#wKO%<)l^lKl@t}^AT$UI_**)^k$qZ+eCbK5G%Z%3P)xmB1g$5}`DyK`@j@g;lAQRfQ*%UzMd* ziA9w^R3t)5PAWnqR60RiK|Db^R3dVzM5timD#1`?&ZR1xDNf2_t5n4{J25gxGBbuc zF)$@EF&x~zcmIh)M~uOi8?@>8@=CJDd6L%x-hdxYr?7MEmrnTEv z?OePeV!7|i?W${hr>IPu;gOMbXl09ffU1kBpvwsXCD$Gq$4OUQ_&BY~JRW2&TFxSG vugYL**v!f+X6k#Rp^%x4Z@2c+ZCidV%JSKu literal 0 HcmV?d00001 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; - } - } - } - .diff_file_content_image { - background: #eee; - text-align: center; - .image { - display: inline-block; - margin: 50px; - max-width: 400px; - - img{ - background: url('trans_bg.gif'); - } - - &.diff_removed { - img{ - border: 1px solid #C00; - } - } - - &.diff_added { - img{ - border: 1px solid #0C0; - } - } - - .image-info{ - margin: 5px 0 0 0; - } - } - - &.img_compared { - .image { - max-width: 300px; - } - } - } -} - -.diff_file_content{ - table { - border: none; - margin: 0px; - padding: 0px; - tr { - td { font-size: 12px; } } - } - .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; + .old_line, .new_line { + margin: 0px; + padding: 0px; + border: none; + background: #EEE; color: #666; - &:hover { - text-decoration: underline; + 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; } } } - .line_content { - white-space: pre; - height: 14px; - margin: 0px; - padding: 0px; - border: none; - &.new { - background: #CFD; + .image { + background: #ddd; + text-align: center; + padding: 30px; + .wrap{ + display: inline-block; } - &.old { - background: #FDD; + + .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; + } + + &.added { + border: 1px solid $added; + } } - &.matched { - color: #ccc; - background: #fafafa; + .image-info{ + font-size: 12px; + margin: 5px 0 0 0; + color: grey; + } + + .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; + } + } + .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; + } + } + } //.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{ + + 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; + } + + li{ + color: grey; + border-left: 1px solid #c1c1c1; + padding: 0 12px 0 16px; + cursor: pointer; + &:first-child{ + border-left: none; + } + &:hover{ + text-decoration: underline; + } + &.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(' | W: ' + w + 'px | H: ' + 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(' | W: ' + w + 'px | H: ' + 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 similarity index 95% rename from app/views/commits/_text_diff.html.haml rename to 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 } diff --git a/features/steps/shared/diff_note.rb b/features/steps/shared/diff_note.rb index 2ae0f1241b8..04862338026 100644 --- a/features/steps/shared/diff_note.rb +++ b/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")