sergiotarxz
/
Wordpress
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

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

git-svn-id: https://develop.svn.wordpress.org/trunk@20527 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Daryl Koopersmith 2012-04-19 06:29:54 +00:00
parent 5ed7eb7f1c
commit 9d5ecc02ae
2 changed files with 48 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
wp-includes/class-wp-customize-control.php
View File

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

47
wp-includes/css/customize-controls.dev.css
View File

@ -148,6 +148,7 @@ body {
} }
.customize-control-text input { .customize-control-text input {
float: right;
width: 138px; width: 138px;
line-height: 18px; line-height: 18px;
margin: 1px; margin: 1px;
@ -316,63 +317,57 @@ body {
/* /*
* Image Picker * Image Picker
*/ */
.customize-section .customize-image-picker { .customize-section .customize-control-image .thumbnail {
float: left; float: right;
} width: 140px;
.customize-section .customize-image-picker .thumbnail {
float: left;
clear: left;
width: 100px;
margin-right: 20px;
min-height: 1em; min-height: 1em;
} }
.customize-section .customize-image-picker .thumbnail img { .customize-section .customize-control-image .thumbnail img {
max-width: 98px; max-width: 138px;
max-height: 98px; max-height: 98px;
border: 1px solid #ccc; border: 1px solid #ccc;
} }
.customize-section .customize-image-picker .actions { .customize-section .customize-control-image .actions {
width: 140px; width: 140px;
float: left; float: right;
} }
.customize-section .customize-image-picker .actions a { .customize-section .customize-control-image .actions a {
display: block; display: block;
} }
.customize-section .customize-image-picker .library { .customize-section .customize-control-image .library {
display: none; display: none;
/* float: left;*/ /* float: left;*/
} }
/*.customize-section .customize-image-picker .library label { /*.customize-section .customize-control-image .library label {
display: block; display: block;
position: relative; position: relative;
float: left; float: left;
padding: 0 0 5px 20px; padding: 0 0 5px 20px;
} }
.customize-section .customize-image-picker .library input { .customize-section .customize-control-image .library input {
display: block; display: block;
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 0; left: 0;
margin-top: -7px; 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; padding: 10px 10px 5px 8px;
}*/ }*/
.customize-section .customize-image-picker .library ul { .customize-section .customize-control-image .library ul {
border-bottom: 1px solid #dfdfdf; border-bottom: 1px solid #dfdfdf;
float: left; float: left;
width: 100%; width: 100%;
margin: 5px 0; margin: 5px 0;
} }
.customize-section .customize-image-picker .library li { .customize-section .customize-control-image .library li {
color: #999; color: #999;
float: left; float: left;
padding: 4px 6px; padding: 4px 6px;
@ -382,7 +377,7 @@ body {
border-width: 1px 1px 0 1px; 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; color: #777;
border-color: #dfdfdf; border-color: #dfdfdf;
background: #f5f5f5; background: #f5f5f5;
@ -390,12 +385,12 @@ body {
padding-bottom: 5px; padding-bottom: 5px;
} }
.customize-section .customize-image-picker .library div { .customize-section .customize-control-image .library div {
width: 100%; width: 100%;
float: left; float: left;
} }
.customize-section .customize-image-picker .library a { .customize-section .customize-control-image .library a {
display: block; display: block;
max-width: 220px; max-width: 220px;
max-height: 80px; max-height: 80px;
@ -405,16 +400,16 @@ body {
border: 1px solid #dfdfdf; border: 1px solid #dfdfdf;
} }
.customize-section .customize-image-picker .library a:hover { .customize-section .customize-control-image .library a:hover {
border-color: #21759b; border-color: #21759b;
} }
.customize-section .customize-image-picker .library img { .customize-section .customize-control-image .library img {
display: block; display: block;
max-width: 220px; max-width: 220px;
max-height: 80px; max-height: 80px;
} }
.customize-section .customize-image-picker .library-content { .customize-section .customize-control-image .library-content {
display: none; display: none;
} }