<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[26506] trunk/src/wp-admin: Improve the admin color scheme picker:</title>
</head>
<body>
<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; }
#msg dl a { font-weight: bold}
#msg dl a:link { color:#fc3; }
#msg dl a:active { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta">
<dt>Revision</dt> <dd><a href="http://core.trac.wordpress.org/changeset/26506">26506</a></dd>
<dt>Author</dt> <dd>azaozz</dd>
<dt>Date</dt> <dd>2013-12-01 19:49:55 +0000 (Sun, 01 Dec 2013)</dd>
</dl>
<h3>Log Message</h3>
<pre>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 <a href="http://core.trac.wordpress.org/ticket/26336">#26336</a>.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunksrcwpadmincsswpadmincss">trunk/src/wp-admin/css/wp-admin.css</a></li>
<li><a href="#trunksrcwpadminincludesmiscphp">trunk/src/wp-admin/includes/misc.php</a></li>
<li><a href="#trunksrcwpadminjsuserprofilejs">trunk/src/wp-admin/js/user-profile.js</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunksrcwpadmincsswpadmincss"></a>
<div class="modfile"><h4>Modified: trunk/src/wp-admin/css/wp-admin.css (26505 => 26506)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/src/wp-admin/css/wp-admin.css 2013-12-01 18:28:12 UTC (rev 26505)
+++ trunk/src/wp-admin/css/wp-admin.css 2013-12-01 19:49:55 UTC (rev 26506)
</span><span class="lines">@@ -7519,89 +7519,21 @@
</span><span class="cx"> width: 25em;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.picker-dropdown {
- background: #fcfcfc;
- border: 1px solid #ddd;
- margin-right: 12%;
- max-width: 270px;
- position: relative;
- width: auto;
</del><ins>+.scheme-list {
+
</ins><span class="cx"> }
</span><span class="cx">
</span><del>-.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';
-}
-
</del><span class="cx"> .color-option {
</span><del>- display: block;
- padding: 20px;
- border-top: 1px solid #ddd;
</del><ins>+ display: inline-block;
+ width: 32%;
+ padding: 5px 15px 15px;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .color-option:hover,
</span><span class="cx"> .color-option.selected {
</span><del>- background: #f2f8fa;
</del><ins>+ background: #ddd;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .color-palette {
</span><span class="lines">@@ -7619,20 +7551,6 @@
</span><span class="cx"> cursor: pointer;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.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;
-}
-
</del><span class="cx"> /*------------------------------------------------------------------------------
</span><span class="cx"> 19.0 - Tools
</span><span class="cx"> ------------------------------------------------------------------------------*/
</span><span class="lines">@@ -13129,4 +13047,9 @@
</span><span class="cx"> div#post-body.metabox-holder.columns-1 {
</span><span class="cx"> overflow-x: hidden;
</span><span class="cx"> }
</span><ins>+
+ /* Color Picker Options */
+ .color-option {
+ width: 49%;
+ }
</ins><span class="cx"> }
</span></span></pre></div>
<a id="trunksrcwpadminincludesmiscphp"></a>
<div class="modfile"><h4>Modified: trunk/src/wp-admin/includes/misc.php (26505 => 26506)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/src/wp-admin/includes/misc.php 2013-12-01 18:28:12 UTC (rev 26505)
+++ trunk/src/wp-admin/includes/misc.php 2013-12-01 19:49:55 UTC (rev 26506)
</span><span class="lines">@@ -563,35 +563,28 @@
</span><span class="cx"> */
</span><span class="cx"> function admin_color_scheme_picker() {
</span><span class="cx"> global $_wp_admin_css_colors, $user_id;
</span><del>- ksort($_wp_admin_css_colors);
</del><span class="cx">
</span><ins>+ 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 );
+ }
+
</ins><span class="cx"> $current_color = get_user_option( 'admin_color', $user_id );
</span><span class="cx">
</span><del>- if ( empty( $current_color ) || ! isset( $_wp_admin_css_colors[ $current_color ] ) )
</del><ins>+ if ( empty( $current_color ) || ! isset( $_wp_admin_css_colors[ $current_color ] ) ) {
</ins><span class="cx"> $current_color = 'fresh';
</span><ins>+ }
</ins><span class="cx">
</span><del>- $color_info = $_wp_admin_css_colors[ $current_color ];
-?>
-
- <fieldset id="color-picker">
</del><ins>+ ?>
+ <fieldset id="color-picker" class="scheme-list">
</ins><span class="cx"> <legend class="screen-reader-text"><span><?php _e( 'Admin Color Scheme' ); ?></span></legend>
</span><ins>+ <?php
</ins><span class="cx">
</span><del>- <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>
</del><ins>+ foreach ( $_wp_admin_css_colors as $color => $color_info ) :
</ins><span class="cx">
</span><del>- <div class="picker-dropdown dropdown-container">
-
- <?php foreach ( $_wp_admin_css_colors as $color => $color_info ) : ?>
-
</del><ins>+ ?>
</ins><span class="cx"> <div class="color-option <?php echo ( $color == $current_color ) ? 'selected' : ''; ?>">
</span><span class="cx"> <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 ); ?> />
</span><span class="cx"> <input type="hidden" class="css_url" value="<?php echo esc_url( $color_info->url ); ?>" />
</span><span class="lines">@@ -599,20 +592,25 @@
</span><span class="cx"> <label for="admin_color_<?php echo esc_attr( $color ); ?>"><?php echo esc_html( $color_info->name ); ?></label>
</span><span class="cx"> <table class="color-palette">
</span><span class="cx"> <tr>
</span><del>- <?php foreach ( $color_info->colors as $html_color ): ?>
</del><ins>+ <?php
+
+ foreach ( $color_info->colors as $html_color ) {
+ ?>
</ins><span class="cx"> <td style="background-color: <?php echo esc_attr( $html_color ); ?>" title="<?php echo esc_attr( $color ); ?>"> </td>
</span><del>- <?php endforeach; ?>
</del><ins>+ <?php
+ }
+
+ ?>
</ins><span class="cx"> </tr>
</span><span class="cx"> </table>
</span><span class="cx"> </div>
</span><ins>+ <?php
</ins><span class="cx">
</span><del>- <?php endforeach; ?>
</del><ins>+ endforeach;
</ins><span class="cx">
</span><del>- </div>
-
</del><ins>+ ?>
</ins><span class="cx"> </fieldset>
</span><del>-
-<?php
</del><ins>+ <?php
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> function set_color_scheme_json() {
</span></span></pre></div>
<a id="trunksrcwpadminjsuserprofilejs"></a>
<div class="modfile"><h4>Modified: trunk/src/wp-admin/js/user-profile.js (26505 => 26506)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/src/wp-admin/js/user-profile.js 2013-12-01 18:28:12 UTC (rev 26505)
+++ trunk/src/wp-admin/js/user-profile.js 2013-12-01 19:49:55 UTC (rev 26506)
</span><span class="lines">@@ -82,32 +82,27 @@
</span><span class="cx"> user_id = $( 'input#user_id' ).val();
</span><span class="cx"> current_user_id = $( 'input[name="checkuser_id"]' ).val();
</span><span class="cx">
</span><del>- // dropdown toggle
- $colorpicker.on( 'click', '.dropdown-current', function() {
- $colorpicker.toggleClass( 'picker-expanded' );
- });
</del><ins>+ $colorpicker.on( 'click.colorpicker', '.color-option', function() {
+ var $this = $(this),
+ color_scheme = $this.children( 'input[name="admin_color"]' ).val();
</ins><span class="cx">
</span><del>- $colorpicker.on( 'click', '.color-option', function() {
</del><ins>+ if ( $this.hasClass( 'selected' ) ) {
+ return;
+ }
</ins><span class="cx">
</span><del>- var color_scheme = $( this ).children( 'input[name="admin_color"]' ).val();
</del><ins>+ $this.siblings( '.selected' ).removeClass( 'selected' );
+ $this.addClass( 'selected' ).find( 'input[type="radio"]' ).prop( 'checked', true );
</ins><span class="cx">
</span><del>- // 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
</del><ins>+ // Set color scheme
</ins><span class="cx"> if ( user_id === current_user_id ) {
</span><ins>+ // Load the colors stylesheet
+ $stylesheet.attr( 'href', $this.children( '.css_url' ).val() );
</ins><span class="cx">
</span><span class="cx"> // repaint icons
</span><del>- $stylesheet.attr( 'href', $( this ).children( '.css_url' ).val() );
- svgPainter.setColors( $.parseJSON( $( this ).children( '.icon_colors' ).val() ) );
- svgPainter.paint();
</del><ins>+ if ( typeof window.svgPainter !== 'undefined' ) {
+ svgPainter.setColors( $.parseJSON( $this.children( '.icon_colors' ).val() ) );
+ svgPainter.paint();
+ }
</ins><span class="cx">
</span><span class="cx"> // update user option
</span><span class="cx"> $.post( ajaxurl, {
</span><span class="lines">@@ -115,11 +110,8 @@
</span><span class="cx"> color_scheme: color_scheme,
</span><span class="cx"> user_id: user_id
</span><span class="cx"> });
</span><del>-
</del><span class="cx"> }
</span><del>-
</del><span class="cx"> });
</span><del>-
</del><span class="cx"> });
</span><span class="cx">
</span><span class="cx"> })(jQuery);
</span></span></pre>
</div>
</div>
</body>
</html>