WordPress.org

Make WordPress Core

Changeset 41368


Ignore:
Timestamp:
09/11/2017 05:22:22 AM (2 years ago)
Author:
westonruter
Message:

Customize: Add rightward-facing back button to Themes section header to improve navigation (since the section slides in from the left).

Also serves to prototype for an upward-facing arrow in this location for a Publish Settings section.

Props melchoyce, westonruter.
See #39896, #40278, #21666.

Location:
trunk/src
Files:
3 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-admin/css/customize-controls.css

    r41329 r41368  
    11691169    margin-top: 0;
    11701170}
     1171#customize-theme-controls .control-section-themes .customize-section-back {
     1172    position: absolute;
     1173    right: 0;
     1174    top: 0;
     1175    height: 80px;
     1176    border-left: 1px solid #ddd;
     1177    border-right: 4px solid #fff;
     1178}
     1179#customize-theme-controls .control-section-themes .customize-section-back:before {
     1180    content: "\f345";
     1181}
     1182#customize-theme-controls .control-section-themes .customize-section-back:hover,
     1183#customize-theme-controls .control-section-themes .customize-section-back:focus {
     1184    border-right-color: #0073aa;
     1185}
    11711186
    11721187#customize-theme-controls .control-section-themes .customize-themes-panel .accordion-section-title:first-child:hover, /* Not a focusable element. */
  • trunk/src/wp-admin/js/customize-controls.js

    r40995 r41368  
    11651165            var section = this;
    11661166
     1167            // Expand/Collapse accordion sections on click.
     1168            section.container.find( '.customize-section-back' ).on( 'click keydown', function( event ) {
     1169                if ( api.utils.isKeydownButNotEnterEvent( event ) ) {
     1170                    return;
     1171                }
     1172                event.preventDefault(); // Keep this AFTER the key filter above
     1173                section.collapse();
     1174            });
     1175
    11671176            // Expand/Collapse section/panel.
    11681177            section.container.find( '.change-theme, .customize-theme' ).on( 'click keydown', function( event ) {
  • trunk/src/wp-includes/customize/class-wp-customize-themes-section.php

    r41162 r41368  
    5151            <div class="customize-themes-panel control-panel-content themes-php">
    5252                <h3 class="accordion-section-title customize-section-title">
     53                    <button class="customize-section-back" tabindex="0" type="button"><span class="screen-reader-text"><?php _e( 'Back' ); ?></span></button>
    5354                    <span class="customize-action"><?php _e( 'Customizing' ); ?></span>
    5455                    <?php _e( 'Themes' ); ?>
Note: See TracChangeset for help on using the changeset viewer.