WordPress.org

Make WordPress Core

Ticket #24804: 24804.8.diff

File 24804.8.diff, 18.7 KB (added by nacin, 5 years ago)
  • wp-admin/css/colors-classic.css

     
    164164        color: #fff;
    165165}
    166166
    167 #diff-header,
     167.revisions-meta,
    168168.widget .widget-top,
    169169.postbox h3,
    170170.stuffbox h3,
     
    14811481        background-color: #afa;
    14821482}
    14831483
    1484 #diff-header {
     1484.revisions-meta {
    14851485        border: 1px solid #d1e5ee;
    14861486}
    14871487
     1488.revisions-controls {
     1489        background: #fff;
     1490        background: -webkit-gradient(linear, left bottom, left top, color-stop(0%,rgba(255,255,255,1)), color-stop(30px,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,1)));
     1491        background: -webkit-linear-gradient(bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 30px, rgba(255,255,255,1) 100%);
     1492        background:    -moz-linear-gradient(bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 30px, rgba(255,255,255,1) 100%);
     1493        background:      -o-linear-gradient(bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 30px, rgba(255,255,255,1) 100%);
     1494        background: linear-gradient(to top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 30px, rgba(255,255,255,1) 100%);
     1495}
     1496
    14881497.revisions-tooltip,
    14891498.revisions-tooltip-arrow span {
    14901499        border-color: #d1e5ee;
     
    14911500        background-color: #fff;
    14921501}
    14931502
    1494 #diff-title-to strong {
    1495         color: #08a;
     1503.revisions-tickmarks > div {
     1504        border-color: #d1e5ee;
    14961505}
    14971506
    14981507/* jQuery UI Slider */
    14991508.wp-slider.ui-slider {
    15001509        border-color: #d1e5ee;
    1501         background: #eff8ff;
    15021510}
    15031511
    15041512.wp-slider .ui-slider-handle {
     
    15071515}
    15081516
    15091517.wp-slider .ui-slider-handle {
    1510         border-color: #ccc;
    15111518        border-color: #d0dfe9;
    15121519        background: #eff8ff;
    15131520        background-image: -webkit-gradient(linear, left bottom, left top, from(#eff8ff), to(#fff));
  • wp-admin/css/colors-fresh.css

     
    164164        color: #fff;
    165165}
    166166
    167 #diff-header,
     167.revisions-meta,
    168168.widget .widget-top,
    169169.postbox h3,
    170170.stuffbox h3,
     
    13751375        background-color: #afa;
    13761376}
    13771377
    1378 #diff-header {
     1378.revisions-meta {
    13791379        border: 1px solid #dfdfdf;
    13801380}
    13811381
     1382.revisions-controls {
     1383        background: #fff;
     1384        background: -webkit-gradient(linear, left bottom, left top, color-stop(0%,rgba(255,255,255,1)), color-stop(30px,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,1)));
     1385        background: -webkit-linear-gradient(bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 30px, rgba(255,255,255,1) 100%);
     1386        background:    -moz-linear-gradient(bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 30px, rgba(255,255,255,1) 100%);
     1387        background:      -o-linear-gradient(bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 30px, rgba(255,255,255,1) 100%);
     1388        background: linear-gradient(to top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 30px, rgba(255,255,255,1) 100%);
     1389}
     1390
    13821391.revisions-tooltip,
    13831392.revisions-tooltip-arrow span {
    13841393        border-color: #d7d7d7;
     
    13891398        border-color: #aaa;
    13901399}
    13911400
    1392 #diff-title-to strong {
    1393         color: #08a;
    1394 }
    1395 
    13961401/* jQuery UI Slider */
    13971402.wp-slider.ui-slider {
    13981403        border-color: #d7d7d7;
    1399         background: transparent;
    14001404}
    14011405
    14021406.wp-slider .ui-slider-handle {
  • wp-admin/css/wp-admin-rtl.css

     
    976976        padding: 9px 0 0 9px;
    977977}
    978978
     979.revisions .loading-indicator {
     980        margin-right: -90px;
     981}
     982
     983body.folded .revisions .loading-indicator {
     984        margin-right: -32px;
     985}
     986
    979987.revisions-next {
    980988        float: left;
    981989}
     
    984992        float: right;
    985993}
    986994
    987 #diff-header {
    988         padding: 5px 5px 5px 200px;
    989 }
    990 
    991995.diff-title {
    992996        float: right;
    993997}
     
    10041008        margin-right: 5px;
    10051009}
    10061010
    1007 .diff-header > input.restore-revision {
     1011.diff-meta > input.restore-revision {
    10081012        margin-left: 0;
    10091013        margin-right: 10px;
    10101014}
     
    10271031.revisions-tooltip {
    10281032        margin-left: 0;
    10291033        margin-right: -70px;
    1030         -webkit-transition: right 15ms;
    1031         -moz-transition:    right 15ms;
    1032         -ms-transition:     right 15ms;
    1033         -o-transition:      right 15ms;
    1034         transition:         right 15ms;
    10351034}
    10361035
     1036.revisions-tooltip.flipped {
     1037        margin-right: 0;
     1038        margin-left: -70px;
     1039}
     1040
    10371041.ie8 .revisions-tooltip {
    10381042        margin-right: -75px;
    10391043}
     
    10441048        margin-right: 35px;
    10451049}
    10461050
     1051.revisions-tooltip.flipped .revisions-tooltip-arrow {
     1052        margin-right: 0;
     1053        margin-left: 35px;
     1054        right: auto;
     1055        left: 0;
     1056}
     1057
    10471058.revisions-tooltip-arrow > span {
    10481059        right: 20px;
    10491060}
    10501061
     1062.revisions-tooltip.flipped .revisions-tooltip-arrow > span {
     1063        right: auto;
     1064        left: 20px;
     1065}
     1066
    10511067.revisions-tooltip img {
    10521068        float: right;
    10531069        margin: 2px 0 0 5px;
  • wp-admin/css/wp-admin.css

     
    35193519.revisions-controls {
    35203520        padding-top: 40px;
    35213521        height: 100px;
     3522        z-index: 1;
    35223523}
    35233524
    35243525.revisions-controls input[type="checkbox"] {
     
    35273528        vertical-align: text-bottom;
    35283529}
    35293530
     3531.revisions.pinned .revisions-controls {
     3532        position: fixed;
     3533        top: 0;
     3534        padding-bottom: 10px;
     3535}
     3536
    35303537.revisions-tickmarks {
    35313538        position: relative;
    35323539        margin: 0 auto;
     
    35713578}
    35723579
    35733580.revisions .loading-indicator {
    3574         position: absolute;
     3581        position: fixed;
    35753582        vertical-align: middle;
    35763583        opacity: 0;
    35773584        width: 100%;
    3578         top: 3em;
     3585        top: 50%;
     3586        margin-left: -90px;
    35793587        -webkit-transition: opacity 0.5s;
    35803588        -moz-transition:    opacity 0.5s;
    35813589        -ms-transition:     opacity 0.5s;
     
    35843592        filter: alpha(opacity=0); /* ie8 and earlier */
    35853593}
    35863594
     3595body.folded .revisions .loading-indicator {
     3596        margin-left: -32px;
     3597}
     3598
    35873599.revisions .loading-indicator span.spinner {
    35883600        display: block;
    35893601        margin: 0 auto;
     
    36233635}
    36243636
    36253637.comparing-two-revisions .revisions-previous,
    3626 .comparing-two-revisions .revisions-next {
     3638.comparing-two-revisions .revisions-next,
     3639.revisions-meta .diff-meta-to strong {
    36273640        display: none;
    36283641}
    36293642
     3643.revisions-controls .author-card .date {
     3644        color: #777;
     3645}
     3646.revisions-controls .author-card .author-name {
     3647        font-weight: bold;
     3648}
     3649
     3650.comparing-two-revisions .diff-meta-to strong {
     3651        display: block;
     3652}
     3653
    36303654.revisions-previous,
    36313655.revisions-next {
    36323656        position: relative;
     
    36893713        text-decoration: none;
    36903714}
    36913715
    3692 #diff-title-to strong {
    3693         display: inline;
    3694 }
    3695 
    3696 #diff-header {
     3716.diff-meta {
    36973717        -webkit-border-radius: 3px;
    36983718        border-radius: 3px;
    36993719        padding: 5px;
    37003720        clear: both;
     3721        min-height: 32px;
    37013722}
    37023723
    3703 .diff-header {
    3704         min-height: 35px;
    3705         line-height: 35px;
     3724.diff-title strong {
     3725        line-height: 32px;
     3726        min-width: 60px;
     3727        text-align: right;
     3728        float: left;
     3729        margin-right: 5px;
    37063730}
    37073731
    3708 .diff-title {
     3732.revisions-controls .author-card .avatar,
     3733.revisions-controls .author-card .author-info {
    37093734        float: left;
     3735        margin-left: 6px;
     3736        margin-right: 6px;
    37103737}
    37113738
    3712 .diff-title strong {
    3713         font-size: 14px;
    3714         width: 60px;
    3715         text-align: right;
    3716         float: left;
    3717         margin-right: 5px;
     3739.revisions-controls .author-card .byline {
     3740        display: block;
     3741        font-size: 12px;
    37183742}
    37193743
    3720 .diff-title img {
     3744.revisions-controls .author-card .avatar {
    37213745        vertical-align: middle;
    3722         margin-left: 5px;
    37233746}
    37243747
    3725 .diff-header > input.restore-revision {
    3726         margin-left: 10px;
     3748.diff-meta input.restore-revision {
     3749        float: right;
     3750        margin-left: 6px;
     3751        margin-right: 6px;
     3752        margin-top: 4px;
    37273753}
    37283754
    3729 #diff-header-from {
     3755.diff-meta-from {
    37303756        display: none;
    37313757}
    37323758
    3733 .comparing-two-revisions #diff-title-from,
    3734 .comparing-two-revisions #diff-header-from {
     3759.comparing-two-revisions .diff-meta-from {
    37353760        display: block;
    37363761}
    37373762
     
    37403765        bottom: 105px;
    37413766        margin-right: 0;
    37423767        margin-left: -70px;
    3743         line-height: 28px;
    37443768        z-index: 1;
    37453769        max-width: 350px;
    37463770        min-width: 130px;
    3747         padding: 4px;
     3771        padding: 8px 4px;
    37483772        display: none;
    37493773        opacity: 0;
    3750         -webkit-transition: left 15ms;
    3751         -moz-transition:    left 15ms;
    3752         -ms-transition:     left 15ms;
    3753         -o-transition:      left 15ms;
    3754         transition:         left 15ms;
    37553774}
    37563775
     3776.revisions-tooltip.flipped {
     3777        margin-left: 0;
     3778        margin-right: -70px;
     3779}
     3780
     3781.revisions.pinned .revisions-tooltip {
     3782        display: none !important;
     3783}
     3784
    37573785.comparing-two-revisions .revisions-tooltip {
    37583786        bottom: 145px;
    37593787}
    37603788
    3761 .revisions-tooltip img {
    3762         float: left;
    3763         margin: 2px 5px 0 0;
    3764         padding: 0;
    3765         vertical-align: middle;
    3766 }
    3767 
    37683789.revisions-tooltip-arrow {
    37693790        width: 70px;
    37703791        height: 15px;
     
    37763797        z-index: 10000;
    37773798}
    37783799
     3800.revisions-tooltip.flipped .revisions-tooltip-arrow {
     3801        margin-left: 0;
     3802        margin-right: 35px;
     3803        left: auto;
     3804        right: 0;
     3805}
     3806
    37793807.revisions-tooltip-arrow > span {
    37803808        content: "";
    37813809        position: absolute;
     
    37903818        tranform: rotate(45deg);
    37913819}
    37923820
     3821.revisions-tooltip.flipped .revisions-tooltip-arrow > span {
     3822        left: auto;
     3823        right: 20px;
     3824}
     3825
    37933826.ie8 .revisions-tooltip-arrow > span {
    37943827        left: 14px;
    37953828        top: -25px;
    3796         -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)"; /* IE8 */
     3829        -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)";
    37973830}
    37983831
    37993832.revisions-tooltip,
  • wp-admin/includes/revision.php

     
    9999        foreach ( $revisions as $revision ) {
    100100                $modified = strtotime( $revision->post_modified );
    101101                $modified_gmt = strtotime( $revision->post_modified_gmt );
    102                 $restore_link = wp_nonce_url(
     102                $restore_link = str_replace( '&', '&', wp_nonce_url(
    103103                        add_query_arg(
    104104                                array( 'revision' => $revision->ID,
    105105                                        'action' => 'restore' ),
     
    106106                                        admin_url( 'revision.php' )
    107107                        ),
    108108                        "restore-post_{$revision->ID}"
    109                 );
     109                ) );
    110110
    111111                if ( ! isset( $authors[ $revision->post_author ] ) ) {
    112112                        $authors[ $revision->post_author ] = array(
    113113                                'id' => (int) $revision->post_author,
    114                                 'avatar' => $show_avatars ? get_avatar( $revision->post_author, 24 ) : '',
     114                                'avatar' => $show_avatars ? get_avatar( $revision->post_author, 32 ) : '',
    115115                                'name' => get_the_author_meta( 'display_name', $revision->post_author ),
    116116                        );
    117117                }
  • wp-admin/js/revisions.js

     
    531531                className: 'revisions-controls',
    532532
    533533                initialize: function() {
     534                        _.bindAll( this, 'setWidth' );
     535
    534536                        // Add the button view
    535537                        this.views.add( new revisions.view.Buttons({
    536538                                model: this.model
     
    573575                        this.views.add( new revisions.view.Meta({
    574576                                model: this.model
    575577                        }) );
     578                },
    576579
     580                ready: function() {
     581                        this.top = this.$el.offset().top;
     582                        this.window = $(window);
     583                        this.window.on( 'scroll.wp.revisions', {controls: this}, function(e) {
     584                                var controls = e.data.controls;
     585                                var container = controls.$el.parent();
     586                                var scrolled = controls.window.scrollTop();
     587                                var frame = controls.views.parent;
     588
     589                                if ( scrolled >= controls.top ) {
     590                                        if ( ! frame.$el.hasClass('pinned') ) {
     591                                                controls.setWidth();
     592                                                container.css('height', container.height() + 'px' );
     593                                                controls.window.on('resize.wp.revisions.pinning click.wp.revisions.pinning', {controls: controls}, function(e) {
     594                                                        e.data.controls.setWidth();
     595                                                });
     596                                        }
     597                                        frame.$el.addClass('pinned');
     598                                } else if ( frame.$el.hasClass('pinned') ) {
     599                                        controls.window.off('.wp.revisions.pinning');
     600                                        controls.$el.css('width', 'auto');
     601                                        frame.$el.removeClass('pinned');
     602                                        container.css('height', 'auto');
     603                                        controls.top = controls.$el.offset().top;
     604                                } else {
     605                                        controls.top = controls.$el.offset().top;
     606                                }
     607                        });
     608                },
     609
     610                setWidth: function() {
     611                        this.$el.css('width', this.$el.parent().width() + 'px');
    577612                }
    578613        });
    579614
     
    592627                                tick = this.$('div:nth-of-type(' + index + ')');
    593628                                offset = tick.allPositions();
    594629                                elWidth = tick.outerWidth();
    595                                 // adjust
    596630                                _.extend( offset, {
    597                                         right: offset.right + elWidth + 1,
    598                                         left: offset.left + elWidth + 1
     631                                        rightPlusWidth: offset.right,
     632                                        leftPlusWidth: offset.left
    599633                                });
    600634                        } else {
    601635                                // Normal tick
    602636                                tick = this.$('div:nth-of-type(' + (index + 1) + ')');
    603637                                offset = tick.allPositions();
     638                                _.extend( offset, {
     639                                        leftPlusWidth: offset.left + tick.outerWidth() + 1,
     640                                        rightPlusWidth: offset.right + tick.outerWidth() + 1
     641                                });
    604642                        }
    605643                        this.model.set({ offset: offset });
    606644                },
     
    626664                },
    627665
    628666                initialize: function() {
    629                         this.listenTo( this.model, 'update:revisions', this.ready );
     667                        this.listenTo( this.model, 'update:revisions', this.render );
    630668                },
    631669
    632670                prepare: function() {
     
    633671                        return this.model.toJSON();
    634672                },
    635673
    636                 ready: function() {
    637                         this.$('.restore-revision').prop( 'disabled', this.model.get('to').get('current') );
    638                 },
    639 
    640674                restoreRevision: function() {
    641                         var restoreUrl = this.model.get('to').attributes.restoreUrl.replace(/&/g, '&');
    642                         document.location = restoreUrl;
     675                        document.location = this.model.get('to').attributes.restoreUrl;
    643676                }
    644677        });
    645678
     
    677710        revisions.view.Tooltip = wp.Backbone.View.extend({
    678711                className: 'revisions-tooltip',
    679712                template: wp.template('revisions-tooltip'),
    680                 direction: isRtl ? 'right' : 'left',
    681713
    682714                initialize: function( options ) {
    683715                        this.listenTo( this.model, 'change:offset', this.render );
     
    690722                },
    691723
    692724                render: function() {
    693                         var css = {};
     725                        var direction, directionVal, flipped, css = {}, position = this.model.revisions.indexOf( this.model.get('revision') ) + 1;
     726                        flipped = ( position / this.model.revisions.length ) > 0.5;
     727                        if ( isRtl ) {
     728                                direction = flipped ? 'left' : 'right';
     729                                directionVal = flipped ? 'leftPlusWidth' : direction;
     730                        } else {
     731                                direction = flipped ? 'right' : 'left';
     732                                directionVal = flipped ? 'rightPlusWidth' : direction;
     733                        }
     734                        otherDirection = 'right' === direction ? 'left': 'right';
    694735                        wp.Backbone.View.prototype.render.apply( this, arguments );
    695                         css[this.direction] = this.model.get('offset')[this.direction] + 'px';
    696                         this.$el.css( css );
     736                        css[direction] = this.model.get('offset')[directionVal] + 'px';
     737                        css[otherDirection] = '';
     738                        this.$el.toggleClass( 'flipped', flipped ).css( css );
    697739                },
    698740
    699741                visible: function() {
     
    716758                template: wp.template('revisions-buttons'),
    717759
    718760                events: {
    719                         'click #next': 'nextRevision',
    720                         'click #previous': 'previousRevision'
     761                        'click .revisions-next .button': 'nextRevision',
     762                        'click .revisions-previous .button': 'previousRevision'
    721763                },
    722764
    723765                initialize: function() {
  • wp-admin/revision.php

     
    122122
    123123<script id="tmpl-revisions-buttons" type="text/html">
    124124        <div class="revisions-previous">
    125                 <input class="button" type="button" id="previous" value="<?php echo esc_attr_x( 'Previous', 'Button label for a previous revision' ); ?>" />
     125                <input class="button" type="button" value="<?php echo esc_attr_x( 'Previous', 'Button label for a previous revision' ); ?>" />
    126126        </div>
    127127
    128128        <div class="revisions-next">
    129                 <input class="button" type="button" id="next" value="<?php echo esc_attr_x( 'Next', 'Button label for a next revision' ); ?>" />
     129                <input class="button" type="button" value="<?php echo esc_attr_x( 'Next', 'Button label for a next revision' ); ?>" />
    130130        </div>
    131131</script>
    132132
    133133<script id="tmpl-revisions-tooltip" type="text/html">
    134         <div class="revisions-tooltip-content">
     134        <div class="author-card">
    135135        <# if ( 'undefined' !== typeof data && 'undefined' !== typeof data.author ) { #>
    136                         {{{ data.author.avatar }}} {{ data.author.name }},
    137                         {{ data.timeAgo }}
    138                         ({{ data.dateShort }})
     136                {{{ data.author.avatar }}}
     137                <div class="author-info">
     138                        <span class="byline">Edit by <span class="author-name">{{ data.author.name }}</span></span>
     139                        <span class="time-ago">{{ data.timeAgo }}</span>
     140                        <span class="date">({{ data.dateShort }})</span>
     141                </div>
    139142        <# } #>
    140143        </div>
    141144        <div class="revisions-tooltip-arrow"><span></span></div>
     
    157160</script>
    158161
    159162<script id="tmpl-revisions-meta" type="text/html">
    160         <div id="diff-header">
    161                 <div id="diff-header-from" class="diff-header">
    162                         <div id="diff-title-from" class="diff-title">
    163                                 <strong><?php _ex( 'From:', 'Followed by post revision info' ); ?></strong>
    164                                 <# if ( 'undefined' !== typeof data.from ) { #>
    165                                         {{{ data.from.attributes.author.avatar }}} {{ data.from.attributes.author.name }},
    166                                         {{ data.from.attributes.timeAgo }}
    167                                         ({{ data.from.attributes.dateShort }})
    168                                 <# } #>
     163        <div class="diff-meta diff-meta-from">
     164                <div class="diff-title">
     165                        <strong><?php _ex( 'From:', 'Followed by post revision info' ); ?></strong>
     166                <# if ( 'undefined' !== typeof data.from ) { #>
     167                        <div class="author-card">
     168                                {{{ data.from.attributes.author.avatar }}}
     169                                <div class="author-info">
     170                                        <span class="byline"><?php printf( __( 'Revision by %s' ),
     171                                                '<span class="author-name">{{ data.to.attributes.author.name }}</span>' ); ?></span>
     172                                        <span class="time-ago">{{ data.from.attributes.timeAgo }}</span>
     173                                        <span class="date">({{ data.from.attributes.dateShort }})</span>
     174                                </div>
    169175                        </div>
    170                         <div class="clear"></div>
     176                <# } #>
    171177                </div>
     178        </div>
    172179
    173                 <div id="diff-header-to" class="diff-header">
    174                         <div id="diff-title-to" class="diff-title">
    175                                 <strong><?php _ex( 'To:', 'Followed by post revision info' ); ?></strong>
    176                                 <# if ( 'undefined' !== typeof data.to ) { #>
    177                                         {{{ data.to.attributes.author.avatar }}} {{ data.to.attributes.author.name }},
    178                                         {{ data.to.attributes.timeAgo }}
    179                                         ({{ data.to.attributes.dateShort }})
    180                                 <# } #>
    181                         </div>
    182 
    183                         <input type="button" class="restore-revision button button-primary" data-restore-link="{{{ data.restoreLink }}}" value="<?php esc_attr_e( 'Restore This Revision' )?>" />
     180        <div class="diff-meta diff-meta-to">
     181                <div class="diff-title">
     182                        <strong><?php _ex( 'To:', 'Followed by post revision info' ); ?></strong>
     183                <# if ( 'undefined' !== typeof data.to ) { #>
     184                        <div class="author-card">
     185                                {{{ data.to.attributes.author.avatar }}}
     186                                <div class="author-info">
     187                                        <span class="byline"><?php printf( __( 'Revision by %s' ),
     188                                                '<span class="author-name">{{ data.to.attributes.author.name }}</span>' ); ?></span>
     189                                        <span class="time-ago">{{ data.to.attributes.timeAgo }}</span>
     190                                        <span class="date">({{ data.to.attributes.dateShort }})</span>
     191                                </div>
     192                <# } #>
     193                        <input
     194                        <# if ( data.to.attributes.current ) { #>
     195                                disabled="disabled"
     196                        <# } #>
     197                        type="button" class="restore-revision button button-primary" data-restore-link="{{{ data.restoreLink }}}" value="<?php esc_attr_e( 'Restore This Revision' ); ?>" />
    184198                </div>
    185199        </div>
    186200</script>