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
This commit is contained in:
Koen Punt
parent
6ab6c55de5
commit
e33debc214
23 changed files with 604 additions and 266 deletions
BIN
app/assets/images/onion_skin_sprites.gif
Normal file
BIN
app/assets/images/onion_skin_sprites.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
BIN
app/assets/images/swipemode_sprites.gif
Normal file
BIN
app/assets/images/swipemode_sprites.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
7
app/assets/javascripts/commit/file.js.coffee
Normal file
7
app/assets/javascripts/commit/file.js.coffee
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
class CommitFile
|
||||
|
||||
constructor: (file) ->
|
||||
if $('.image', file).length
|
||||
new ImageFile(file)
|
||||
|
||||
this.CommitFile = CommitFile
|
||||
128
app/assets/javascripts/commit/image-file.js.coffee
Normal file
128
app/assets/javascripts/commit/image-file.js.coffee
Normal file
|
|
@ -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
|
||||
|
|
@ -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();
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
54
app/assets/javascripts/commits.js.coffee
Normal file
54
app/assets/javascripts/commits.js.coffee
Normal file
|
|
@ -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
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
});
|
||||
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
63
app/views/commits/_image.html.haml
Normal file
63
app/views/commits/_image.html.haml
Normal file
|
|
@ -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
|
||||
|
|
@ -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"
|
||||
|
|
@ -5,7 +5,7 @@
|
|||
= breadcrumbs
|
||||
|
||||
%div{id: dom_id(@project)}
|
||||
#commits_list= render "commits"
|
||||
#commits-list= render "commits"
|
||||
.clear
|
||||
.loading{ style: "display:none;"}
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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 }
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue