WordPress.org
Get WordPress

Make WordPress Core

Ticket #23449: 23449.22.diff

File 23449.22.diff, 8.5 KB (added by helen, 13 years 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 <?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
    15                 // Refresh selected accordion option when screen options are toggled
     14                // Re-initialize accordion when screen options are toggled
    1615                $( '.hide-postbox-tog' ).click( function () {
    1716                        accordionInit();
    1817                });
    … …  
    2221        var accordionOptions = $( '.accordion-container li.accordion-section' ),
    2322                sectionContent   = $( '.accordion-section-content' );
    2423
    25         // Rounded corners
    26         function accordionCorners () {
     24        function accordionInit () {
     25                // Rounded corners
    2726                accordionOptions.removeClass( 'top bottom' );
    2827                accordionOptions.filter( ':visible' ).first().addClass( 'top' );
    29                 accordionOptions.filter( ':visible' ).last().addClass( 'bottom' ).find( sectionContent ).addClass('bottom');
    30         };
    31 
    32         function accordionInit () {
    33                 accordionSwitch( accordionOptions.filter( ':visible' ).first() );
    34                 accordionCorners();
     28                accordionOptions.filter( ':visible' ).last().addClass( 'bottom' ).find( sectionContent ).addClass( 'bottom' );
    3529        }
    3630
    3731        function accordionSwitch ( el ) {
    3832                var section = el.closest( '.accordion-section' ),
    39                     siblings = section.parent().find( '.open' ),
    40                     content = section.find( sectionContent );
     33                        siblings = section.closest( '.accordion-container' ).find( '.open' ),
     34                        content = section.find( sectionContent );
    4135
    4236                if ( section.hasClass( 'cannot-expand' ) )
    4337                        return;
    4438
    45                 siblings.removeClass( 'open' );
    46                 siblings.find( sectionContent ).show().slideUp( 150 );
    47                 content.toggle( section.hasClass( 'open' ) ).slideToggle( 150 );
    48                 section.toggleClass( 'open' );
     39                if ( section.hasClass( 'open' ) ) {
     40                        section.toggleClass( 'open' );
     41                        content.toggle( true ).slideToggle( 150 );
     42                } else {
     43                        siblings.removeClass( 'open' );
     44                        siblings.find( sectionContent ).show().slideUp( 150 );
     45                        content.toggle( false ).slideToggle( 150 );
     46                        section.toggleClass( 'open' );
     47                }
     48
     49                accordionInit();
    4950        }
    5051
    51         // Show the first accordion option by default
     52        // Initialize the accordion (currently just corner fixes)
    5253        accordionInit();
    5354
    5455})(jQuery);

  • wp-admin/css/wp-admin.css

     
    90299029
    90309030.control-section .accordion-section-title {
    90319031        padding: 10px 20px;
     9032        color: #464646;
    90329033        font-size: 15px;
    90339034        font-family: Georgia, "Times New Roman", "Bitstream Charter", Times, serif;
    90349035        font-weight: normal;
    … …  
    90459046        top: 15px;
    90469047}
    90479048
    9048 .control-section .accordion-section-title:hover:after,
    9049 .control-section .accordion-section-title:focus:after {
    9050         border-color: #eee transparent;
    9051 }
    9052 
    90539049.js .control-section:hover .accordion-section-title,
    90549050.js .control-section .accordion-section-title:hover,
    90559051.js .control-section.open .accordion-section-title,
    90569052.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;
     9053        color: #000;
     9054        background: #f9f9f9;
     9055        background-image: -webkit-gradient(linear, left bottom, left top, from(#ececec), to(#f9f9f9));
     9056        background-image: -webkit-linear-gradient(bottom, #ececec, #f9f9f9);
     9057        background-image:    -moz-linear-gradient(bottom, #ececec, #f9f9f9);
     9058        background-image:      -o-linear-gradient(bottom, #ececec, #f9f9f9);
     9059        background-image: linear-gradient(to top, #ececec, #f9f9f9);
    90679060}
    90689061
    9069 .js .control-section.accordion-section:hover,
    9070 .control-section.accordion-section.open {
    9071         border-top-color: #808080;
    9072 }
    9073 
    90749062.control-section.open .accordion-section-title {
    9075         border-bottom: 1px solid #6d6d6d;
     9063        border-bottom: 1px solid #dfdfdf;
    90769064}
    90779065
    90789066/* =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 */