Ticket #39662: 39662.2.diff
| File 39662.2.diff, 12.3 KB (added by , 9 years ago) |
|---|
-
src/wp-admin/css/color-picker.css
6 6 display: none; 7 7 } 8 8 9 .wp-color-result { 10 background-color: #f7f7f7; 11 border: 1px solid #ccc; 12 -webkit-border-radius: 3px; 13 border-radius: 3px; 14 cursor: pointer; 15 display: inline-block; 16 height: 22px; 9 /* Needs higher specificiity. */ 10 .wp-picker-container .wp-color-result.button { 11 height: 24px; 17 12 margin: 0 6px 6px 0px; 18 position: relative; 19 top: 1px; 20 -webkit-user-select: none; 21 -moz-user-select: none; 22 -ms-user-select: none; 23 user-select: none; 24 vertical-align: bottom; 25 display: inline-block; 26 padding-left: 30px; 27 -webkit-box-shadow: 0 1px 0 #ccc; 28 box-shadow: 0 1px 0 #ccc; 13 padding: 0 0 0 30px; 14 font-size: 11px; 29 15 } 30 16 31 .wp-color-result :after{17 .wp-color-result-text { 32 18 background: #f7f7f7; 33 19 -webkit-border-radius: 0 2px 2px 0; 34 20 border-radius: 0 2px 2px 0; 35 21 border-left: 1px solid #ccc; 36 22 color: #555; 37 content: attr( title );38 23 display: block; 39 font-size: 11px;40 24 line-height: 22px; 41 25 padding: 0 6px; 42 position: relative;43 right: 0;44 26 text-align: center; 45 top: 0;46 27 } 47 28 48 29 .wp-color-result:hover, … … 59 40 border-left: 1px solid #999; 60 41 } 61 42 62 .wp-color-result {63 top: 0;64 }65 66 .wp-color-result.wp-picker-open:after {67 content: attr( data-current );68 }69 70 43 .wp-picker-container, .wp-picker-container:active { 71 44 display: inline-block; 72 45 outline: 0; … … 83 56 vertical-align: top; 84 57 } 85 58 86 .wp-picker-container .button { 59 .wp-picker-input-wrap label { 60 display: inline-block; 61 vertical-align: top; 62 } 63 64 /* For the old `custom-background` page, to override the inline-block and margins from `.form-table td fieldset label`. */ 65 .form-table .wp-picker-input-wrap label { 66 margin: 0 !important; 67 } 68 69 .wp-picker-input-wrap .button, 70 .wp-customizer .wp-picker-input-wrap .button { 87 71 margin-left: 6px; 88 72 } 89 73 … … 104 88 font-family: monospace; 105 89 line-height: 16px; 106 90 margin: 0; 91 vertical-align: top; 107 92 } 108 93 109 94 .wp-color-picker::-webkit-input-placeholder { … … 133 118 box-shadow: 134 119 0 0 0 1px #5b9dd9, 135 120 0 0 2px 1px rgba(30, 140, 190, .8); 136 } 137 No newline at end of file 121 } 122 123 .iris-picker .iris-palette:focus { 124 -webkit-box-shadow: 125 inset 0 0 5px rgba(0,0,0,.4), 126 0 0 0 1px #5b9dd9, 127 0 0 2px 1px rgba(30, 140, 190, .8); 128 box-shadow: 129 inset 0 0 5px rgba(0,0,0,.4), 130 0 0 0 1px #5b9dd9, 131 0 0 2px 1px rgba(30, 140, 190, .8); 132 } 133 134 @media screen and ( max-width: 782px ) { 135 .wp-picker-container .wp-color-result.button { 136 height: auto; 137 padding: 0 0 0 40px; 138 font-size: 14px; 139 line-height: 29px; 140 } 141 142 .wp-picker-container .wp-color-result-text { 143 padding: 0 14px; 144 font-size: inherit; 145 line-height: inherit; 146 } 147 148 .wp-customizer .wp-picker-container .wp-color-result.button { 149 padding: 0 0 0 30px; 150 font-size: 13px; 151 line-height: 26px; 152 } 153 154 .wp-customizer .wp-picker-container .wp-color-result-text { 155 padding: 0 10px; 156 } 157 } -
src/wp-admin/css/common.css
3683 3683 white-space: nowrap; 3684 3684 } 3685 3685 3686 .wp-color-result {3687 height: auto;3688 padding-left: 45px;3689 }3690 3691 .wp-color-result:after {3692 font-size: 14px;3693 height: auto;3694 padding: 6px 14px;3695 }3696 3697 3686 /* Feedback Messages */ 3698 3687 .notice, 3699 3688 .wrap div.updated, -
src/wp-admin/css/customize-controls.css
893 893 max-width: 112px; 894 894 } 895 895 896 /* Color Picker */897 .customize-control-color .color-picker-hex {898 display: none;899 }900 901 .customize-control-color.open .color-picker-hex {902 display: block;903 }904 905 896 .customize-control-color .dropdown { 906 897 margin-right: 5px; 907 898 margin-bottom: 5px; -
src/wp-admin/js/color-picker.js
1 1 /* global wpColorPickerL10n */ 2 ( function( $, undef ) {2 ( function( $, undef ) { 3 3 4 4 var ColorPicker, 5 5 // html stuff 6 _before = '< a tabindex="0" class="wp-color-result" />',6 _before = '<button type="button" class="button wp-color-result" aria-expanded="false"><span class="wp-color-result-text"></span></button>', 7 7 _after = '<div class="wp-picker-holder" />', 8 8 _wrap = '<div class="wp-picker-container" />', 9 _button = '<input type="button" class="button button-small hidden" />'; 9 _button = '<input type="button" class="button button-small" />', 10 _wrappingLabel = '<label></label>', 11 _wrappingLabelText = '<span class="screen-reader-text"></span>'; 10 12 11 13 // jQuery UI Widget constructor 12 14 ColorPicker = { … … 66 68 67 69 self.initialValue = el.val(); 68 70 69 // Set up HTML structure, hide things 70 el.addClass( 'wp-color-picker' ).hide().wrap( _wrap ); 71 self.wrap = el.parent(); 72 self.toggler = $( _before ).insertBefore( el ).css( { backgroundColor: self.initialValue } ).attr( 'title', wpColorPickerL10n.pick ).attr( 'data-current', wpColorPickerL10n.current ); 73 self.pickerContainer = $( _after ).insertAfter( el ); 71 // Add a CSS class to the input field. 72 el.addClass( 'wp-color-picker' ); 73 74 /* 75 * Check if there's already a wrapping label, e.g. in the Customizer. 76 * If there's no label, add a default one to match the Customizer template. 77 */ 78 if ( ! el.parent( 'label' ).length ) { 79 // Wrap the input field in the default label. 80 el.wrap( _wrappingLabel ); 81 // Insert the default label text. 82 self.wrappingLabelText = $( _wrappingLabelText ) 83 .insertBefore( el ) 84 .text( wpColorPickerL10n.defaultLabel ); 85 } 86 87 /* 88 * At this point, either it's the standalone version or the Customizer 89 * one, we have a wrapping label to use as hook in the DOM, let's store it. 90 */ 91 self.wrappingLabel = el.parent(); 92 93 // Wrap the label in the main wrapper. 94 self.wrappingLabel.wrap( _wrap ); 95 // Store a reference to the main wrapper. 96 self.wrap = self.wrappingLabel.parent(); 97 // Set up the toggle button and insert it before the wrapping label. 98 self.toggler = $( _before ) 99 .insertBefore( self.wrappingLabel ) 100 .css( { backgroundColor: self.initialValue } ); 101 // Set the toggle button span element text. 102 self.toggler.find( '.wp-color-result-text' ).text( wpColorPickerL10n.pick ); 103 // Set up the Iris container and insert it after the wrapping label. 104 self.pickerContainer = $( _after ).insertAfter( self.wrappingLabel ); 105 // Store a reference to the Clear/Default button. 74 106 self.button = $( _button ); 75 107 // Set up the Clear/Default button. 76 108 if ( self.options.defaultColor ) { 77 self.button.addClass( 'wp-picker-default' ).val( wpColorPickerL10n.defaultString ); 109 self.button 110 .addClass( 'wp-picker-default' ) 111 .val( wpColorPickerL10n.defaultString ) 112 .attr( 'aria-label', wpColorPickerL10n.defaultAriaLabel ); 78 113 } else { 79 self.button.addClass( 'wp-picker-clear' ).val( wpColorPickerL10n.clear ); 114 self.button 115 .addClass( 'wp-picker-clear' ) 116 .val( wpColorPickerL10n.clear ) 117 .attr( 'aria-label', wpColorPickerL10n.clearAriaLabel ); 80 118 } 119 // Wrap the wrapping label in its wrapper and append the Clear/Default button. 120 self.wrappingLabel 121 .wrap( '<span class="wp-picker-input-wrap hidden" />' ) 122 .after( self.button ); 81 123 82 el.wrap( '<span class="wp-picker-input-wrap" />' ).after(self.button); 124 /* 125 * The input wrapper now contains the label+input+Clear/Default button. 126 * Store a reference to the input wrapper: we'll use this to toggle 127 * the controls visibility. 128 */ 129 self.inputWrapper = el.closest( '.wp-picker-input-wrap' ); 83 130 84 131 el.iris( { 85 132 target: self.pickerContainer, … … 131 178 } 132 179 }); 133 180 134 // open a keyboard-focused closed picker with space or enter135 self.toggler.on( 'keyup', function( event ) {136 if ( event.keyCode === 13 || event.keyCode === 32 ) {137 event.preventDefault();138 self.toggler.trigger( 'click' ).next().focus();139 }140 });141 142 181 self.button.click( function( event ) { 143 182 var me = $( this ); 144 183 if ( me.hasClass( 'wp-picker-clear' ) ) { … … 153 192 }); 154 193 }, 155 194 open: function() { 156 this.element. show().iris( 'toggle' ).focus();157 this. button.removeClass( 'hidden' );195 this.element.iris( 'toggle' ); 196 this.inputWrapper.removeClass( 'hidden' ); 158 197 this.wrap.addClass( 'wp-picker-active' ); 159 this.toggler.addClass( 'wp-picker-open' ); 198 this.toggler 199 .addClass( 'wp-picker-open' ) 200 .attr( 'aria-expanded', 'true' ); 160 201 $( 'body' ).trigger( 'click.wpcolorpicker' ).on( 'click.wpcolorpicker', this.close ); 161 202 }, 162 203 close: function() { 163 this.element. hide().iris( 'toggle' );164 this. button.addClass( 'hidden' );204 this.element.iris( 'toggle' ); 205 this.inputWrapper.addClass( 'hidden' ); 165 206 this.wrap.removeClass( 'wp-picker-active' ); 166 this.toggler.removeClass( 'wp-picker-open' ); 207 this.toggler 208 .removeClass( 'wp-picker-open' ) 209 .attr( 'aria-expanded', 'false' ); 167 210 $( 'body' ).off( 'click.wpcolorpicker', this.close ); 168 211 }, 169 212 // $("#input").wpColorPicker('color') returns the current color -
src/wp-includes/customize/class-wp-customize-color-control.php
103 103 } 104 104 defaultValue = ' data-default-color=' + defaultValue; // Quotes added automatically. 105 105 } #> 106 < label>107 < # if ( data.label ) { #>108 <span class="customize-control-title">{{{ data.label }}}</span>109 <# }#>110 < # if ( data.description ) { #>111 <span class="description customize-control-description">{{{ data.description }}}</span>112 <# } #>113 < div class="customize-control-content">114 115 116 117 118 119 </ div>120 </ label>106 <# if ( data.label ) { #> 107 <span class="customize-control-title">{{{ data.label }}}</span> 108 <# } #> 109 <# if ( data.description ) { #> 110 <span class="description customize-control-description">{{{ data.description }}}</span> 111 <# } #> 112 <div class="customize-control-content"> 113 <label><span class="screen-reader-text">{{{ data.label }}}</span> 114 <# if ( isHueSlider ) { #> 115 <input class="color-picker-hue" type="text" data-type="hue" /> 116 <# } else { #> 117 <input class="color-picker-hex" type="text" maxlength="7" placeholder="<?php esc_attr_e( 'Hex Value' ); ?>" {{ defaultValue }} /> 118 <# } #> 119 </label> 120 </div> 121 121 <?php 122 122 } 123 123 } -
src/wp-includes/script-loader.php
715 715 $scripts->add( 'iris', '/wp-admin/js/iris.min.js', array( 'jquery-ui-draggable', 'jquery-ui-slider', 'jquery-touch-punch' ), '1.0.7', 1 ); 716 716 $scripts->add( 'wp-color-picker', "/wp-admin/js/color-picker$suffix.js", array( 'iris' ), false, 1 ); 717 717 did_action( 'init' ) && $scripts->localize( 'wp-color-picker', 'wpColorPickerL10n', array( 718 'clear' => __( 'Clear' ), 719 'defaultString' => __( 'Default' ), 720 'pick' => __( 'Select Color' ), 721 'current' => __( 'Current Color' ), 718 'clear' => __( 'Clear' ), 719 'clearAriaLabel' => __( 'Clear color' ), 720 'defaultString' => __( 'Default' ), 721 'defaultAriaLabel' => __( 'Select default color' ), 722 'pick' => __( 'Select Color' ), 723 'defaultLabel' => __( 'Color value' ), 724 'irisHandleLabel' => __( 'Move to select a color' ), 725 'irisSliderLabel' => __( 'Set the color saturation' ), 726 'irisPaletteLabel' => __( 'Preset color' ), 722 727 ) ); 723 728 724 729 $scripts->add( 'dashboard', "/wp-admin/js/dashboard$suffix.js", array( 'jquery', 'admin-comments', 'postbox' ), false, 1 );