[MERGE] new kanban view

This branch introduces the new kanban view.  It is not completely
compatible with the previous version.  Here are a few importants
points to be aware of:
* the kanban view template is rendered directly, not put inside a div.
  It means that if a template has more than one root, chaos will ensue
* kanban view has been split into several files, and various js modules
  have changed.  For example, the KanbanRecord class is now exported by
  the 'web_kanban.Record' module.  So, require statements need to be
  updated
* records do not have access to the view (i.e., record.view.is_action_enabled('edit'))
  You can use the 'editable' and 'deletable' key instead

1 files changed, 189 insertions, 0 deletions

diff --git a/addons/web/static/src/less/utils.less b/addons/web/static/src/less/utils.less
new file mode 100644
index 00000000000..8b8d02898e6
--- /dev/null
+++ b/addons/web/static/src/less/utils.less
@@ -0,0 +1,189 @@
+// ------------------------------------------------------------------
+// Margin
+// ------------------------------------------------------------------
+.utils-margin-loop(@index) when (@index < 256) {
+    .o-mt@{index} {margin-top: @index px;}
+    .o-mb@{index} {margin-bottom: @index px;}
+    .o-mr@{index} {margin-right: @index px;}
+    .o-ml@{index} {margin-left: @index px;}
+
+    .utils-margin-loop(@index * 2);
+}
+.utils-margin-loop(2);
+
+// ------------------------------------------------------------------
+// Padding
+// ------------------------------------------------------------------
+.o-webclient-padding(@top: 0px, @right: @odoo-horizontal-padding, @bottom: 0px, @left: @odoo-horizontal-padding) {
+    padding-top: @top;
+    padding-right: @right;
+    padding-bottom: @bottom;
+    padding-left: @left;
+}
+
+// ------------------------------------------------------------------
+// Caret
+// ------------------------------------------------------------------
+.utils-caret-boilerplate() {
+    content: "";
+    display: inline-block;
+    width: 0;
+    height: 0;
+    vertical-align: middle;
+}
+.o-caret-down(@caret-width: @caret-width-base) {
+    .utils-caret-boilerplate;
+    border-bottom: 0;
+    border-left: @caret-width solid transparent;
+    border-right: @caret-width solid transparent;
+    border-top: @caret-width solid;
+    -moz-transform: scale(0.9999); // Smooth the caret on firefox
+}
+.o-caret-up(@caret-width: @caret-width-base) {
+    .utils-caret-boilerplate;
+    border-bottom: @caret-width solid;
+    border-left: @caret-width solid transparent;
+    border-right: @caret-width solid transparent;
+    border-top: 0;
+    -moz-transform: scale(0.9999); // Smooth the caret on firefox
+}
+.o-caret-left(@caret-width: @caret-width-base) {
+    .utils-caret-boilerplate;
+    border-bottom: @caret-width solid transparent;
+    border-left: 0;
+    border-right: @caret-width solid;
+    border-top: @caret-width solid transparent;
+    -moz-transform: scale(0.9999); // Smooth the caret on firefox
+}
+.o-caret-right(@caret-width: @caret-width-base) {
+    .utils-caret-boilerplate;
+    border-bottom: @caret-width solid transparent;
+    border-left: @caret-width solid;
+    border-right: 0;
+    border-top: @caret-width solid transparent;
+    -moz-transform: scale(0.9999); // Smooth the caret on firefox
+}
+
+// ------------------------------------------------------------------
+// Vendor prefixes
+// ------------------------------------------------------------------
+// Flex
+.o-flex-display() {
+    display: -ms-flexbox;
+    display: -moz-box;
+    display: -webkit-box;
+    display: -webkit-flex;
+
+    display: flex;
+}
+.o-inline-flex-display() {
+    display: -ms-inline-flexbox;
+    display: -moz-inline-box;
+    display: -webkit-inline-box;
+    display: -webkit-inline-flex;
+
+    display: inline-flex;
+}
+.o-flex-flow(@direction, @wrap) {
+    -ms-flex-flow: @direction @wrap;
+    -moz-flex-flow: @direction @wrap;
+    -webkit-flex-flow: @direction @wrap;
+
+    flex-flow: @direction @wrap;
+}
+.o-flex(@grow, @schrink, @basis) {
+    -ms-flex: @grow @schrink @basis;
+    -moz-flex: @grow @schrink @basis;
+    -webkit-box-flex: @grow;
+    -webkit-flex: @grow @schrink @basis;
+    
+    flex: @grow @schrink @basis;
+}
+.o-justify-content(@justify) {
+    -moz-justify-content: @justify;
+    -webkit-justify-content: @justify;
+
+    justify-content: @justify;
+}
+.o-align-content(@align) {
+    -webkit-align-content: @align;
+
+    align-content: @align;
+}
+.o-align-items(@align) {
+    -webkit-align-items: @align;
+
+    align-items: @align;
+}
+.o-align-self(@align) {
+    -webkit-align-self: @align;
+
+    align-self: @align;
+}
+
+// Background-size
+// https://css-tricks.com/perfect-full-page-background-image/
+.o-background-size(@size) {
+    -webkit-background-size: @size;
+    -moz-background-size: @size;
+    -o-background-size: @size;
+    background-size: @size;
+}
+
+// ------------------------------------------------------------------
+// Dropdowns
+// ------------------------------------------------------------------
+.o-selected-li() {
+    li {
+        position: relative;
+        > a {
+            padding: 3px 25px;
+            color: @odoo-main-text-color;
+            &:hover {
+                color: darken(@odoo-main-text-color, 10%);
+            }
+        }
+        &.selected {
+            > a {
+                color: darken(@odoo-main-text-color, 10%);
+                font-weight: bold;
+                &:before {
+                    font-family: FontAwesome;
+                    position: absolute;
+                    left: 6px;
+                    content: "\f00c";
+                }
+            }
+        }
+    }
+}
+
+// ------------------------------------------------------------------
+// Select Appearance
+// ------------------------------------------------------------------
+.o-appearance(@value) {
+    -webkit-appearance: @value;
+    -moz-appearance: @value;
+    appearance: @value;
+}
+
+// ------------------------------------------------------------------
+// Transform
+// ------------------------------------------------------------------
+.o-transform-origin(@x: 50%, @y: 50%, @z: 0) {
+    -ms-transform-origin: @x @y @z;
+    -webkit-transform-origin: @x @y @z;
+    -moz-transform-origin: @x @y @z;
+    transform-origin: @x @y @z;
+}
+
+// ------------------------------------------------------------------
+// Position absolute
+// ------------------------------------------------------------------
+.o-position-absolute(@top: auto, @right: auto, @bottom: auto, @left: auto) {
+    position: absolute;
+    top: @top;
+    left: @left;
+    bottom: @bottom;
+    right: @right;
+}
\ No newline at end of file