WordPress.org
Get WordPress

Make WordPress Core

Changeset 24761


Ignore:
Timestamp:
07/22/2013 05:05:45 AM (11 years ago)
Author:
markjaquith
Message:

Revisions: Pinned controls, layout tweaks, copy tweaks, misc.

  • When you scroll down the diff view, the controls will pin to the top.
  • The revisions meta view was cleaned up. Copy changes.
  • Loading indicator in the center of the screen (so it follows as you scroll).
  • Tooltips "flip" when you cross the center line, so that they don't hit the container edge and wrap for later revisions.
  • The "Restore" button's inactive state is handled on render, instead of after.
  • Make sure we always have a current revision, even if the timestamp doesn't work out on the most recent one.

See #24804. Props markjaquith, nacin, ocean90, aaroncampbell.

Location:
trunk/wp-admin
Files:
7 edited

Legend:

Unmodified
Added
Removed

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

    r24751 r24761  
    165165}
    166166
    167 #diff-header,
     167.revisions-meta,
    168168.widget .widget-top,
    169169.postbox h3,
    … …  
    14821482}
    14831483
    1484 #diff-header {
     1484.revisions-meta {
    14851485    border: 1px solid #d1e5ee;
     1486}
     1487
     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%);
    14861495}
    14871496
    … …  
    14921501}
    14931502
    1494 #diff-title-to strong {
    1495     color: #08a;
     1503.revisions-tickmarks > div {
     1504    border-color: #d1e5ee;
    14961505}
    14971506
    … …  
    14991508.wp-slider.ui-slider {
    15001509    border-color: #d1e5ee;
    1501     background: #eff8ff;
    15021510}
    15031511
    … …  
    15081516
    15091517.wp-slider .ui-slider-handle {
    1510     border-color: #ccc;
    15111518    border-color: #d0dfe9;
    15121519    background: #eff8ff;

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

    r24751 r24761  
    165165}
    166166
    167 #diff-header,
     167.revisions-meta,
    168168.widget .widget-top,
    169169.postbox h3,
    … …  
    13761376}
    13771377
    1378 #diff-header {
     1378.revisions-meta {
    13791379    border: 1px solid #dfdfdf;
     1380}
     1381
     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%);
    13801389}
    13811390
    … …  
    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

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

    r24751 r24761  
    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;
    … …  
    983991.revisions-previous {
    984992    float: right;
    985 }
    986 
    987 #diff-header {
    988     padding: 5px 5px 5px 200px;
    989993}
    990994
    … …  
    10051009}
    10061010
    1007 .diff-header > input.restore-revision {
     1011.diff-meta > input.restore-revision {
    10081012    margin-left: 0;
    10091013    margin-right: 10px;
    … …  
    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;
     1034}
     1035
     1036.revisions-tooltip.flipped {
     1037    margin-right: 0;
     1038    margin-left: -70px;
    10351039}
    10361040
    … …  
    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;
     1060}
     1061
     1062.revisions-tooltip.flipped .revisions-tooltip-arrow > span {
     1063    right: auto;
     1064    left: 20px;
    10491065}
    10501066

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

    r24753 r24761  
    35203520    padding-top: 40px;
    35213521    height: 100px;
     3522    z-index: 1;
    35223523}
    35233524
    … …  
    35263527    top: -1px;
    35273528    vertical-align: text-bottom;
     3529}
     3530
     3531.revisions.pinned .revisions-controls {
     3532    position: fixed;
     3533    top: 0;
     3534    padding-bottom: 10px;
    35283535}
    35293536
    … …  
    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;
    … …  
    35853593}
    35863594
     3595body.folded .revisions .loading-indicator {
     3596    margin-left: -32px;
     3597}
     3598
    35873599.revisions .loading-indicator span.spinner {
    35883600    display: block;
    … …  
    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;
     3641}
     3642
     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;
    36283652}
    36293653
    … …  
    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;
    3701 }
    3702 
    3703 .diff-header {
    3704     min-height: 35px;
    3705     line-height: 35px;
    3706 }
    3707 
    3708 .diff-title {
    3709     float: left;
     3721    min-height: 32px;
    37103722}
    37113723
    37123724.diff-title strong {
    3713     font-size: 14px;
    3714     width: 60px;
     3725    line-height: 32px;
     3726    min-width: 60px;
    37153727    text-align: right;
    37163728    float: left;
    … …  
    37183730}
    37193731
    3720 .diff-title img {
     3732.revisions-controls .author-card .avatar,
     3733.revisions-controls .author-card .author-info {
     3734    float: left;
     3735    margin-left: 6px;
     3736    margin-right: 6px;
     3737}
     3738
     3739.revisions-controls .author-card .byline {
     3740    display: block;
     3741    font-size: 12px;
     3742}
     3743
     3744.revisions-controls .author-card .avatar {
    37213745    vertical-align: middle;
    3722     margin-left: 5px;
    3723 }
    3724 
    3725 .diff-header > input.restore-revision {
    3726     margin-left: 10px;
    3727 }
    3728 
    3729 #diff-header-from {
     3746}
     3747
     3748.diff-meta input.restore-revision {
     3749    float: right;
     3750    margin-left: 6px;
     3751    margin-right: 6px;
     3752    margin-top: 4px;
     3753}
     3754
     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}
    … …  
    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;
     3774}
     3775
     3776.revisions-tooltip.flipped {
     3777    margin-left: 0;
     3778    margin-right: -70px;
     3779}
     3780
     3781.revisions.pinned .revisions-tooltip {
     3782    display: none !important;
    37553783}
    37563784
    37573785.comparing-two-revisions .revisions-tooltip {
    37583786    bottom: 145px;
    3759 }
    3760 
    3761 .revisions-tooltip img {
    3762     float: left;
    3763     margin: 2px 5px 0 0;
    3764     padding: 0;
    3765     vertical-align: middle;
    37663787}
    37673788
    … …  
    37753796    bottom: -15px;
    37763797    z-index: 10000;
     3798}
     3799
     3800.revisions-tooltip.flipped .revisions-tooltip-arrow {
     3801    margin-left: 0;
     3802    margin-right: 35px;
     3803    left: auto;
     3804    right: 0;
    37773805}
    37783806
    … …  
    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

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

    r24730 r24761  
    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,
    … …  
    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            );
    … …  
    143143    }
    144144
     145    // If a post has been saved since the last revision (no revisioned fields were changed)
     146    // we may not have a "current" revision. Mark the latest revision as "current".
     147    if ( empty( $current_id ) )
     148        $revisions[ $revision->ID ]['current'] = true;
     149
    145150    // Now, grab the initial diff
    146151    $compare_two_mode = is_numeric( $from );

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

    r24751 r24761  
    532532
    533533        initialize: function() {
     534            _.bindAll( this, 'setWidth' );
     535
    534536            // Add the button view
    535537            this.views.add( new revisions.view.Buttons({
    … …  
    574576                model: this.model
    575577            }) );
    576 
     578        },
     579
     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    });
    … …  
    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 {
    … …  
    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 });
    … …  
    627665
    628666        initialize: function() {
    629             this.listenTo( this.model, 'update:revisions', this.ready );
     667            this.listenTo( this.model, 'update:revisions', this.render );
    630668        },
    631669
    … …  
    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    });
    … …  
    678711        className: 'revisions-tooltip',
    679712        template: wp.template('revisions-tooltip'),
    680         direction: isRtl ? 'right' : 'left',
    681713
    682714        initialize: function( options ) {
    … …  
    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
    … …  
    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

  • trunk/wp-admin/revision.php

    r24751 r24761  
    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>
    … …  
    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>
    172 
    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' )?>" />
     178    </div>
     179
     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>
Note: See TracChangeset for help on using the changeset viewer.