WordPress.org

Make WordPress Core

Ticket #23449: 23449.21.diff

File 23449.21.diff, 8.3 KB (added by helen, 23 months ago)
  • wp-admin/includes/template.php

     
    10001000                <ul class="outer-border"> 
    10011001        <?php 
    10021002        $i = 0; 
     1003        $first_open = false; 
    10031004        do { 
    10041005                if ( ! isset( $wp_meta_boxes ) || ! isset( $wp_meta_boxes[$page] ) || ! isset( $wp_meta_boxes[$page][$context] ) ) 
    10051006                        break; 
     
    10111012                                                continue; 
    10121013                                        $i++; 
    10131014                                        $hidden_class = in_array( $box['id'], $hidden ) ? 'hide-if-js' : ''; 
     1015 
     1016                                        $open_class = ''; 
     1017                                        if ( ! $first_open && empty( $hidden_class ) ) { 
     1018                                                $first_open = true; 
     1019                                                $open_class = 'open'; 
     1020                                        } 
    10141021                                        ?> 
    1015                                         <li class="control-section accordion-section <?php echo $hidden_class; ?> <?php echo esc_attr( $box['id'] ); ?>" id="<?php echo esc_attr( $box['id'] ); ?>"> 
     1022                                        <li class="control-section accordion-section <?php echo $hidden_class; ?> <?php echo $open_class; ?> <?php echo esc_attr( $box['id'] ); ?>" id="<?php echo esc_attr( $box['id'] ); ?>"> 
    10161023                                                <h3 class="accordion-section-title hndle" tabindex="0" title="<?php echo esc_attr( $box['title'] ); ?>"><?php echo esc_html( $box['title'] ); ?></h3> 
    10171024                                                <div class="accordion-section-content <?php postbox_classes( $box['id'], $page ); ?>"> 
    10181025                                                        <div class="inside"> 
  • wp-admin/customize.php

     
    4646wp_user_settings(); 
    4747_wp_admin_html_begin(); 
    4848 
    49 $body_class = 'wp-core-ui'; 
     49$body_class = 'wp-core-ui js'; 
    5050 
    5151if ( wp_is_mobile() ) : 
    5252        $body_class .= ' mobile'; 
     
    9090                        $cannot_expand = ! ( $screenshot || $wp_customize->theme()->get('Description') ); 
    9191                ?> 
    9292 
    93                 <div class="wp-full-overlay-sidebar-content" tabindex="-1"> 
    94                         <div id="customize-info" class="accordion-section<?php if ( $cannot_expand ) echo ' cannot-expand'; ?>"> 
     93                <div class="wp-full-overlay-sidebar-content accordion-container" tabindex="-1"> 
     94                        <div id="customize-info" class="accordion-section closable<?php if ( $cannot_expand ) echo ' cannot-expand'; ?>"> 
    9595                                <div class="accordion-section-title" aria-label="<?php esc_attr_e( 'Theme Customizer Options' ); ?>" tabindex="0"> 
    9696                                        <span class="preview-notice"><?php 
    9797                                                /* translators: %s is the theme name in the Customize/Live Preview pane */ 
     
    111111                                <?php endif; ?> 
    112112                        </div> 
    113113 
    114                         <div id="customize-theme-controls" class="accordion-container"><ul> 
     114                        <div id="customize-theme-controls"><ul> 
    115115                                <?php 
    116116                                foreach ( $wp_customize->sections() as $section ) 
    117117                                        $section->maybe_render(); 
  • wp-admin/js/accordion.js

     
    99                        e.preventDefault(); // Keep this AFTER the key filter above 
    1010 
    1111                        accordionSwitch( $( this ) ); 
    12                         accordionCorners(); 
    1312                }); 
    1413 
    1514                // Refresh selected accordion option when screen options are toggled 
     
    2625        function accordionCorners () { 
    2726                accordionOptions.removeClass( 'top bottom' ); 
    2827                accordionOptions.filter( ':visible' ).first().addClass( 'top' ); 
    29                 accordionOptions.filter( ':visible' ).last().addClass( 'bottom' ).find( sectionContent ).addClass('bottom'); 
    30         }; 
     28                accordionOptions.filter( ':visible' ).last().addClass( 'bottom' ).find( sectionContent ).addClass( 'bottom' ); 
     29        } 
    3130 
    3231        function accordionInit () { 
    3332                accordionSwitch( accordionOptions.filter( ':visible' ).first() ); 
     
    3635 
    3736        function accordionSwitch ( el ) { 
    3837                var section = el.closest( '.accordion-section' ), 
    39                     siblings = section.parent().find( '.open' ), 
    40                     content = section.find( sectionContent ); 
     38                        siblings = section.closest( '.accordion-container' ).find( '.open' ), 
     39                        content = section.find( sectionContent ); 
    4140 
    4241                if ( section.hasClass( 'cannot-expand' ) ) 
    4342                        return; 
    4443 
    45                 siblings.removeClass( 'open' ); 
    46                 siblings.find( sectionContent ).show().slideUp( 150 ); 
    47                 content.toggle( section.hasClass( 'open' ) ).slideToggle( 150 ); 
    48                 section.toggleClass( 'open' ); 
     44                if ( section.hasClass( 'open' ) && ! section.hasClass( 'closable' ) ) { 
     45                        return; 
     46                } else if ( section.hasClass( 'open' ) && section.hasClass( 'closable' ) ) { 
     47                        section.toggleClass( 'open' ); 
     48                        content.toggle( true ).slideToggle( 150 ); 
     49                } else { 
     50                        siblings.removeClass( 'open' ); 
     51                        siblings.find( sectionContent ).show().slideUp( 150 ); 
     52                        content.toggle( false ).slideToggle( 150 ); 
     53                        section.toggleClass( 'open' ); 
     54                } 
     55 
     56                accordionCorners(); 
    4957        } 
    5058 
    5159        // Show the first accordion option by default 
  • wp-admin/css/wp-admin.css

     
    89978997        cursor: pointer; 
    89988998} 
    89998999 
     9000.js .open .accordion-section-title { 
     9001        cursor: default; 
     9002} 
     9003 
    90009004.js .accordion-section-title:after { 
    90019005        content: ''; 
    90029006        width: 0; 
     
    90299033 
    90309034.control-section .accordion-section-title { 
    90319035        padding: 10px 20px; 
     9036        color: #464646; 
    90329037        font-size: 15px; 
    90339038        font-family: Georgia, "Times New Roman", "Bitstream Charter", Times, serif; 
    90349039        font-weight: normal; 
     
    90459050        top: 15px; 
    90469051} 
    90479052 
    9048 .control-section .accordion-section-title:hover:after, 
    9049 .control-section .accordion-section-title:focus:after { 
    9050         border-color: #eee transparent; 
    9051 } 
    9052  
    90539053.js .control-section:hover .accordion-section-title, 
    90549054.js .control-section .accordion-section-title:hover, 
    90559055.js .control-section.open .accordion-section-title, 
    90569056.js .control-section .accordion-section-title:focus { 
    9057         color: #fff; 
    9058         text-shadow: 0 -1px 0 #333; 
    9059         background: #808080; 
    9060         background-image: -webkit-gradient(linear, left bottom, left top, from(#6d6d6d), to(#808080)); 
    9061         background-image: -webkit-linear-gradient(bottom, #6d6d6d, #808080); 
    9062         background-image:    -moz-linear-gradient(bottom, #6d6d6d, #808080); 
    9063         background-image:      -o-linear-gradient(bottom, #6d6d6d, #808080); 
    9064         background-image: linear-gradient(to top, #6d6d6d, #808080); 
    9065         border-left: 1px solid #808080; 
    9066         border-right: 1px solid #808080; 
     9057        color: #000; 
     9058        background: #f9f9f9; 
     9059        background-image: -webkit-gradient(linear, left bottom, left top, from(#ececec), to(#f9f9f9)); 
     9060        background-image: -webkit-linear-gradient(bottom, #ececec, #f9f9f9); 
     9061        background-image:    -moz-linear-gradient(bottom, #ececec, #f9f9f9); 
     9062        background-image:      -o-linear-gradient(bottom, #ececec, #f9f9f9); 
     9063        background-image: linear-gradient(to top, #ececec, #f9f9f9); 
    90679064} 
    90689065 
    9069 .js .control-section.accordion-section:hover, 
    9070 .control-section.accordion-section.open { 
    9071         border-top-color: #808080; 
    9072 } 
    9073  
    90749066.control-section.open .accordion-section-title { 
    9075         border-bottom: 1px solid #6d6d6d; 
     9067        border-bottom: 1px solid #dfdfdf; 
    90769068} 
    90779069 
    90789070/* =Media Queries 
  • wp-admin/css/customize-controls.css

     
    121121        height: 100%; 
    122122} 
    123123 
     124#customize-theme-controls .accordion-section-title:hover:after, 
     125#customize-theme-controls .accordion-section-title:focus:after { 
     126        border-color: #eee transparent; 
     127} 
     128 
     129#customize-theme-controls .control-section:hover .accordion-section-title, 
     130#customize-theme-controls .control-section .accordion-section-title:hover, 
     131#customize-theme-controls .control-section.open .accordion-section-title, 
     132#customize-theme-controls .control-section .accordion-section-title:focus { 
     133        color: #fff; 
     134        text-shadow: 0 -1px 0 #333; 
     135        background: #808080; 
     136        background-image: -webkit-gradient(linear, left bottom, left top, from(#6d6d6d), to(#808080)); 
     137        background-image: -webkit-linear-gradient(bottom, #6d6d6d, #808080); 
     138        background-image:    -moz-linear-gradient(bottom, #6d6d6d, #808080); 
     139        background-image:      -o-linear-gradient(bottom, #6d6d6d, #808080); 
     140        background-image: linear-gradient(to top, #6d6d6d, #808080); 
     141        border-left: 1px solid #808080; 
     142        border-right: 1px solid #808080; 
     143} 
     144 
     145#customize-theme-controls .control-section.accordion-section:hover, 
     146#customize-theme-controls .control-section.accordion-section.open { 
     147        border-top-color: #808080; 
     148} 
     149 
     150#customize-theme-controls .control-section.open .accordion-section-title { 
     151        border-bottom: 1px solid #6d6d6d; 
     152} 
     153 
    124154/* 
    125155 * Style for custom settings 
    126156 */