Revisions improvements
* Corrected routing behavior * Simplified CSS for tooltips * Compare two mode for RTL * Support for posts without titles props adamsilverstein, ocean90. see #24425. git-svn-id: https://develop.svn.wordpress.org/trunk@24578 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
parent
0d71651c9f
commit
814c36baea
|
@ -1485,7 +1485,8 @@ table.diff .diff-addedline ins {
|
||||||
border: 1px solid #d1e5ee;
|
border: 1px solid #d1e5ee;
|
||||||
}
|
}
|
||||||
|
|
||||||
.diff-slider .ui-slider-tooltip {
|
.revisions-tooltip,
|
||||||
|
.revisions-tooltip-arrow:after {
|
||||||
border-color: #d1e5ee;
|
border-color: #d1e5ee;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
}
|
}
|
||||||
|
|
|
@ -1379,7 +1379,8 @@ table.diff .diff-addedline ins {
|
||||||
border: 1px solid #dfdfdf;
|
border: 1px solid #dfdfdf;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ui-slider-tooltip {
|
.revisions-tooltip,
|
||||||
|
.revisions-tooltip-arrow:after {
|
||||||
border-color: #d7d7d7;
|
border-color: #d7d7d7;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
}
|
}
|
||||||
|
|
|
@ -3501,8 +3501,12 @@ td.plugin-title p {
|
||||||
}
|
}
|
||||||
|
|
||||||
.revisions-controls {
|
.revisions-controls {
|
||||||
padding: 40px 0 20px;
|
padding-top: 40px;
|
||||||
margin-bottom: 10px;
|
height: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.comparing-two-revisions .revisions-controls {
|
||||||
|
height: 140px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.revisions-meta {
|
.revisions-meta {
|
||||||
|
@ -3575,13 +3579,6 @@ table.diff .diff-addedline ins {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.revisions .ui-slider-tooltip {
|
|
||||||
position: absolute;
|
|
||||||
bottom: 105px;
|
|
||||||
margin-left: -70px;
|
|
||||||
line-height: 28px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#diff-title-to strong {
|
#diff-title-to strong {
|
||||||
display: inline;
|
display: inline;
|
||||||
}
|
}
|
||||||
|
@ -3589,7 +3586,7 @@ table.diff .diff-addedline ins {
|
||||||
#diff-header {
|
#diff-header {
|
||||||
-webkit-border-radius: 3px;
|
-webkit-border-radius: 3px;
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
padding: 5px 200px 5px 5px;
|
padding: 5px;
|
||||||
clear: both;
|
clear: both;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -3628,71 +3625,46 @@ table.diff .diff-addedline ins {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ui-tooltip-content img,
|
.revisions-tooltip {
|
||||||
.ui-slider-tooltip img {
|
position: absolute;
|
||||||
|
bottom: 105px;
|
||||||
|
margin-left: -70px;
|
||||||
|
line-height: 28px;
|
||||||
|
z-index: 9999;
|
||||||
|
max-width: 350px;
|
||||||
|
min-width: 130px;
|
||||||
|
padding: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.comparing-two-revisions .revisions-tooltip {
|
||||||
|
bottom: 145px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.revisions-tooltip img {
|
||||||
float: left;
|
float: left;
|
||||||
margin-right: 5px;
|
margin: 2px 5px 0 0;
|
||||||
margin-top: 2px;
|
|
||||||
padding: 0;
|
padding: 0;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.revisions-tooltip-arrow {
|
||||||
/* jQuery UI Tooltip 1.10.1 */
|
|
||||||
|
|
||||||
.ui-tooltip,
|
|
||||||
.ui-slider-tooltip {
|
|
||||||
padding: 4px;
|
|
||||||
position: absolute;
|
|
||||||
z-index: 9999;
|
|
||||||
max-width: 300px;
|
|
||||||
min-width: 130px;
|
|
||||||
}
|
|
||||||
|
|
||||||
body .ui-tooltip,
|
|
||||||
body .ui-slider-tooltip {
|
|
||||||
border-width: 1px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ui-tooltip,
|
|
||||||
.ui-slider-tooltip,
|
|
||||||
.arrow:after {
|
|
||||||
border: 1px solid #d7d7d7;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ui-tooltip,
|
|
||||||
.ui-slider-tooltip {
|
|
||||||
padding: 4px 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.arrow {
|
|
||||||
width: 70px;
|
width: 70px;
|
||||||
height: 16px;
|
height: 15px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 0;
|
left: 0;
|
||||||
margin-left: -35px;
|
margin-left: 35px;
|
||||||
bottom: 90px;
|
bottom: -15px;
|
||||||
z-index: 10000;
|
z-index: 10000;
|
||||||
}
|
}
|
||||||
|
|
||||||
.arrow.top {
|
.revisions-tooltip-arrow:after {
|
||||||
top: -16px;
|
|
||||||
bottom: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.arrow.left {
|
|
||||||
left: 20%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.arrow:after {
|
|
||||||
content: "";
|
content: "";
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 20px;
|
left: 20px;
|
||||||
top: -20px;
|
top: -20px;
|
||||||
width: 25px;
|
width: 25px;
|
||||||
height: 25px;
|
height: 25px;
|
||||||
background-color: #FFF;
|
|
||||||
-webkit-transform: rotate(45deg);
|
-webkit-transform: rotate(45deg);
|
||||||
-moz-transform: rotate(45deg);
|
-moz-transform: rotate(45deg);
|
||||||
-ms-transform: rotate(45deg);
|
-ms-transform: rotate(45deg);
|
||||||
|
@ -3700,13 +3672,13 @@ body .ui-slider-tooltip {
|
||||||
tranform: rotate(45deg);
|
tranform: rotate(45deg);
|
||||||
}
|
}
|
||||||
|
|
||||||
.arrow.top:after {
|
.revisions-tooltip,
|
||||||
bottom: -20px;
|
.revisions-tooltip-arrow:after {
|
||||||
top: auto;
|
border-width: 1px;
|
||||||
|
border-style: solid;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* jQuery UI Slider */
|
/* jQuery UI Slider */
|
||||||
|
|
||||||
.wp-slider.ui-slider {
|
.wp-slider.ui-slider {
|
||||||
position: relative;
|
position: relative;
|
||||||
border-width: 1px;
|
border-width: 1px;
|
||||||
|
@ -3786,30 +3758,6 @@ body .ui-slider-tooltip {
|
||||||
right: 0;
|
right: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.wp-slider.ui-slider-vertical {
|
|
||||||
width: .8em;
|
|
||||||
height: 100px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.wp-slider.ui-slider-vertical .ui-slider-handle {
|
|
||||||
left: -.3em;
|
|
||||||
margin-left: 0;
|
|
||||||
margin-bottom: -.6em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.wp-slider.ui-slider-vertical .ui-slider-range {
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.wp-slider.ui-slider-vertical .ui-slider-range-min {
|
|
||||||
bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.wp-slider.ui-slider-vertical .ui-slider-range-max {
|
|
||||||
top: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/*------------------------------------------------------------------------------
|
/*------------------------------------------------------------------------------
|
||||||
11.3 - Featured Images
|
11.3 - Featured Images
|
||||||
|
|
|
@ -27,6 +27,12 @@ function wp_get_revision_ui_diff( $post, $compare_from, $compare_to ) {
|
||||||
$compare_to = $temp;
|
$compare_to = $temp;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Add default title if title field is empty
|
||||||
|
if ( $compare_from && empty( $compare_from->post_title ) )
|
||||||
|
$compare_from->post_title = __( '(no title)' );
|
||||||
|
if ( empty( $compare_to->post_title ) )
|
||||||
|
$compare_to->post_title = __( '(no title)' );
|
||||||
|
|
||||||
$return = array();
|
$return = array();
|
||||||
|
|
||||||
foreach ( _wp_post_revision_fields() as $field => $name ) {
|
foreach ( _wp_post_revision_fields() as $field => $name ) {
|
||||||
|
|
|
@ -357,19 +357,16 @@ window.wp = window.wp || {};
|
||||||
|
|
||||||
initialize: function() {
|
initialize: function() {
|
||||||
this.$el.html( this.template() );
|
this.$el.html( this.template() );
|
||||||
this.listenTo( this.model, 'change:compareTwoMode', this.updateCompareTwoMode );
|
|
||||||
},
|
},
|
||||||
|
|
||||||
updateCompareTwoMode: function() {
|
updateCompareTwoMode: function() {
|
||||||
if ( this.model.get( 'compareTwoMode' ) ) {
|
if ( this.model.get( 'compareTwoMode' ) ) {
|
||||||
$( '.compare-two-revisions' ).parent().css('border', '1px solid #f00;').prop( 'checked', true );
|
$( '.compare-two-revisions' ).prop( 'checked', true );
|
||||||
$( '.revisions-control-frame' ).addClass( 'comparing-two-revisions' );
|
|
||||||
// in RTL mode the 'left handle' is the second in the slider, 'right' is first
|
// in RTL mode the 'left handle' is the second in the slider, 'right' is first
|
||||||
$( '.wp-slider a.ui-slider-handle' ).first().addClass( isRtl ? 'right-handle' : 'left-handle' );
|
$( '.wp-slider a.ui-slider-handle' ).first().addClass( isRtl ? 'right-handle' : 'left-handle' );
|
||||||
$( '.wp-slider a.ui-slider-handle' ).last().addClass( isRtl ? 'left-handle' : 'right-handle' );
|
$( '.wp-slider a.ui-slider-handle' ).last().addClass( isRtl ? 'left-handle' : 'right-handle' );
|
||||||
} else {
|
} else {
|
||||||
$( '.compare-two-revisions' ).prop( 'checked', false );
|
$( '.compare-two-revisions' ).prop( 'checked', false );
|
||||||
$( '.revisions-control-frame' ).removeClass( 'comparing-two-revisions' );
|
|
||||||
$( '.wp-slider a.ui-slider-handle' ).removeClass( 'left-handle' ).removeClass( 'right-handle' );
|
$( '.wp-slider a.ui-slider-handle' ).removeClass( 'left-handle' ).removeClass( 'right-handle' );
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -392,6 +389,11 @@ window.wp = window.wp || {};
|
||||||
// Hide compare two mode toggle when fewer than three revisions.
|
// Hide compare two mode toggle when fewer than three revisions.
|
||||||
if ( this.model.revisions.length < 3 )
|
if ( this.model.revisions.length < 3 )
|
||||||
$( '.revision-toggle-compare-mode' ).hide();
|
$( '.revision-toggle-compare-mode' ).hide();
|
||||||
|
|
||||||
|
this.listenTo( this.model, 'change:compareTwoMode', this.updateCompareTwoMode );
|
||||||
|
|
||||||
|
// Update the mode in case route has set it
|
||||||
|
this.updateCompareTwoMode();
|
||||||
}
|
}
|
||||||
|
|
||||||
});
|
});
|
||||||
|
@ -425,13 +427,12 @@ window.wp = window.wp || {};
|
||||||
if ( null === this.model.get( 'revision' ) )
|
if ( null === this.model.get( 'revision' ) )
|
||||||
return;
|
return;
|
||||||
|
|
||||||
|
// Insert revision data.
|
||||||
this.$el.html( this.template( this.model.get( 'revision' ).toJSON() ) );
|
this.$el.html( this.template( this.model.get( 'revision' ).toJSON() ) );
|
||||||
|
|
||||||
var offset = $( '.revisions-buttons' ).offset().left,
|
// Set the position.
|
||||||
calculatedX = this.model.get( 'position' ) - offset;
|
var offset = $( '.revisions-buttons' ).offset().left;
|
||||||
|
this.$el.css( 'left', this.model.get( 'position' ) - offset );
|
||||||
$( '.ui-slider-tooltip', this.$el ).css( 'left', calculatedX );
|
|
||||||
$( '.arrow', this.$el ).css( 'left', calculatedX );
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -542,6 +543,9 @@ window.wp = window.wp || {};
|
||||||
this.settings.attributes.value = this.model.revisions.indexOf(
|
this.settings.attributes.value = this.model.revisions.indexOf(
|
||||||
this.model.revisions.findWhere( { id: Number( revisions.settings.selectedRevision ) } ) );
|
this.model.revisions.findWhere( { id: Number( revisions.settings.selectedRevision ) } ) );
|
||||||
|
|
||||||
|
// And update the slider in case the route has set it.
|
||||||
|
this.updateSliderSettings();
|
||||||
|
|
||||||
this.slide( '', this.settings.attributes );
|
this.slide( '', this.settings.attributes );
|
||||||
|
|
||||||
this.$el.slider( this.settings.toJSON() );
|
this.$el.slider( this.settings.toJSON() );
|
||||||
|
@ -555,7 +559,6 @@ window.wp = window.wp || {};
|
||||||
|
|
||||||
// Listen for changes in the diffId
|
// Listen for changes in the diffId
|
||||||
this.listenTo( this.model, 'change:diffId', this.diffIdChanged );
|
this.listenTo( this.model, 'change:diffId', this.diffIdChanged );
|
||||||
|
|
||||||
},
|
},
|
||||||
|
|
||||||
mousemove: function( e ) {
|
mousemove: function( e ) {
|
||||||
|
@ -589,27 +592,44 @@ window.wp = window.wp || {};
|
||||||
},
|
},
|
||||||
|
|
||||||
updateSliderSettings: function() {
|
updateSliderSettings: function() {
|
||||||
if ( isRtl ) {
|
if ( this.model.get( 'compareTwoMode' ) ) {
|
||||||
this.$el.slider( { // Order reversed in RTL mode
|
var leftValue, rightValue;
|
||||||
value: this.model.revisions.length - this.model.revisions.indexOf( this.model.get( 'to' ) ) - 1
|
|
||||||
|
// In single handle mode, the 1st stored revision is 'blank' and the 'from' model is not set
|
||||||
|
// In this case we move the to index over one
|
||||||
|
if ( 'undefined' == typeof this.model.get( 'from' ) ) {
|
||||||
|
if ( isRtl ) {
|
||||||
|
leftValue = this.model.revisions.length - this.model.revisions.indexOf( this.model.get( 'to' ) ) - 2;
|
||||||
|
rightValue = leftValue + 1;
|
||||||
|
} else {
|
||||||
|
leftValue = this.model.revisions.indexOf( this.model.get( 'to' ) );
|
||||||
|
rightValue = leftValue + 1;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
leftValue = isRtl ? this.model.revisions.length - this.model.revisions.indexOf( this.model.get( 'to' ) ) - 1 :
|
||||||
|
this.model.revisions.indexOf( this.model.get( 'from' ) ),
|
||||||
|
rightValue = isRtl ? this.model.revisions.length - this.model.revisions.indexOf( this.model.get( 'from' ) ) - 1 :
|
||||||
|
this.model.revisions.indexOf( this.model.get( 'to' ) );
|
||||||
|
}
|
||||||
|
|
||||||
|
// Set handles to current from / to models.
|
||||||
|
// Reverse order for RTL
|
||||||
|
this.$el.slider( {
|
||||||
|
values: [
|
||||||
|
leftValue,
|
||||||
|
rightValue
|
||||||
|
],
|
||||||
|
value: null,
|
||||||
|
range: true // Range mode ensures handles can't cross
|
||||||
} );
|
} );
|
||||||
} else {
|
} else {
|
||||||
if ( this.model.get( 'compareTwoMode' ) ) {
|
this.$el.slider( { // Set handle to current to model
|
||||||
this.$el.slider( { // Set handles to current from/to models
|
// Reverse order for RTL.
|
||||||
values: [
|
value: isRtl ? this.model.revisions.length - this.model.revisions.indexOf( this.model.get( 'to' ) ) - 1 :
|
||||||
this.model.revisions.indexOf( this.model.get( 'from' ) ),
|
this.model.revisions.indexOf( this.model.get( 'to' ) ),
|
||||||
this.model.revisions.indexOf( this.model.get( 'to' ) )
|
values: null, // Clear existing two handled values
|
||||||
],
|
range: false
|
||||||
value: null,
|
} );
|
||||||
range: true // Range mode ensures handles can't cross
|
|
||||||
} );
|
|
||||||
} else {
|
|
||||||
this.$el.slider( { // Set handle to current to model
|
|
||||||
value: this.model.revisions.indexOf( this.model.get( 'to' ) ),
|
|
||||||
values: null, // Clear existing two handled values
|
|
||||||
range: false
|
|
||||||
} );
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
if ( this.model.get( 'compareTwoMode' ) ){
|
if ( this.model.get( 'compareTwoMode' ) ){
|
||||||
$( '.revisions' ).addClass( 'comparing-two-revisions' );
|
$( '.revisions' ).addClass( 'comparing-two-revisions' );
|
||||||
|
@ -675,9 +695,10 @@ window.wp = window.wp || {};
|
||||||
return false;
|
return false;
|
||||||
|
|
||||||
attributes = {
|
attributes = {
|
||||||
to: this.model.revisions.at( isRtl ? this.model.revisions.length - ui.values[1] - 1 : ui.values[1] ), // Reverse directions for RTL.
|
to: this.model.revisions.at( isRtl ? this.model.revisions.length - ui.values[0] - 1 : ui.values[1] ), // Reverse directions for RTL.
|
||||||
from: this.model.revisions.at( isRtl ? this.model.revisions.length - ui.values[0] - 1 : ui.values[0] ) // Reverse directions for RTL.
|
from: this.model.revisions.at( isRtl ? this.model.revisions.length - ui.values[1] - 1 : ui.values[0] ) // Reverse directions for RTL.
|
||||||
};
|
};
|
||||||
|
|
||||||
} else {
|
} else {
|
||||||
// Compare single revision mode
|
// Compare single revision mode
|
||||||
var sliderPosition = this.getSliderPosition( ui );
|
var sliderPosition = this.getSliderPosition( ui );
|
||||||
|
|
|
@ -55,7 +55,7 @@ default :
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
|
|
||||||
$post_title = '<a href="' . get_edit_post_link() . '">' . get_the_title() . '</a>';
|
$post_title = '<a href="' . get_edit_post_link() . '">' . _draft_or_post_title() . '</a>';
|
||||||
$h2 = sprintf( __( 'Compare Revisions of “%1$s”' ), $post_title );
|
$h2 = sprintf( __( 'Compare Revisions of “%1$s”' ), $post_title );
|
||||||
$title = __( 'Revisions' );
|
$title = __( 'Revisions' );
|
||||||
|
|
||||||
|
@ -127,14 +127,14 @@ require_once( './admin-header.php' );
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<script id="tmpl-revisions-tooltip" type="text/html">
|
<script id="tmpl-revisions-tooltip" type="text/html">
|
||||||
<div class="ui-slider-tooltip ui-widget-content ui-corner-all ">
|
<div class="revisions-tooltip-content">
|
||||||
<# if ( 'undefined' !== typeof data && 'undefined' !== typeof data.author ) { #>
|
<# if ( 'undefined' !== typeof data && 'undefined' !== typeof data.author ) { #>
|
||||||
{{{ data.author.avatar }}} {{{ data.author.name }}},
|
{{{ data.author.avatar }}} {{{ data.author.name }}},
|
||||||
{{{ data.timeAgo }}} <?php _e( 'ago' ); ?>
|
{{{ data.timeAgo }}} <?php _e( 'ago' ); ?>
|
||||||
({{{ data.dateShort }}})
|
({{{ data.dateShort }}})
|
||||||
<# } #>
|
<# } #>
|
||||||
</div>
|
</div>
|
||||||
<div class="arrow"></div>
|
<div class="revisions-tooltip-arrow"></div>
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<script id="tmpl-revisions-checkbox" type="text/html">
|
<script id="tmpl-revisions-checkbox" type="text/html">
|
||||||
|
|
|
@ -276,7 +276,7 @@ function wp_default_scripts( &$scripts ) {
|
||||||
|
|
||||||
$scripts->add( 'wp-backbone', "/wp-includes/js/wp-backbone$suffix.js", array('backbone', 'wp-util'), false, 1 );
|
$scripts->add( 'wp-backbone', "/wp-includes/js/wp-backbone$suffix.js", array('backbone', 'wp-util'), false, 1 );
|
||||||
|
|
||||||
$scripts->add( 'revisions', "/wp-admin/js/revisions$suffix.js", array( 'wp-backbone', 'jquery-ui-slider', 'jquery-ui-tooltip' ), false, 1 );
|
$scripts->add( 'revisions', "/wp-admin/js/revisions$suffix.js", array( 'wp-backbone', 'jquery-ui-slider' ), false, 1 );
|
||||||
|
|
||||||
$scripts->add( 'imgareaselect', "/wp-includes/js/imgareaselect/jquery.imgareaselect$suffix.js", array('jquery'), '0.9.8', 1 );
|
$scripts->add( 'imgareaselect', "/wp-includes/js/imgareaselect/jquery.imgareaselect$suffix.js", array('jquery'), '0.9.8', 1 );
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue