From 1bee3848e16fe2c726f7ac31c155b2c0f4c356d9 Mon Sep 17 00:00:00 2001
From: Fabien Meghazi <fme@openerp.com>
Date: Wed, 23 May 2012 15:01:16 +0200
Subject: [PATCH] [ADD] Added new colorpicker + misc improvements

bzr revid: fme@openerp.com-20120523130116-6yvv8krsryg5x5e5
---
 addons/web_kanban/static/src/css/kanban.css   | 298 ++++++------------
 addons/web_kanban/static/src/css/kanban.sass  | 244 ++++----------
 addons/web_kanban/static/src/js/kanban.js     |  70 ++--
 .../web_kanban/static/src/xml/web_kanban.xml  |  15 +-
 4 files changed, 190 insertions(+), 437 deletions(-)

diff --git a/addons/web_kanban/static/src/css/kanban.css b/addons/web_kanban/static/src/css/kanban.css
index ee0517807e6..7030580c1a7 100644
--- a/addons/web_kanban/static/src/css/kanban.css
+++ b/addons/web_kanban/static/src/css/kanban.css
@@ -107,6 +107,36 @@
 .openerp .oe_kanban_view .oe_kanban_quick_create button {
   float: right;
 }
+.openerp .oe_kanban_view .oe_kanban_vignette {
+  padding: 8px;
+  min-height: 100px;
+}
+.openerp .oe_kanban_view .oe_kanban_image {
+  display: inline-block;
+  vertical-align: top;
+  width: 64px;
+  height: 64px;
+  text-align: center;
+  overflow: hidden;
+  -moz-border-radius: 3px;
+  -webkit-border-radius: 3px;
+  border-radius: 3px;
+  -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
+  -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
+  -box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
+}
+.openerp .oe_kanban_view .oe_kanban_details {
+  display: inline-block;
+  vertical-align: top;
+  width: 240px;
+  font-size: 13px;
+  padding: 0 5px;
+  color: #4c4c4c;
+  min-height: 120px;
+}
+.openerp .oe_kanban_view .oe_kanban_details h4 {
+  margin: 0 0 4px 0;
+}
 .openerp .oe_kanban_view .oe_kanban_record {
   position: relative;
   display: block;
@@ -331,6 +361,11 @@
   background: red;
   color: black;
 }
+.openerp .oe_kanban_view .oe_kanban_ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 .openerp .oe_kanban_view a.oe_kanban_menuaction {
   position: absolute;
   top: 0px;
@@ -349,7 +384,7 @@
   right: -140px;
   padding: 4px;
   border: 1px solid #afafb6;
-  width: 160px;
+  min-width: 160px;
   overflow-x: hidden;
   z-index: 900;
   background: white;
@@ -363,14 +398,14 @@
 .openerp .oe_kanban_view .oe_kanban_menu p {
   margin-left: 12px;
 }
-.openerp .oe_kanban_view .oe_kanban_menu li a {
+.openerp .oe_kanban_view .oe_kanban_menu > li > a {
   display: block;
   padding: 3px 6px;
   line-height: 14px;
   color: #4c4c4c;
   text-decoration: none;
 }
-.openerp .oe_kanban_view .oe_kanban_menu li a:hover {
+.openerp .oe_kanban_view .oe_kanban_menu > li > a:hover {
   background: #f0f0fa;
   background: -moz-linear-gradient(#f0f0fa, #eeeef6);
   background: -webkit-gradient(linear, left top, left bottom, from(#f0f0fa), to(#eeeef6));
@@ -379,229 +414,88 @@
   -webkit-box-shadow: none;
   -box-shadow: none;
 }
-.openerp .oe_kanban_view .oe_kanban_color_picker {
-  position: absolute;
-  top: -10px;
-  border: 1px solid black;
-  -moz-box-shadow: 2px 2px 5px #666666;
-  -webkit-box-shadow: 2px 2px 5px #666666;
-  box-shadow: 2px 2px 5px #666666;
-  z-index: 2;
+.openerp .oe_kanban_view .oe_kanban_colorpicker {
+  padding: 3px 6px;
 }
-.openerp .oe_kanban_view .oe_kanban_color_picker a {
-  display: block;
-  width: 30px;
-  height: 30px;
-  border: 1px solid black;
-  text-align: center;
-  text-decoration: none;
+.openerp .oe_kanban_view .oe_kanban_colorpicker li {
+  float: left;
 }
-.openerp .oe_kanban_view .oe_kanban_color_picker a:hover {
-  border-color: white;
+.openerp .oe_kanban_view .oe_kanban_colorpicker li a {
+  display: inline-block;
+  width: 18px;
+  height: 18px;
+  border: 1px solid white;
 }
-.openerp .oe_kanban_view .oe_kanban_color_picker span {
-  border: none;
-  font-size: 120%;
-  font-weight: bold;
-  color: black;
-  line-height: 30px;
+.openerp .oe_kanban_view .oe_kanban_colorpicker li a:hover {
+  border: 1px solid gray !important;
 }
-.openerp .oe_kanban_view .oe_kanban_color_0 .oe_kanban_color_bglight {
-  background: white;
+.openerp .oe_kanban_view .oe_kanban_colorpicker li:first-child a {
+  margin-top: 1px;
+  height: 16px;
+  border: 1px solid #cccccc;
 }
-.openerp .oe_kanban_view .oe_kanban_color_0 .oe_kanban_color_bgdark {
-  background: #eeeeee;
+.openerp .oe_kanban_view .oe_kanban_colorpicker li:first-child a:hover {
+  margin-top: 0px;
+  height: 18px;
 }
-.openerp .oe_kanban_view .oe_kanban_color_0 .oe_kanban_color_border {
-  border-color: #cccccc;
-}
-.openerp .oe_kanban_view .oe_kanban_color_0 .oe_kanban_button {
-  background-color: #eeeeee;
-  border-color: #cccccc;
-  text-shadow: 0 1px white;
-}
-.openerp .oe_kanban_view .oe_kanban_color_0 .oe_kanban_button_active, .openerp .oe_kanban_view .oe_kanban_color_0 a.oe_kanban_button:hover, .openerp .oe_kanban_view .oe_kanban_color_0 button.oe_kanban_button:hover {
-  background-color: #999999;
+.openerp .oe_kanban_view .oe_kanban_color_0 {
   color: white;
-  text-shadow: 0 1px black;
+  text-shadow: -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 1px 1px 0 black;
 }
-.openerp .oe_kanban_view .oe_kanban_color_1 .oe_kanban_color_bglight {
-  background: #cccccc;
+.openerp .oe_kanban_view .oe_kanban_bgcolor_0 {
+  background-color: white;
 }
-.openerp .oe_kanban_view .oe_kanban_color_1 .oe_kanban_color_bgdark {
-  background: #999999;
+.openerp .oe_kanban_view .oe_kanban_color_1 {
+  color: #cccccc;
 }
-.openerp .oe_kanban_view .oe_kanban_color_1 .oe_kanban_color_border {
-  border-color: #666666;
+.openerp .oe_kanban_view .oe_kanban_bgcolor_1 {
+  background-color: #cccccc;
 }
-.openerp .oe_kanban_view .oe_kanban_color_1 .oe_kanban_button {
-  background-color: #999999;
-  border-color: #666666;
-  text-shadow: 0 1px #cccccc;
+.openerp .oe_kanban_view .oe_kanban_color_2 {
+  color: #ffc7c7;
 }
-.openerp .oe_kanban_view .oe_kanban_color_1 .oe_kanban_button_active, .openerp .oe_kanban_view .oe_kanban_color_1 a.oe_kanban_button:hover, .openerp .oe_kanban_view .oe_kanban_color_1 button.oe_kanban_button:hover {
-  background-color: #666666;
-  color: white;
-  text-shadow: 0 1px black;
+.openerp .oe_kanban_view .oe_kanban_bgcolor_2 {
+  background-color: #ffc7c7;
 }
-.openerp .oe_kanban_view .oe_kanban_color_2 .oe_kanban_color_bglight {
-  background: #ffc7c7;
+.openerp .oe_kanban_view .oe_kanban_color_3 {
+  color: #fff1c7;
 }
-.openerp .oe_kanban_view .oe_kanban_color_2 .oe_kanban_color_bgdark {
-  background: #ff8f8f;
+.openerp .oe_kanban_view .oe_kanban_bgcolor_3 {
+  background-color: #fff1c7;
 }
-.openerp .oe_kanban_view .oe_kanban_color_2 .oe_kanban_color_border {
-  border-color: #d97979;
+.openerp .oe_kanban_view .oe_kanban_color_4 {
+  color: #e3ffc7;
 }
-.openerp .oe_kanban_view .oe_kanban_color_2 .oe_kanban_button {
-  background-color: #ff8f8f;
-  border-color: #d97979;
-  text-shadow: 0 1px #ffc7c7;
+.openerp .oe_kanban_view .oe_kanban_bgcolor_4 {
+  background-color: #e3ffc7;
 }
-.openerp .oe_kanban_view .oe_kanban_color_2 .oe_kanban_button_active, .openerp .oe_kanban_view .oe_kanban_color_2 a.oe_kanban_button:hover, .openerp .oe_kanban_view .oe_kanban_color_2 button.oe_kanban_button:hover {
-  background-color: #cc5c5c;
-  color: white;
-  text-shadow: 0 1px black;
+.openerp .oe_kanban_view .oe_kanban_color_5 {
+  color: #c7ffd5;
 }
-.openerp .oe_kanban_view .oe_kanban_color_3 .oe_kanban_color_bglight {
-  background: #fff1c7;
+.openerp .oe_kanban_view .oe_kanban_bgcolor_5 {
+  background-color: #c7ffd5;
 }
-.openerp .oe_kanban_view .oe_kanban_color_3 .oe_kanban_color_bgdark {
-  background: #ffe38f;
+.openerp .oe_kanban_view .oe_kanban_color_6 {
+  color: #c7ffff;
 }
-.openerp .oe_kanban_view .oe_kanban_color_3 .oe_kanban_color_border {
-  border-color: #d9c179;
+.openerp .oe_kanban_view .oe_kanban_bgcolor_6 {
+  background-color: #c7ffff;
 }
-.openerp .oe_kanban_view .oe_kanban_color_3 .oe_kanban_button {
-  background-color: #ffe38f;
-  border-color: #d9c179;
-  text-shadow: 0 1px #fff1c7;
+.openerp .oe_kanban_view .oe_kanban_color_7 {
+  color: #c7d5ff;
 }
-.openerp .oe_kanban_view .oe_kanban_color_3 .oe_kanban_button_active, .openerp .oe_kanban_view .oe_kanban_color_3 a.oe_kanban_button:hover, .openerp .oe_kanban_view .oe_kanban_color_3 button.oe_kanban_button:hover {
-  background-color: #ccb05c;
-  color: white;
-  text-shadow: 0 1px black;
+.openerp .oe_kanban_view .oe_kanban_bgcolor_7 {
+  background-color: #c7d5ff;
 }
-.openerp .oe_kanban_view .oe_kanban_color_4 .oe_kanban_color_bglight {
-  background: #e3ffc7;
+.openerp .oe_kanban_view .oe_kanban_color_8 {
+  color: #e3c7ff;
 }
-.openerp .oe_kanban_view .oe_kanban_color_4 .oe_kanban_color_bgdark {
-  background: #c7ff8f;
+.openerp .oe_kanban_view .oe_kanban_bgcolor_8 {
+  background-color: #e3c7ff;
 }
-.openerp .oe_kanban_view .oe_kanban_color_4 .oe_kanban_color_border {
-  border-color: #a9d979;
+.openerp .oe_kanban_view .oe_kanban_color_9 {
+  color: #ffc7f1;
 }
-.openerp .oe_kanban_view .oe_kanban_color_4 .oe_kanban_button {
-  background-color: #c7ff8f;
-  border-color: #a9d979;
-  text-shadow: 0 1px #e3ffc7;
-}
-.openerp .oe_kanban_view .oe_kanban_color_4 .oe_kanban_button_active, .openerp .oe_kanban_view .oe_kanban_color_4 a.oe_kanban_button:hover, .openerp .oe_kanban_view .oe_kanban_color_4 button.oe_kanban_button:hover {
-  background-color: #94cc5c;
-  color: white;
-  text-shadow: 0 1px black;
-}
-.openerp .oe_kanban_view .oe_kanban_color_5 .oe_kanban_color_bglight {
-  background: #c7ffd5;
-}
-.openerp .oe_kanban_view .oe_kanban_color_5 .oe_kanban_color_bgdark {
-  background: #8fffab;
-}
-.openerp .oe_kanban_view .oe_kanban_color_5 .oe_kanban_color_border {
-  border-color: #79d991;
-}
-.openerp .oe_kanban_view .oe_kanban_color_5 .oe_kanban_button {
-  background-color: #8fffab;
-  border-color: #79d991;
-  text-shadow: 0 1px #c7ffd5;
-}
-.openerp .oe_kanban_view .oe_kanban_color_5 .oe_kanban_button_active, .openerp .oe_kanban_view .oe_kanban_color_5 a.oe_kanban_button:hover, .openerp .oe_kanban_view .oe_kanban_color_5 button.oe_kanban_button:hover {
-  background-color: #5ccc78;
-  color: white;
-  text-shadow: 0 1px black;
-}
-.openerp .oe_kanban_view .oe_kanban_color_6 .oe_kanban_color_bglight {
-  background: #c7ffff;
-}
-.openerp .oe_kanban_view .oe_kanban_color_6 .oe_kanban_color_bgdark {
-  background: #8fffff;
-}
-.openerp .oe_kanban_view .oe_kanban_color_6 .oe_kanban_color_border {
-  border-color: #79d9d9;
-}
-.openerp .oe_kanban_view .oe_kanban_color_6 .oe_kanban_button {
-  background-color: #8fffff;
-  border-color: #79d9d9;
-  text-shadow: 0 1px #c7ffff;
-}
-.openerp .oe_kanban_view .oe_kanban_color_6 .oe_kanban_button_active, .openerp .oe_kanban_view .oe_kanban_color_6 a.oe_kanban_button:hover, .openerp .oe_kanban_view .oe_kanban_color_6 button.oe_kanban_button:hover {
-  background-color: #5ccccc;
-  color: white;
-  text-shadow: 0 1px black;
-}
-.openerp .oe_kanban_view .oe_kanban_color_7 .oe_kanban_color_bglight {
-  background: #c7d5ff;
-}
-.openerp .oe_kanban_view .oe_kanban_color_7 .oe_kanban_color_bgdark {
-  background: #8fabff;
-}
-.openerp .oe_kanban_view .oe_kanban_color_7 .oe_kanban_color_border {
-  border-color: #8fabff;
-}
-.openerp .oe_kanban_view .oe_kanban_color_7 .oe_kanban_button {
-  background-color: #8fabff;
-  border-color: #7995e9;
-  text-shadow: 0 1px #c7d5ff;
-}
-.openerp .oe_kanban_view .oe_kanban_color_7 .oe_kanban_button_active, .openerp .oe_kanban_view .oe_kanban_color_7 a.oe_kanban_button:hover, .openerp .oe_kanban_view .oe_kanban_color_7 button.oe_kanban_button:hover {
-  background-color: #5c78cc;
-  color: white;
-  text-shadow: 0 1px black;
-}
-.openerp .oe_kanban_view .oe_kanban_color_8 .oe_kanban_color_bglight {
-  background: #e3c7ff;
-}
-.openerp .oe_kanban_view .oe_kanban_color_8 .oe_kanban_color_bgdark {
-  background: #c78fff;
-}
-.openerp .oe_kanban_view .oe_kanban_color_8 .oe_kanban_color_border {
-  border-color: #a979d9;
-}
-.openerp .oe_kanban_view .oe_kanban_color_8 .oe_kanban_button {
-  background-color: #c78fff;
-  border-color: #a979d9;
-  text-shadow: 0 1px #e3c7ff;
-}
-.openerp .oe_kanban_view .oe_kanban_color_8 .oe_kanban_button_active, .openerp .oe_kanban_view .oe_kanban_color_8 a.oe_kanban_button:hover, .openerp .oe_kanban_view .oe_kanban_color_8 button.oe_kanban_button:hover {
-  background-color: #945ccc;
-  color: white;
-  text-shadow: 0 1px black;
-}
-.openerp .oe_kanban_view .oe_kanban_color_9 .oe_kanban_color_bglight {
-  background: #ffc7f1;
-}
-.openerp .oe_kanban_view .oe_kanban_color_9 .oe_kanban_color_bgdark {
-  background: #ff8fe3;
-}
-.openerp .oe_kanban_view .oe_kanban_color_9 .oe_kanban_color_border {
-  border-color: #d979c1;
-}
-.openerp .oe_kanban_view .oe_kanban_color_9 .oe_kanban_button {
-  background-color: #ff8fe3;
-  border-color: #d979c1;
-  text-shadow: 0 1px #ffc7f1;
-}
-.openerp .oe_kanban_view .oe_kanban_color_9 .oe_kanban_button_active, .openerp .oe_kanban_view .oe_kanban_color_9 a.oe_kanban_button:hover, .openerp .oe_kanban_view .oe_kanban_color_9 button.oe_kanban_button:hover {
-  background-color: #cc5cb0;
-  color: white;
-  text-shadow: 0 1px black;
-}
-.openerp .oe_kanban_view .oe_kanban_color_alert .oe_kanban_color_border, .openerp .oe_kanban_view .oe_kanban_color_red .oe_kanban_color_border {
-  border-color: #cc0000 !important;
-}
-.openerp .oe_kanban_view .oe_kanban_color_green .oe_kanban_color_border {
-  border-color: #00cc00 !important;
-}
-.openerp .oe_kanban_view .oe_kanban_color_blue .oe_kanban_color_border {
-  border-color: #0000cc !important;
+.openerp .oe_kanban_view .oe_kanban_bgcolor_9 {
+  background-color: #ffc7f1;
 }
diff --git a/addons/web_kanban/static/src/css/kanban.sass b/addons/web_kanban/static/src/css/kanban.sass
index 59db3fc8743..bb012bd328d 100644
--- a/addons/web_kanban/static/src/css/kanban.sass
+++ b/addons/web_kanban/static/src/css/kanban.sass
@@ -292,6 +292,10 @@
     .oe_kanban_text_red
         background: red
         color: #000
+    .oe_kanban_ellipsis
+        overflow: hidden
+        text-overflow: ellipsis
+        white-space: nowrap
     // }}}
     // KanbanDropDown {{{
     a.oe_kanban_menuaction
@@ -310,7 +314,7 @@
         right: -140px
         padding: 4px
         border: 1px solid #afafb6
-        width: 160px
+        min-width: 160px
         overflow-x: hidden
         z-index: 900
         background: white
@@ -318,13 +322,13 @@
         @include box-shadow(0 1px 4px rgba(0,0,0,0.3))
         p
             margin-left: 12px
-        li a
+        > li > a
             display: block
             padding: 3px 6px
             line-height: 14px
             color: #4c4c4c
             text-decoration: none
-        li a:hover
+        > li > a:hover
             background: #f0f0fa
             background: -moz-linear-gradient(#f0f0fa, #eeeef6)
             background: -webkit-gradient(linear, left top, left bottom, from(#f0f0fa), to(#eeeef6))
@@ -332,214 +336,76 @@
             @include box-shadow(none)
     // }}}
     // KanbanColorPicker {{{
-    .oe_kanban_color_picker
-        position: absolute
-        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
-        z-index: 2
+    .oe_kanban_colorpicker
+        padding: 3px 6px
+    .oe_kanban_colorpicker li
+        float: left
         a
-            display: block
-            width: 30px
-            height: 30px
-            border: 1px solid black
-            text-align: center
-            text-decoration: none
-            &:hover
-                border-color: white
-        span
-            border: none
-            font-size: 120%
-            font-weight: bold
-            color: black
-            line-height: 30px
+            display: inline-block
+            width: 18px
+            height: 18px
+            border: 1px solid white
+        a:hover
+            border: 1px solid gray !important
+    .oe_kanban_colorpicker li:first-child a
+        margin-top: 1px
+        height: 16px
+        border: 1px solid #ccc
+        &:hover
+            margin-top: 0px
+            height: 18px
     // }}}
     // KanbanColors {{{
-    // Custom colors are also present in kanban.js
-    // Custom color#0
     .oe_kanban_color_0
-        .oe_kanban_color_bglight
-            background: #FFFFFF
-        .oe_kanban_color_bgdark
-            background: #EEEEEE
-        .oe_kanban_color_border
-            border-color: #CCCCCC
-        .oe_kanban_button
-            background-color: #EEEEEE
-            border-color: #CCCCCC
-            text-shadow: 0 1px #FFFFFF
-        .oe_kanban_button_active, a.oe_kanban_button:hover, button.oe_kanban_button:hover
-            background-color: #999999
-            color: #fff
-            text-shadow: 0 1px #000
+        color: #FFFFFF
+        text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000
+    .oe_kanban_bgcolor_0
+        background-color: #FFFFFF
 
-    // Custom color#1
     .oe_kanban_color_1
-        .oe_kanban_color_bglight
-            background: #CCCCCC
-        .oe_kanban_color_bgdark
-            background: #999999
-        .oe_kanban_color_border
-            border-color: #666666
-        .oe_kanban_button
-            background-color: #999999
-            border-color: #666666
-            text-shadow: 0 1px #CCCCCC
-        .oe_kanban_button_active, a.oe_kanban_button:hover, button.oe_kanban_button:hover
-            background-color: #666666
-            color: #fff
-            text-shadow: 0 1px #000
+        color: #CCCCCC
+    .oe_kanban_bgcolor_1
+        background-color: #CCCCCC
 
-    // Custom color#2
     .oe_kanban_color_2
-        .oe_kanban_color_bglight
-            background: #FFC7C7
-        .oe_kanban_color_bgdark
-            background: #FF8F8F
-        .oe_kanban_color_border
-            border-color: #D97979
-        .oe_kanban_button
-            background-color: #FF8F8F
-            border-color: #D97979
-            text-shadow: 0 1px #FFC7C7
-        .oe_kanban_button_active, a.oe_kanban_button:hover, button.oe_kanban_button:hover
-            background-color: #CC5C5C
-            color: #fff
-            text-shadow: 0 1px #000
+        color: #FFC7C7
+    .oe_kanban_bgcolor_2
+        background-color: #FFC7C7
 
-    // Custom color#3
     .oe_kanban_color_3
-        .oe_kanban_color_bglight
-            background: #FFF1C7
-        .oe_kanban_color_bgdark
-            background: #FFE38F
-        .oe_kanban_color_border
-            border-color: #D9C179
-        .oe_kanban_button
-            background-color: #FFE38F
-            border-color: #D9C179
-            text-shadow: 0 1px #FFF1C7
-        .oe_kanban_button_active, a.oe_kanban_button:hover, button.oe_kanban_button:hover
-            background-color: #CCB05C
-            color: #fff
-            text-shadow: 0 1px #000
+        color: #FFF1C7
+    .oe_kanban_bgcolor_3
+        background-color: #FFF1C7
 
-    // Custom color#4
     .oe_kanban_color_4
-        .oe_kanban_color_bglight
-            background: #E3FFC7
-        .oe_kanban_color_bgdark
-            background: #C7FF8F
-        .oe_kanban_color_border
-            border-color: #A9D979
-        .oe_kanban_button
-            background-color: #C7FF8F
-            border-color: #A9D979
-            text-shadow: 0 1px #E3FFC7
-        .oe_kanban_button_active, a.oe_kanban_button:hover, button.oe_kanban_button:hover
-            background-color: #94CC5C
-            color: #fff
-            text-shadow: 0 1px #000
+        color: #E3FFC7
+    .oe_kanban_bgcolor_4
+        background-color: #E3FFC7
 
-    // Custom color#5
     .oe_kanban_color_5
-        .oe_kanban_color_bglight
-            background: #C7FFD5
-        .oe_kanban_color_bgdark
-            background: #8FFFAB
-        .oe_kanban_color_border
-            border-color: #79D991
-        .oe_kanban_button
-            background-color: #8FFFAB
-            border-color: #79D991
-            text-shadow: 0 1px #C7FFD5
-        .oe_kanban_button_active, a.oe_kanban_button:hover, button.oe_kanban_button:hover
-            background-color: #5CCC78
-            color: #fff
-            text-shadow: 0 1px #000
+        color: #C7FFD5
+    .oe_kanban_bgcolor_5
+        background-color: #C7FFD5
 
-    // Custom color#6
     .oe_kanban_color_6
-        .oe_kanban_color_bglight
-            background: #C7FFFF
-        .oe_kanban_color_bgdark
-            background: #8FFFFF
-        .oe_kanban_color_border
-            border-color: #79D9D9
-        .oe_kanban_button
-            background-color: #8FFFFF
-            border-color: #79D9D9
-            text-shadow: 0 1px #C7FFFF
-        .oe_kanban_button_active, a.oe_kanban_button:hover, button.oe_kanban_button:hover
-            background-color: #5CCCCC
-            color: #fff
-            text-shadow: 0 1px #000
+        color: #C7FFFF
+    .oe_kanban_bgcolor_6
+        background-color: #C7FFFF
 
-    // Custom color#7
     .oe_kanban_color_7
-        .oe_kanban_color_bglight
-            background: #C7D5FF
-        .oe_kanban_color_bgdark
-            background: #8FABFF
-        .oe_kanban_color_border
-            border-color: #8FABFF
-        .oe_kanban_button
-            background-color: #8FABFF
-            border-color: #7995E9
-            text-shadow: 0 1px #C7D5FF
-        .oe_kanban_button_active, a.oe_kanban_button:hover, button.oe_kanban_button:hover
-            background-color: #5C78CC
-            color: #fff
-            text-shadow: 0 1px #000
+        color: #C7D5FF
+    .oe_kanban_bgcolor_7
+        background-color: #C7D5FF
 
-    // Custom color#8
     .oe_kanban_color_8
-        .oe_kanban_color_bglight
-            background: #E3C7FF
-        .oe_kanban_color_bgdark
-            background: #C78FFF
-        .oe_kanban_color_border
-            border-color: #A979D9
-        .oe_kanban_button
-            background-color: #C78FFF
-            border-color: #A979D9
-            text-shadow: 0 1px #E3C7FF
-        .oe_kanban_button_active, a.oe_kanban_button:hover, button.oe_kanban_button:hover
-            background-color: #945CCC
-            color: #fff
-            text-shadow: 0 1px #000
+        color: #E3C7FF
+    .oe_kanban_bgcolor_8
+        background-color: #E3C7FF
 
-    // Custom color#9
     .oe_kanban_color_9
-        .oe_kanban_color_bglight
-            background: #FFC7F1
-        .oe_kanban_color_bgdark
-            background: #FF8FE3
-        .oe_kanban_color_border
-            border-color: #D979C1
-        .oe_kanban_button
-            background-color: #FF8FE3
-            border-color: #D979C1
-            text-shadow: 0 1px #FFC7F1
-        .oe_kanban_button_active, a.oe_kanban_button:hover, button.oe_kanban_button:hover
-            background-color: #CC5CB0
-            color: #fff
-            text-shadow: 0 1px #000
-
-    // Red border
-    .oe_kanban_color_alert .oe_kanban_color_border, .oe_kanban_color_red .oe_kanban_color_border
-        border-color: #c00 !important
-
-    // Green border
-    .oe_kanban_color_green .oe_kanban_color_border
-        border-color: #0c0 !important
-
-    // Blue border
-    .oe_kanban_color_blue .oe_kanban_color_border
-        border-color: #00c !important
-    // }}}
+        color: #FFC7F1
+    .oe_kanban_bgcolor_9
+        background-color: #FFC7F1
 
 // au BufWritePost,FileWritePost *.sass :!sass --style expanded --line-numbers <afile> > "%:p:r.css"
 // vim:tabstop=4:shiftwidth=4:softtabstop=4:fdm=marker:
diff --git a/addons/web_kanban/static/src/js/kanban.js b/addons/web_kanban/static/src/js/kanban.js
index e6f9b23258f..1dfe39edc94 100644
--- a/addons/web_kanban/static/src/js/kanban.js
+++ b/addons/web_kanban/static/src/js/kanban.js
@@ -10,6 +10,7 @@ instance.web_kanban.KanbanView = instance.web.View.extend({
     display_name: _lt('Kanban'),
     default_nr_columns: 3,
     view_type: "kanban",
+    number_of_color_schemes: 10,
     init: function (parent, dataset, view_id, options) {
         this._super(parent, dataset, view_id, options);
         _.defaults(this.options, {"quick_creatable": true, "creatable": true});
@@ -114,7 +115,7 @@ instance.web_kanban.KanbanView = instance.web.View.extend({
             case 'button':
             case 'a':
                 var type = node.attrs.type || '';
-                if (_.indexOf('action,object,edit,delete,color'.split(','), type) !== -1) {
+                if (_.indexOf('action,object,edit,delete'.split(','), type) !== -1) {
                     _.each(node.attrs, function(v, k) {
                         if (_.indexOf('icon,type,name,args,string,context,states,kanban_states'.split(','), k) != -1) {
                             node.attrs['data-' + k] = v;
@@ -434,7 +435,7 @@ instance.web_kanban.KanbanGroup = instance.web.OldWidget.extend({
         var min_height = 0;
         var els = [];
         _.each(this.records, function(r) {
-            var $e = r.$element.find('.oe_kanban_auto_height').first();
+            var $e = r.$element.find('.oe_kanban_auto_height').first().css('min-height', 0);
             if ($e.length) {
                 els.push($e[0]);
                 min_height = Math.max(min_height, $e.outerHeight());
@@ -559,6 +560,7 @@ instance.web_kanban.KanbanRecord = instance.web.OldWidget.extend({
     },
     bind_events: function() {
         var self = this;
+        this.setup_color_picker();
         var $show_on_click = self.$element.find('.oe_kanban_box_show_onclick');
         $show_on_click.toggle(this.state.folded);
         this.$element.find('.oe_kanban_box_show_onclick_trigger').click(function() {
@@ -602,6 +604,25 @@ instance.web_kanban.KanbanRecord = instance.web.OldWidget.extend({
             }
         });
     },
+    setup_color_picker: function() {
+        var self = this;
+        var $el = this.$element.find('ul.oe_kanban_colorpicker');
+        if ($el.length) {
+            $el.html(QWeb.render('KanbanColorPicker', {
+                widget: this
+            }));
+            $el.on('click', 'a', function(ev) {
+                ev.preventDefault();
+                var color_field = $(this).parents('.oe_kanban_colorpicker').first().data('field') || 'color';
+                var data = {};
+                data[color_field] = $(this).data('color');
+                self.view.dataset.write(self.id, data, {}, function() {
+                    self.record[color_field] = $(this).data('color');
+                    self.do_reload();
+                });
+            });
+        }
+    },
     do_action_delete: function($action) {
         var self = this;
         if (confirm(_t("Are you sure you want to delete this record ?"))) {
@@ -621,28 +642,6 @@ instance.web_kanban.KanbanRecord = instance.web.OldWidget.extend({
             this.view.open_record(this.id);
         }
     },
-    do_action_color: function($action) {
-        var self = this,
-            colors = '#FFFFFF,#CCCCCC,#FFC7C7,#FFF1C7,#E3FFC7,#C7FFD5,#C7FFFF,#C7D5FF,#E3C7FF,#FFC7F1'.split(','),
-            $cpicker = $(QWeb.render('KanbanColorPicker', { colors : colors, columns: 2 }));
-        $action.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[$action.data('name')] = $(this).data('color');
-            self.view.dataset.write(self.id, data, {}, function() {
-                self.record[$action.data('name')] = $(this).data('color');
-                self.do_reload();
-            });
-            $cpicker.remove();
-            return false;
-        });
-    },
     do_action_object: function ($action) {
         var button_attrs = $action.data();
         this.view.do_execute_action(button_attrs, this.view.dataset, this.id, this.do_reload);
@@ -652,19 +651,18 @@ instance.web_kanban.KanbanRecord = instance.web.OldWidget.extend({
         this.view.dataset.read_ids([this.id], this.view.fields_keys.concat(['__last_update'])).then(function(records) {
             if (records.length) {
                 self.set_record(records[0]);
-                self.do_render();
+                var $render = $(self.render());
+                self.$element.replaceWith($render);
+                self.$element = $render;
+                self.bind_events();
+                self.group.compute_cards_auto_height();
             } else {
                 self.destroy();
             }
         });
     },
-    do_render: function() {
-        this.$element.html(this.render());
-        this.bind_events();
-    },
-    kanban_color: function(variable) {
-        var number_of_color_schemes = 10,
-            index = 0;
+    kanban_getcolor: function(variable) {
+        var index = 0;
         switch (typeof(variable)) {
             case 'string':
                 for (var i=0, ii=variable.length; i<ii; i++) {
@@ -677,8 +675,12 @@ instance.web_kanban.KanbanRecord = instance.web.OldWidget.extend({
             default:
                 return '';
         }
-        var color = (index % number_of_color_schemes);
-        return 'oe_kanban_color_' + color;
+        var color = (index % this.view.number_of_color_schemes);
+        return color;
+    },
+    kanban_color: function(variable) {
+        var color = this.kanban_getcolor();
+        return color ? 'oe_kanban_color_' + color : '';
     },
     kanban_gravatar: function(email, size) {
         size = size || 22;
diff --git a/addons/web_kanban/static/src/xml/web_kanban.xml b/addons/web_kanban/static/src/xml/web_kanban.xml
index 953189683eb..b227949c309 100644
--- a/addons/web_kanban/static/src/xml/web_kanban.xml
+++ b/addons/web_kanban/static/src/xml/web_kanban.xml
@@ -57,18 +57,9 @@
     </div>
 </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">
-                    <span t-if="__debug__"><t t-esc="color_index"/></span>
-                </a>
-            </td>
-            <t t-if="((color_index + 1) % Math.round(colors.length / columns)) == 0">&lt;/tr&gt;&lt;tr&gt;</t>
-        </t>
-    </tr>
-    </table>
+    <li t-foreach="widget.view.number_of_color_schemes" t-as="color">
+        <a href="#" t-att-data-color="color_index" t-attf-class="oe_kanban_bgcolor_#{color}"/>
+    </li>
 </t>
 <div t-name="KanbanView.quick_create" class="oe_kanban_quick_create">
     <input t-att-placeholder="_t('Type name to create')"/>