From 814c36baea5f8d5d27df6f15e793c8e4de7ef9ba Mon Sep 17 00:00:00 2001 From: "Dominik Schilling (ocean90)" Date: Sat, 6 Jul 2013 10:48:14 +0000 Subject: [PATCH] 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 --- wp-admin/css/colors-classic.css | 3 +- wp-admin/css/colors-fresh.css | 3 +- wp-admin/css/wp-admin.css | 118 +++++++++----------------------- wp-admin/includes/revision.php | 6 ++ wp-admin/js/revisions.js | 83 +++++++++++++--------- wp-admin/revision.php | 6 +- wp-includes/script-loader.php | 2 +- 7 files changed, 99 insertions(+), 122 deletions(-) diff --git a/wp-admin/css/colors-classic.css b/wp-admin/css/colors-classic.css index bcac0ed7a8..d7ee872f8e 100644 --- a/wp-admin/css/colors-classic.css +++ b/wp-admin/css/colors-classic.css @@ -1485,7 +1485,8 @@ table.diff .diff-addedline ins { border: 1px solid #d1e5ee; } -.diff-slider .ui-slider-tooltip { +.revisions-tooltip, +.revisions-tooltip-arrow:after { border-color: #d1e5ee; background-color: #fff; } diff --git a/wp-admin/css/colors-fresh.css b/wp-admin/css/colors-fresh.css index 737c9d99cb..c97c067896 100644 --- a/wp-admin/css/colors-fresh.css +++ b/wp-admin/css/colors-fresh.css @@ -1379,7 +1379,8 @@ table.diff .diff-addedline ins { border: 1px solid #dfdfdf; } -.ui-slider-tooltip { +.revisions-tooltip, +.revisions-tooltip-arrow:after { border-color: #d7d7d7; background-color: #fff; } diff --git a/wp-admin/css/wp-admin.css b/wp-admin/css/wp-admin.css index d9616ab298..bc9db77e8c 100644 --- a/wp-admin/css/wp-admin.css +++ b/wp-admin/css/wp-admin.css @@ -3501,8 +3501,12 @@ td.plugin-title p { } .revisions-controls { - padding: 40px 0 20px; - margin-bottom: 10px; + padding-top: 40px; + height: 100px; +} + +.comparing-two-revisions .revisions-controls { + height: 140px; } .revisions-meta { @@ -3575,13 +3579,6 @@ table.diff .diff-addedline ins { text-decoration: none; } -.revisions .ui-slider-tooltip { - position: absolute; - bottom: 105px; - margin-left: -70px; - line-height: 28px; -} - #diff-title-to strong { display: inline; } @@ -3589,7 +3586,7 @@ table.diff .diff-addedline ins { #diff-header { -webkit-border-radius: 3px; border-radius: 3px; - padding: 5px 200px 5px 5px; + padding: 5px; clear: both; } @@ -3628,71 +3625,46 @@ table.diff .diff-addedline ins { display: block; } -.ui-tooltip-content img, -.ui-slider-tooltip img { +.revisions-tooltip { + 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; - margin-right: 5px; - margin-top: 2px; + margin: 2px 5px 0 0; padding: 0; vertical-align: middle; } - -/* 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 { +.revisions-tooltip-arrow { width: 70px; - height: 16px; + height: 15px; overflow: hidden; position: absolute; left: 0; - margin-left: -35px; - bottom: 90px; + margin-left: 35px; + bottom: -15px; z-index: 10000; } -.arrow.top { - top: -16px; - bottom: auto; -} - -.arrow.left { - left: 20%; -} - -.arrow:after { +.revisions-tooltip-arrow:after { content: ""; position: absolute; left: 20px; top: -20px; width: 25px; height: 25px; - background-color: #FFF; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); @@ -3700,13 +3672,13 @@ body .ui-slider-tooltip { tranform: rotate(45deg); } -.arrow.top:after { - bottom: -20px; - top: auto; +.revisions-tooltip, +.revisions-tooltip-arrow:after { + border-width: 1px; + border-style: solid; } /* jQuery UI Slider */ - .wp-slider.ui-slider { position: relative; border-width: 1px; @@ -3786,30 +3758,6 @@ body .ui-slider-tooltip { 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 diff --git a/wp-admin/includes/revision.php b/wp-admin/includes/revision.php index 6f1c986cc3..c64fa416e9 100644 --- a/wp-admin/includes/revision.php +++ b/wp-admin/includes/revision.php @@ -27,6 +27,12 @@ function wp_get_revision_ui_diff( $post, $compare_from, $compare_to ) { $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(); foreach ( _wp_post_revision_fields() as $field => $name ) { diff --git a/wp-admin/js/revisions.js b/wp-admin/js/revisions.js index 24756ad5c2..d131346b43 100644 --- a/wp-admin/js/revisions.js +++ b/wp-admin/js/revisions.js @@ -357,19 +357,16 @@ window.wp = window.wp || {}; initialize: function() { this.$el.html( this.template() ); - this.listenTo( this.model, 'change:compareTwoMode', this.updateCompareTwoMode ); }, updateCompareTwoMode: function() { if ( this.model.get( 'compareTwoMode' ) ) { - $( '.compare-two-revisions' ).parent().css('border', '1px solid #f00;').prop( 'checked', true ); - $( '.revisions-control-frame' ).addClass( 'comparing-two-revisions' ); + $( '.compare-two-revisions' ).prop( 'checked', true ); // 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' ).last().addClass( isRtl ? 'left-handle' : 'right-handle' ); } else { $( '.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' ); } @@ -392,6 +389,11 @@ window.wp = window.wp || {}; // Hide compare two mode toggle when fewer than three revisions. if ( this.model.revisions.length < 3 ) $( '.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' ) ) return; + // Insert revision data. this.$el.html( this.template( this.model.get( 'revision' ).toJSON() ) ); - var offset = $( '.revisions-buttons' ).offset().left, - calculatedX = this.model.get( 'position' ) - offset; - - $( '.ui-slider-tooltip', this.$el ).css( 'left', calculatedX ); - $( '.arrow', this.$el ).css( 'left', calculatedX ); + // Set the position. + var offset = $( '.revisions-buttons' ).offset().left; + this.$el.css( 'left', this.model.get( 'position' ) - offset ); } }); @@ -542,6 +543,9 @@ window.wp = window.wp || {}; this.settings.attributes.value = this.model.revisions.indexOf( 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.$el.slider( this.settings.toJSON() ); @@ -555,7 +559,6 @@ window.wp = window.wp || {}; // Listen for changes in the diffId this.listenTo( this.model, 'change:diffId', this.diffIdChanged ); - }, mousemove: function( e ) { @@ -589,27 +592,44 @@ window.wp = window.wp || {}; }, updateSliderSettings: function() { - if ( isRtl ) { - this.$el.slider( { // Order reversed in RTL mode - value: this.model.revisions.length - this.model.revisions.indexOf( this.model.get( 'to' ) ) - 1 + if ( this.model.get( 'compareTwoMode' ) ) { + var leftValue, rightValue; + + // 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 { - if ( this.model.get( 'compareTwoMode' ) ) { - this.$el.slider( { // Set handles to current from/to models - values: [ - this.model.revisions.indexOf( this.model.get( 'from' ) ), - this.model.revisions.indexOf( this.model.get( 'to' ) ) - ], - 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 - } ); - } + this.$el.slider( { // Set handle to current to model + // Reverse order for RTL. + value: isRtl ? this.model.revisions.length - this.model.revisions.indexOf( this.model.get( 'to' ) ) - 1 : + this.model.revisions.indexOf( this.model.get( 'to' ) ), + values: null, // Clear existing two handled values + range: false + } ); } if ( this.model.get( 'compareTwoMode' ) ){ $( '.revisions' ).addClass( 'comparing-two-revisions' ); @@ -675,9 +695,10 @@ window.wp = window.wp || {}; return false; attributes = { - to: this.model.revisions.at( isRtl ? this.model.revisions.length - ui.values[1] - 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. + 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[1] - 1 : ui.values[0] ) // Reverse directions for RTL. }; + } else { // Compare single revision mode var sliderPosition = this.getSliderPosition( ui ); diff --git a/wp-admin/revision.php b/wp-admin/revision.php index d632e73460..bbf751bd67 100644 --- a/wp-admin/revision.php +++ b/wp-admin/revision.php @@ -55,7 +55,7 @@ default : break; } - $post_title = '' . get_the_title() . ''; + $post_title = '' . _draft_or_post_title() . ''; $h2 = sprintf( __( 'Compare Revisions of “%1$s”' ), $post_title ); $title = __( 'Revisions' ); @@ -127,14 +127,14 @@ require_once( './admin-header.php' );