[ADD] Added color picker for kanban view

bzr revid: fme@openerp.com-20110912125938-jt1v7jf1h4e6t66s

addons/web_kanban/static/src/css/kanban.css

@@ -66,16 +66,30 @@
     padding: 4px;
 }
 .openerp .oe_kanban_buttons_set {
-    border-top: 1px dotted #CCC;
+    border-top: 1px dotted;
     white-space: nowrap;
+    padding-top: 2px;
+    position: relative;
 }
-.openerp .oe_kanban_buttons_set .oe_kanban_left a {
+.openerp .oe_kanban_buttons_set a {
-    border-right: 1px dotted #CCC;
     padding: 2px;
 }
-.openerp .oe_kanban_buttons_set .oe_kanban_right a {
+.oe_kanban_color_picker {
-    border-left: 1px dotted #CCC;
+    position: absolute;
-    padding: 2px;
+    top: -10px;
+    border: 1px solid black;
+    -moz-box-shadow: 2px 2px 5px #666;
+    -webkit-box-shadow: 2px 2px 5px #666;
+    box-shadow: 2px 2px 5px #666;
+}
+.oe_kanban_color_picker a {
+    display: block;
+    width: 30px;
+    height: 30px;
+    border: 1px solid black;
+}
+.oe_kanban_color_picker a:hover {
+    border-color: white;
 }
 .openerp .oe_kanban_left {
     float: left;
@@ -95,29 +109,23 @@
 
 /* Custom colors are also present in kanban.js */
 /* Custom color#1 */
-.openerp .oe_kanban_color_1 .oe_kanban_color_bglight,
 .openerp .oe_kanban_color_1 .oe_kanban_color_bglight {
     background: #FFC7C7;
 }
-.openerp .oe_kanban_color_1 .oe_kanban_color_bgdark,
 .openerp .oe_kanban_color_1 .oe_kanban_color_bgdark {
     background: #FF8F8F;
 }
-.openerp .oe_kanban_color_1 .oe_kanban_color_border,
 .openerp .oe_kanban_color_1 .oe_kanban_color_border {
     border-color: #D97979;
 }
 
 /* Custom color#2 */
-.openerp .oe_kanban_color_2 .oe_kanban_color_bglight,
 .openerp .oe_kanban_color_2 .oe_kanban_color_bglight {
     background: #FFF1C7;
 }
-.openerp .oe_kanban_color_2 .oe_kanban_color_bgdark,
 .openerp .oe_kanban_color_2 .oe_kanban_color_bgdark {
     background: #FFE38F;
 }
-.openerp .oe_kanban_color_2 .oe_kanban_color_border,
 .openerp .oe_kanban_color_2 .oe_kanban_color_border {
     border-color: #D9C179;
 }
@@ -196,6 +204,6 @@
     background: #E99;
 }
 .openerp .oe_kanban_color_alert .oe_kanban_color_border {
-    border-color: #999;
+    border-color: #900;
 }
 

addons/web_kanban/static/src/js/kanban.js

@@ -65,7 +65,7 @@ openerp.web_kanban.KanbanView = openerp.web.View.extend({
             default:
                 return '';
         }
-        return 'oe_kanban_color_' + ((index % number_of_color_schemes) + 1);
+        return 'oe_kanban_color_' + ((index % number_of_color_schemes) || number_of_color_schemes);
     },
     kanban_gravatar: function(email, size) {
         size = size || 22;
@@ -81,7 +81,7 @@ openerp.web_kanban.KanbanView = openerp.web.View.extend({
             case 'button':
             case 'a':
                 var type = node.attrs.type || '';
-                if (_.indexOf('action,object,edit,delete,'.split(','), type) !== -1) {
+                if (_.indexOf('action,object,edit,delete,color'.split(','), type) !== -1) {
                     _.each(node.attrs, function(v, k) {
                         node.attrs['data-' + k] = v;
                         delete(node.attrs[k]);
@@ -179,8 +179,27 @@ openerp.web_kanban.KanbanView = openerp.web.View.extend({
             this.notification.warn("Kanban", "No form view defined for this object");
         }
     },
-    do_change_color: function(method) {
+    do_change_color: function(record_id, $e) {
-        var color = '#FFC7C7,#FFF1C7,#E3FFC7,#C7FFD5,#C7FFFF,#C7D5FF,#FFC7F1'.split(',');
+        var self = this,
+            id = record_id,
+            colors = '#FFC7C7,#FFF1C7,#E3FFC7,#C7FFD5,#C7FFFF,#C7D5FF,#E3C7FF,#FFC7F1'.split(','),
+            $cpicker = $(QWeb.render('KanbanColorPicker', { colors : colors, columns: 2 }));
+        $e.after($cpicker);
+        $cpicker.mouseenter(function() {
+            clearTimeout($cpicker.data('timeoutId'));
+        }).mouseleave(function(evt) {
+            var timeoutId = setTimeout(function() { $cpicker.remove() }, 500);
+            $cpicker.data('timeoutId', timeoutId);
+        });
+        $cpicker.find('a').click(function() {
+            var data = {};
+            data[$e.data('name')] = $(this).data('color');
+            self.dataset.write(id, data, {}, function() {
+                // TODO fme: reload record instead of all. need refactoring
+                self.do_actual_search();
+            });
+            $cpicker.remove();
+        });
     },
     do_delete: function (id) {
         var self = this;
@@ -322,8 +341,8 @@ openerp.web_kanban.KanbanView = openerp.web.View.extend({
             }
         });
         this.$element.find('.oe_kanban_action').click(this.on_action_clicked);
-        this.$element.find('.oe_kanban_record').click(function() {
+        this.$element.find('.oe_kanban_box_show_onclick_trigger').click(function() {
-            $(this).find('.oe_kanban_box_show_onclick').toggle();
+            $(this).parent('.oe_kanban_box').find('.oe_kanban_box_show_onclick').toggle();
         });
     },
     on_action_clicked: function(evt) {
@@ -334,6 +353,8 @@ openerp.web_kanban.KanbanView = openerp.web.View.extend({
             this.do_delete(record_id);
         } else if (type == 'edit') {
             this.do_edit_record(record_id);
+        } else if (type == 'color') {
+            this.do_change_color(record_id, $action);
         } else {
             var button_attrs = $(this).data();
             this.on_button_click(button_attrs, record_id);

addons/web_kanban/static/src/xml/web_kanban.xml

@@ -22,4 +22,16 @@
     </tr>
     </table>
 </t>
+<t t-name="KanbanColorPicker">
+    <table cellspacing="0" cellpadding="0" border="0" class="oe_kanban_color_picker">
+    <tr>
+        <t t-foreach="colors" t-as="color">
+            <td t-att-bgcolor="color">
+                <a href="#" t-att-data-color="color_index + 1"/>
+            </td>
+            <t t-if="((color_index + 1) % Math.round(colors.length / columns)) == 0">&lt;/tr&gt;&lt;tr&gt;</t>
+        </t>
+    </tr>
+    </table>
+</t>
 </template>