Changeset 20527

Timestamp:

04/19/2012 06:29:54 AM (14 years ago)

Author:

koopersmith

Message:

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

Location:

trunk/wp-includes

Files:

• class-wp-customize-control.php (modified) (1 diff)
• css/customize-controls.dev.css (modified) (9 diffs)

trunk/wp-includes/class-wp-customize-control.php

@@ -301 +301 @@
 
         ?>
-        <label>
+        <label class="customize-image-picker">
             <span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
-            <div class="customize-image-picker">
-                <div class="thumbnail">
-                    <?php if ( empty( $src ) ): ?>
-                        <img style="display:none;" />
-                    <?php else: ?>
-                        <img src="<?php echo esc_url( $src ); ?>" />
-                    <?php endif; ?>
-                </div>
-                <div class="actions">
-                    <a href="#" class="upload"><?php _e( 'Upload New' ); ?></a>
-                    <a href="#" class="change"><?php _e( 'Change Image' ); ?></a>
-                    <a href="#" class="remove"><?php _e( 'Remove Image' ); ?></a>
-                </div>
-                <div class="library">
-                    <ul>
-                        <?php foreach ( $this->tabs as $tab ): ?>
-                            <li data-customize-tab='<?php echo esc_attr( $tab[0] ); ?>'>
-                                <?php echo esc_html( $tab[1] ); ?>
-                            </li>
-                        <?php endforeach; ?>
-                    </ul>
+
+            <div class="thumbnail">
+                <?php if ( empty( $src ) ): ?>
+                    <img style="display:none;" />
+                <?php else: ?>
+                    <img src="<?php echo esc_url( $src ); ?>" />
+                <?php endif; ?>
+            </div>
+
+            <div class="actions">
+                <a href="#" class="upload"><?php _e( 'Upload New' ); ?></a>
+                <a href="#" class="change"><?php _e( 'Change Image' ); ?></a>
+                <a href="#" class="remove"><?php _e( 'Remove Image' ); ?></a>
+            </div>
+
+            <div class="library">
+                <ul>
                     <?php foreach ( $this->tabs as $tab ): ?>
-                        <div class="library-content" data-customize-tab='<?php echo esc_attr( $tab[0] ); ?>'>
-                            <?php call_user_func( $tab[2] ); ?>
-                        </div>
+                        <li data-customize-tab='<?php echo esc_attr( $tab[0] ); ?>'>
+                            <?php echo esc_html( $tab[1] ); ?>
+                        </li>
                     <?php endforeach; ?>
-                </div>
+                </ul>
+                <?php foreach ( $this->tabs as $tab ): ?>
+                    <div class="library-content" data-customize-tab='<?php echo esc_attr( $tab[0] ); ?>'>
+                        <?php call_user_func( $tab[2] ); ?>
+                    </div>
+                <?php endforeach; ?>
             </div>
         </label>

trunk/wp-includes/css/customize-controls.dev.css

@@ -149 +149 @@
 
 .customize-control-text input {
+    float: right;
     width: 138px;
     line-height: 18px;
@@ -317 +318 @@
  * Image Picker
  */
-.customize-section .customize-image-picker {
-    float: left;
-}
-
-.customize-section .customize-image-picker .thumbnail {
-    float: left;
-    clear: left;
-    width: 100px;
-    margin-right: 20px;
+.customize-section .customize-control-image .thumbnail {
+    float: right;
+    width: 140px;
     min-height: 1em;
 }
 
-.customize-section .customize-image-picker .thumbnail img {
-    max-width: 98px;
+.customize-section .customize-control-image .thumbnail img {
+    max-width: 138px;
     max-height: 98px;
     border: 1px solid #ccc;
 }
 
-.customize-section .customize-image-picker .actions {
+.customize-section .customize-control-image .actions {
     width: 140px;
-    float: left;
-}
-
-.customize-section .customize-image-picker .actions a {
-    display: block;
-}
-
-.customize-section .customize-image-picker .library {
+    float: right;
+}
+
+.customize-section .customize-control-image .actions a {
+    display: block;
+}
+
+.customize-section .customize-control-image .library {
     display: none;
 /*  float: left;*/
 }
 
-/*.customize-section .customize-image-picker .library label {
+/*.customize-section .customize-control-image .library label {
     display: block;
     position: relative;
@@ -355 +350 @@
     padding: 0 0 5px 20px;
 }
-.customize-section .customize-image-picker .library input {
+.customize-section .customize-control-image .library input {
     display: block;
     position: absolute;
@@ -362 +357 @@
     margin-top: -7px;
 }*/
-/*.customize-section .customize-image-picker .library .wp-tab-panel {
+/*.customize-section .customize-control-image .library .wp-tab-panel {
     padding: 10px 10px 5px 8px;
 }*/
 
-.customize-section .customize-image-picker .library ul {
+.customize-section .customize-control-image .library ul {
     border-bottom: 1px solid #dfdfdf;
     float: left;
@@ -373 +368 @@
 }
 
-.customize-section .customize-image-picker .library li {
+.customize-section .customize-control-image .library li {
     color: #999;
     float: left;
@@ -383 +378 @@
 }
 
-.customize-section .customize-image-picker .library li.library-selected {
+.customize-section .customize-control-image .library li.library-selected {
     color: #777;
     border-color: #dfdfdf;
@@ -391 +386 @@
 }
 
-.customize-section .customize-image-picker .library div {
+.customize-section .customize-control-image .library div {
     width: 100%;
     float: left;
 }
 
-.customize-section .customize-image-picker .library a {
+.customize-section .customize-control-image .library a {
     display: block;
     max-width: 220px;
@@ -406 +401 @@
 }
 
-.customize-section .customize-image-picker .library a:hover {
+.customize-section .customize-control-image .library a:hover {
     border-color: #21759b;
 }
 
-.customize-section .customize-image-picker .library img {
+.customize-section .customize-control-image .library img {
     display: block;
     max-width: 220px;
@@ -416 +411 @@
 }
 
-.customize-section .customize-image-picker .library-content {
+.customize-section .customize-control-image .library-content {
     display: none;
 }