Changeset 24174

Timestamp:

05/03/2013 11:17:06 PM (12 years ago)

Author:

ocean90

Message:

Revisions UI: Just another update - Now with improved tick marks and tooltips.

props adamsilverstein. see #23935.

Location:

trunk/wp-admin

Files:

• css/colors-classic.css (modified) (2 diffs)
• css/colors-fresh.css (modified) (2 diffs)
• css/wp-admin.css (modified) (6 diffs)
• js/revisions.js (modified) (12 diffs)
• revision.php (modified) (2 diffs)

trunk/wp-admin/css/colors-classic.css

@@ -1483 +1483 @@
 }
 
-#diff-slider .ui-slider-tooltip {
+#diff-slider .ui-slider-tooltip,
+#diff-slider-ticks .ui-slider-tooltip {
     border-color: #d1e5ee;
     background-color: #fff;
@@ -1503 +1504 @@
 }
 
+.revision-tick.scope-of-changes-none {
+    background-color: #d1e5ee;
+}
+
 .revision-tick.scope-of-changes-vsmall {
-    background-color: #d1e5ee;
+    background-color: #b4d5e3;
 }
 
 .revision-tick.scope-of-changes-small {
-    background-color: #b4d5e3;
+    background-color: #98c5d9;
 }
 
 .revision-tick.scope-of-changes-med {
-    background-color: #98c5d9;
+    background-color: #7bb4ce;
 }
 
 .revision-tick.scope-of-changes-large {
-    background-color: #7bb4ce;
+    background-color: #5ea4c4;
 }
 
 .revision-tick.scope-of-changes-vlarge {
-    background-color: #5ea4c4;
+    background-color: #4493b7;
 }
 

trunk/wp-admin/css/colors-fresh.css

@@ -1377 +1377 @@
 }
 
-#diff-slider .ui-slider-tooltip {
+#diff-slider .ui-slider-tooltip,
+#diff-slider-ticks .ui-slider-tooltip {
     border-color: #d7d7d7;
     background-color: #fff;
@@ -1401 +1402 @@
 }
 
+.revision-tick.scope-of-changes-none {
+    background-color: #d7d7d7;
+}
+
 .revision-tick.scope-of-changes-vsmall {
-    background-color: #d7d7d7;
+    background-color: #c3c3c3;
 }
 
 .revision-tick.scope-of-changes-small {
-    background-color: #c3c3c3;
+    background-color: #b0b0b0;
 }
 
 .revision-tick.scope-of-changes-med {
-    background-color: #b0b0b0;
+    background-color: #9c9c9c;
 }
 
 .revision-tick.scope-of-changes-large {
-    background-color: #9c9c9c;
+    background-color: #898989;
 }
 
 .revision-tick.scope-of-changes-vlarge {
-    background-color: #898989;
+    background-color: #757575;
 }
 
 .diff-label {
     color: #666;
-}
-
-body .ui-tooltip {
-    border-color: #d7d7d7;
-    background-color: #fff;
 }
 

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

@@ -3586 +3586 @@
 #loading-status {
     display: none;
+    position: absolute;
+    top: 8px;
+    z-index: 1000;
 }
 
@@ -3620 +3623 @@
 }
 
-#diff-slider .ui-slider-tooltip {
+#diff-slider .ui-slider-tooltip,
+#diff-slider-ticks .ui-slider-tooltip {
     display: none;
     position: absolute;
-    bottom: 20px;
-    margin-left: -4em;
+    bottom: 21px;
+    margin-left: -74px;
 }
 
@@ -3639 +3643 @@
 .comparing-two-revisions #diff-title-to strong {
     display: inline;
-}
-
-.diff-slider-ticks-wrapper {
-    margin: 0 auto;
-    text-align: center;
-}
-
-#diff-slider-ticks {
-    position: absolute;
-    z-index: 2;
-    margin-top: 20px;
 }
 
@@ -3706 +3699 @@
 }
 
