[REF] web: prepare for new form view design

2 files changed, 29 insertions, 20 deletions

diff --git a/addons/web/static/src/js/fields/relational_fields.js b/addons/web/static/src/js/fields/relational_fields.js
index d70071b2fec..5c2b1795e9f 100644
--- a/addons/web/static/src/js/fields/relational_fields.js
+++ b/addons/web/static/src/js/fields/relational_fields.js
@@ -715,16 +715,19 @@ var FieldX2Many = AbstractField.extend({
             return $.when();
         }
         var arch = this.view.arch;
+        var viewType;
         if (arch.tag === 'tree') {
+            viewType = 'list';
             this.renderer = new ListRenderer(this, this.value, {
                 arch: arch,
                 mode: this.mode,
                 addCreateLine: !this.isReadonly && this.activeActions.create,
                 addTrashIcon: !this.isReadonly && this.activeActions.delete,
-                viewType: 'list',
+                viewType: viewType,
             });
         }
         if (arch.tag === 'kanban') {
+            viewType = 'kanban';
             var record_options = {
                 editable: false,
                 deletable: false,
@@ -733,9 +736,10 @@ var FieldX2Many = AbstractField.extend({
             this.renderer = new KanbanRenderer(this, this.value, {
                 arch: arch,
                 record_options: record_options,
-                viewType: 'kanban',
+                viewType: viewType,
             });
         }
+        this.$el.addClass('o_field_x2many o_field_x2many_' + viewType);
         return this.renderer ? this.renderer.appendTo(this.$el) : this._super();
     },
     /**
diff --git a/addons/web/static/src/less/form_view.less b/addons/web/static/src/less/form_view.less
index c87b0385554..96dad7e4de7 100644
--- a/addons/web/static/src/less/form_view.less
+++ b/addons/web/static/src/less/form_view.less
@@ -135,7 +135,7 @@
         .o-flex-display();
         .o-justify-content(space-between);
         padding-left: @odoo-horizontal-padding;
-        border-bottom: 1px solid @odoo-brand-secondary;
+        border-bottom: 1px solid @gray-lighter-dark;
         background-color: @odoo-view-background-color;
 
         > .o_statusbar_buttons, > .o_statusbar_status {
@@ -153,7 +153,9 @@
             .o-flex-flow(row, wrap);
 
             > .btn {
-                margin: 2px 3px 2px 0;
+                margin-right: 3px;
+                padding-top: 2px;
+                padding-bottom: 2px;
             }
         }
 
@@ -169,15 +171,17 @@
                 font-weight: bold;
                 position: relative;
                 padding-left: @odoo-statusbar-arrow-width*2;
-                color: @odoo-main-color-muted;
-                .o-transition(all, 0.2s);
+                color: @gray;
+                border-width: 0 0 0;
+                border-radius: 0;
+                .o-transition(all, 0.1s);
 
                 &:first-child {
                     padding-right: @odoo-horizontal-padding; // Compensate container padding
                 }
                 &:last-child {
                     padding-left: @odoo-horizontal-padding - 1;
-                    border-left: 1px solid @odoo-brand-lightsecondary;
+                    border-left: 1px solid @gray-lighter-dark;
                 }
 
                 &:active {
@@ -186,10 +190,8 @@
 
                 &.disabled {
                     opacity: 1.0;
-                    cursor: auto;
-                    pointer-events: auto;
-                    color: @odoo-main-text-color;
-                    border-left: 1px solid @odoo-brand-lightsecondary;
+                    color: @text-muted;
+                    border-left: 1px solid @gray-lighter-dark;
                 }
 
                 &:before, &:after {
@@ -197,8 +199,8 @@
                     display: block;
                     .o-position-absolute(0, -@odoo-statusbar-arrow-width + 1);
 
-                    border-top: @odoo-statusbar-height/2 solid transparent;
-                    border-bottom: @odoo-statusbar-height/2 solid transparent;
+                    border-top: floor(@odoo-statusbar-height/2) solid transparent;
+                    border-bottom: ceil(@odoo-statusbar-height/2) solid transparent;
                     border-right: none;
                     border-left: @odoo-statusbar-arrow-width solid @odoo-view-background-color;
                     .o-transition(border, 0.2s);
@@ -207,25 +209,28 @@
 
                 &:not(.disabled) {
                     &:hover, &:active, &:focus {
-                        color: white;
-                        background-color: @odoo-brand-optional;
+                        color: @odoo-brand-optional;
+                        background-color: @gray-lighter;
+
                         &:after {
-                            border-left-color: @odoo-brand-optional;
+                            border-left-color: @gray-lighter;
                         }
                     }
                 }
 
                 &:before {
                     right: -@odoo-statusbar-arrow-width;
-                    border-left-color: @odoo-brand-lightsecondary;
+                    border-left-color: @gray-lighter-dark;
                 }
 
                 &.btn-primary.disabled {
-                    color: @text-color;
-                    background-color: @odoo-brand-lightsecondary;
+                    color: @odoo-brand-primary;
+                    font-size: 11px;
+                    background-color: @gray-lighter;
+                    cursor: default;
 
                     &:after {
-                        border-left-color: @odoo-brand-lightsecondary;
+                        border-left-color: @gray-lighter;
                     }
                 }
             }