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

wp-admin/css/wp-admin-rtl.css

@@ -7519,89 +7519,21 @@ div#custom-background-image img {
 	width: 25em;
 }
 
-.picker-dropdown {
+.scheme-list {
-	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';
 }
 
 .color-option {
-	display: block;
+	display: inline-block;
-	padding: 20px;
+	width: 32%;
-	border-top: 1px solid #ddd;
+	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%; 
+	} 
 }

wp-admin/css/wp-admin.css

@@ -7519,89 +7519,21 @@ div#custom-background-image img {
 	width: 25em;
 }
 
-.picker-dropdown {
+.scheme-list {
-	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';
 }
 
 .color-option {
-	display: block;
+	display: inline-block;
-	padding: 20px;
+	width: 32%;
-	border-top: 1px solid #ddd;
+	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%; 
+	} 
 }

wp-admin/includes/misc.php

@@ -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 );
 
+	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" class="scheme-list">
-	<fieldset id="color-picker">
 		<legend class="screen-reader-text"><span><?php _e( 'Admin Color Scheme' ); ?></span></legend>
+		<?php
 
-		<div class="picker-dropdown dropdown-current">
+		foreach ( $_wp_admin_css_colors as $color => $color_info ) :
-			<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 ); ?>">&nbsp;</td>
-				<?php endforeach; ?>
-				</tr>
-			</table>
-		</div>
-
-		<div class="picker-dropdown dropdown-container">
-
-		<?php 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,19 +592,24 @@ 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 ); ?>">&nbsp;</td>
-					<?php endforeach; ?>
+						<?php
+					}
+
+					?>
 					</tr>
 				</table>
 			</div>
+			<?php
 
-		<?php endforeach; ?>
+		endforeach;
-
-		</div>
 
+	?>
 	</fieldset>
-
 	<?php
 }
 

wp-admin/js/user-profile.js

@@ -82,32 +82,27 @@
 		user_id = $( 'input#user_id' ).val();
 		current_user_id = $( 'input[name="checkuser_id"]' ).val();
 
-		// dropdown toggle
+		$colorpicker.on( 'click.colorpicker', '.color-option', function() {
-		$colorpicker.on( 'click', '.dropdown-current', function() {
+			var $this = $(this),
-			$colorpicker.toggleClass( 'picker-expanded' );
+				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
+			// Set color scheme
-			$( 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
 			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() );
+				if ( typeof window.svgPainter !== 'undefined' ) {
-				svgPainter.setColors( $.parseJSON( $( this ).children( '.icon_colors' ).val() ) );
+					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);

wp-admin/js/user-profile.min.js

@@ -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);