WordPress.org
Get WordPress

Make WordPress Core

Changeset 33153


Ignore:
Timestamp:
07/10/2015 09:21:07 PM (11 years ago)
Author:
ocean90
Message:

Customizer: Use a <button> for the collapse sidebar … button.

props afercia.
fixes #32819.

Location:
trunk/src
Files:
9 edited

Legend:

Unmodified
Added
Removed

  • trunk/src/wp-admin/css/customize-controls.css

    r33150 r33153  
    649649}
    650650
    651 .collapse-sidebar {
    652         background-color: transparent !important;
    653         border: none !important;
    654         -webkit-box-shadow: none !important;
    655         box-shadow: none !important;
    656         -webkit-border-radius: 0 !important;
    657         border-radius: 0 !important;
    658 }
    659 
    660 
    661 .collapse-sidebar:active,
    662 .collapse-sidebar:active .collapse-sidebar-label,
    663 .collapse-sidebar:active .collapse-sidebar-arrow:before {
    664         text-shadow: none;
    665 }
    666 
    667 .collapsed .collapse-sidebar-arrow:before {
    668         color: #82878c;
    669 }
    670 
    671651/* Style for custom settings */
    672652

  • trunk/src/wp-admin/css/customize-nav-menus.css

    r33152 r33153  
    378378#accordion-panel-nav_menus.field-description-active .field-description {
    379379        display: block;
    380 }
    381 
    382 
    383 /* Not exactly sure what broke this, or why it works without these styles in core. */
    384 .wp-customizer .wp-full-overlay a.collapse-sidebar {
    385         position: fixed;
    386         left: 0;
    387380}
    388381

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

    r33111 r33153  
    512512        content: "\f345";
    513513}
    514 
    515 
    516514
    517515.theme-overlay .theme-wrap {
    … …  
    14711469
    14721470/* Collapse Button */
    1473 .wp-full-overlay a.collapse-sidebar {
    1474         position: absolute;
    1475         bottom: 12px;
    1476         left: 0;
    1477         z-index: 50;
    1478         display: block;
    1479         width: 19px;
    1480         height: 19px;
    1481         margin-left: 15px;
     1471.wp-core-ui .wp-full-overlay .collapse-sidebar {
     1472        position: fixed;
     1473        bottom: 8px;
     1474        left: 10px;
    14821475        padding: 0;
     1476        color: #656a6f;
     1477        outline: 0;
     1478        line-height: 1;
     1479        background-color: transparent !important;
     1480        border: none !important;
     1481        -webkit-box-shadow: none !important;
     1482        box-shadow: none !important;
     1483        -webkit-border-radius: 0 !important;
     1484        border-radius: 0 !important;
     1485}
     1486
     1487.wp-core-ui .wp-full-overlay .collapse-sidebar:hover,
     1488.wp-core-ui .wp-full-overlay .collapse-sidebar:focus {
     1489        color: #0073aa;
     1490}
     1491
     1492.wp-full-overlay .collapse-sidebar-arrow,
     1493.wp-full-overlay .collapse-sidebar-label {
     1494        display: inline-block;
     1495        vertical-align: middle;
     1496        line-height: 20px;
     1497}
     1498
     1499.wp-full-overlay .collapse-sidebar-arrow {
     1500        width: 20px;
     1501        height: 20px;
     1502        margin: 0 2px; /* avoid the focus box-shadow to be cut-off */
    14831503        -webkit-border-radius: 50%;
    14841504        border-radius: 50%;
    1485         color: #777;
    1486         text-decoration: none;
    1487 }
    1488 
    1489 .wp-full-overlay a.collapse-sidebar:hover {
    1490         color: #0073aa;
    1491 }
    1492 
    1493 .wp-full-overlay.collapsed .collapse-sidebar {
    1494         position: absolute;
    1495         left: 100%;
    1496 }
    1497 
    1498 .wp-full-overlay .collapse-sidebar-arrow {
    1499         position: static;
    1500         margin-top: 0;
    1501         margin-left: 0;
    1502         display: block;
    1503         width: auto;
    1504         height: auto;
    1505         background: none;
     1505        overflow: hidden;
     1506}
     1507
     1508.wp-full-overlay .collapse-sidebar:hover .collapse-sidebar-arrow,
     1509.wp-full-overlay .collapse-sidebar:focus .collapse-sidebar-arrow {
     1510    -webkit-box-shadow:
     1511        0 0 0 1px #5b9dd9,
     1512                0 0 2px 1px rgba(30, 140, 190, .8);
     1513    box-shadow:
     1514        0 0 0 1px #5b9dd9,
     1515                0 0 2px 1px rgba(30, 140, 190, .8);
     1516}
     1517
     1518.wp-full-overlay .collapse-sidebar-label {
     1519        margin-left: 3px;
     1520}
     1521
     1522.wp-full-overlay.collapsed .collapse-sidebar-label {
     1523        display: none;
    15061524}
    15071525
    15081526.wp-full-overlay .collapse-sidebar-arrow:before {
    1509         -webkit-border-radius: 50%;
    1510         border-radius: 50%;
    1511         float: left;
     1527        display: block;
    15121528        content: "\f148";
    15131529        background: #eee;
    15141530        font: normal 20px/1 'dashicons';
    15151531        speak: none;
    1516         display: block;
    15171532        padding: 0;
    1518         text-indent: 0;
    1519         text-align: center;
    1520         position: relative;
    15211533        -webkit-font-smoothing: antialiased;
    15221534        -moz-osx-font-smoothing: grayscale;
    1523         text-decoration: none !important;
    15241535}
    15251536
    … …  
    15271538.wp-full-overlay.collapsed .collapse-sidebar-arrow:before,
    15281539.rtl .wp-full-overlay .collapse-sidebar-arrow:before {
    1529         -webkit-transform: rotate(180deg);
    1530         -ms-transform: rotate(180deg);
    1531         transform: rotate(180deg);
     1540        -webkit-transform: rotate(180.001deg);
     1541        -ms-transform: rotate(180.001deg);
     1542        transform: rotate(180.001deg); /* Firefox: promoting to its own layer to trigger anti-aliasing  */
    15321543}
    15331544
    … …  
    15361547        -ms-transform: none;
    15371548        transform: none;
    1538 }
    1539 
    1540 .wp-full-overlay.collapsed .collapse-sidebar-arrow {
    1541         background-position: -1px -109px;
    1542 }
    1543 
    1544 .wp-full-overlay .collapse-sidebar-label {
    1545         position: absolute;
    1546         left: 100%;
    1547         line-height: 20px;
    1548         margin-left: 10px;
    1549 }
    1550 
    1551 .wp-full-overlay.collapsed .collapse-sidebar-label {
    1552         display: none;
    15531549}
    15541550
    … …  
    16131609}
    16141610
    1615 #customize-container .collapse-sidebar {
    1616         bottom: 16px;
    1617 }
    1618 
    16191611#customize-controls {
    16201612        margin-top: 0;

  • trunk/src/wp-admin/customize.php

    r32658 r33153  
    167167
    168168                <div id="customize-footer-actions" class="wp-full-overlay-footer">
    169                         <a href="#" class="collapse-sidebar button-secondary" title="<?php esc_attr_e('Collapse Sidebar'); ?>">
     169                        <button type="button" class="collapse-sidebar button-secondary" aria-expanded="true" aria-label="<?php esc_attr_e( 'Collapse Sidebar' ); ?>">
    170170                                <span class="collapse-sidebar-arrow"></span>
    171                                 <span class="collapse-sidebar-label"><?php _e('Collapse'); ?></span>
    172                         </a>
     171                                <span class="collapse-sidebar-label"><?php _e( 'Collapse' ); ?></span>
     172                        </button>
    173173                </div>
    174174        </form>

  • trunk/src/wp-admin/includes/class-wp-theme-install-list-table.php

    r32656 r33153  
    329329                                </div>
    330330                                <div class="wp-full-overlay-footer">
    331                                         <a href="#" class="collapse-sidebar" title="<?php esc_attr_e('Collapse Sidebar'); ?>">
    332                                                 <span class="collapse-sidebar-label"><?php _e('Collapse'); ?></span>
     331                                        <button type="button" class="collapse-sidebar button-secondary" aria-expanded="true" aria-label="<?php esc_attr_e( 'Collapse Sidebar' ); ?>">
    333332                                                <span class="collapse-sidebar-arrow"></span>
    334                                         </a>
     333                                                <span class="collapse-sidebar-label"><?php _e( 'Collapse' ); ?></span>
     334                                        </button>
    335335                                </div>
    336336                        </div>

  • trunk/src/wp-admin/js/customize-controls.js

    r33069 r33153  
    30873087                });
    30883088
    3089                 $('.collapse-sidebar').on( 'click keydown', function( event ) {
    3090                         if ( api.utils.isKeydownButNotEnterEvent( event ) ) {
    3091                                 return;
     3089                $( '.collapse-sidebar' ).on( 'click', function() {
     3090                        if ( 'true' === $( this ).attr( 'aria-expanded' ) ) {
     3091                                $( this ).attr({ 'aria-expanded': 'false', 'aria-label': api.l10n.expandSidebar });
     3092                        } else {
     3093                                $( this ).attr({ 'aria-expanded': 'true', 'aria-label': api.l10n.collapseSidebar });
    30923094                        }
    30933095
    30943096                        overlay.toggleClass( 'collapsed' ).toggleClass( 'expanded' );
    3095                         event.preventDefault();
    30963097                });
    30973098

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

    r32974 r33153  
    794794        },
    795795
    796         collapse: function() {
     796        collapse: function( event ) {
     797                var $button = $( event.currentTarget );
     798                if ( 'true' === $button.attr( 'aria-expanded' ) ) {
     799                        $button.attr({ 'aria-expanded': 'false', 'aria-label': l10n.expandSidebar });
     800                } else {
     801                        $button.attr({ 'aria-expanded': 'true', 'aria-label': l10n.collapseSidebar });
     802                }
    797803
    798804                this.$el.toggleClass( 'collapsed' ).toggleClass( 'expanded' );

  • trunk/src/wp-admin/theme-install.php

    r33073 r33153  
    5252                'themesFound'   => __( 'Number of Themes found: %d' ),
    5353                'noThemesFound' => __( 'No themes found. Try a different search.' ),
     54                'collapseSidebar'    => __( 'Collapse Sidebar' ),
     55                'expandSidebar'      => __( 'Expand Sidebar' ),
    5456        ),
    5557        'installedThemes' => array_keys( $installed_themes ),
    … …  
    253255                </div>
    254256                <div class="wp-full-overlay-footer">
    255                         <a href="#" class="collapse-sidebar" title="<?php esc_attr_e( 'Collapse Sidebar' ); ?>">
     257                        <button type="button" class="collapse-sidebar button-secondary" aria-expanded="true" aria-label="<?php esc_attr_e( 'Collapse Sidebar' ); ?>">
     258                                <span class="collapse-sidebar-arrow"></span>
    256259                                <span class="collapse-sidebar-label"><?php _e( 'Collapse' ); ?></span>
    257                                 <span class="collapse-sidebar-arrow"></span>
    258                         </a>
     260                        </button>
    259261                </div>
    260262        </div>

  • trunk/src/wp-includes/script-loader.php

    r33023 r33153  
    420420                'previewIframeTitle' => __( 'Site Preview' ),
    421421                'loginIframeTitle'   => __( 'Session expired' ),
    422 
     422                'collapseSidebar'    => __( 'Collapse Sidebar' ),
     423                'expandSidebar'      => __( 'Expand Sidebar' ),
    423424                // Used for overriding the file types allowed in plupload.
    424                 'allowedFiles' => __( 'Allowed Files' ),
     425                'allowedFiles'       => __( 'Allowed Files' ),
    425426        ) );
    426427
Note: See TracChangeset for help on using the changeset viewer.