Author: artdaw Date: 2008-12-29 21:22:52 -0500 (Mon, 29 Dec 2008) New Revision: 12057 Modified: trunk/sandbox/ui/colorPicker/design/colorPicker.html trunk/sandbox/ui/colorPicker/design/ui.colorpicker.js Log: rich:colorPicker design: cancel button was added Modified: trunk/sandbox/ui/colorPicker/design/colorPicker.html =================================================================== --- trunk/sandbox/ui/colorPicker/design/colorPicker.html 2008-12-30 01:36:33 UTC (rev 12056) +++ trunk/sandbox/ui/colorPicker/design/colorPicker.html 2008-12-30 02:22:52 UTC (rev 12057) @@ -17,7 +17,7 @@ position: relative; background-color: #ECF4FE; border: 1px solid #BED6F8; - height: 164px; + height: 170px; padding: 0px; margin: 0px; } @@ -91,9 +91,9 @@ } .rich-colorPicker-hex-wrapper { height:22px; - left:200px; + left:202px; position:absolute; - top:135px; + top:119px; } .rich-colorPicker-rgb-wrapper{ @@ -116,13 +116,13 @@ margin-bottom: 2px } .rich-colorPicker-hsb-h, .rich-colorPicker-rgb-r{ - top:55px; + top:45px; } .rich-colorPicker-hsb-s, .rich-colorPicker-rgb-g{ - top:80px; + top:70px; } .rich-colorPicker-hsb-b, .rich-colorPicker-rgb-b{ - top:105px; + top:95px; } @@ -145,13 +145,15 @@ font-size: 13px; } -.rich-colorPicker-submit{ +.rich-colorPicker-submit, .rich-colorPicker-cancel{ position:absolute; - right:7px; - top:136px; +right:75px; +top:144px; border: 1px solid #BED6F8; } - +.rich-colorPicker-cancel{ +right:7px; +} .rich-colorPicker-span input{ border: 1px solid #BED6F8; font-size: 12px; @@ -253,6 +255,7 @@ <input id="hsb-b" type="text" maxlength="3" size="2" /> </div> <button type="button" class="rich-colorPicker-submit" name="submit">Apply</button> + <button type="button" class="rich-colorPicker-cancel" name="cancel">Cancel</button> </div> </div> Modified: trunk/sandbox/ui/colorPicker/design/ui.colorpicker.js =================================================================== --- trunk/sandbox/ui/colorPicker/design/ui.colorpicker.js 2008-12-30 01:36:33 UTC (rev 12056) +++ trunk/sandbox/ui/colorPicker/design/ui.colorpicker.js 2008-12-30 02:22:52 UTC (rev 12057) @@ -100,6 +100,11 @@ .bind('mouseenter', function(e) { return self._enterSubmit.call(self, e); }) .bind('mouseleave', function(e) { return self._leaveSubmit.call(self, e); }) .bind('click', function(e) { return self._clickSubmit.call(self, e); }); + + this.picker.find('.rich-colorPicker-cancel') + .bind('mouseenter', function(e) { return self._enterCancel.call(self, e); }) + .bind('mouseleave', function(e) { return self._leaveCancel.call(self, e); }) + .bind('click', function(e) { return self._clickCancel.call(self, e); }); this._fillRGBFields(this.color); this._fillHSBFields(this.color); @@ -336,7 +341,13 @@ }, _leaveSubmit: function(e) { this.picker.find('.rich-colorPicker-submit').removeClass('rich-colorPicker-focus'); + }, + _enterCancel: function(e) { + this.picker.find('.rich-colorPicker-cancel').addClass('rich-colorPicker-focus'); }, + _leaveCancel: function(e) { + this.picker.find('.rich-colorPicker-cancel').removeClass('rich-colorPicker-focus'); + }, _clickSubmit: function(e) { var col = this.color; @@ -347,6 +358,11 @@ this.picker.hide(); $(document).unbind('mousedown.colorPicker'); return false; + }, + _clickCancel: function(e) { + this.picker.hide(); + $(document).unbind('mousedown.colorPicker'); + return false; }, _show: function(e) {