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. Built from https://develop.svn.wordpress.org/trunk@26506 git-svn-id: http://core.svn.wordpress.org/trunk@26400 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Andrew Ozz
parent
db074f8e65
commit
a6ac0bea23
|
|
@ -7519,89 +7519,21 @@ div#custom-background-image img {
|
|||
width: 25em;
|
||||
}
|
||||
|
||||
.picker-dropdown {
|
||||
background: #fcfcfc;
|
||||
border: 1px solid #ddd;
|
||||
margin-left: 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;
|
||||
right: 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;
|
||||
left: -42px;
|
||||
display: block;
|
||||
width: 40px;
|
||||
height: 100%;
|
||||
background: white;
|
||||
text-align: center;
|
||||
border: 1px solid #ddd;
|
||||
border-right-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%;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -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%;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
!function(a){function b(){var b,c=a("#pass1").val(),d=a("#pass2").val();if(a("#pass-strength-result").removeClass("short bad good strong"),!c)return a("#pass-strength-result").html(pwsL10n.empty),void 0;switch(b=wp.passwordStrength.meter(c,wp.passwordStrength.userInputBlacklist(),d)){case 2:a("#pass-strength-result").addClass("bad").html(pwsL10n.bad);break;case 3:a("#pass-strength-result").addClass("good").html(pwsL10n.good);break;case 4:a("#pass-strength-result").addClass("strong").html(pwsL10n.strong);break;case 5:a("#pass-strength-result").addClass("short").html(pwsL10n.mismatch);break;default:a("#pass-strength-result").addClass("short").html(pwsL10n["short"])}}a(document).ready(function(){var c,d,e,f,g=a("#display_name");a("#pass1").val("").keyup(b),a("#pass2").val("").keyup(b),a("#pass-strength-result").show(),a(".color-palette").click(function(){a(this).siblings('input[name="admin_color"]').prop("checked",!0)}),g.length&&a("#first_name, #last_name, #nickname").bind("blur.user_profile",function(){var b=[],c={display_nickname:a("#nickname").val()||"",display_username:a("#user_login").val()||"",display_firstname:a("#first_name").val()||"",display_lastname:a("#last_name").val()||""};c.display_firstname&&c.display_lastname&&(c.display_firstlast=c.display_firstname+" "+c.display_lastname,c.display_lastfirst=c.display_lastname+" "+c.display_firstname),a.each(a("option",g),function(a,c){b.push(c.value)}),a.each(c,function(d,e){if(e){var f=e.replace(/<\/?[a-z][^>]*>/gi,"");c[d].length&&-1===a.inArray(f,b)&&(b.push(f),a("<option />",{text:f}).appendTo(g))}})}),c=a("#color-picker"),d=a("#colors-css"),e=a("input#user_id").val(),f=a('input[name="checkuser_id"]').val(),c.on("click",".dropdown-current",function(){c.toggleClass("picker-expanded")}),c.on("click",".color-option",function(){var b=a(this).children('input[name="admin_color"]').val();a(this).siblings(".selected").removeClass("selected"),a(this).addClass("selected"),a(this).find("input").prop("checked",!0),c.find(".dropdown-current label").html(a(this).children("label").html()),c.find(".dropdown-current table").html(a(this).children("table").html()),c.toggleClass("picker-expanded"),e===f&&(d.attr("href",a(this).children(".css_url").val()),svgPainter.setColors(a.parseJSON(a(this).children(".icon_colors").val())),svgPainter.paint(),a.post(ajaxurl,{action:"save-user-color-scheme",color_scheme:b,user_id:e}))})})}(jQuery);
|
||||
!function(a){function b(){var b,c=a("#pass1").val(),d=a("#pass2").val();if(a("#pass-strength-result").removeClass("short bad good strong"),!c)return a("#pass-strength-result").html(pwsL10n.empty),void 0;switch(b=wp.passwordStrength.meter(c,wp.passwordStrength.userInputBlacklist(),d)){case 2:a("#pass-strength-result").addClass("bad").html(pwsL10n.bad);break;case 3:a("#pass-strength-result").addClass("good").html(pwsL10n.good);break;case 4:a("#pass-strength-result").addClass("strong").html(pwsL10n.strong);break;case 5:a("#pass-strength-result").addClass("short").html(pwsL10n.mismatch);break;default:a("#pass-strength-result").addClass("short").html(pwsL10n["short"])}}a(document).ready(function(){var c,d,e,f,g=a("#display_name");a("#pass1").val("").keyup(b),a("#pass2").val("").keyup(b),a("#pass-strength-result").show(),a(".color-palette").click(function(){a(this).siblings('input[name="admin_color"]').prop("checked",!0)}),g.length&&a("#first_name, #last_name, #nickname").bind("blur.user_profile",function(){var b=[],c={display_nickname:a("#nickname").val()||"",display_username:a("#user_login").val()||"",display_firstname:a("#first_name").val()||"",display_lastname:a("#last_name").val()||""};c.display_firstname&&c.display_lastname&&(c.display_firstlast=c.display_firstname+" "+c.display_lastname,c.display_lastfirst=c.display_lastname+" "+c.display_firstname),a.each(a("option",g),function(a,c){b.push(c.value)}),a.each(c,function(d,e){if(e){var f=e.replace(/<\/?[a-z][^>]*>/gi,"");c[d].length&&-1===a.inArray(f,b)&&(b.push(f),a("<option />",{text:f}).appendTo(g))}})}),c=a("#color-picker"),d=a("#colors-css"),e=a("input#user_id").val(),f=a('input[name="checkuser_id"]').val(),c.on("click.colorpicker",".color-option",function(){var b=a(this),c=b.children('input[name="admin_color"]').val();b.hasClass("selected")||(b.siblings(".selected").removeClass("selected"),b.addClass("selected").find('input[type="radio"]').prop("checked",!0),e===f&&(d.attr("href",b.children(".css_url").val()),"undefined"!=typeof window.svgPainter&&(svgPainter.setColors(a.parseJSON(b.children(".icon_colors").val())),svgPainter.paint()),a.post(ajaxurl,{action:"save-user-color-scheme",color_scheme:c,user_id:e})))})})}(jQuery);
|
||||
Loading…
Reference in New Issue