Revisions UI: Just another update - Now with improved tick marks and tooltips.
props adamsilverstein. see #23935. git-svn-id: https://develop.svn.wordpress.org/trunk@24174 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Dominik Schilling (ocean90)
parent
85cd918ff6
commit
40cf994e77
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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( '<span class="ui-slider-tooltip ui-widget-content ui-corner-all"></span>' );
|
||||
|
||||
// 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('<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 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
|
||||
|
|
|
|||
|
|
@ -118,7 +118,7 @@ require_once( './admin-header.php' );
|
|||
<h2 class="long-header"><?php echo $h2; ?></h2>
|
||||
|
||||
<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>
|
||||
|
||||
<div class="diff-slider-ticks-wrapper">
|
||||
|
|
@ -173,7 +173,9 @@ require_once( './admin-header.php' );
|
|||
</script>
|
||||
|
||||
<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
|
||||
require_once( './admin-footer.php' );
|
||||
|
|
|
|||
Loading…
Reference in New Issue