Browse Source

[ADD] web_color module provides a widget to display the color of an hexadecimal code

pull/4/head
etienne-bauger 12 years ago
committed by Maxime Chambreuil
commit
d632ccfd51
  1. 22
      web_color/__init__.py
  2. 45
      web_color/__openerp__.py
  3. 10
      web_color/i18n/fr_CA.po
  4. 22
      web_color/static/lib/really-simple-color-picker/LICENSE
  5. 98
      web_color/static/lib/really-simple-color-picker/README.md
  6. BIN
      web_color/static/lib/really-simple-color-picker/arrow.gif
  7. BIN
      web_color/static/lib/really-simple-color-picker/arrow.png
  8. 34
      web_color/static/lib/really-simple-color-picker/colorPicker.css
  9. 93
      web_color/static/lib/really-simple-color-picker/demo.html
  10. 328
      web_color/static/lib/really-simple-color-picker/jquery.colorPicker.js
  11. 26
      web_color/static/lib/really-simple-color-picker/jquery.colorPicker.min.js
  12. BIN
      web_color/static/lib/really-simple-color-picker/screenshot.png
  13. 85
      web_color/static/lib/really-simple-color-picker/test.html
  14. 9
      web_color/static/src/css/color.css
  15. BIN
      web_color/static/src/img/icon.png
  16. 49
      web_color/static/src/js/lib.js
  17. 18
      web_color/static/src/xml/lib.xml

22
web_color/__init__.py

@ -0,0 +1,22 @@
# -*- encoding: utf-8 -*-
############################################################################
#
# OpenERP, Open Source Web Color
# Copyright (C) 2012 Savoir-faire Linux (<http://www.savoirfairelinux.com>).
#
# This program is free software: you can redistribute it and/or modify
# it under the terms of the GNU General Public License as
# published by the Free Software Foundation, either version 3 of the
# License, or (at your option) any later version.
#
# This program is distributed in the hope that it will be useful,
# but WITHOUT ANY WARRANTY; without even the implied warranty of
# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
# GNU General Public License for more details.
#
# You should have received a copy of the GNU General Public License
# along with this program. If not, see <http://www.gnu.org/licenses/>.
#
# @author Étienne Beaudry Auger <etienne.b.auger@savoirfairelinux.com>
#
##############################################################################

45
web_color/__openerp__.py

@ -0,0 +1,45 @@
# -*- encoding: utf-8 -*-
############################################################################
#
# OpenERP, Open Source Web Color
# Copyright (C) 2012 Savoir-faire Linux (<http://www.savoirfairelinux.com>).
#
# This program is free software: you can redistribute it and/or modify
# it under the terms of the GNU General Public License as
# published by the Free Software Foundation, either version 3 of the
# License, or (at your option) any later version.
#
# This program is distributed in the hope that it will be useful,
# but WITHOUT ANY WARRANTY; without even the implied warranty of
# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
# GNU General Public License for more details.
#
# You should have received a copy of the GNU General Public License
# along with this program. If not, see <http://www.gnu.org/licenses/>.
#
# @author Étienne Beaudry Auger <etienne.b.auger@savoirfairelinux.com>
#
##############################################################################
{
'name': "Web Color",
'author': "Savoir-faire Linux",
'category' : "Hidden",
'description': """
This module provides a color widget to display the color from
the hexadecimal value of your field.
""",
'version': "1.0",
'depends': ['web'],
'js': [
'static/src/js/lib.js',
'static/lib/really-simple-color-picker/jquery.colorPicker.js',
],
'css': [
'static/src/css/color.css',
'static/lib/really-simple-color-picker/colorPicker.css',
],
'qweb' : ['static/src/xml/lib.xml'],
'installable': True,
'auto_install': True,
'web_preload': False,
}

10
web_color/i18n/fr_CA.po

