mirror of
git://develop.git.wordpress.org/
synced 2025-01-18 13:23:40 +01:00
Improve the admin color scheme picker:
- Easier to extend. - Remove the "drop-down" look, show all choices inline. - Some PHP and JS cleanup. Props ryelle, fixes #26336. git-svn-id: https://develop.svn.wordpress.org/trunk@26506 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Andrew Ozz
parent
3f7cbafb94
commit
e5304e8470
@ -7519,89 +7519,21 @@ div#custom-background-image img {
|
||||
width: 25em;
|
||||
}
|
||||
|
||||
.picker-dropdown {
|
||||
background: #fcfcfc;
|
||||
border: 1px solid #ddd;
|
||||
margin-right: 12%;
|
||||
max-width: 270px;
|
||||
position: relative;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.picker-dropdown.dropdown-current {
|
||||
padding: 20px;
|
||||
margin-bottom: 15px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.picker-dropdown.dropdown-container {
|
||||
display: none;
|
||||
position: absolute;
|
||||
width: 340px;
|
||||
border-top: none;
|
||||
-webkit-box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
|
||||
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.picker-expanded .picker-dropdown.dropdown-container {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.picker-dropdown.dropdown-container:before,
|
||||
.picker-dropdown.dropdown-container:after {
|
||||
content: "\0020";
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
left: 150px;
|
||||
z-index: 2;
|
||||
width: 0;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
border: solid 11px transparent;
|
||||
border-top: 0;
|
||||
border-bottom-color: #fefefe;
|
||||
}
|
||||
|
||||
.picker-dropdown.dropdown-container:before {
|
||||
top: -11px;
|
||||
z-index: 1;
|
||||
border-bottom-color: #ddd;
|
||||
}
|
||||
|
||||
.picker-dropdown-arrow {
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
right: -42px;
|
||||
display: block;
|
||||
width: 40px;
|
||||
height: 100%;
|
||||
background: white;
|
||||
text-align: center;
|
||||
border: 1px solid #ddd;
|
||||
border-left-width: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.picker-dropdown-arrow:before {
|
||||
font: 20px/91px dashicons;
|
||||
content: '\f140';
|
||||
}
|
||||
|
||||
.picker-expanded .picker-dropdown-arrow:before {
|
||||
content: '\f142';
|
||||
.scheme-list {
|
||||
|
||||
}
|
||||
|
||||
.color-option {
|
||||
display: block;
|
||||
padding: 20px;
|
||||
border-top: 1px solid #ddd;
|
||||
display: inline-block;
|
||||
width: 32%;
|
||||
padding: 5px 15px 15px;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.color-option:hover,
|
||||
.color-option.selected {
|
||||
background: #f2f8fa;
|
||||
background: #ddd;
|
||||
}
|
||||
|
||||
.color-palette {
|
||||
@ -7619,20 +7551,6 @@ div#custom-background-image img {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.no-js .dropdown-current {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.no-js .dropdown-container {
|
||||
display: block;
|
||||
position: static;
|
||||
}
|
||||
|
||||
.no-js .dropdown-container:before,
|
||||
.no-js .dropdown-container:after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/*------------------------------------------------------------------------------
|
||||
19.0 - Tools
|
||||
------------------------------------------------------------------------------*/
|
||||
@ -13129,4 +13047,9 @@ li#wp-admin-bar-menu-toggle {
|
||||
div#post-body.metabox-holder.columns-1 {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
/* Color Picker Options */
|
||||
.color-option {
|
||||
width: 49%;
|
||||
}
|
||||
}
|
||||
|
||||
@ -563,35 +563,28 @@ function saveDomDocument($doc, $filename) {
|
||||
*/
|
||||
function admin_color_scheme_picker() {
|
||||
global $_wp_admin_css_colors, $user_id;
|
||||
ksort($_wp_admin_css_colors);
|
||||
|
||||
ksort( $_wp_admin_css_colors );
|
||||
|
||||
if ( isset( $_wp_admin_css_colors['fresh'] ) ) {
|
||||
// Set 'fresh' (the default option) to be the first array element
|
||||
$_wp_admin_css_colors = array_merge( array( 'fresh' => '' ), $_wp_admin_css_colors );
|
||||
}
|
||||
|
||||
$current_color = get_user_option( 'admin_color', $user_id );
|
||||
|
||||
if ( empty( $current_color ) || ! isset( $_wp_admin_css_colors[ $current_color ] ) )
|
||||
if ( empty( $current_color ) || ! isset( $_wp_admin_css_colors[ $current_color ] ) ) {
|
||||
$current_color = 'fresh';
|
||||
}
|
||||
|
||||
$color_info = $_wp_admin_css_colors[ $current_color ];
|
||||
?>
|
||||
|
||||
<fieldset id="color-picker">
|
||||
?>
|
||||
<fieldset id="color-picker" class="scheme-list">
|
||||
<legend class="screen-reader-text"><span><?php _e( 'Admin Color Scheme' ); ?></span></legend>
|
||||
<?php
|
||||
|
||||
<div class="picker-dropdown dropdown-current">
|
||||
<div class="picker-dropdown-arrow"></div>
|
||||
<label for="admin_color_<?php echo esc_attr( $current_color ); ?>"><?php echo esc_html( $color_info->name ); ?></label>
|
||||
<table class="color-palette">
|
||||
<tr>
|
||||
<?php foreach ( $color_info->colors as $html_color ): ?>
|
||||
<td style="background-color: <?php echo esc_attr( $html_color ); ?>" title="<?php echo esc_attr( $current_color ); ?>"> </td>
|
||||
<?php endforeach; ?>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="picker-dropdown dropdown-container">
|
||||
|
||||
<?php foreach ( $_wp_admin_css_colors as $color => $color_info ) : ?>
|
||||
foreach ( $_wp_admin_css_colors as $color => $color_info ) :
|
||||
|
||||
?>
|
||||
<div class="color-option <?php echo ( $color == $current_color ) ? 'selected' : ''; ?>">
|
||||
<input name="admin_color" id="admin_color_<?php echo esc_attr( $color ); ?>" type="radio" value="<?php echo esc_attr( $color ); ?>" class="tog" <?php checked( $color, $current_color ); ?> />
|
||||
<input type="hidden" class="css_url" value="<?php echo esc_url( $color_info->url ); ?>" />
|
||||
@ -599,20 +592,25 @@ function admin_color_scheme_picker() {
|
||||
<label for="admin_color_<?php echo esc_attr( $color ); ?>"><?php echo esc_html( $color_info->name ); ?></label>
|
||||
<table class="color-palette">
|
||||
<tr>
|
||||
<?php foreach ( $color_info->colors as $html_color ): ?>
|
||||
<?php
|
||||
|
||||
foreach ( $color_info->colors as $html_color ) {
|
||||
?>
|
||||
<td style="background-color: <?php echo esc_attr( $html_color ); ?>" title="<?php echo esc_attr( $color ); ?>"> </td>
|
||||
<?php endforeach; ?>
|
||||
<?php
|
||||
}
|
||||
|
||||
?>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<?php
|
||||
|
||||
<?php endforeach; ?>
|
||||
|
||||
</div>
|
||||
endforeach;
|
||||
|
||||
?>
|
||||
</fieldset>
|
||||
|
||||
<?php
|
||||
<?php
|
||||
}
|
||||
|
||||
function set_color_scheme_json() {
|
||||
|
||||
@ -82,32 +82,27 @@
|
||||
user_id = $( 'input#user_id' ).val();
|
||||
current_user_id = $( 'input[name="checkuser_id"]' ).val();
|
||||
|
||||
// dropdown toggle
|
||||
$colorpicker.on( 'click', '.dropdown-current', function() {
|
||||
$colorpicker.toggleClass( 'picker-expanded' );
|
||||
});
|
||||
$colorpicker.on( 'click.colorpicker', '.color-option', function() {
|
||||
var $this = $(this),
|
||||
color_scheme = $this.children( 'input[name="admin_color"]' ).val();
|
||||
|
||||
$colorpicker.on( 'click', '.color-option', function() {
|
||||
if ( $this.hasClass( 'selected' ) ) {
|
||||
return;
|
||||
}
|
||||
|
||||
var color_scheme = $( this ).children( 'input[name="admin_color"]' ).val();
|
||||
$this.siblings( '.selected' ).removeClass( 'selected' );
|
||||
$this.addClass( 'selected' ).find( 'input[type="radio"]' ).prop( 'checked', true );
|
||||
|
||||
// update selected
|
||||
$( this ).siblings( '.selected' ).removeClass( 'selected' );
|
||||
$( this ).addClass( 'selected' );
|
||||
$( this ).find( 'input' ).prop( 'checked', true );
|
||||
|
||||
// update current
|
||||
$colorpicker.find( '.dropdown-current label' ).html( $( this ).children( 'label' ).html() );
|
||||
$colorpicker.find( '.dropdown-current table' ).html( $( this ).children( 'table' ).html() );
|
||||
$colorpicker.toggleClass( 'picker-expanded' );
|
||||
|
||||
// preview/save color scheme
|
||||
// Set color scheme
|
||||
if ( user_id === current_user_id ) {
|
||||
// Load the colors stylesheet
|
||||
$stylesheet.attr( 'href', $this.children( '.css_url' ).val() );
|
||||
|
||||
// repaint icons
|
||||
$stylesheet.attr( 'href', $( this ).children( '.css_url' ).val() );
|
||||
svgPainter.setColors( $.parseJSON( $( this ).children( '.icon_colors' ).val() ) );
|
||||
svgPainter.paint();
|
||||
if ( typeof window.svgPainter !== 'undefined' ) {
|
||||
svgPainter.setColors( $.parseJSON( $this.children( '.icon_colors' ).val() ) );
|
||||
svgPainter.paint();
|
||||
}
|
||||
|
||||
// update user option
|
||||
$.post( ajaxurl, {
|
||||
@ -115,11 +110,8 @@
|
||||
color_scheme: color_scheme,
|
||||
user_id: user_id
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
})(jQuery);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user