Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Improve UX for color field

  • Loading branch information...
commit 196c95612fe345fa050d62ba8638eef0320a5ca8 1 parent 31e0c2b
@rilwis rilwis authored
Showing with 15 additions and 8 deletions.
  1. +4 −0 css/color.css
  2. +4 −4 inc/fields/color.php
  3. +7 −4 js/color.js
View
4 css/color.css
@@ -1,3 +1,7 @@
.rwmb-color-picker {
display: none; /* Hidden by default */
+ z-index: 100;
+ background: rgb(238, 238, 238);
+ border: 1px solid rgb(204, 204, 204);
+ position: absolute;
}
View
8 inc/fields/color.php
@@ -35,14 +35,14 @@ static function html( $html, $meta, $field )
{
if ( empty( $meta ) )
$meta = '#';
- $name = "name='{$field['field_name']}'";
+ $name = " name='{$field['field_name']}'";
+ $id = " id='{$field['id']}'";
+ $value = " value='{$meta}'";
$html = <<<HTML
-<input class="rwmb-color" type="text" {$name} id="{$field['id']}" value="{$meta}" size="8" />
-<a href="#" class="rwmb-color-select" rel="{$field['id']}">%s</a>
+<input class="rwmb-color" type="text"{$name}{$id}{$value} size="8" />
<div class="rwmb-color-picker" rel="{$field['id']}"></div>
HTML;
- $html = sprintf( $html, __( 'Select a color', 'rwmb' ) );
return $html;
}
View
11 js/color.js
@@ -1,15 +1,18 @@
-jQuery( document ).ready( function($)
+jQuery( document ).ready( function($)
{
- $( '.rwmb-color-picker' ).each( function()
+ $( '.rwmb-color-picker' ).each( function()
{
var $this = $( this ), id = $this.attr( 'rel' );
$this.farbtastic( '#' + id );
} );
- $( '.rwmb-color-select' ).click( function()
+ $( '.rwmb-color' ).focus( function()
{
- $( this ).siblings( '.rwmb-color-picker' ).toggle();
+ $( this ).siblings( '.rwmb-color-picker' ).show();
+ return false;
+ } ).blur( function() {
+ $( this ).siblings( '.rwmb-color-picker' ).hide();
return false;
} );
} );
Please sign in to comment.
Something went wrong with that request. Please try again.