WordPress.org
Get WordPress

Make WordPress Core

Ticket #37013: 37013.9.diff

File 37013.9.diff, 10.0 KB (added by afercia, 8 years ago)

  • src/wp-admin/css/common.css

     
    29662966}
    29672967
    29682968/* Metabox collapse arrow indicators */
    2969 .js .sidebar-name .sidebar-name-arrow:before,
     2969.sidebar-name .toggle-indicator:before,
    29702970.js .meta-box-sortables .postbox .toggle-indicator:before,
    29712971.bulk-action-notice .toggle-indicator:before {
    29722972        content: "\f142";
    … …  
    29782978        text-decoration: none !important;
    29792979}
    29802980
    2981 .js .widgets-holder-wrap.closed .sidebar-name-arrow:before,
     2981.js .widgets-holder-wrap.closed .toggle-indicator:before,
    29822982.js .meta-box-sortables .postbox.closed .handlediv .toggle-indicator:before,
    29832983.bulk-action-notice .bulk-action-errors-collapsed .toggle-indicator:before {
    29842984        content: "\f140";
    29852985}
    29862986
    2987 .js .sidebar-name .sidebar-name-arrow:before {
    2988         padding: 10px;
    2989         left: 0;
    2990 }
    2991 
    2992 .js #widgets-left .sidebar-name .sidebar-name-arrow {
    2993         display: none;
    2994 }
    2995 
    2996 .js #widgets-left .widgets-holder-wrap.closed .sidebar-name .sidebar-name-arrow,
    2997 .js #widgets-left .sidebar-name:hover .sidebar-name-arrow {
    2998         display: block;
    2999 }
    3000 
    30012987.js .postbox .handlediv .toggle-indicator:before {
    30022988        margin-top: 4px;
    30032989        width: 20px;
    … …  
    31713157.handlediv,
    31723158.postbox .handlediv.button-link,
    31733159.item-edit,
    3174 .sidebar-name-arrow,
     3160.toggle-indicator,
    31753161.accordion-section-title:after {
    31763162        color: #72777c;
    31773163}
    … …  
    31883174.postbox .handlediv.button-link:focus,
    31893175.item-edit:hover,
    31903176.item-edit:focus,
    3191 .sidebar-name:hover .sidebar-name-arrow,
     3177.sidebar-name:hover .toggle-indicator,
    31923178.accordion-section-title:hover:after {
    31933179        color: #23282d;
    31943180}
    … …  
    34883474        #screen-meta-links a.show-settings,
    34893475        .widget-top .widget-action,
    34903476        .widget-top .widget-action:hover,
    3491         .sidebar-name-arrow,
    3492         .sidebar-name:hover .sidebar-name-arrow,
     3477        .sidebar-name .toggle-indicator,
     3478        .sidebar-name:hover .toggle-indicator,
    34933479        .meta-box-sortables .postbox:hover .handlediv,
    34943480        #bulk-titles div a,
    34953481        #bulk-titles div a:hover {

  • src/wp-admin/css/widgets.css

     
    260260        box-sizing: border-box;
    261261}
    262262
    263 .sidebar-name-arrow {
    264         position: absolute;
    265         top: 0;
    266         right: 0;
    267         bottom: 0;
     263.js .sidebar-name {
     264        cursor: pointer;
    268265}
    269266
    270 .js .sidebar-name {
     267.sidebar-name .handlediv {
     268        float: right;
     269        width: 38px;
     270        height: 38px;
     271        border: 0;
     272        margin: 0;
     273        padding: 8px;
     274        background: none;
    271275        cursor: pointer;
     276        outline: none;
    272277}
    273278
     279#widgets-right .sidebar-name .handlediv {
     280        margin: 5px 3px 0 0;
     281}
     282
     283.sidebar-name .handlediv:focus {
     284        box-shadow: none;
     285        outline: none;
     286}
     287
     288#widgets-left .sidebar-name .toggle-indicator {
     289        display: none;
     290}
     291
     292#widgets-left .widgets-holder-wrap.closed .sidebar-name .toggle-indicator,
     293#widgets-left .sidebar-name:hover .toggle-indicator,
     294#widgets-left .sidebar-name .handlediv:focus .toggle-indicator {
     295        display: block;
     296}
     297
     298.sidebar-name .toggle-indicator:before {
     299        padding: 1px 2px 1px 0;
     300        border-radius: 50%;
     301}
     302
     303.sidebar-name .handlediv:focus .toggle-indicator:before {
     304        box-shadow:
     305                0 0 0 1px #5b9dd9,
     306                0 0 2px 1px rgba(30, 140, 190, .8);
     307}
     308
    274309.sidebar-name h2,
    275310.sidebar-name h3 {
    276311        margin: 0;
    … …  
    325360        margin: 0 10px 0 0;
    326361}
    327362
    328 #widgets-left .sidebar-name .sidebar-name-arrow:before {
    329         padding: 9px;
    330 }
    331 
    332363#widgets-left .widgets-holder-wrap,
    333364div#widgets-left .widget-holder {
    334365        background: transparent;
    … …  
    423454        padding: 15px 7px;
    424455}
    425456
    426 div#widgets-right .sidebar-name .sidebar-name-arrow:before {
    427         top: 2px;
    428 }
    429 
    430457div#widgets-right .widget-top {
    431458        padding: 0;
    432459}
    … …  
    556583.widget-control-noform,
    557584#access-off,
    558585.widgets_access .widget-action,
    559 .widgets_access .sidebar-name-arrow,
     586.widgets_access .handlediv,
    560587.widgets_access #access-on,
    561588.widgets_access .widget-holder .description,
    562589.no-js .widget-holder .description {

  • src/wp-admin/includes/widgets.php

     
    8080        if ( $sidebar_name ) {
    8181                ?>
    8282                <div class="sidebar-name">
    83                         <div class="sidebar-name-arrow"><br /></div>
     83                        <button type="button" class="handlediv hide-if-no-js" aria-expanded="true">
     84                                <span class="screen-reader-text"><?php echo esc_html( $sidebar_name ); ?></span>
     85                                <span class="toggle-indicator" aria-hidden="true"></span>
     86                        </button>
    8487                        <h2><?php echo esc_html( $sidebar_name ); ?> <span class="spinner"></span></h2>
    8588                </div>
    8689                <?php

  • src/wp-admin/js/widgets.js

     
    3939                        sidebars = $('div.widgets-sortables'),
    4040                        isRTL = !! ( 'undefined' !== typeof isRtl && isRtl );
    4141
    42                 $('#widgets-right .sidebar-name').click( function() {
    43                         var $this = $(this),
    44                                 $wrap = $this.closest('.widgets-holder-wrap');
     42                // Handle the widgets containers in the right column.
     43                $( '#widgets-right .sidebar-name' )
     44                        /*
     45                         * Toggle the widgets containers when clicked and update the toggle
     46                         * button `aria-expanded` attribute value.
     47                         */
     48                        .click( function() {
     49                                var $this = $( this ),
     50                                        $wrap = $this.closest( '.widgets-holder-wrap '),
     51                                        $toggle = $this.find( '.handlediv' );
    4552
    46                         if ( $wrap.hasClass('closed') ) {
    47                                 $wrap.removeClass('closed');
    48                                 $this.parent().sortable('refresh');
    49                         } else {
    50                                 $wrap.addClass('closed');
    51                         }
     53                                if ( $wrap.hasClass( 'closed' ) ) {
     54                                        $wrap.removeClass( 'closed' );
     55                                        $toggle.attr( 'aria-expanded', 'true' );
     56                                        // Refresh the jQuery UI sortable items.
     57                                        $this.parent().sortable( 'refresh' );
     58                                } else {
     59                                        $wrap.addClass( 'closed' );
     60                                        $toggle.attr( 'aria-expanded', 'false' );
     61                                }
    5262
    53                         $document.triggerHandler( 'wp-pin-menu' );
    54                 });
     63                                // Update the admin menu "sticky" state.
     64                                $document.triggerHandler( 'wp-pin-menu' );
     65                        })
     66                        /*
     67                         * Set the initial `aria-expanded` attribute value on the widgets
     68                         * containers toggle button. The first one is expanded by default.
     69                         */
     70                        .find( '.handlediv' ).each( function( index ) {
     71                                if ( 0 === index ) {
     72                                        // jQuery equivalent of `continue` within an `each()` loop.
     73                                        return;
     74                                }
    5575
     76                                $( this ).attr( 'aria-expanded', 'false' );
     77                        });
     78
    5679                // Show AYS dialog when there are unsaved widget changes.
    5780                $( window ).on( 'beforeunload.widgets', function( event ) {
    5881                        var dirtyWidgetIds = [], unsavedWidgetsElements;
    … …  
    86109                        }
    87110                });
    88111
    89                 $('#widgets-left .sidebar-name').click( function() {
    90                         $(this).closest('.widgets-holder-wrap').toggleClass('closed');
     112                // Handle the widgets containers in the left column.
     113                $( '#widgets-left .sidebar-name' ).click( function() {
     114                        var $wrap = $( this ).closest( '.widgets-holder-wrap' );
     115
     116                        $wrap
     117                                .toggleClass( 'closed' )
     118                                .find( '.handlediv' ).attr( 'aria-expanded', ! $wrap.hasClass( 'closed' ) );
     119
     120                        // Update the admin menu "sticky" state.
    91121                        $document.triggerHandler( 'wp-pin-menu' );
    92122                });
    93123
    … …  
    215245                        /**
    216246                         * Open Sidebar when a Widget gets dragged over it.
    217247                         *
    218                          * @param event
     248                         * @param {object} event jQuery event object.
    219249                         */
    220250                        over: function( event ) {
    221251                                var $wrap = $( event.target ).parent();
    … …  
    227257
    228258                                if ( $wrap.hasClass( 'closed' ) ) {
    229259                                        wpWidgets.hoveredSidebar = $wrap;
    230                                         $wrap.removeClass( 'closed' );
     260                                        $wrap
     261                                                .removeClass( 'closed' )
     262                                                .find( '.handlediv' ).attr( 'aria-expanded', 'true' );
    231263                                }
    232264
    233265                                $( this ).sortable( 'refresh' );
    … …  
    236268                        /**
    237269                         * Close Sidebar when the Widget gets dragged out of it.
    238270                         *
    239                          * @param event
     271                         * @param {object} event jQuery event object.
    240272                         */
    241273                        out: function( event ) {
    242274                                if ( wpWidgets.hoveredSidebar ) {
    … …  
    319351                                $sidebar = $widget.parent();
    320352
    321353                                if ( $sidebar.parent().hasClass('closed') ) {
    322                                         $sidebar.parent().removeClass('closed');
     354                                        $sidebar.parent()
     355                                                .removeClass( 'closed' )
     356                                                .find( '.handlediv' ).attr( 'aria-expanded', 'true' );
     357
    323358                                        $children = $sidebar.children('.widget');
    324359
    325360                                        // Make sure the dropped widget is at the top
    … …  
    622657                        $( '#' + widgetId ).hide();
    623658                }
    624659
    625                 // Open the widgets container
    626                 sidebar.closest( '.widgets-holder-wrap' ).removeClass('closed');
     660                // Open the widgets container.
     661                sidebar.closest( '.widgets-holder-wrap' )
     662                        .removeClass( 'closed' )
     663                        .find( '.handlediv' ).attr( 'aria-expanded', 'true' );
    627664
    628665                sidebar.append( widget );
    629666                sidebar.sortable('refresh');
    … …  
    679716         *
    680717         * Used when a Widget gets dragged in/out of the Sidebar and never dropped.
    681718         *
    682          * @param sidebar
     719         * @param {object} event jQuery event object.
    683720         */
    684         closeSidebar: function( sidebar ) {
    685                 this.hoveredSidebar.addClass( 'closed' );
    686                 $( sidebar.target ).css( 'min-height', '' );
     721        closeSidebar: function( event ) {
     722                this.hoveredSidebar
     723                        .addClass( 'closed' )
     724                        .find( '.handlediv' ).attr( 'aria-expanded', 'false' );
     725
     726                $( event.target ).css( 'min-height', '' );
    687727                this.hoveredSidebar = null;
    688728        }
    689729};

  • src/wp-admin/widgets.php

     
    387387<div id="widgets-left">
    388388        <div id="available-widgets" class="widgets-holder-wrap">
    389389                <div class="sidebar-name">
    390                         <div class="sidebar-name-arrow"><br /></div>
     390                        <button type="button" class="handlediv hide-if-no-js" aria-expanded="true">
     391                                <span class="screen-reader-text"><?php _e( 'Available Widgets' ); ?></span>
     392                                <span class="toggle-indicator" aria-hidden="true"></span>
     393                        </button>
    391394                        <h2><?php _e( 'Available Widgets' ); ?> <span id="removing-widget"><?php _ex( 'Deactivate', 'removing-widget' ); ?> <span></span></span></h2>
    392395                </div>
    393396                <div class="widget-holder">