Make WordPress Core

Changeset 23417


Ignore:
Timestamp:
02/14/2013 10:58:04 PM (11 years ago)
Author:
markjaquith
Message:

Refactor the Customizer accordion so that it can be used in other locations.

fixes #23449. props lessbloat, aaroncampbell

Location:
trunk
Files:
2 added
8 edited

Legend:

Unmodified
Added
Removed
  • trunk/wp-admin/css/customize-controls-rtl.css

    r22798 r23417  
    1 .control-section .customize-section-title {
    2     font-family: Tahoma, Arial, sans-serif;
    3 }
    4 .customize-section-title:after {
    5     right: auto;
    6     left: 20px;
    7 }
    8 
    91#customize-header-actions .button-primary {
    102    float: left;
  • trunk/wp-admin/css/customize-controls.css

    r22798 r23417  
    77}
    88
    9 .customize-section {
    10     border-top: 1px solid #fff;
    11     border-bottom: 1px solid #dfdfdf;
    12     margin: 0;
    13 }
    14 
    15 .control-section.customize-section:hover,
    16 .control-section.customize-section.open {
    17     border-top-color: #808080;
    18 }
    19 
    20 .control-section.customize-section:hover {
    21     border-bottom-color: #6d6d6d;
    22 }
    23 
    24 .customize-section.open:hover {
    25     border-bottom-color: #dfdfdf;
    26 }
    27 
    28 .customize-section:last-child {
    29     box-shadow: 0 1px 0 0px #fff;
    30 }
    31 
    32 .customize-section-title {
    33     margin: 0;
    34     padding: 15px 20px;
    35     position: relative;
    36 
    37     cursor: pointer;
    38 
    39     -webkit-user-select: none;
    40     -moz-user-select: none;
    41     user-select: none;
    42 }
    43 
    44 .customize-section-title:focus {
    45     outline: none;
    46 }
    47 
    48 .cannot-expand .customize-section-title {
    49     cursor: auto;
    50 }
    51 
    52 .customize-section-content {
    53     display: none;
    54     padding: 10px 20px 15px;
    55     overflow: hidden;
    56 }
    57 
    58 .control-section .customize-section-title {
    59     padding: 10px 20px;
    60     font-size: 15px;
    61     font-family: Georgia, "Times New Roman", "Bitstream Charter", Times, serif;
    62     font-weight: normal;
    63     text-shadow: 0 1px 0 #fff;
    64     background: #f5f5f5;
    65     background-image: -webkit-gradient(linear, left bottom, left top, from(#eee), to(#f5f5f5));
    66     background-image: -webkit-linear-gradient(bottom, #eee, #f5f5f5);
    67     background-image:    -moz-linear-gradient(bottom, #eee, #f5f5f5);
    68     background-image:      -o-linear-gradient(bottom, #eee, #f5f5f5);
    69     background-image: linear-gradient(to top, #eee, #f5f5f5);
    70 }
    71 
    72 .control-section:hover .customize-section-title,
    73 .control-section .customize-section-title:hover,
    74 .control-section.open .customize-section-title,
    75 .control-section .customize-section-title:focus {
    76     color: #fff;
    77     text-shadow: 0 -1px 0 #333;
    78     background: #808080;
    79     background-image: -webkit-gradient(linear, left bottom, left top, from(#6d6d6d), to(#808080));
    80     background-image: -webkit-linear-gradient(bottom, #6d6d6d, #808080);
    81     background-image:    -moz-linear-gradient(bottom, #6d6d6d, #808080);
    82     background-image:      -o-linear-gradient(bottom, #6d6d6d, #808080);
    83     background-image: linear-gradient(to top, #6d6d6d, #808080);
    84 }
    85 
    86 .control-section.open .customize-section-title {
    87     border-bottom: 1px solid #6d6d6d;
    88 }
    89 
    90 .customize-section.open .customize-section-content {
    91     display: block;
    92     background: #fdfdfd;
    93 }
    94 
    95 .customize-section-title:after {
    96     content: '';
    97     width: 0;
    98     height: 0;
    99     border-color: #ccc transparent;
    100     border-style: solid;
    101     border-width: 6px 6px 0;
    102     position: absolute;
    103     top: 25px;
    104     right: 20px;
    105     z-index: 1;
    106 }
    107 
    108 .cannot-expand .customize-section-title:after {
    109     display: none;
    110 }
    111 
    112 .customize-section-title:hover:after,
    113 .customize-section-title:focus:after {
    114     border-color: #aaa transparent;
    115 }
    116 
    117 .control-section .customize-section-title:hover:after,
    118 .control-section .customize-section-title:focus:after {
    119     border-color: #eee transparent;
    120 }
    121 
    122 .control-section .customize-section-title:after {
    123     top: 15px;
    124 }
    125 
    126 #customize-info .customize-section-content {
     9#customize-info .accordion-section-content {
    12710    background: transparent;
    12811}
     
    15942
    16043#customize-theme-controls > ul,
    161 #customize-theme-controls .customize-section-content {
     44#customize-theme-controls .accordion-section-content {
    16245    margin: 0;
    16346}
     
    246129 * Dropdowns
    247130 */
    248 .customize-section .dropdown {
     131.accordion-section .dropdown {
    249132    float: left;
    250133    display: block;
     
    256139}
    257140
    258 .customize-section .dropdown-content {
     141.accordion-section .dropdown-content {
    259142    overflow: hidden;
    260143    float: left;
     
    302185}
    303186
    304 .customize-section .dropdown:hover .dropdown-content,
     187.accordion-section .dropdown:hover .dropdown-content,
    305188.customize-control .dropdown:hover .dropdown-arrow {
    306189    border-color: #aaa;
    307190}
    308191
    309 .customize-section .dropdown:hover .dropdown-arrow:after {
     192.accordion-section .dropdown:hover .dropdown-arrow:after {
    310193    border-color: #aaa transparent;
    311194}
     
    342225}
    343226
    344 .customize-section input[type="text"].color-picker-hex {
     227.accordion-section input[type="text"].color-picker-hex {
    345228    width: 65px;
    346229    font-family: monospace;
     
    350233
    351234/* The centered cursor overlaps the placeholder in webkit. Hide it when selected. */
    352 .customize-section input[type="text"].color-picker-hex:focus::-webkit-input-placeholder {
     235.accordion-section input[type="text"].color-picker-hex:focus::-webkit-input-placeholder {
    353236    color: transparent;
    354237}
    355 .customize-section input[type="text"].color-picker-hex:-moz-placeholder {
     238.accordion-section input[type="text"].color-picker-hex:-moz-placeholder {
    356239    color: #999;
    357240}
     
    372255}
    373256
    374 .customize-section .customize-control-image .dropdown-content {
     257.accordion-section .customize-control-image .dropdown-content {
    375258    height: auto;
    376259    min-height: 24px;
     
    379262}
    380263
    381 .customize-section .customize-control-image .dropdown-status {
     264.accordion-section .customize-control-image .dropdown-status {
    382265    padding: 4px 5px;
    383266}
    384267
    385 .customize-section .customize-control-image .preview-thumbnail img {
     268.accordion-section .customize-control-image .preview-thumbnail img {
    386269    display: block;
    387270    width: 100%;
     
    391274}
    392275
    393 .customize-section .customize-control-image .actions {
     276.accordion-section .customize-control-image .actions {
    394277    text-align: right;
    395278}
    396279
    397 .customize-section .customize-control-image .library ul {
     280.accordion-section .customize-control-image .library ul {
    398281    border-bottom: 1px solid #dfdfdf;
    399282    float: left;
     
    402285}
    403286
    404 .customize-section .customize-control-image .library li {
     287.accordion-section .customize-control-image .library li {
    405288    color: #999;
    406289    float: left;
     
    412295}
    413296
    414 .customize-section .customize-control-image .library li.library-selected {
     297.accordion-section .customize-control-image .library li.library-selected {
    415298    margin-bottom: -1px;
    416299    padding-bottom: 4px;
     
    423306}
    424307
    425 .customize-section .customize-control-image .library-content {
     308.accordion-section .customize-control-image .library-content {
    426309    display: none;
    427310    width: 100%;
     
    430313}
    431314
    432 .customize-section .customize-control-image .library-content.library-selected {
    433     display: block;
    434 }
    435 
    436 .customize-section .customize-control-image .library .thumbnail {
    437     display: block;
    438     width: 100%;
    439 }
    440 
    441 .customize-section .customize-control-image .library .thumbnail:hover img {
     315.accordion-section .customize-control-image .library-content.library-selected {
     316    display: block;
     317}
     318
     319.accordion-section .customize-control-image .library .thumbnail {
     320    display: block;
     321    width: 100%;
     322}
     323
     324.accordion-section .customize-control-image .library .thumbnail:hover img {
    442325    border-color: #21759b;
    443326}
    444327
    445 .customize-section .customize-control-image .library .thumbnail img {
     328.accordion-section .customize-control-image .library .thumbnail img {
    446329    display: block;
    447330    max-width: 90%;
     
    454337}
    455338
    456 .customize-section .customize-control-upload .upload-fallback,
    457 .customize-section .customize-control-image .upload-fallback {
    458     display: none;
    459 }
    460 
    461 .customize-section .customize-control-upload .upload-dropzone,
    462 .customize-section .customize-control-image .upload-dropzone {
     339.accordion-section .customize-control-upload .upload-fallback,
     340.accordion-section .customize-control-image .upload-fallback {
     341    display: none;
     342}
     343
     344.accordion-section .customize-control-upload .upload-dropzone,
     345.accordion-section .customize-control-image .upload-dropzone {
    463346    display: none;
    464347    padding: 15px 10px;
     
    471354}
    472355
    473 .customize-section .customize-control-upload .upload-dropzone.supports-drag-drop,
    474 .customize-section .customize-control-image .upload-dropzone.supports-drag-drop {
     356.accordion-section .customize-control-upload .upload-dropzone.supports-drag-drop,
     357.accordion-section .customize-control-image .upload-dropzone.supports-drag-drop {
    475358    display: block;
    476359    -webkit-transition: border-color 0.1s;
     
    481364}
    482365
    483 .customize-section .customize-control-upload .library ul li,
    484 .customize-section .customize-control-image .library ul li {
     366.accordion-section .customize-control-upload .library ul li,
     367.accordion-section .customize-control-image .library ul li {
    485368    cursor: pointer;
    486369}
    487370
    488 .customize-section .customize-control-upload .upload-dropzone.supports-drag-drop.drag-over,
    489 .customize-section .customize-control-image .upload-dropzone.supports-drag-drop.drag-over {
     371.accordion-section .customize-control-upload .upload-dropzone.supports-drag-drop.drag-over,
     372.accordion-section .customize-control-image .upload-dropzone.supports-drag-drop.drag-over {
    490373    border-color: #83b4d8;
    491374}
  • trunk/wp-admin/css/wp-admin-rtl.css

    r23354 r23417  
    25332533.ltr {
    25342534    direction: ltr;
     2535}
     2536
     2537.control-section .accordion-section-title {
     2538    font-family: Tahoma, Arial, sans-serif;
     2539}
     2540
     2541.accordion-section-title:after {
     2542    right: auto;
     2543    left: 20px;
    25352544}
    25362545
  • trunk/wp-admin/css/wp-admin.css

    r23409 r23417  
    82788278}
    82798279
     8280/* Accordion */
     8281
     8282.accordion-section {
     8283    border-top: 1px solid #fff;
     8284    border-bottom: 1px solid #dfdfdf;
     8285    margin: 0;
     8286}
     8287
     8288.accordion-section:last-child {
     8289    box-shadow: 0 1px 0 0px #fff;
     8290}
     8291
     8292.accordion-section.open .accordion-section-content {
     8293    display: block;
     8294    background: #fdfdfd;
     8295}
     8296
     8297.accordion-section.open:hover {
     8298    border-bottom-color: #dfdfdf;
     8299}
     8300
     8301.accordion-section-content {
     8302    display: none;
     8303    padding: 10px 20px 15px;
     8304    overflow: hidden;
     8305}
     8306
     8307.accordion-section-title {
     8308    margin: 0;
     8309    padding: 15px 20px;
     8310    position: relative;
     8311
     8312    cursor: pointer;
     8313
     8314    -webkit-user-select: none;
     8315    -moz-user-select: none;
     8316    user-select: none;
     8317}
     8318
     8319.accordion-section-title:after {
     8320    content: '';
     8321    width: 0;
     8322    height: 0;
     8323    border-color: #ccc transparent;
     8324    border-style: solid;
     8325    border-width: 6px 6px 0;
     8326    position: absolute;
     8327    top: 25px;
     8328    right: 20px;
     8329    z-index: 1;
     8330}
     8331
     8332.accordion-section-title:focus {
     8333    outline: none;
     8334}
     8335
     8336.accordion-section-title:hover:after,
     8337.accordion-section-title:focus:after {
     8338    border-color: #aaa transparent;
     8339}
     8340
     8341.cannot-expand .accordion-section-title {
     8342    cursor: auto;
     8343}
     8344
     8345.cannot-expand .accordion-section-title:after {
     8346    display: none;
     8347}
     8348
     8349.control-section .accordion-section-title {
     8350    padding: 10px 20px;
     8351    font-size: 15px;
     8352    font-family: Georgia, "Times New Roman", "Bitstream Charter", Times, serif;
     8353    font-weight: normal;
     8354    text-shadow: 0 1px 0 #fff;
     8355    background: #f5f5f5;
     8356    background-image: -webkit-gradient(linear, left bottom, left top, from(#eee), to(#f5f5f5));
     8357    background-image: -webkit-linear-gradient(bottom, #eee, #f5f5f5);
     8358    background-image:    -moz-linear-gradient(bottom, #eee, #f5f5f5);
     8359    background-image:      -o-linear-gradient(bottom, #eee, #f5f5f5);
     8360    background-image: linear-gradient(to top, #eee, #f5f5f5);
     8361}
     8362
     8363.control-section .accordion-section-title:after {
     8364    top: 15px;
     8365}
     8366
     8367.control-section .accordion-section-title:hover:after,
     8368.control-section .accordion-section-title:focus:after {
     8369    border-color: #eee transparent;
     8370}
     8371
     8372.control-section:hover .accordion-section-title,
     8373.control-section .accordion-section-title:hover,
     8374.control-section.open .accordion-section-title,
     8375.control-section .accordion-section-title:focus {
     8376    color: #fff;
     8377    text-shadow: 0 -1px 0 #333;
     8378    background: #808080;
     8379    background-image: -webkit-gradient(linear, left bottom, left top, from(#6d6d6d), to(#808080));
     8380    background-image: -webkit-linear-gradient(bottom, #6d6d6d, #808080);
     8381    background-image:    -moz-linear-gradient(bottom, #6d6d6d, #808080);
     8382    background-image:      -o-linear-gradient(bottom, #6d6d6d, #808080);
     8383    background-image: linear-gradient(to top, #6d6d6d, #808080);
     8384}
     8385
     8386.control-section.accordion-section:hover,
     8387.control-section.accordion-section.open {
     8388    border-top-color: #808080;
     8389}
     8390
     8391.control-section.open .accordion-section-title {
     8392    border-bottom: 1px solid #6d6d6d;
     8393}
     8394
    82808395/* =Media Queries
    82818396-------------------------------------------------------------- */
  • trunk/wp-admin/customize.php

    r22948 r23417  
    3636wp_enqueue_script( 'customize-controls' );
    3737wp_enqueue_style( 'customize-controls' );
     38
     39wp_enqueue_script( 'accordion' );
    3840
    3941do_action( 'customize_controls_enqueue_scripts' );
     
    9092
    9193        <div class="wp-full-overlay-sidebar-content" tabindex="-1">
    92             <div id="customize-info" class="customize-section<?php if ( $cannot_expand ) echo ' cannot-expand'; ?>">
    93                 <div class="customize-section-title" aria-label="<?php esc_attr_e( 'Theme Customizer Options' ); ?>" tabindex="0">
     94            <div id="customize-info" class="accordion-section<?php if ( $cannot_expand ) echo ' cannot-expand'; ?>">
     95                <div class="accordion-section-title" aria-label="<?php esc_attr_e( 'Theme Customizer Options' ); ?>" tabindex="0">
    9496                    <span class="preview-notice"><?php
    9597                        /* translators: %s is the theme name in the Customize/Live Preview pane */
     
    98100                </div>
    99101                <?php if ( ! $cannot_expand ) : ?>
    100                 <div class="customize-section-content">
     102                <div class="accordion-section-content">
    101103                    <?php if ( $screenshot ) : ?>
    102104                        <img class="theme-screenshot" src="<?php echo esc_url( $screenshot ); ?>" />
     
    110112            </div>
    111113
    112             <div id="customize-theme-controls"><ul>
     114            <div id="customize-theme-controls" class="accordion-container"><ul>
    113115                <?php
    114116                foreach ( $wp_customize->sections() as $section )
  • trunk/wp-admin/js/customize-controls.js

    r23399 r23417  
    846846            api.state = state;
    847847        }());
    848 
    849         // Temporary accordion code.
    850         $('.customize-section-title').bind('click keydown', function( event ) {
    851 
    852             if ( event.type === 'keydown' &&  13 !== event.which ) // enter
    853                     return;
    854 
    855             var clicked = $( this ).parents( '.customize-section' );
    856 
    857             if ( clicked.hasClass('cannot-expand') )
    858                 return;
    859 
    860             // Scroll up if on #customize-section-title_tagline
    861             if ('customize-section-title_tagline' === clicked.attr('id'))
    862                 $('.wp-full-overlay-sidebar-content').scrollTop(0);
    863 
    864             $( '.customize-section' ).not( clicked ).removeClass( 'open' );
    865             clicked.toggleClass( 'open' );
    866             event.preventDefault();
    867         });
    868848
    869849        // Button bindings.
  • trunk/wp-includes/class-wp-customize-section.php

    r22798 r23417  
    8080    protected function render() {
    8181        ?>
    82         <li id="customize-section-<?php echo esc_attr( $this->id ); ?>" class="control-section customize-section">
    83             <h3 class="customize-section-title" tabindex="0" title="<?php echo esc_attr( $this->description ); ?>"><?php echo esc_html( $this->title ); ?></h3>
    84             <ul class="customize-section-content">
     82        <li id="accordion-section-<?php echo esc_attr( $this->id ); ?>" class="control-section accordion-section">
     83            <h3 class="accordion-section-title" tabindex="0" title="<?php echo esc_attr( $this->description ); ?>"><?php echo esc_html( $this->title ); ?></h3>
     84            <ul class="accordion-section-content">
    8585                <?php
    8686                foreach ( $this->controls as $control )
  • trunk/wp-includes/script-loader.php

    r23390 r23417  
    108108
    109109    $scripts->add( 'autosave', "/wp-includes/js/autosave$suffix.js", array('schedule', 'wp-ajax-response'), false, 1 );
    110    
     110
    111111    $scripts->add( 'heartbeat', "/wp-includes/js/heartbeat$suffix.js", array('jquery'), false, 1 );
    112112    did_action( 'init' ) && $scripts->localize( 'heartbeat', 'heartbeatSettings',
     
    332332    ) );
    333333
     334    $scripts->add( 'accordion', "/wp-admin/js/accordion$suffix.js", array( 'jquery' ), false, 1 );
     335
    334336    $scripts->add( 'shortcode', "/wp-includes/js/shortcode$suffix.js", array( 'underscore' ), false, 1 );
    335337    $scripts->add( 'media-models', "/wp-includes/js/media-models$suffix.js", array( 'backbone', 'jquery' ), false, 1 );
Note: See TracChangeset for help on using the changeset viewer.