+.diff-slider-ticks-wrapper {
+    margin: 0 auto;
+    text-align: left;
+}
+
+#diff-slider-ticks {
+    position: absolute;
+    z-index: 2;
+    margin-top: 20px;
+}
+
 .revision-tick {
     width: 1px;
     float: left;
-    margin: 1px 15px 0 0;
+    margin: 1px 0 0 0;
     height: .8em;
     padding: 0;
     margin-left: 0px;
+    cursor: pointer;
+}
+
+#diff-slider-ticks .revision-tick:first-child {
+    border-bottom-left-radius: 3px;
+    border-top-left-radius: 3px;
+}
+
+#diff-slider-ticks .revision-tick:last-child {
+    border-bottom-right-radius: 3px;
+    border-top-right-radius: 3px;
+}
+
+.revision-tick.scope-of-changes-none {
+    width: 1px;
 }
 
 .revision-tick.scope-of-changes-vsmall {
-    width: 1px;
+    width: 2px;
 }
 
 .revision-tick.scope-of-changes-small {
-    width: 2px;
-    margin-left: -1px;
+    width: 3px;
 }
 
 .revision-tick.scope-of-changes-med {
-    width: 3px;
-    margin-left: -2px;
+    width: 4px;
 }
 
 .revision-tick.scope-of-changes-large {
-    width: 4px;
-    margin-left: -3px;
+    width: 5px;
 }
 
 .revision-tick.scope-of-changes-vlarge {
-    margin-left: -3px;
-    width: 4px;
-    left: 1;
+    width: 6px;
 }
 
@@ -3758 +3772 @@
     float: left;
     margin-right: 5px;
+    margin-top: 5px;
 }
 
@@ -3853 +3868 @@
     display: block;
     border: 0;
-
-    background-color: #8cc1e9;
-    background-image: -webkit-gradient(linear, left bottom, left top, from(#72a7cf), to(#8cc1e9));
-    background-image: -webkit-linear-gradient(bottom, #72a7cf, #8cc1e9);
-    background-image:    -moz-linear-gradient(bottom, #72a7cf, #8cc1e9);
-    background-image:      -o-linear-gradient(bottom, #72a7cf, #8cc1e9);
-    background-image: linear-gradient(to top, #72a7cf, #8cc1e9);
+    background-color: transparent;
+    background-image: none;
 }
 

trunk/wp-admin/js/revisions.js

@@ -41 +41 @@
 
         constructor: function() {
+            var self    = this;
             this.slider = new revisions.view.Slider();
+
             if ( null === this.revisions ) {
                 this.revisions = new Revisions(); // set up collection
                 this.startRightModelLoading();
 
-                var self = this;
                 this.revisions.fetch({ // load revision data
                     success: function() {
@@ -59 +60 @@
             var self = this,
                 revisionsToLoad = models.where( { completed: false } ),
-                delay = 0;
+                delay = 0,
+                totalChanges;
 
             // match slider to passed revision_id
@@ -80 +82 @@
                                     self.stopModelLoadingSpinner();
 
-                                self.tickmarkView.render();
-
-                                var totalChanges = model.get( 'linesAdded' ) + model.get( 'linesDeleted' ),
+                                totalChanges = model.get( 'linesAdded' ) + model.get( 'linesDeleted' ),
                                     scopeOfChanges = 'vsmall';
 
@@ -102 +102 @@
                                     self.revisionView.render();
                                 }
-
+                                self.tickmarkView.render();
                             }
                     } );
@@ -192 +192 @@
                         'max': self.revisions.length
                     });
-                    // ensure right handle not beyond length, in particular if viewing autosaves is switched from on to off
-                    // the number of models in the collection might get shorter, this ensures right handle is not beyond last model
+                    // ensure right handle not beyond length
                     if ( self.rightDiff > self.revisions.length )
                         self.rightDiff = self.revisions.length;
@@ -275 +274 @@
             });
             this.tickmarkView.render();
-            this.tickmarkView.resetTicks();
         }
     });
@@ -402 +400 @@
             $( '#diff-slider' ).slider( 'option', options );
 
-            // reset all of the slider tooltips during a refresh, but not on prev/next button actions
-            if ( ! slide )
-                $( 'a.ui-slider-handle' ).html( '<span class="ui-slider-tooltip ui-widget-content ui-corner-all"></span>' );
-
             // Triggers the slide event
             if ( slide )
