From c0cc088cb5e2812da99480fe0a3cbc2b98b85017 Mon Sep 17 00:00:00 2001
From: koopersmith <koopersmith@1a063a9b-81f0-0310-95a4-ce76da25c4cd>
Date: Thu, 19 Apr 2012 06:29:54 +0000
Subject: [PATCH] Theme Customizer: Begin improving image picker markup/styles.
 see #19910.

git-svn-id: http://svn.automattic.com/wordpress/trunk@20527 1a063a9b-81f0-0310-95a4-ce76da25c4cd
---
 wp-includes/class-wp-customize-control.php | 53 +++++++++++-----------
 wp-includes/css/customize-controls.dev.css | 47 +++++++++----------
 2 files changed, 48 insertions(+), 52 deletions(-)

diff --git a/wp-includes/class-wp-customize-control.php b/wp-includes/class-wp-customize-control.php
index fdf149d560..c6b18fd496 100644
--- a/wp-includes/class-wp-customize-control.php
+++ b/wp-includes/class-wp-customize-control.php
@@ -300,35 +300,36 @@ class WP_Customize_Image_Control extends WP_Customize_Upload_Control {
 			$src = call_user_func( $this->get_url, $src );
 
 		?>
-		<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>
 		<?php
diff --git a/wp-includes/css/customize-controls.dev.css b/wp-includes/css/customize-controls.dev.css
index a8812e766f..30365c4bf0 100644
--- a/wp-includes/css/customize-controls.dev.css
+++ b/wp-includes/css/customize-controls.dev.css
@@ -148,6 +148,7 @@ body {
 }
 
 .customize-control-text input {
+	float: right;
 	width: 138px;
 	line-height: 18px;
 	margin: 1px;
@@ -316,63 +317,57 @@ body {
 /*
  * 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;
+	float: right;
 }
 
-.customize-section .customize-image-picker .actions a {
+.customize-section .customize-control-image .actions a {
 	display: block;
 }
 
-.customize-section .customize-image-picker .library {
+.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;
 	float: left;
 	padding: 0 0 5px 20px;
 }
-.customize-section .customize-image-picker .library input {
+.customize-section .customize-control-image .library input {
 	display: block;
 	position: absolute;
 	top: 50%;
 	left: 0;
 	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;
 	width: 100%;
 	margin: 5px 0;
 }
 
-.customize-section .customize-image-picker .library li {
+.customize-section .customize-control-image .library li {
 	color: #999;
 	float: left;
 	padding: 4px 6px;
@@ -382,7 +377,7 @@ body {
 	border-width: 1px 1px 0 1px;
 }
 
-.customize-section .customize-image-picker .library li.library-selected {
+.customize-section .customize-control-image .library li.library-selected {
 	color: #777;
 	border-color: #dfdfdf;
 	background: #f5f5f5;
@@ -390,12 +385,12 @@ body {
 	padding-bottom: 5px;
 }
 
-.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;
 	max-height: 80px;
@@ -405,16 +400,16 @@ body {
 	border: 1px solid #dfdfdf;
 }
 
-.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;
 	max-height: 80px;
 }
 
-.customize-section .customize-image-picker .library-content {
+.customize-section .customize-control-image .library-content {
 	display: none;
 }