@ -0,0 +1,10 @@
# French (Canada) translation for openerp-web
# Copyright (c) 2012 Rosetta Contributors and Canonical Ltd 2012
# This file is distributed under the same license as the openerp-web package.
# Etienne Beaudry Auger <etienne.b.auger@savoirfairelinux.com>, 2012.
#
#. openerp-web
#: addons/web_color/static/src/xml/lib.xml
msgid "Select color"
msgstr "Choix de couleur"

22
web_color/static/lib/really-simple-color-picker/LICENSE

@ -0,0 +1,22 @@
Copyright (c) 2012 Lakshan Perera
Permission is hereby granted, free of charge, to any person
obtaining a copy of this software and associated documentation
files (the "Software"), to deal in the Software without
restriction, including without limitation the rights to use,
copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the
Software is furnished to do so, subject to the following
conditions:
The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
OTHER DEALINGS IN THE SOFTWARE.

98
web_color/static/lib/really-simple-color-picker/README.md

@ -0,0 +1,98 @@
## Really Simple Color Picker
This is a very minimal, yet robust Color Picker based on jQuery.
For more details check the introductory blog post - http://laktek.com/2008/10/27/really-simple-color-picker-in-jquery/
### Usage
You can either clone [this repo](https://github.com/laktek/really-simple-color-picker) or download the latest build as a zip from here - http://github.com/laktek/really-simple-color-picker/zipball/master
Color Picker requires jQuery 1.2.6 or higher. Make sure to load it before Color Picker (there's no other dependencies!).
For default styles of the color picker load the CSS file that comes with the plugin.
```html
<script language="javascript" type="text/javascript" src=jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="jquery.colorPicker.min.js"/></script>
<link rel="stylesheet" href="colorPicker.css" type="text/css" />
```
Add a text field to take the color input.
```html
<div><label for="color1">Color 1</label> <input id="color1" type="text" name="color1" value="#333399" /></div>
```
Then call 'colorPicker' method on the text field when document loads.
```html
<script language="javascript">
jQuery(document).ready(function($) {
$('#color1').colorPicker();
}
</script>
```
### Options
There are several options you can set at the time of binding.
**Selected color**
Color Picker will use the value of the input field, which the picker is attached to as the selected color. If not, it will use the color passed with `pickerDefault` property.
```javascript
$('#color1').colorPicker({pickerDefault: "ffffff"});
```
**Color Palette**
Overrides the default color palette by passing an array of color values.
```javascript
$('#color1').colorPicker({colors: ["333333", "111111"]});
```
**Transparency**
Enable transparency value as an option.
```javascript
$('#color1').colorPicker({transparency: true});
```
**Color Change Callback**
Registers a callback that can be used to notify the calling code of a color change.
```javascript
$('#color1').colorPicker( { onColorChange : function(id, newValue) { console.log("ID: " + id + " has been changed to " + newValue); } } );
```
If you want to set an option gloablly (to apply for all color pickers), use:
```javascript
$.fn.colorPicker.defaults.colors = ['151337', '111111']
```
### Demo
Demo can be found at http://laktek.github.com/really-simple-color-picker/demo.html
### Real-world Examples
* [CurdBee](http://demo.curdbee.com/settings/branding)
* [Readability](https://www.readability.com/publishers/tools)
Let us know how you are using Really Simple Color Picker...
### Contributors
* Lakshan Perera - http://laktek.com
* Daniel Lacy - http://daniellacy.com
### Issues & Suggestions
Please report any bugs or feature requests here:
https://github.com/laktek/really-simple-color-picker/issues

BIN
web_color/static/lib/really-simple-color-picker/arrow.gif

After

Width: 16  |  Height: 16  |  Size: 111 B

BIN
web_color/static/lib/really-simple-color-picker/arrow.png

After

Width: 16  |  Height: 16  |  Size: 27 KiB

34
web_color/static/lib/really-simple-color-picker/colorPicker.css

@ -0,0 +1,34 @@
div.colorPicker-picker {
height: 16px;
width: 16px;
padding: 0 !important;
border: 1px solid #ccc;
background: url(arrow.gif) no-repeat top right;
cursor: pointer;
line-height: 16px;
}
div.colorPicker-palette {
width: 110px;
position: absolute;
border: 1px solid #ccc;
background-color: #FFFFFF;
padding: 5px;
z-index: 9999;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
div.colorPicker_hexWrap {width: 100%; float:left }
div.colorPicker_hexWrap label {font-size: 95%; color: #2F2F2F; margin: 5px 2px; width: 25%}
div.colorPicker_hexWrap input {margin: 5px 2px; padding: 0; font-size: 95%; border: 1px solid #000; width: 65%; }
div.colorPicker-swatch {
height: 12px;
width: 12px;
border: 1px solid #000;
margin: 2px;
float: left;
cursor: pointer;
line-height: 12px;
}

93
web_color/static/lib/really-simple-color-picker/demo.html

@ -0,0 +1,93 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Really Simple Color Picker</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="jquery.colorPicker.js"/></script>
<script type="text/javascript">
//Run the code when document ready
$(function() {
//use this method to add new colors to pallete
//$.fn.colorPicker.addColors(['000', '000', 'fff', 'fff']);
$('#color1').colorPicker();
$('#color2').colorPicker();
$('#color3').colorPicker({pickerDefault: "ffffff", colors: ["ffffff", "000000", "111FFF", "C0C0C0", "FFF000"], transparency: true});
//fires an event when the color is changed
//$('#color1').change(function(){
//alert("color changed");
//});
$("#button1").click(function(){
$("#color1").val("#ffffff");
$("#color1").change();
});
$("#button2").click(function(){
$("#color2").val("#000000");
$("#color2").change();
});
});
</script>
<style type="text/css">
/* styles adopted from Nidahas - Forms markup and CSS (http://nidahas.com/2006/12/06/forms-markup-and-css-revisited/) */
/* General styles */
body { margin: 0; padding: 0; font: 80%/1.5 Arial,Helvetica,sans-serif; color: #111; background-color: #FFF; }
h2 { margin: 0px; padding: 10px; font-family: Georgia, "Times New Roman", Times, serif; font-size: 200%; font-weight: normal; color: #FFF; background-color: #CCC; border-bottom: #BBB 2px solid; }
p#copyright { margin: 20px 10px; font-size: 90%; color: #999; }
/* Form styles */
div.form-container { margin: 10px; padding: 5px; background-color: #FFF; }
p.legend { margin-bottom: 1em; }
p.legend em { color: #C00; font-style: normal; }
div.form-container div.controlset {display: block; float:left; width: 100%; padding: 0.25em 0;}
div.form-container div.controlset label,
div.form-container div.controlset input,
div.form-container div.controlset div { display: inline; float: left; }
div.form-container div.controlset label { width: 100px;}
</style>
<link rel="stylesheet" href="colorPicker.css" type="text/css" />
</head>
<body>
<div id="wrapper">
<h2>Really Simple Color Picker (jQuery)</h2>
<p>More information about this can be found in <a href="http://laktek.com/2008/10/27/really-simple-color-picker-in-jquery/" title="Really Simple Color Picker in jQuery">this blog article</a>.</p>
<div class="form-container">
<form action="#" method="post">
<fieldset>
<div class="controlset"><label for="color1">Color 1</label> <input id="color1" type="text" name="color1" value="#333399" /></div>
<div class="controlset"><label for="color2">Color 2</label> <input id="color2" type="text" name="color2" value="#FF0000" /></div>
<div class="controlset"><label for="color3">Color 3 (customized with options)</label> <input id="color3" type="text" name="color3" value="#99cc00" /></div>
</fieldset>
<div class="buttonrow">
<div><button type="button" id="button1">Set Color 1 to #FFF</button></div>
<div><button type="button" id="button2">Set Color 2 to #000</button></div>
</div>
</form>
</div>
</body>
</html>

328
web_color/static/lib/really-simple-color-picker/jquery.colorPicker.js

@ -0,0 +1,328 @@
/**
* Really Simple Color Picker in jQuery
*
* Licensed under the MIT (MIT-LICENSE.txt) licenses.
*
* Copyright (c) 2008-2012
* Lakshan Perera (www.laktek.com) & Daniel Lacy (daniellacy.com)
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to
* deal in the Software without restriction, including without limitation the
* rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
* sell copies of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in
* all copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
* FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
* IN THE SOFTWARE.
*/
(function ($) {
/**
* Create a couple private variables.
**/
var selectorOwner,
activePalette,
cItterate = 0,
templates = {
control : $('<div class="colorPicker-picker">&nbsp;</div>'),
palette : $('<div id="colorPicker_palette" class="colorPicker-palette" />'),
swatch : $('<div class="colorPicker-swatch">&nbsp;</div>'),
hexLabel: $('<label for="colorPicker_hex">Hex</label>'),
hexField: $('<input type="text" id="colorPicker_hex" />')
},
transparent = "transparent",
lastColor;
/**
* Create our colorPicker function
**/
$.fn.colorPicker = function (options) {
return this.each(function () {
// Setup time. Clone new elements from our templates, set some IDs, make shortcuts, jazzercise.
var element = $(this),
opts = $.extend({}, $.fn.colorPicker.defaults, options),
defaultColor = $.fn.colorPicker.toHex(
(element.val().length > 0) ? element.val() : opts.pickerDefault
),
newControl = templates.control.clone(),
newPalette = templates.palette.clone().attr('id', 'colorPicker_palette-' + cItterate),
newHexLabel = templates.hexLabel.clone(),
newHexField = templates.hexField.clone(),
paletteId = newPalette[0].id,
swatch;
/**
* Build a color palette.
**/
$.each(opts.colors, function (i) {
swatch = templates.swatch.clone();
if (opts.colors[i] === transparent) {
swatch.addClass(transparent).text('X');
$.fn.colorPicker.bindPalette(newHexField, swatch, transparent);
} else {
swatch.css("background-color", "#" + this);
$.fn.colorPicker.bindPalette(newHexField, swatch);
}
swatch.appendTo(newPalette);
});
newHexLabel.attr('for', 'colorPicker_hex-' + cItterate);
newHexField.attr({
'id' : 'colorPicker_hex-' + cItterate,
'value' : defaultColor
});
newHexField.bind("keydown", function (event) {
if (event.keyCode === 13) {
var hexColor = $.fn.colorPicker.toHex($(this).val());
$.fn.colorPicker.changeColor(hexColor ? hexColor : element.val());
}
if (event.keyCode === 27) {
$.fn.colorPicker.hidePalette();
}
});
newHexField.bind("keyup", function (event) {
var hexColor = $.fn.colorPicker.toHex($(event.target).val());
$.fn.colorPicker.previewColor(hexColor ? hexColor : element.val());
});
$('<div class="colorPicker_hexWrap" />').append(newHexLabel).appendTo(newPalette);
newPalette.find('.colorPicker_hexWrap').append(newHexField);
$("body").append(newPalette);
newPalette.hide();
/**
* Build replacement interface for original color input.
**/
newControl.css("background-color", defaultColor);
newControl.bind("click", function () {
$.fn.colorPicker.togglePalette($('#' + paletteId), $(this));
});
if( options && options.onColorChange ) {
newControl.data('onColorChange', options.onColorChange);
} else {
newControl.data('onColorChange', function() {} );
}
element.after(newControl);
element.bind("change", function () {
element.next(".colorPicker-picker").css(
"background-color", $.fn.colorPicker.toHex($(this).val())
);
});
// Hide the original input.
element.val(defaultColor).hide();
cItterate++;
});
};
/**
* Extend colorPicker with... all our functionality.
**/
$.extend(true, $.fn.colorPicker, {
/**
* Return a Hex color, convert an RGB value and return Hex, or return false.
*
* Inspired by http://code.google.com/p/jquery-color-utils
**/
toHex : function (color) {
// If we have a standard or shorthand Hex color, return that value.
if (color.match(/[0-9A-F]{6}|[0-9A-F]{3}$/i)) {
return (color.charAt(0) === "#") ? color : ("#" + color);
// Alternatively, check for RGB color, then convert and return it as Hex.
} else if (color.match(/^rgb\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*\)$/)) {
var c = ([parseInt(RegExp.$1, 10), parseInt(RegExp.$2, 10), parseInt(RegExp.$3, 10)]),
pad = function (str) {
if (str.length < 2) {
for (var i = 0, len = 2 - str.length; i < len; i++) {
str = '0' + str;
}
}
return str;
};
if (c.length === 3) {
var r = pad(c[0].toString(16)),
g = pad(c[1].toString(16)),
b = pad(c[2].toString(16));
return '#' + r + g + b;
}
// Otherwise we wont do anything.
} else {
return false;
}
},
/**
* Check whether user clicked on the selector or owner.
**/
checkMouse : function (event, paletteId) {
var selector = activePalette,
selectorParent = $(event.target).parents("#" + selector.attr('id')).length;
if (event.target === $(selector)[0] || event.target === selectorOwner[0] || selectorParent > 0) {
return;
}
$.fn.colorPicker.hidePalette();
},
/**
* Hide the color palette modal.
**/
hidePalette : function () {
$(document).unbind("mousedown", $.fn.colorPicker.checkMouse);
$('.colorPicker-palette').hide();
},
/**
* Show the color palette modal.
**/
showPalette : function (palette) {
var hexColor = selectorOwner.prev("input").val();
palette.css({
top: selectorOwner.offset().top + (selectorOwner.outerHeight()),
left: selectorOwner.offset().left
});
$("#color_value").val(hexColor);
palette.show();
$(document).bind("mousedown", $.fn.colorPicker.checkMouse);
},
/**
* Toggle visibility of the colorPicker palette.
**/
togglePalette : function (palette, origin) {
// selectorOwner is the clicked .colorPicker-picker.
if (origin) {
selectorOwner = origin;
}
activePalette = palette;
if (activePalette.is(':visible')) {
$.fn.colorPicker.hidePalette();
} else {
$.fn.colorPicker.showPalette(palette);
}
},
/**
* Update the input with a newly selected color.
**/
changeColor : function (value) {
selectorOwner.css("background-color", value);
selectorOwner.prev("input").val(value).change();
$.fn.colorPicker.hidePalette();
selectorOwner.data('onColorChange').call(selectorOwner, $(selectorOwner).prev("input").attr("id"), value);
},
/**
* Preview the input with a newly selected color.
**/
previewColor : function (value) {
selectorOwner.css("background-color", value);
},
/**
* Bind events to the color palette swatches.
*/
bindPalette : function (paletteInput, element, color) {
color = color ? color : $.fn.colorPicker.toHex(element.css("background-color"));
element.bind({
click : function (ev) {
lastColor = color;
$.fn.colorPicker.changeColor(color);
},
mouseover : function (ev) {
lastColor = paletteInput.val();
$(this).css("border-color", "#598FEF");
paletteInput.val(color);
$.fn.colorPicker.previewColor(color);
},
mouseout : function (ev) {
$(this).css("border-color", "#000");
paletteInput.val(selectorOwner.css("background-color"));
paletteInput.val(lastColor);
$.fn.colorPicker.previewColor(lastColor);
}
});
}
});
/**
* Default colorPicker options.
*
* These are publibly available for global modification using a setting such as:
*
* $.fn.colorPicker.defaults.colors = ['151337', '111111']
*
* They can also be applied on a per-bound element basis like so:
*
* $('#element1').colorPicker({pickerDefault: 'efefef', transparency: true});
* $('#element2').colorPicker({pickerDefault: '333333', colors: ['333333', '111111']});
*
**/
$.fn.colorPicker.defaults = {
// colorPicker default selected color.
pickerDefault : "FFFFFF",
// Default color set.
colors : [
'000000', '993300', '333300', '000080', '333399', '333333', '800000', 'FF6600',
'808000', '008000', '008080', '0000FF', '666699', '808080', 'FF0000', 'FF9900',
'99CC00', '339966', '33CCCC', '3366FF', '800080', '999999', 'FF00FF', 'FFCC00',
'FFFF00', '00FF00', '00FFFF', '00CCFF', '993366', 'C0C0C0', 'FF99CC', 'FFCC99',
'FFFF99', 'CCFFFF', '99CCFF', 'FFFFFF'
],
// If we want to simply add more colors to the default set, use addColors.
addColors : []
};
})(jQuery);

26
web_color/static/lib/really-simple-color-picker/jquery.colorPicker.min.js

@ -0,0 +1,26 @@
/**
* Really Simple Color Picker in jQuery
*
* Licensed under the MIT (MIT-LICENSE.txt) licenses.
*
* Copyright (c) 2008-2012
* Lakshan Perera (www.laktek.com) & Daniel Lacy (daniellacy.com)
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to
* deal in the Software without restriction, including without limitation the
* rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
* sell copies of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in
* all copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
* FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
* IN THE SOFTWARE.
*/(function(a){var b,c,d=0,e={control:a('<div class="colorPicker-picker">&nbsp;</div>'),palette:a('<div id="colorPicker_palette" class="colorPicker-palette" />'),swatch:a('<div class="colorPicker-swatch">&nbsp;</div>'),hexLabel:a('<label for="colorPicker_hex">Hex</label>'),hexField:a('<input type="text" id="colorPicker_hex" />')},f="transparent",g;a.fn.colorPicker=function(b){return this.each(function(){var c=a(this),g=a.extend({},a.fn.colorPicker.defaults,b),h=a.fn.colorPicker.toHex(c.val().length>0?c.val():g.pickerDefault),i=e.control.clone(),j=e.palette.clone().attr("id","colorPicker_palette-"+d),k=e.hexLabel.clone(),l=e.hexField.clone(),m=j[0].id,n;a.each(g.colors,function(b){n=e.swatch.clone(),g.colors[b]===f?(n.addClass(f).text("X"),a.fn.colorPicker.bindPalette(l,n,f)):(n.css("background-color","#"+this),a.fn.colorPicker.bindPalette(l,n)),n.appendTo(j)}),k.attr("for","colorPicker_hex-"+d),l.attr({id:"colorPicker_hex-"+d,value:h}),l.bind("keydown",function(b){if(b.keyCode===13){var d=a.fn.colorPicker.toHex(a(this).val());a.fn.colorPicker.changeColor(d?d:c.val())}b.keyCode===27&&a.fn.colorPicker.hidePalette()}),l.bind("keyup",function(b){var d=a.fn.colorPicker.toHex(a(b.target).val());a.fn.colorPicker.previewColor(d?d:c.val())}),a('<div class="colorPicker_hexWrap" />').append(k).appendTo(j),j.find(".colorPicker_hexWrap").append(l),a("body").append(j),j.hide(),i.css("background-color",h),i.bind("click",function(){a.fn.colorPicker.togglePalette(a("#"+m),a(this))}),b&&b.onColorChange?i.data("onColorChange",b.onColorChange):i.data("onColorChange",function(){}),c.after(i),c.bind("change",function(){c.next(".colorPicker-picker").css("background-color",a.fn.colorPicker.toHex(a(this).val()))}),c.val(h).hide(),d++})},a.extend(!0,a.fn.colorPicker,{toHex:function(a){if(a.match(/[0-9A-F]{6}|[0-9A-F]{3}$/i))return a.charAt(0)==="#"?a:"#"+a;if(!a.match(/^rgb\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*\)$/))return!1;var b=[parseInt(RegExp.$1,10),parseInt(RegExp.$2,10),parseInt(RegExp.$3,10)],c=function(a){if(a.length<2)for(var b=0,c=2-a.length;b<c;b++)a="0"+a;return a};if(b.length===3){var d=c(b[0].toString(16)),e=c(b[1].toString(16)),f=c(b[2].toString(16));return"#"+d+e+f}},checkMouse:function(d,e){var f=c,g=a(d.target).parents("#"+f.attr("id")).length;if(d.target===a(f)[0]||d.target===b[0]||g>0)return;a.fn.colorPicker.hidePalette()},hidePalette:function(){a(document).unbind("mousedown",a.fn.colorPicker.checkMouse),a(".colorPicker-palette").hide()},showPalette:function(c){var d=b.prev("input").val();c.css({top:b.offset().top+b.outerHeight(),left:b.offset().left}),a("#color_value").val(d),c.show(),a(document).bind("mousedown",a.fn.colorPicker.checkMouse)},togglePalette:function(d,e){e&&(b=e),c=d,c.is(":visible")?a.fn.colorPicker.hidePalette():a.fn.colorPicker.showPalette(d)},changeColor:function(c){b.css("background-color",c),b.prev("input").val(c).change(),a.fn.colorPicker.hidePalette(),b.data("onColorChange").call(b,a(b).prev("input").attr("id"),c)},previewColor:function(a){b.css("background-color",a)},bindPalette:function(c,d,e){e=e?e:a.fn.colorPicker.toHex(d.css("background-color")),d.bind({click:function(b){g=e,a.fn.colorPicker.changeColor(e)},mouseover:function(b){g=c.val(),a(this).css("border-color","#598FEF"),c.val(e),a.fn.colorPicker.previewColor(e)},mouseout:function(d){a(this).css("border-color","#000"),c.val(b.css("background-color")),c.val(g),a.fn.colorPicker.previewColor(g)}})}}),a.fn.colorPicker.defaults={pickerDefault:"FFFFFF",colors:["000000","993300","333300","000080","333399","333333","800000","FF6600","808000","008000","008080","0000FF","666699","808080","FF0000","FF9900","99CC00","339966","33CCCC","3366FF","800080","999999","FF00FF","FFCC00","FFFF00","00FF00","00FFFF","00CCFF","993366","C0C0C0","FF99CC","FFCC99","FFFF99","CCFFFF","99CCFF","FFFFFF"],addColors:[]}})(jQuery)

BIN
web_color/static/lib/really-simple-color-picker/screenshot.png

After

Width: 128  |  Height: 167  |  Size: 2.0 KiB

85
web_color/static/lib/really-simple-color-picker/test.html

@ -0,0 +1,85 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Really Simple Color Picker</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="jquery.colorPicker.js"/></script>
<script type="text/javascript">
//Run the code when document ready
$(function() {
//use this method to add new colors to pallete
//$.fn.colorPicker.addColors(['000', '000', 'fff', 'fff']);
$('#color1').colorPicker();
$('#color2').colorPicker();
$('#color3').colorPicker({pickerDefault: "ffffff", colors: ["ffffff", "000000", "111FFF", "C0C0C0", "FFF000"], transparency: true});
//fires an event when the color is changed
$('#color1').change(function(){
alert("color changed");
});
$("#button1").click(function(){
$("#color1").val("#ffffff");
$("#color1").change();
});
$("#button2").click(function(){
$("#color2").val("#000000");
$("#color2").change();
});
});
</script>
<style type="text/css">
/* styles adopted from Nidahas - Forms markup and CSS (http://nidahas.com/2006/12/06/forms-markup-and-css-revisited/) */
/* General styles */
body { margin: 0; padding: 0; font: 80%/1.5 Arial,Helvetica,sans-serif; color: #111; background-color: #FFF; }
h2 { margin: 0px; padding: 10px; font-family: Georgia, "Times New Roman", Times, serif; font-size: 200%; font-weight: normal; color: #FFF; background-color: #CCC; border-bottom: #BBB 2px solid; }
p#copyright { margin: 20px 10px; font-size: 90%; color: #999; }
/* Form styles */
div.form-container { margin: 10px; padding: 5px; background-color: #FFF; }
p.legend { margin-bottom: 1em; }
p.legend em { color: #C00; font-style: normal; }
div.form-container div.controlset {display: block; float:left; width: 100%; padding: 0.25em 0;}
div.form-container div.controlset label,
div.form-container div.controlset input,
div.form-container div.controlset div { display: inline; float: left; }
div.form-container div.controlset label { width: 100px;}
</style>
<link rel="stylesheet" href="colorPicker.css" type="text/css" />
</head>
<body>
<div id="wrapper">
<h2>Test Really Simple Color Picker (jQuery)</h2>
<p>More information about this can be found in <a href="http://laktek.com/2008/10/27/really-simple-color-picker-in-jquery/" title="Really Simple Color Picker in jQuery">this blog article</a>.</p>
<div class="form-container">
<form action="#" method="post">
<fieldset>
<div class="controlset"><label for="color1">Color 1</label> <input id="color1" type="text" name="color1" value="#333399" /></div>
</fieldset>
</form>
</div>
</body>
</html>

9
web_color/static/src/css/color.css

@ -0,0 +1,9 @@
div.colorviewer {
display: inline;
float: left;
height: 16px;
width: 16px;
padding: 0 !important;
border: 1px solid #ccc;
line-height: 16px;
}

BIN
web_color/static/src/img/icon.png

After

Width: 64  |  Height: 64  |  Size: 3.4 KiB

49
web_color/static/src/js/lib.js

@ -0,0 +1,49 @@
/*############################################################################
#
# OpenERP, Open Source Web Color
# Copyright (C) 2012 Savoir-faire Linux (<http://www.savoirfairelinux.com>).
#
# This program is free software: you can redistribute it and/or modify
# it under the terms of the GNU General Public License as
# published by the Free Software Foundation, either version 3 of the
# License, or (at your option) any later version.
#
# This program is distributed in the hope that it will be useful,
# but WITHOUT ANY WARRANTY; without even the implied warranty of
# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
# GNU General Public License for more details.
#
# You should have received a copy of the GNU General Public License
# along with this program. If not, see <http://www.gnu.org/licenses/>.
#
# @author Étienne Beaudry Auger <etienne.b.auger@savoirfairelinux.com>
#
##############################################################################*/
openerp.web_color = function(instance) {
var _t = openerp.web._t;
var QWeb = openerp.web.qweb;
widget_name = 'color';
//Add in the widgets list
instance.web.form.widgets.add(widget_name, 'openerp.web_color');
//Add object in the column list
instance.web.list.columns.add('field.color', 'instance.web.list.Color');
//instance of the widget itself
instance.web.list.Color = instance.web.list.Column.extend({
/**
* Return a formatted div colored and display the hexa color code
* from row_data
*
* @private
*/
_format: function (row_data, options) {
return _.template(
'<div class="colorviewer" style="background-color: <%-colorCode%>"></div>\
<label style="padding-left: 5px"><%-colorCode%></label>', {
colorCode: row_data[this.id].value
});
}
});
}

18
web_color/static/src/xml/lib.xml

@ -0,0 +1,18 @@
<?xml version="1.0" encoding="UTF-8"?>
<templates id="template" xml:space="preserve">
<t t-name="FieldColor">
<span class="oe_form_field oe_colorpicker_root oe_form_field_color" t-att-style="widget.node.attrs.style"/>
</t>
<t t-name="web.colorpicker">
<span>
<t t-set="placeholder" t-value="widget.getParent().node and widget.getParent().node.attrs.placeholder"/>
<input type="text" class="oe_colorpicker_container" disabled="disabled" style="display: none;"/>
<input type="text"
t-att-name="widget.name"
t-att-placeholder="placeholder"
class="oe_colorpicker_master"
/><img class="oe_input_icon oe_colorpicker_trigger" t-att-src='_s + "/web/static/src/img/icons/color-picker.png"'
title="Select color value" width="16" height="16" border="0"/>
</span>
</t>
</templates>
Loading…
Cancel
Save