Changeset 24768

Timestamp:

07/22/2013 09:09:49 PM (13 years ago)

Author:

markjaquith

Message:

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.

Location:

trunk/wp-admin

Files:

• css/wp-admin-rtl.css (modified) (3 diffs)
• css/wp-admin.css (modified) (5 diffs)
• js/revisions.js (modified) (4 diffs)

trunk/wp-admin/css/wp-admin-rtl.css

@@ -1031 +1031 @@
 .revisions-tooltip {
         margin-left: 0;
-        margin-right: -70px;
+        margin-right: -69px;
 }
 
@@ -1041 +1041 @@
 .ie8 .revisions-tooltip {
         margin-right: -75px;
+}
+
+.ie8 .revisions-tooltip.flipped {
+        margin-left: -63px;
 }
 
@@ -1063 +1067 @@
         right: auto;
         left: 20px;
+}
+
+.ie8 .revisions-tooltip-arrow > span {
+        right: 21px;
 }
 

trunk/wp-admin/css/wp-admin.css

@@ -3540 +3540 @@
         height: 0.8em;
         top: 7px;
-        width: 100%;
-        padding: 0 15%;
+        width: 70%;
         -moz-box-sizing: border-box;
         -webkit-box-sizing: border-box;
@@ -3548 +3547 @@
 
 .revisions-tickmarks > div {
-        position: relative;
+        position: absolute;
         height: 100%;
-        float: left;
         border-style: solid;
         border-width: 0 1px 0 0;
@@ -3558 +3556 @@
 }
 
-.revisions-tickmarks > div:last-child {
+.revisions-tickmarks > div:first-child {
         border-width: 0;
 }
@@ -3765 +3763 @@
         bottom: 105px;
         margin-right: 0;
-        margin-left: -70px;
+        margin-left: -69px;
         z-index: 1;
         max-width: 350px;
@@ -3825 +3823 @@
 
 .ie8 .revisions-tooltip-arrow > span {
-        left: 14px;
+        left: 15px;
         top: -25px;
         -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;
 }
 

trunk/wp-admin/js/revisions.js

@@ -616 +616 @@
         revisions.view.Tickmarks = wp.Backbone.View.extend({
                 className: 'revisions-tickmarks',
+                direction: isRtl ? 'right' : 'left',
 
                 initialize: function() {
@@ -622 +623 @@
 
                 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 ) {
                                 // Last one
-                                tick = this.$('div:nth-of-type(' + index + ')');
-                                offset = tick.allPositions();
-                                elWidth = tick.outerWidth();
-                                _.extend( offset, {
-                                        rightPlusWidth: offset.right,
-                                        leftPlusWidth: offset.left
-                                });
+                                offset = {
+                                        rightPlusWidth: thisOffset.left - parentOffset.left + 1,
+                                        leftPlusWidth: thisOffset.right - parentOffset.right + 1
+                                };
                         } else {
                                 // Normal tick
@@ -637 +637 @@
                                 offset = tick.allPositions();
                                 _.extend( offset, {
-                                        leftPlusWidth: offset.left + tick.outerWidth() + 1,
-                                        rightPlusWidth: offset.right + tick.outerWidth() + 1
+                                        left: offset.left + thisOffset.left - parentOffset.left,
+                                        right: offset.right + thisOffset.right - parentOffset.right
+                                });
+                                _.extend( offset, {
+                                        leftPlusWidth: offset.left + tick.outerWidth(),
+                                        rightPlusWidth: offset.right + tick.outerWidth()
                                 });
                         }
@@ -649 +653 @@
                         tickWidth = 1 / tickCount;
 
-                        _(tickCount).times( function(){ this.$el.append( '<div></div>' ); }, this );
-
-                        this.$('div').css( 'width', ( 100 * tickWidth ) + '%' );
+                        _(tickCount).times( function( index ){
+                                this.$el.append( '<div style="' + this.direction + ': ' + ( 100 * tickWidth * index ) + '%"></div>' ); }, this );
                 }
         });