WordPress.org
Get WordPress

Make WordPress Core

Changeset 24578


Ignore:
Timestamp:
07/06/2013 10:48:14 AM (11 years ago)
Author:
ocean90
Message:

Revisions improvements

  • Corrected routing behavior
  • Simplified CSS for tooltips
  • Compare two mode for RTL
  • Support for posts without titles

props adamsilverstein, ocean90. see #24425.

Location:
trunk
Files:
7 edited

Legend:

Unmodified
Added
Removed

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

    r24574 r24578  
    14861486}
    14871487
    1488 .diff-slider .ui-slider-tooltip {
     1488.revisions-tooltip,
     1489.revisions-tooltip-arrow:after {
    14891490    border-color: #d1e5ee;
    14901491    background-color: #fff;

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

    r24574 r24578  
    13801380}
    13811381
    1382 .ui-slider-tooltip {
     1382.revisions-tooltip,
     1383.revisions-tooltip-arrow:after {
    13831384    border-color: #d7d7d7;
    13841385    background-color: #fff;

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

    r24576 r24578  
    35023502
    35033503.revisions-controls {
    3504     padding: 40px 0 20px;
    3505     margin-bottom: 10px;
     3504    padding-top: 40px;
     3505    height: 100px;
     3506}
     3507
     3508.comparing-two-revisions .revisions-controls {
     3509    height: 140px;
    35063510}
    35073511
    … …  
    35763580}
    35773581
    3578 .revisions .ui-slider-tooltip {
     3582#diff-title-to strong {
     3583    display: inline;
     3584}
     3585
     3586#diff-header {
     3587    -webkit-border-radius: 3px;
     3588    border-radius: 3px;
     3589    padding: 5px;
     3590    clear: both;
     3591}
     3592
     3593.diff-header {
     3594    min-height: 35px;
     3595    line-height: 35px;
     3596}
     3597
     3598.diff-title {
     3599    float: left;
     3600}
     3601
     3602.diff-title strong {
     3603    font-size: 14px;
     3604    width: 60px;
     3605    text-align: right;
     3606    float: left;
     3607    margin-right: 5px;
     3608}
     3609
     3610.diff-title img {
     3611    vertical-align: middle;
     3612    margin-left: 5px;
     3613}
     3614
     3615#restore-revision {
     3616    margin-left: 10px;
     3617}
     3618
     3619#diff-header-from {
     3620    display: none;
     3621}
     3622
     3623.comparing-two-revisions #diff-title-from,
     3624.comparing-two-revisions #diff-header-from {
     3625    display: block;
     3626}
     3627
     3628.revisions-tooltip {
    35793629    position: absolute;
    35803630    bottom: 105px;
    35813631    margin-left: -70px;
    35823632    line-height: 28px;
    3583 }
    3584 
    3585 #diff-title-to strong {
    3586     display: inline;
    3587 }
    3588 
    3589 #diff-header {
    3590     -webkit-border-radius: 3px;
    3591     border-radius: 3px;
    3592     padding: 5px 200px 5px 5px;
    3593     clear: both;
    3594 }
    3595 
    3596 .diff-header {
    3597     min-height: 35px;
    3598     line-height: 35px;
    3599 }
    3600 
    3601 .diff-title {
    3602     float: left;
    3603 }
    3604 
    3605 .diff-title strong {
    3606     font-size: 14px;
    3607     width: 60px;
    3608     text-align: right;
    3609     float: left;
    3610     margin-right: 5px;
    3611 }
    3612 
    3613 .diff-title img {
    3614     vertical-align: middle;
    3615     margin-left: 5px;
    3616 }
    3617 
    3618 #restore-revision {
    3619     margin-left: 10px;
    3620 }
    3621 
    3622 #diff-header-from {
    3623     display: none;
    3624 }
    3625 
    3626 .comparing-two-revisions #diff-title-from,
    3627 .comparing-two-revisions #diff-header-from {
    3628     display: block;
    3629 }
    3630 
    3631 .ui-tooltip-content img,
    3632 .ui-slider-tooltip img {
    3633     float: left;
    3634     margin-right: 5px;
    3635     margin-top: 2px;
     3633    z-index: 9999;
     3634    max-width: 350px;
     3635    min-width: 130px;
     3636    padding: 4px;
     3637}
     3638
     3639.comparing-two-revisions .revisions-tooltip {
     3640    bottom: 145px;
     3641}
     3642
     3643.revisions-tooltip img {
     3644    float: left;
     3645    margin: 2px 5px 0 0;
    36363646    padding: 0;
    36373647    vertical-align: middle;
    36383648}
    36393649
    3640 
    3641 /*  jQuery UI Tooltip 1.10.1 */
    3642 
    3643 .ui-tooltip,
    3644 .ui-slider-tooltip {
    3645     padding: 4px;
    3646     position: absolute;
    3647     z-index: 9999;
    3648     max-width: 300px;
    3649     min-width: 130px;
    3650 }
    3651 
    3652 body .ui-tooltip,
    3653 body .ui-slider-tooltip {
    3654     border-width: 1px;
    3655 }
    3656 
    3657 .ui-tooltip,
    3658 .ui-slider-tooltip,
    3659 .arrow:after {
    3660     border: 1px solid #d7d7d7;
    3661 }
    3662 
    3663 .ui-tooltip,
    3664 .ui-slider-tooltip {
    3665     padding: 4px 4px;
    3666 }
    3667 
    3668 .arrow {
     3650.revisions-tooltip-arrow {
    36693651    width: 70px;
    3670     height: 16px;
     3652    height: 15px;
    36713653    overflow: hidden;
    36723654    position: absolute;
    36733655    left: 0;
    3674     margin-left: -35px;
    3675     bottom: 90px;
     3656    margin-left: 35px;
     3657    bottom: -15px;
    36763658    z-index: 10000;
    36773659}
    36783660
    3679 .arrow.top {
    3680     top: -16px;
    3681     bottom: auto;
    3682 }
    3683 
    3684 .arrow.left {
    3685     left: 20%;
    3686 }
    3687 
    3688 .arrow:after {
     3661.revisions-tooltip-arrow:after {
    36893662    content: "";
    36903663    position: absolute;
    … …  
    36933666    width: 25px;
    36943667    height: 25px;
    3695     background-color: #FFF;
    36963668    -webkit-transform: rotate(45deg);
    36973669    -moz-transform: rotate(45deg);
    … …  
    37013673}
    37023674
    3703 .arrow.top:after {
    3704     bottom: -20px;
    3705     top: auto;
     3675.revisions-tooltip,
     3676.revisions-tooltip-arrow:after {
     3677    border-width: 1px;
     3678    border-style: solid;
    37063679}
    37073680
    37083681 /* jQuery UI Slider */
    3709 
    37103682.wp-slider.ui-slider {
    37113683    position: relative;
    … …  
    37853757.wp-slider.ui-slider-horizontal .ui-slider-range-max {
    37863758    right: 0;
    3787 }
    3788 
    3789 .wp-slider.ui-slider-vertical {
    3790     width: .8em;
    3791     height: 100px;
    3792 }
    3793 
    3794 .wp-slider.ui-slider-vertical .ui-slider-handle {
    3795     left: -.3em;
    3796     margin-left: 0;
    3797     margin-bottom: -.6em;
    3798 }
    3799 
    3800 .wp-slider.ui-slider-vertical .ui-slider-range {
    3801     left: 0;
    3802     width: 100%;
    3803 }
    3804 
    3805 .wp-slider.ui-slider-vertical .ui-slider-range-min {
    3806     bottom: 0;
    3807 }
    3808 
    3809 .wp-slider.ui-slider-vertical .ui-slider-range-max {
    3810     top: 0;
    38113759}
    38123760

  • trunk/wp-admin/includes/revision.php

    r24529 r24578  
    2727        $compare_to = $temp;
    2828    }
     29
     30    // Add default title if title field is empty
     31    if ( $compare_from && empty( $compare_from->post_title ) )
     32        $compare_from->post_title = __( '(no title)' );
     33    if ( empty( $compare_to->post_title ) )
     34        $compare_to->post_title = __( '(no title)' );
    2935
    3036    $return = array();

  • trunk/wp-admin/js/revisions.js

    r24575 r24578  
    358358        initialize: function() {
    359359            this.$el.html( this.template() );
    360             this.listenTo( this.model, 'change:compareTwoMode', this.updateCompareTwoMode );
    361360        },
    362361
    363362        updateCompareTwoMode: function() {
    364363            if ( this.model.get( 'compareTwoMode' ) ) {
    365                 $( '.compare-two-revisions' ).parent().css('border', '1px solid #f00;').prop( 'checked', true );
    366                 $( '.revisions-control-frame' ).addClass( 'comparing-two-revisions' );
     364                $( '.compare-two-revisions' ).prop( 'checked', true );
    367365                // in RTL mode the 'left handle' is the second in the slider, 'right' is first
    368366                $( '.wp-slider a.ui-slider-handle' ).first().addClass( isRtl ? 'right-handle' : 'left-handle' );
    … …  
    370368            } else {
    371369                $( '.compare-two-revisions' ).prop( 'checked', false );
    372                 $( '.revisions-control-frame' ).removeClass( 'comparing-two-revisions' );
    373370                $( '.wp-slider a.ui-slider-handle' ).removeClass( 'left-handle' ).removeClass( 'right-handle' );
    374371            }
    … …  
    393390            if ( this.model.revisions.length < 3 )
    394391                $( '.revision-toggle-compare-mode' ).hide();
     392
     393            this.listenTo( this.model, 'change:compareTwoMode', this.updateCompareTwoMode );
     394
     395            // Update the mode in case route has set it
     396            this.updateCompareTwoMode();
    395397        }
    396398
    … …  
    426428                return;
    427429
     430            // Insert revision data.
    428431            this.$el.html( this.template( this.model.get( 'revision' ).toJSON() ) );
    429432
    430             var offset = $( '.revisions-buttons' ).offset().left,
    431                 calculatedX = this.model.get( 'position' ) - offset;
    432 
    433             $( '.ui-slider-tooltip', this.$el ).css( 'left', calculatedX );
    434             $( '.arrow', this.$el ).css( 'left', calculatedX );
     433            // Set the position.
     434            var offset = $( '.revisions-buttons' ).offset().left;
     435            this.$el.css( 'left', this.model.get( 'position' ) - offset );
    435436        }
    436437    });
    … …  
    543544                this.model.revisions.findWhere( { id: Number( revisions.settings.selectedRevision ) } ) );
    544545
     546            // And update the slider in case the route has set it.
     547            this.updateSliderSettings();
     548
    545549            this.slide( '', this.settings.attributes );
    546550
    … …  
    556560            // Listen for changes in the diffId
    557561            this.listenTo( this.model, 'change:diffId', this.diffIdChanged );
    558 
    559562        },
    560563
    … …  
    590593
    591594        updateSliderSettings: function() {
    592             if ( isRtl ) {
    593                 this.$el.slider( { // Order reversed in RTL mode
    594                     value: this.model.revisions.length - this.model.revisions.indexOf( this.model.get( 'to' ) ) - 1
     595            if ( this.model.get( 'compareTwoMode' ) ) {
     596                var leftValue, rightValue;
     597
     598                // In single handle mode, the 1st stored revision is 'blank' and the 'from' model is not set
     599                // In this case we move the to index over one
     600                if ( 'undefined' == typeof this.model.get( 'from' ) ) {
     601                    if ( isRtl ) {
     602                        leftValue  = this.model.revisions.length -  this.model.revisions.indexOf( this.model.get( 'to' ) ) - 2;
     603                        rightValue = leftValue + 1;
     604                    } else {
     605                        leftValue  = this.model.revisions.indexOf( this.model.get( 'to' ) );
     606                        rightValue = leftValue + 1;
     607                    }
     608                } else {
     609                    leftValue  = isRtl ?    this.model.revisions.length -  this.model.revisions.indexOf( this.model.get( 'to' ) ) - 1 :
     610                                            this.model.revisions.indexOf( this.model.get( 'from' ) ),
     611                    rightValue = isRtl ?    this.model.revisions.length - this.model.revisions.indexOf( this.model.get( 'from' ) ) - 1 :
     612                                            this.model.revisions.indexOf( this.model.get( 'to' ) );
     613                }
     614
     615                // Set handles to current from / to models.
     616                // Reverse order for RTL
     617                this.$el.slider( {
     618                    values: [
     619                        leftValue,
     620                        rightValue
     621                    ],
     622                    value: null,
     623                    range: true // Range mode ensures handles can't cross
    595624                } );
    596625            } else {
    597                 if ( this.model.get( 'compareTwoMode' ) ) {
    598                     this.$el.slider( { // Set handles to current from/to models
    599                         values: [
    600                             this.model.revisions.indexOf( this.model.get( 'from' ) ),
    601                             this.model.revisions.indexOf( this.model.get( 'to' ) )
    602                         ],
    603                         value: null,
    604                         range: true // Range mode ensures handles can't cross
    605                     } );
    606                 } else {
    607                     this.$el.slider( { // Set handle to current to model
    608                         value: this.model.revisions.indexOf( this.model.get( 'to' ) ),
    609                         values: null, // Clear existing two handled values
    610                         range: false
    611                     } );
    612                 }
     626                this.$el.slider( { // Set handle to current to model
     627                    // Reverse order for RTL.
     628                    value: isRtl ?  this.model.revisions.length - this.model.revisions.indexOf( this.model.get( 'to' ) ) - 1 :
     629                                    this.model.revisions.indexOf( this.model.get( 'to' ) ),
     630                    values: null, // Clear existing two handled values
     631                    range: false
     632                } );
    613633            }
    614634            if ( this.model.get( 'compareTwoMode' ) ){
    … …  
    676696
    677697                attributes = {
    678                     to: this.model.revisions.at( isRtl ? this.model.revisions.length - ui.values[1] - 1 : ui.values[1] ), // Reverse directions for RTL.
    679                     from: this.model.revisions.at( isRtl ? this.model.revisions.length - ui.values[0] - 1 : ui.values[0] ) // Reverse directions for RTL.
     698                    to: this.model.revisions.at( isRtl ? this.model.revisions.length - ui.values[0] - 1 : ui.values[1] ), // Reverse directions for RTL.
     699                    from: this.model.revisions.at( isRtl ? this.model.revisions.length - ui.values[1] - 1 : ui.values[0] ) // Reverse directions for RTL.
    680700                };
     701
    681702            } else {
    682703                // Compare single revision mode

  • trunk/wp-admin/revision.php

    r24574 r24578  
    5656    }
    5757
    58     $post_title = '<a href="' . get_edit_post_link() . '">' . get_the_title() . '</a>';
     58    $post_title = '<a href="' . get_edit_post_link() . '">' . _draft_or_post_title() . '</a>';
    5959    $h2 = sprintf( __( 'Compare Revisions of &#8220;%1$s&#8221;' ), $post_title );
    6060    $title = __( 'Revisions' );
    … …  
    128128
    129129<script id="tmpl-revisions-tooltip" type="text/html">
    130     <div class="ui-slider-tooltip ui-widget-content ui-corner-all ">
     130    <div class="revisions-tooltip-content">
    131131    <# if ( 'undefined' !== typeof data && 'undefined' !== typeof data.author ) { #>
    132132            {{{ data.author.avatar }}} {{{ data.author.name }}},
    … …  
    135135    <# } #>
    136136    </div>
    137     <div class="arrow"></div>
     137    <div class="revisions-tooltip-arrow"></div>
    138138</script>
    139139

  • trunk/wp-includes/script-loader.php

    r24546 r24578  
    277277    $scripts->add( 'wp-backbone', "/wp-includes/js/wp-backbone$suffix.js", array('backbone', 'wp-util'), false, 1 );
    278278
    279     $scripts->add( 'revisions', "/wp-admin/js/revisions$suffix.js", array( 'wp-backbone', 'jquery-ui-slider', 'jquery-ui-tooltip' ), false, 1 );
     279    $scripts->add( 'revisions', "/wp-admin/js/revisions$suffix.js", array( 'wp-backbone', 'jquery-ui-slider' ), false, 1 );
    280280
    281281    $scripts->add( 'imgareaselect', "/wp-includes/js/imgareaselect/jquery.imgareaselect$suffix.js", array('jquery'), '0.9.8', 1 );
Note: See TracChangeset for help on using the changeset viewer.