WordPress.org
Get WordPress

Make WordPress Core

Changeset 42992 for trunk


Ignore:
Timestamp:
04/19/2018 12:38:44 PM (8 years ago)
Author:
azaozz
Message:

Privacy: make the sections in the suggested privacy policy text postbox foldable. Add Read More/Read Less buttons. Fix copying of the suggested text by pressing the button.

Props melchoyce, xkon, azaozz.
See #43620.

Location:
trunk/src/wp-admin
Files:
3 edited

Legend:

Unmodified
Added
Removed

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

    r42980 r42992  
    650650.privacy-text-box {
    651651        margin: 10px 0 0;
    652        
    653652}
    654653
    … …  
    657656        border-bottom: 1px solid #e5e5e5;
    658657        box-shadow: 0 1px 1px rgba(0,0,0,0.04);
    659        
    660658}
    661659
    … …  
    672670        height: 320px;
    673671        overflow: auto;
    674        
    675672}
    676673
    … …  
    681678.privacy-text-box h3 {
    682679        font-size: 1em;
    683         margin: 1em 0;
    684 }
    685 
    686 .privacy-text-section .privacy-text-copy-button {
     680        margin: 1em 0 0.5em;
     681}
     682
     683.privacy-text-section .privacy-text-copy {
    687684        float: right;
    688         margin-top: -1.8em;
    689685}
    690686
    691687.privacy-text-section {
     688        position: relative;
    692689        padding: 1px 14px 1px 12px;
    693690        border-top: 1px solid #e3e3e3;
    … …  
    705702}
    706703
     704.privacy-text-meta {
     705        font-size: 11px;
     706        color: #555D66;
     707        font-weight: 600;
     708}
     709
    707710.closed .privacy-text-box-body {
    708711        display: none;
    709712}
     713
     714.privacy-text-section.folded {
     715        height: 150px;
     716        overflow: hidden;
     717}
     718
     719.privacy-text-actions {
     720        line-height: 32px;
     721        padding-bottom: 6px;
     722}
     723
     724.folded .privacy-text-actions {
     725        position: absolute;
     726        bottom: 0;
     727        background-color: white;
     728        width: calc(100% - 24px);
     729        box-shadow: 0px -5px 10px 5px rgba(255, 255, 255, .8);
     730}
     731
     732.text-removed .privacy-text-actions {
     733        background-color: #fbeaea;
     734        box-shadow: 0px -5px 10px 5px rgba(251, 234, 234, .8);
     735}
     736
     737.text-updated .privacy-text-actions {
     738        background-color: #ecf7ed;
     739        box-shadow: 0px -5px 10px 5px rgba(236, 247, 237, .8);
     740}
     741
     742.policy-text-more,
     743.folded .privacy-text-copy,
     744.folded .policy-text-less {
     745        display: none;
     746}
     747
     748.folded .policy-text-more {
     749        display: inline;
     750}
     751
    710752
    711753/*------------------------------------------------------------------------------

  • trunk/src/wp-admin/includes/misc.php

    r42985 r42992  
    15501550                $date_format = get_option( 'date_format' );
    15511551                $copy = __( 'Copy' );
     1552                $more = __( 'Read More' );
     1553                $less = __( 'Read Less' );
    15521554
    15531555                foreach ( $content_array as $section ) {
    … …  
    15681570                        }
    15691571
    1570                         $content .= '<div class="privacy-text-section' . $class . '">';
    1571                         $content .= '<h3>' . $section['plugin_name'] . '</h3>';
    1572                         $content .= '<button type="button" class="privacy-text-copy-button button">';
    1573                         $content .= $copy;
    1574                         $content .= '<span class="screen-reader-text">' . sprintf( __( 'Copy suggested policy text from %s.' ), $section['plugin_name'] ) . '</span>';
    1575                         $content .= '</button>';
     1572                        $plugin_name = esc_html( $section['plugin_name'] );
     1573
     1574                        $content .= '<div class="privacy-text-section folded' . $class . '">';
     1575                        $content .= '<h3>' . $plugin_name . '</h3>';
    15761576
    15771577                        if ( ! empty( $meta ) ) {
    … …  
    15791579                        }
    15801580
    1581                         $content .= '<div class="policy-text">' . $section['policy_text'] . '</div>';
    1582                         $content .= "</div>\n";
     1581                        $content .= '<div class="policy-text" aria-expanded="false">' . $section['policy_text'] . '</div>';
     1582
     1583                        $content .= '<div class="privacy-text-actions">';
     1584                                $content .= '<button type="button" class="button-link policy-text-more">';
     1585                                        $content .= $more;
     1586                                        $content .= '<span class="screen-reader-text">' . sprintf( __( 'Expand suggested policy text section from %s.' ), $plugin_name ) . '</span>';
     1587                                $content .= '</button>';
     1588
     1589                                $content .= '<button type="button" class="button-link policy-text-less">';
     1590                                        $content .= $less;
     1591                                        $content .= '<span class="screen-reader-text">' . sprintf( __( 'Collapse suggested policy text section from %s.' ), $plugin_name ) . '</span>';
     1592                                $content .= '</button>';
     1593
     1594                                if ( empty( $section['removed'] ) ) {
     1595                                        $content .= '<button type="button" class="privacy-text-copy button">';
     1596                                                $content .= $copy;
     1597                                                $content .= '<span class="screen-reader-text">' . sprintf( __( 'Copy suggested policy text from %s.' ), $plugin_name ) . '</span>';
     1598                                        $content .= '</button>';
     1599                                }
     1600
     1601                        $content .= '</div>'; // End of .privacy-text-actions.
     1602                        $content .= "</div>\n"; // End of .privacy-text-section.
    15831603                }
    15841604
    … …  
    15901610                        </button>
    15911611                        <div class="privacy-text-box-head hndle">
    1592                                 <h2><?php _e( 'This suggested privacy policy text comes from plugins you have installed.' ); ?></h2>
     1612                                <h2><?php _e( 'This suggested privacy policy text comes from plugins and themes you have installed.' ); ?></h2>
    15931613                                <p>
    15941614                                        <?php _e( 'We suggest reviewing this text then copying and pasting it into your privacy policy page.' ); ?>
    … …  
    16071627         * Return the default suggested privacy policy content.
    16081628         *
    1609          * @since 4.9.6         
     1629         * @since 4.9.6
    16101630         *
    16111631         * @return string The defauld policy content.
    … …  
    16341654        public static function add_suggested_content() {
    16351655                $content = self::get_default_content();
    1636                 wp_add_privacy_policy_content(  'WordPress', $content );
    1637         }
    1638 }
     1656                wp_add_privacy_policy_content( 'WordPress', $content );
     1657        }
     1658}

  • trunk/src/wp-admin/js/post.js

    r42980 r42992  
    12691269        } );
    12701270
     1271} )( jQuery, new wp.utils.WordCounter() );
     1272
     1273( function( $ ) {
    12711274        // Privacy policy postbox, copy button.
    12721275        $( document ).on( 'click', function( event ) {
    … …  
    12741277                var node, range;
    12751278
    1276                 if ( $target.is( 'button.privacy-text-copy-button' ) ) {
    1277                         node = $target.parent().find( 'div.policy-text' )[0];
     1279                if ( $target.is( 'button.privacy-text-copy' ) ) {
     1280                        node = $target.parent().parent().find( 'div.policy-text' )[0];
    12781281
    12791282                        if ( node ) {
    12801283                                try {
    12811284                                        window.getSelection().removeAllRanges();
    1282                                         range = document.createRange(); 
    1283                                         range.selectNode( node ); 
     1285                                        range = document.createRange();
     1286                                        range.selectNodeContents( node );
    12841287                                        window.getSelection().addRange( range );
    12851288
    … …  
    12881291                                } catch ( er ) {}
    12891292                        }
     1293                } else if ( $target.is( 'button.policy-text-more' ) ) {
     1294                        $target.parents( '.privacy-text-section' ).removeClass( 'folded' )
     1295                                .find( '.policy-text' ).attr( 'aria-expanded', 'true' );
     1296                } else if ( $target.is( 'button.policy-text-less' ) ) {
     1297                        $target.parents( '.privacy-text-section' ).addClass( 'folded' )
     1298                                .find( '.policy-text' ).attr( 'aria-expanded', 'false' );
    12901299                }
    12911300        });
    12921301
    1293 } )( jQuery, new wp.utils.WordCounter() );
     1302} )( jQuery );
Note: See TracChangeset for help on using the changeset viewer.