Revisions: tweak how tickmarks are rendered, to play nice with browsers who always round subpixel values down (Safari, Opera).

Also, some IE tweaks.

Fixes #24736. Props adamsilverstein, markjaquith, ocean90.

git-svn-id: http://core.svn.wordpress.org/trunk@24768 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Mark Jaquith 2013-07-22 21:09:49 +00:00
parent 5b1817fa4b
commit 991bab45a7
3 changed files with 34 additions and 21 deletions

View File

@ -1030,7 +1030,7 @@ body.folded .revisions .loading-indicator {
.revisions-tooltip { .revisions-tooltip {
margin-left: 0; margin-left: 0;
margin-right: -70px; margin-right: -69px;
} }
.revisions-tooltip.flipped { .revisions-tooltip.flipped {
@ -1042,6 +1042,10 @@ body.folded .revisions .loading-indicator {
margin-right: -75px; margin-right: -75px;
} }
.ie8 .revisions-tooltip.flipped {
margin-left: -63px;
}
.revisions-tooltip-arrow { .revisions-tooltip-arrow {
right: 0; right: 0;
margin-left: 0; margin-left: 0;
@ -1064,6 +1068,10 @@ body.folded .revisions .loading-indicator {
left: 20px; left: 20px;
} }
.ie8 .revisions-tooltip-arrow > span {
right: 21px;
}
.revisions-tooltip img { .revisions-tooltip img {
float: right; float: right;
margin: 2px 0 0 5px; margin: 2px 0 0 5px;

View File

@ -3539,17 +3539,15 @@ td.plugin-title p {
margin: 0 auto; margin: 0 auto;
height: 0.8em; height: 0.8em;
top: 7px; top: 7px;
width: 100%; width: 70%;
padding: 0 15%;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
} }
.revisions-tickmarks > div { .revisions-tickmarks > div {
position: relative; position: absolute;
height: 100%; height: 100%;
float: left;
border-style: solid; border-style: solid;
border-width: 0 1px 0 0; border-width: 0 1px 0 0;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
@ -3557,7 +3555,7 @@ td.plugin-title p {
box-sizing: border-box; box-sizing: border-box;
} }
.revisions-tickmarks > div:last-child { .revisions-tickmarks > div:first-child {
border-width: 0; border-width: 0;
} }
@ -3764,7 +3762,7 @@ table.diff .diff-addedline ins {
position: absolute; position: absolute;
bottom: 105px; bottom: 105px;
margin-right: 0; margin-right: 0;
margin-left: -70px; margin-left: -69px;
z-index: 1; z-index: 1;
max-width: 350px; max-width: 350px;
min-width: 130px; min-width: 130px;
@ -3824,11 +3822,15 @@ table.diff .diff-addedline ins {
} }
.ie8 .revisions-tooltip-arrow > span { .ie8 .revisions-tooltip-arrow > span {
left: 14px; left: 15px;
top: -25px; top: -25px;
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)"; -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)";
} }
.ie8 .revisions-tooltip.flipped .revisions-tooltip-arrow > span {
right: 25px;
}
.revisions-tooltip, .revisions-tooltip,
.revisions-tooltip-arrow > span { .revisions-tooltip-arrow > span {
border-width: 1px; border-width: 1px;

View File

@ -615,29 +615,33 @@ window.wp = window.wp || {};
// The tickmarks view // The tickmarks view
revisions.view.Tickmarks = wp.Backbone.View.extend({ revisions.view.Tickmarks = wp.Backbone.View.extend({
className: 'revisions-tickmarks', className: 'revisions-tickmarks',
direction: isRtl ? 'right' : 'left',
initialize: function() { initialize: function() {
this.listenTo( this.model, 'change:revision', this.reportTickPosition ); this.listenTo( this.model, 'change:revision', this.reportTickPosition );
}, },
reportTickPosition: function( model, revision ) { reportTickPosition: function( model, revision ) {
var elWidth, offset, tick, index = this.model.revisions.indexOf( revision ); var offset, thisOffset, parentOffset, tick, index = this.model.revisions.indexOf( revision );
thisOffset = this.$el.allOffsets();
parentOffset = this.$el.parent().allOffsets();
if ( index === this.model.revisions.length - 1 ) { if ( index === this.model.revisions.length - 1 ) {
// Last one // Last one
tick = this.$('div:nth-of-type(' + index + ')'); offset = {
offset = tick.allPositions(); rightPlusWidth: thisOffset.left - parentOffset.left + 1,
elWidth = tick.outerWidth(); leftPlusWidth: thisOffset.right - parentOffset.right + 1
_.extend( offset, { };
rightPlusWidth: offset.right,
leftPlusWidth: offset.left
});
} else { } else {
// Normal tick // Normal tick
tick = this.$('div:nth-of-type(' + (index + 1) + ')'); tick = this.$('div:nth-of-type(' + (index + 1) + ')');
offset = tick.allPositions(); offset = tick.allPositions();
_.extend( offset, { _.extend( offset, {
leftPlusWidth: offset.left + tick.outerWidth() + 1, left: offset.left + thisOffset.left - parentOffset.left,
rightPlusWidth: offset.right + tick.outerWidth() + 1 right: offset.right + thisOffset.right - parentOffset.right
});
_.extend( offset, {
leftPlusWidth: offset.left + tick.outerWidth(),
rightPlusWidth: offset.right + tick.outerWidth()
}); });
} }
this.model.set({ offset: offset }); this.model.set({ offset: offset });
@ -648,9 +652,8 @@ window.wp = window.wp || {};
tickCount = this.model.revisions.length - 1; tickCount = this.model.revisions.length - 1;
tickWidth = 1 / tickCount; tickWidth = 1 / tickCount;
_(tickCount).times( function(){ this.$el.append( '<div></div>' ); }, this ); _(tickCount).times( function( index ){
this.$el.append( '<div style="' + this.direction + ': ' + ( 100 * tickWidth * index ) + '%"></div>' ); }, this );
this.$('div').css( 'width', ( 100 * tickWidth ) + '%' );
} }
}); });