Changeset 24768

Timestamp:

07/22/2013 09:09:49 PM (12 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 );
         }
     });