WordPress.org

Make WordPress Core

Changeset 20527


Ignore:
Timestamp:
04/19/2012 06:29:54 AM (6 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.