WordPress.org

Make WordPress Core

Changeset 20527


Ignore:
Timestamp:
04/19/12 06:29:54 (2 years ago)
Author:
koopersmith
Message:

Theme Customizer: Begin improving image picker markup/styles. see #19910.

Location:
trunk/wp-includes
Files:
2 edited

Legend:

Unmodified
Added
Removed
  • trunk/wp-includes/class-wp-customize-control.php

    r20507 r20527  
    301301 
    302302        ?> 
    303         <label> 
     303        <label class="customize-image-picker"> 
    304304            <span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span> 
    305             <div class="customize-image-picker"> 
    306                 <div class="thumbnail"> 
    307                     <?php if ( empty( $src ) ): ?> 
    308                         <img style="display:none;" /> 
    309                     <?php else: ?> 
    310                         <img src="<?php echo esc_url( $src ); ?>" /> 
    311                     <?php endif; ?> 
    312                 </div> 
    313                 <div class="actions"> 
    314                     <a href="#" class="upload"><?php _e( 'Upload New' ); ?></a> 
    315                     <a href="#" class="change"><?php _e( 'Change Image' ); ?></a> 
    316                     <a href="#" class="remove"><?php _e( 'Remove Image' ); ?></a> 
    317                 </div> 
    318                 <div class="library"> 
    319                     <ul> 
    320                         <?php foreach ( $this->tabs as $tab ): ?> 
    321                             <li data-customize-tab='<?php echo esc_attr( $tab[0] ); ?>'> 
    322                                 <?php echo esc_html( $tab[1] ); ?> 
    323                             </li> 
    324                         <?php endforeach; ?> 
    325                     </ul> 
     305 
     306            <div class="thumbnail"> 
     307                <?php if ( empty( $src ) ): ?> 
     308                    <img style="display:none;" /> 
     309                <?php else: ?> 
     310                    <img src="<?php echo esc_url( $src ); ?>" /> 
     311                <?php endif; ?> 
     312            </div> 
     313 
     314            <div class="actions"> 
     315                <a href="#" class="upload"><?php _e( 'Upload New' ); ?></a> 
     316                <a href="#" class="change"><?php _e( 'Change Image' ); ?></a> 
     317                <a href="#" class="remove"><?php _e( 'Remove Image' ); ?></a> 
     318            </div> 
     319 
     320            <div class="library"> 
     321                <ul> 
    326322                    <?php foreach ( $this->tabs as $tab ): ?> 
    327                         <div class="library-content" data-customize-tab='<?php echo esc_attr( $tab[0] ); ?>'> 
    328                             <?php call_user_func( $tab[2] ); ?> 
    329                         </div> 
     323                        <li data-customize-tab='<?php echo esc_attr( $tab[0] ); ?>'> 
     324                            <?php echo esc_html( $tab[1] ); ?> 
     325                        </li> 
    330326                    <?php endforeach; ?> 
    331                 </div> 
     327                </ul> 
     328                <?php foreach ( $this->tabs as $tab ): ?> 
     329                    <div class="library-content" data-customize-tab='<?php echo esc_attr( $tab[0] ); ?>'> 
     330                        <?php call_user_func( $tab[2] ); ?> 
     331                    </div> 
     332                <?php endforeach; ?> 
    332333            </div> 
    333334        </label> 
  • trunk/wp-includes/css/customize-controls.dev.css

    r20510 r20527  
    149149 
    150150.customize-control-text input { 
     151    float: right; 
    151152    width: 138px; 
    152153    line-height: 18px; 
     
    317318 * Image Picker 
    318319 */ 
    319 .customize-section .customize-image-picker { 
    320     float: left; 
    321 } 
    322  
    323 .customize-section .customize-image-picker .thumbnail { 
    324     float: left; 
    325     clear: left; 
    326     width: 100px; 
    327     margin-right: 20px; 
     320.customize-section .customize-control-image .thumbnail { 
     321    float: right; 
     322    width: 140px; 
    328323    min-height: 1em; 
    329324} 
    330325 
    331 .customize-section .customize-image-picker .thumbnail img { 
    332     max-width: 98px; 
     326.customize-section .customize-control-image .thumbnail img { 
     327    max-width: 138px; 
    333328    max-height: 98px; 
    334329    border: 1px solid #ccc; 
    335330} 
    336331 
    337 .customize-section .customize-image-picker .actions { 
     332.customize-section .customize-control-image .actions { 
    338333    width: 140px; 
    339     float: left; 
    340 } 
    341  
    342 .customize-section .customize-image-picker .actions a { 
    343     display: block; 
    344 } 
    345  
    346 .customize-section .customize-image-picker .library { 
     334    float: right; 
     335} 
     336 
     337.customize-section .customize-control-image .actions a { 
     338    display: block; 
     339} 
     340 
     341.customize-section .customize-control-image .library { 
    347342    display: none; 
    348343/*  float: left;*/ 
    349344} 
    350345 
    351 /*.customize-section .customize-image-picker .library label { 
     346/*.customize-section .customize-control-image .library label { 
    352347    display: block; 
    353348    position: relative; 
     
    355350    padding: 0 0 5px 20px; 
    356351} 
    357 .customize-section .customize-image-picker .library input { 
     352.customize-section .customize-control-image .library input { 
    358353    display: block; 
    359354    position: absolute; 
     
    362357    margin-top: -7px; 
    363358}*/ 
    364 /*.customize-section .customize-image-picker .library .wp-tab-panel { 
     359/*.customize-section .customize-control-image .library .wp-tab-panel { 
    365360    padding: 10px 10px 5px 8px; 
    366361}*/ 
    367362 
    368 .customize-section .customize-image-picker .library ul { 
     363.customize-section .customize-control-image .library ul { 
    369364    border-bottom: 1px solid #dfdfdf; 
    370365    float: left; 
     
    373368} 
    374369 
    375 .customize-section .customize-image-picker .library li { 
     370.customize-section .customize-control-image .library li { 
    376371    color: #999; 
    377372    float: left; 
     
    383378} 
    384379 
    385 .customize-section .customize-image-picker .library li.library-selected { 
     380.customize-section .customize-control-image .library li.library-selected { 
    386381    color: #777; 
    387382    border-color: #dfdfdf; 
     
    391386} 
    392387 
    393 .customize-section .customize-image-picker .library div { 
     388.customize-section .customize-control-image .library div { 
    394389    width: 100%; 
    395390    float: left; 
    396391} 
    397392 
    398 .customize-section .customize-image-picker .library a { 
     393.customize-section .customize-control-image .library a { 
    399394    display: block; 
    400395    max-width: 220px; 
     
    406401} 
    407402 
    408 .customize-section .customize-image-picker .library a:hover { 
     403.customize-section .customize-control-image .library a:hover { 
    409404    border-color: #21759b; 
    410405} 
    411406 
    412 .customize-section .customize-image-picker .library img { 
     407.customize-section .customize-control-image .library img { 
    413408    display: block; 
    414409    max-width: 220px; 
     
    416411} 
    417412 
    418 .customize-section .customize-image-picker .library-content { 
     413.customize-section .customize-control-image .library-content { 
    419414    display: none; 
    420415} 
Note: See TracChangeset for help on using the changeset viewer.