WordPress.org

Make WordPress Core

Changeset 33153


Ignore:
Timestamp:
07/10/2015 09:21:07 PM (5 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.