Make WordPress Core


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.

File:
1 edited

Legend:

Unmodified
Added
Removed
  • 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.