[FIX] web: review and fix kanban design

- Folded column design
- Adapt progressbar header layout
- Remove custom opacity mixin (use default o-hover-opacity)
- Remove columns' border (increase padding-right)
- Decrease counter opacity if no records
- Refine counter animations
- ...

addons/web/static/src/js/views/kanban/kanban_column.js

@@ -140,6 +140,7 @@ var KanbanColumn = Widget.extend({
             }
         });
         if (this.barOptions) {
+            this.$el.addClass('o_kanban_has_progressbar');
             this.progressBar = new KanbanColumnProgressBar(this, this.barOptions, this.data);
             defs.push(this.progressBar.appendTo(this.$header));
         }

addons/web/static/src/js/views/kanban/kanban_column_progressbar.js

@@ -174,18 +174,20 @@ var KanbanColumnProgressBar = Widget.extend({
         // Display and animate the counter number
         var start = this.prevTotalCounterValue;
         var end = this.totalCounterValue;
+        var animationClass = start > 999 ? 'o_kanban_grow' : 'o_kanban_grow_huge';
+
         if (start !== undefined && end > start && this.ANIMATE) {
             $({currentValue: start}).animate({currentValue: end}, {
                 duration: 1000,
                 start: function () {
-                    self.$counter.addClass('o_kanban_grow');
+                    self.$counter.addClass(animationClass);
                 },
                 step: function () {
                     self.$number.html(_getCounterHTML(this.currentValue));
                 },
                 complete: function () {
                     self.$number.html(_getCounterHTML(this.currentValue));
-                    self.$counter.removeClass('o_kanban_grow');
+                    self.$counter.removeClass(animationClass);
                 },
             });
         } else {

addons/web/static/src/less/kanban_column_progressbar.less

@@ -1,3 +1,4 @@
+@o-kanban-counter-header-height: @o-kanban-header-title-height*0.6;
 
 .o-kanban-css-filter(@class, @accent-color) {
     // Provide CSS reordering and highlight
@@ -34,12 +35,22 @@
 
         .o_kanban_record:not(.oe_kanban_card_@{class}) {
             order: 3;
-            opacity: 0.5;
+            .o-hover-opacity(0.5);
             box-shadow: none;
+        }
+    }
+}
 
-            &:hover {
-                opacity: 1;
-            }
+// If columns has the progressbar, adapt the layout
+.o_kanban_view .o_kanban_group.o_kanban_has_progressbar {
+    > .o_kanban_header .o_kanban_header_title {
+        height: @o-kanban-counter-header-height;
+        margin-top: 5px;
+    }
+
+    &.o_kanban_no_records {
+        .o_kanban_counter {
+            opacity: 0.3;
         }
     }
 }
@@ -48,12 +59,12 @@
     position: relative;
     .o-flex-display();
     .o-align-items(center);
-    height: 30px;
+    .o-transition(opacity, 0.3s);
     margin-bottom: @o-kanban-record-margin*2;
 
     > .o_kanban_counter_progress {
         width: 76%;
-        height: @font-size-base;
+        height: @font-size-small;
         margin-bottom: 0;
         background-color: @gray-lighter-dark;
         box-shadow: none;
@@ -80,9 +91,19 @@
         margin-left: 3%;
         color: @headings-color;
         text-align: right;
+        .o-transform-origin(right, center);
 
         &.o_kanban_grow {
-            .o-animation(grow, 400ms, ease-in, 200ms);
+            .o-animation(grow, 1s, ease);
+        }
+
+        &.o_kanban_grow_huge {
+            .o-animation(grow_huge, 1s, ease);
+        }
+
+        // Target currency icon
+        > span {
+            margin-left: 2px;
         }
     }
 }
@@ -109,8 +130,20 @@
     0% {
         transform: scale3d(1, 1, 1);
     }
-    50% {
-        transform: scale3d(1.5, 1.5, 1.5);
+    30% {
+        transform: scale3d(1.1, 1.1, 1.1);
+    }
+    100% {
+        transform: scale3d(1, 1, 1);
+    }
+}
+
+@keyframes grow_huge {
+    0% {
+        transform: scale3d(1, 1, 1);
+    }
+    30% {
+        transform: scale3d(1.3, 1.3, 1.3);
     }
     100% {
         transform: scale3d(1, 1, 1);

addons/web/static/src/less/kanban_view.less

@@ -4,6 +4,8 @@
 @o-kanban-default-record-width: 300px;
 @o-kanban-small-record-width: 240px;
 
+@o-kanban-header-title-height: 50px;
+
 @o-kanban-image-width: 64px;
 @o-kanban-inside-vgutter: 8px;
 @o-kanban-inside-hgutter: 8px;
@@ -15,18 +17,12 @@
 // ------- Kanban grouped mixins -------
 .o-kanban-icon(@base-opacity: 0.5) {
     display: block;
-    line-height: 50px;
+    line-height: @o-kanban-header-title-height;
     text-align: center;
     color: @odoo-main-text-color;
-    font-size: 15px;
+    font-size: @font-size-small;
     cursor: pointer;
-    .o-kanban-hover-effect(@base-opacity);
-}
-.o-kanban-hover-effect(@base-opacity) when (@base-opacity < 1) {
-    opacity: @base-opacity;
-    &:hover {
-        opacity: 1;
-    }
+    .o-hover-opacity(@base-opacity);
 }
 .o-kanban-tag-color(@size) when (@size >= 0) {
     .o-kanban-tag-color(@size - 1);
@@ -44,22 +40,23 @@
     position: relative;
     .o-flex(0, 0, auto);
     margin: 0;
-    padding: 0 @o-kanban-group-padding * 0.5;
+    padding: 0 floor(@o-kanban-group-padding * 0.7);
     cursor: pointer;
 }
 .o-kanban-header-title() {
     .o-flex-display();
-    height: 50px;
+    .o-align-items(center);
+    height: @o-kanban-header-title-height;
     line-height: 2.2;
     color: @headings-color;
 }
 .o-kanban-v-title() {
-    .o-position-absolute(@o-kanban-inside-vgutter * 2, @left: -@o-kanban-inside-vgutter * 1.3);
+    .o-position-absolute(@o-kanban-inside-vgutter * 2, @left: floor(-@o-kanban-inside-vgutter * 1.2));
     .o-transform-origin(left, bottom, @z: 0);
     .o-transform(rotate(90deg));
     overflow: visible;
     white-space: nowrap;
-    font-size: 16px;
+    font-size: 15px;
 }
 
 // ------- Kanban records mixins -------
@@ -164,7 +161,7 @@
             margin: 2px 0 8px;
             padding: 3px 6px;
             color: @headings-color;
-            font-weight: bold;
+            font-weight: 500;
         }
     }
 
@@ -307,7 +304,7 @@
                 font-weight: 500;
                 background-color: transparent;
                 .o-kanban-tag-color(12);
-                .o-kanban-hover-effect(0.7);
+                .o-hover-opacity(0.7);
 
                 span {
                     display: inline-block;
@@ -449,18 +446,13 @@
     // Kanban Grouped Layout - Column default
     .o_kanban_group {
         .o-flex(0, 0, auto);
-        padding: 0 @o-kanban-group-padding @o-kanban-group-padding;
-        border: 1px solid @gray-lighter-dark;
-        background-color: @gray-lighter;
-        border-width: 0 1px;
-        margin-left: -1px;
+        padding: 0 @o-kanban-group-padding*2 @o-kanban-group-padding @o-kanban-group-padding;
 
         .o_kanban_header > .o_kanban_header_title {
             .o-kanban-header-title();
 
             .o_column_title {
                 .o-flex(1, 1, auto);
-                padding-top: 5px;
                 .o-text-overflow();
                 font-size: 16px;
                 font-weight: 500;

addons/web/static/src/xml/kanban.xml

@@ -9,7 +9,7 @@
 </t>
 
 <t t-name="KanbanView.Group">
-    <div class="o_kanban_group" t-att-data-id="widget.id">
+    <div t-attf-class="o_kanban_group#{widget.data_records.length == 0 ? ' o_kanban_no_records' : ''}" t-att-data-id="widget.id">
         <div class="o_kanban_header">
             <div class="o_kanban_header_title" t-att-title="widget.data_records.length + ' records'" data-delay="500">
                 <span class="o_column_title"><t t-esc="widget.title"/></span>