@@ -442 +436 @@
 
         resetTicks: function() {
-            var sliderMax   = Diff.slider.option( 'max' );
-            var sliderWidth = Diff.slider.width();
-            var adjustMax   = Diff.singleRevision ? 0 : 1;
-            var tickWidth   = Math.floor( sliderWidth / ( sliderMax - adjustMax ) );
-
-            // TODO: adjust right margins for wider ticks so they stay centered on handle stop point
-
-            // set minimum and maximum widths for tick marks
-            tickWidth = (tickWidth > 50 ) ? 50 : tickWidth;
-            tickWidth = (tickWidth < 10 ) ? 10 : tickWidth;
-
-            sliderWidth = tickWidth * (sliderMax - adjustMax ) + 1;
-
+            var sliderMax, sliderWidth, adjustMax, tickWidth, tickCount = 0, aTickWidth, tickMargin, self = this, firstTick, lastTick;
+            sliderMax   = Diff.slider.option( 'max' );
+            sliderWidth = Diff.slider.width();
+            adjustMax   = Diff.singleRevision ? 0 : 1;
+            tickWidth   = Math.floor( sliderWidth / ( sliderMax - adjustMax ) );
+            tickWidth   = ( tickWidth > 50 ) ? 50 : tickWidth; // set minimum and maximum widths for tick marks
+            tickWidth   = ( tickWidth < 10 ) ? 10 : tickWidth;
+            sliderWidth = tickWidth * ( sliderMax - adjustMax ); //calculate the slider width
+            aTickWidth  = $( '.revision-tick' ).width();
+
+            if ( tickWidth !== aTickWidth ) { // is the width already set correctly?
+                $( '.revision-tick' ).each( function() {
+                    tickMargin = Math.floor( ( tickWidth - $( this ).width() ) / 2 ) + 1;
+                    $( this ).css( 'border-left', tickMargin + 'px solid #f7f7f7'); // space the ticks out using margins
+                    $( this ).css( 'border-right', ( tickWidth - tickMargin - $( this ).width() ) + 'px solid #f7f7f7'); // space the ticks out using margins
+                });
+                firstTick = $( '.revision-tick' ).first(); //cache selectors for optimization
+                lastTick = $( '.revision-tick' ).last();
+
+                sliderWidth = sliderWidth + Math.ceil( ( tickWidth - ( lastTick.outerWidth() - lastTick.innerWidth() ) ) / 2 ); // room for the last tick
+                sliderWidth = sliderWidth + Math.ceil( ( tickWidth - ( firstTick.outerWidth() - firstTick.innerWidth() ) ) / 2 ); // room for the first tick
+                firstTick.css( 'border-left', 'none' ); // first tick gets no left border
+                lastTick.css( 'border-right', 'none' ); // last tick gets no right border
+            }
+
+            /**
+             * reset the slider width
+             */
             Diff.slider.setWidth( sliderWidth );
             $( '.diff-slider-ticks-wrapper' ).width( sliderWidth );
             $( '#diff-slider-ticks' ).width( sliderWidth );
 
-            var aTickWidth = $( '.revision-tick' ).width();
-
-            if ( tickWidth !== aTickWidth ) { // is the width already set correctly?
-                $( '.revision-tick' ).each( function( ) {
-                    $(this).css( 'margin-right', tickWidth - 1 + 'px'); // space the ticks out using right margin
-                });
-
-                $( '.revision-tick' ).last().css( 'margin-right', '0' ); // last tick gets no right margin
-            }
-
-        },
-
-        // render the tickmark view
+            /**
+             * go through all ticks, add hover and click interactions
+             */
+            $( '.revision-tick' ).each( function() {
+                Diff.slider.addTooltip ( $( this ), Diff.revisions.at( tickCount++ ).get( 'titleTooltip' ) );
+                $( this ).hover(
+                    function() {
+                        $( this ).find( '.ui-slider-tooltip' ).show().append('<div class="arrow"></div>');
+                    },
+                    function() {
+                        $( this ).find( '.ui-slider-tooltip' ).hide().find( '.arrow' ).remove();
+                    }
+                );
+
+                /**
+                 * move the slider handle when the tick marks are clicked
+                 */
+                $( this ).on( 'click',
+                    { tickCount: tickCount }, // //pass the tick through so we know where to move the handle
+                    function( event ) {
+                        if ( Diff.slider.singleRevision ) { //single handle mode
+                            Diff.rightDiff = event.data.tickCount; //reposition the right handle
+                            Diff.slider.refresh({
+                                value: Diff.rightDiff - 1
+                            } );
+                        } else { //compare two mode
+                            if ( event.data.tickCount < Diff.leftDiff ||
+                                isRtl && event.data.tickCount > Diff.leftDiff ) { // click was on the 'left' side
+                                    Diff.leftDiff = event.data.tickCount; // set the left handle location
+                                    Diff.reloadRight(); //reload the right handle comparison models
+                            } else { //middle or 'right' clicks
+                                Diff.rightDiff = event.data.tickCount; // set the right handle location
+                                Diff.reloadLeft(); //reload left handle models
+                            }
+                            Diff.slider.refresh( { // set the slider handle positions
+                                values: [ Diff.leftDiff, Diff.rightDiff ]
+                            } );
+                        }
+                        Diff.revisionView.render(); // render the main view
+                    } );
+            } );
+        },
+
+        // render the tick mark view
         render: function() {
-            var self = this;
+            var self = this, addHtml;
 
             if ( null !== self.model ) {
-                var addHtml = "";
+                addHtml = "";
                 _.each ( self.model.models, function( theModel ) {
                     addHtml = addHtml + self.template ( theModel.toJSON() );
@@ -486 +526 @@
             return self;
         }
-    });
+    } );
 
     /**
@@ -505 +545 @@
 
         render: function() {
+            var modelcount;
             this.$el.html( this.template );
 
-            var modelcount = Diff.revisions.length;
+            modelcount = Diff.revisions.length;
 
             Diff.slider.singleRevision = Diff.singleRevision;
@@ -581 +622 @@
         // render the revisions
         render: function() {
-            var addHtml = '';
-            var thediff;
+            var addHtml = '', thediff;
 
             // compare two revisions mode?
@@ -607 +647 @@
                 $( '#diff-slider' ).hide(); // don't allow compare two if fewer than three revisions
                 $( '.diff-slider-ticks-wrapper' ).hide();
-            }
-
-            // add tooltips to the handles
-            if ( ! Diff.singleRevision ) {
-                Diff.slider.addTooltip ( $( 'a.ui-slider-handle.left-handle' ),
-                    ( Diff.leftDiff < 0 ) ? '' : Diff.revisions.at( Diff.leftDiff - 1 ).get( 'titleTooltip' ) );
-                Diff.slider.addTooltip ( $( 'a.ui-slider-handle.right-handle' ),
-                    ( Diff.rightDiff > Diff.revisions.length ) ? '' : Diff.revisions.at( Diff.rightDiff - 1 ).get( 'titleTooltip' ) );
-            } else {
-                Diff.slider.addTooltip ( $( 'a.ui-slider-handle' ),
-                    ( Diff.rightDiff > Diff.revisions.length ) ? '' : Diff.revisions.at( Diff.rightDiff - 1 ).get( 'titleTooltip' ) );
             }
 

trunk/wp-admin/revision.php

@@ -119 +119 @@
 
         <div id="loading-status" class="updated message">
-            <p><span class="spinner" ></span> <?php _e( 'Calculating revision diffs' ); ?></p>
+            <p><span class="spinner" ></span></p>
         </div>
 
@@ -174 +174 @@
 
 <script id="tmpl-revision-ticks" type="text/html">
-    <div class="revision-tick completed-{{{ data.completed }}} scope-of-changes-{{{ data.scopeOfChanges }}}"></div>
+    <div class="revision-tick completed-{{{ data.completed }}} scope-of-changes-{{{ data.scopeOfChanges }}}">
+        <span class="ui-slider-tooltip ui-widget-content ui-corner-all hidden"></span>
+    </div>
 </script>
 <?php