diff --git a/wp-admin/css/colors-classic.css b/wp-admin/css/colors-classic.css index abb65bb514..7162311cd5 100644 --- a/wp-admin/css/colors-classic.css +++ b/wp-admin/css/colors-classic.css @@ -1482,7 +1482,8 @@ table.diff .diff-addedline ins { border: 1px solid #d1e5ee; } -#diff-slider .ui-slider-tooltip { +#diff-slider .ui-slider-tooltip, +#diff-slider-ticks .ui-slider-tooltip { border-color: #d1e5ee; background-color: #fff; } @@ -1502,26 +1503,30 @@ table.diff .diff-addedline ins { background-image: none; } -.revision-tick.scope-of-changes-vsmall { +.revision-tick.scope-of-changes-none { background-color: #d1e5ee; } -.revision-tick.scope-of-changes-small { +.revision-tick.scope-of-changes-vsmall { background-color: #b4d5e3; } -.revision-tick.scope-of-changes-med { +.revision-tick.scope-of-changes-small { background-color: #98c5d9; } -.revision-tick.scope-of-changes-large { +.revision-tick.scope-of-changes-med { background-color: #7bb4ce; } -.revision-tick.scope-of-changes-vlarge { +.revision-tick.scope-of-changes-large { background-color: #5ea4c4; } +.revision-tick.scope-of-changes-vlarge { + background-color: #4493b7; +} + .diff-label { color: #666; } diff --git a/wp-admin/css/colors-fresh.css b/wp-admin/css/colors-fresh.css index 20853e1c33..7e0c70fd5b 100644 --- a/wp-admin/css/colors-fresh.css +++ b/wp-admin/css/colors-fresh.css @@ -1376,7 +1376,8 @@ table.diff .diff-addedline ins { border: 1px solid #dfdfdf; } -#diff-slider .ui-slider-tooltip { +#diff-slider .ui-slider-tooltip, +#diff-slider-ticks .ui-slider-tooltip { border-color: #d7d7d7; background-color: #fff; } @@ -1400,35 +1401,34 @@ table.diff .diff-addedline ins { background-image: none; } -.revision-tick.scope-of-changes-vsmall { +.revision-tick.scope-of-changes-none { background-color: #d7d7d7; } -.revision-tick.scope-of-changes-small { +.revision-tick.scope-of-changes-vsmall { background-color: #c3c3c3; } -.revision-tick.scope-of-changes-med { +.revision-tick.scope-of-changes-small { background-color: #b0b0b0; } -.revision-tick.scope-of-changes-large { +.revision-tick.scope-of-changes-med { background-color: #9c9c9c; } -.revision-tick.scope-of-changes-vlarge { +.revision-tick.scope-of-changes-large { background-color: #898989; } +.revision-tick.scope-of-changes-vlarge { + background-color: #757575; +} + .diff-label { color: #666; } -body .ui-tooltip { - border-color: #d7d7d7; - background-color: #fff; -} - /* jQuery UI Slider */ .wp-slider.ui-slider { border-color: #d7d7d7; diff --git a/wp-admin/css/wp-admin.css b/wp-admin/css/wp-admin.css index 59131cd06e..b1ca216ac0 100644 --- a/wp-admin/css/wp-admin.css +++ b/wp-admin/css/wp-admin.css @@ -3585,6 +3585,9 @@ table.diff .diff-addedline ins { #loading-status { display: none; + position: absolute; + top: 8px; + z-index: 1000; } #loading-status .spinner { @@ -3619,11 +3622,12 @@ table.diff .diff-addedline ins { width: 95%; } -#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; } #diff-slider .ui-state-active .ui-slider-tooltip, @@ -3640,17 +3644,6 @@ table.diff .diff-addedline ins { display: inline; } -.diff-slider-ticks-wrapper { - margin: 0 auto; - text-align: center; -} - -#diff-slider-ticks { - position: absolute; - z-index: 2; - margin-top: 20px; -} - .diff-label { margin: 20px 0 5px; padding-left: 3px; @@ -3705,38 +3698,59 @@ table.diff .diff-addedline ins { display: block; } +.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; } -.revision-tick.scope-of-changes-vsmall { +#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-small { +.revision-tick.scope-of-changes-vsmall { width: 2px; - margin-left: -1px; +} + +.revision-tick.scope-of-changes-small { + 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; } .diff-loading { @@ -3757,6 +3771,7 @@ table.diff .diff-addedline ins { .ui-slider-tooltip img { float: left; margin-right: 5px; + margin-top: 5px; } @@ -3852,13 +3867,8 @@ body .ui-slider-tooltip { font-size: .7em; 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; } .wp-slider.ui-slider-horizontal { diff --git a/wp-admin/js/revisions.js b/wp-admin/js/revisions.js index 6f335cd01d..3e711788f0 100644 --- a/wp-admin/js/revisions.js +++ b/wp-admin/js/revisions.js @@ -40,12 +40,13 @@ window.wp = window.wp || {}; slider: null, // the slider instance 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() { self.stopRightModelLoading(); @@ -58,7 +59,8 @@ window.wp = window.wp || {}; loadDiffs: function( models ) { var self = this, revisionsToLoad = models.where( { completed: false } ), - delay = 0; + delay = 0, + totalChanges; // match slider to passed revision_id _.each( revisionsToLoad, function( revision ) { @@ -79,9 +81,7 @@ window.wp = window.wp || {}; if ( 0 === models.where( { completed: false } ).length ) self.stopModelLoadingSpinner(); - self.tickmarkView.render(); - - var totalChanges = model.get( 'linesAdded' ) + model.get( 'linesDeleted' ), + totalChanges = model.get( 'linesAdded' ) + model.get( 'linesDeleted' ), scopeOfChanges = 'vsmall'; // Note: hard coded scope of changes @@ -101,7 +101,7 @@ window.wp = window.wp || {}; // reload if current model refreshed self.revisionView.render(); } - + self.tickmarkView.render(); } } ); }, delay ) ; @@ -191,8 +191,7 @@ window.wp = window.wp || {}; self.slider.refresh({ '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; }, @@ -274,7 +273,6 @@ window.wp = window.wp || {}; model: this.revisions }); this.tickmarkView.render(); - this.tickmarkView.resetTicks(); } }); @@ -401,10 +399,6 @@ window.wp = window.wp || {}; refresh: function( options, slide ) { $( '#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( '' ); - // Triggers the slide event if ( slide ) $( '#diff-slider' ).trigger( 'slide' ); @@ -441,41 +435,87 @@ window.wp = window.wp || {}; model: Revision, 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 ) ); + 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(); - // TODO: adjust right margins for wider ticks so they stay centered on handle stop point + 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(); - // set minimum and maximum widths for tick marks - tickWidth = (tickWidth > 50 ) ? 50 : tickWidth; - tickWidth = (tickWidth < 10 ) ? 10 : tickWidth; - - sliderWidth = tickWidth * (sliderMax - adjustMax ) + 1; + 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 - } + /** + * 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('
'); + }, + 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 tickmark 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() ); }); @@ -485,7 +525,7 @@ window.wp = window.wp || {}; self.resetTicks(); return self; } - }); + } ); /** * wp.revisions.view.Interact @@ -504,9 +544,10 @@ window.wp = window.wp || {}; }, render: function() { + var modelcount; this.$el.html( this.template ); - var modelcount = Diff.revisions.length; + modelcount = Diff.revisions.length; Diff.slider.singleRevision = Diff.singleRevision; Diff.slider.render(); @@ -580,8 +621,7 @@ window.wp = window.wp || {}; // render the revisions render: function() { - var addHtml = ''; - var thediff; + var addHtml = '', thediff; // compare two revisions mode? if ( ! Diff.singleRevision ) { @@ -608,17 +648,6 @@ window.wp = window.wp || {}; $( '.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' ) ); - } - this.toggleCompareTwoCheckbox(); // hide the restore button when on the last sport/current post data diff --git a/wp-admin/revision.php b/wp-admin/revision.php index 0706636588..963a3a51db 100644 --- a/wp-admin/revision.php +++ b/wp-admin/revision.php @@ -118,7 +118,7 @@ require_once( './admin-header.php' );

-

+

@@ -173,7 +173,9 @@ require_once( './admin-header.php' );