[REF] web: less: form view's statusbar

Move the statusbar rules to community as both webclient now
share the same js basecode for the statusbar.

5 files changed, 145 insertions, 132 deletions

diff --git a/addons/web/static/src/less/form_view.less b/addons/web/static/src/less/form_view.less
index fb15c87026e..a422a04f2c7 100644
--- a/addons/web/static/src/less/form_view.less
+++ b/addons/web/static/src/less/form_view.less
@@ -76,6 +76,93 @@
         }
     }
 
+    // Header containing status/workflow buttons
+    .o_form_statusbar {
+        background-color: @odoo-view-background-color;
+        position: relative; // Needed for the "More" dropdown
+        border-bottom: 1px solid @odoo-brand-secondary;
+
+        > .o_statusbar_status {
+            > .o_arrow_button {
+                min-height: @odoo-statusbar-height;
+                font-size: 11px;
+                font-weight: bold;
+                position: relative;
+                padding-left: @odoo-statusbar-arrow-width*2;
+                color: @odoo-main-color-muted;
+                .o-transition(all, 0.2s);
+
+                &: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;
+                }
+
+                &:active {
+                    box-shadow: none;
+                }
+
+                &.disabled {
+                    opacity: 1.0;
+                    cursor: auto;
+                    pointer-events: auto;
+                    color: @odoo-main-text-color;
+                    border-left: 1px solid @odoo-brand-lightsecondary;
+                }
+
+                &:before, &:after {
+                    content: " ";
+                    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-right: none;
+                    border-left: @odoo-statusbar-arrow-width solid @odoo-view-background-color;
+                    .o-transition(border, 0.2s);
+                    -moz-transform: scale(0.9999); // Smooth the triangle on firefox
+                }
+
+                &:not(.disabled) {
+                    &:hover, &:active, &:focus {
+                        color: white;
+                        background-color: @odoo-brand-optional;
+                        &:after {
+                            border-left-color: @odoo-brand-optional;
+                        }
+                    }
+                }
+
+                &:before {
+                    right: -@odoo-statusbar-arrow-width;
+                    border-left-color: @odoo-brand-lightsecondary;
+                }
+
+                &.btn-primary.disabled {
+                    color: @text-color;
+                    background-color: @odoo-statusbar-disabled-bg;
+
+                    &:before {
+                        border-left-color: @odoo-brand-lightsecondary;
+                    }
+                    &:after {
+                        border-left-color: @odoo-statusbar-disabled-bg;
+                    }
+                }
+            }
+            .o-status-more {
+                .o-position-absolute(100%, 0);
+                min-width: 100px;
+                > li > button {
+                    width: 100%;
+                    text-align: left;
+                }
+            }
+        }
+    }
+
     // Button box
     .oe_button_box {
         .oe_stat_button {
@@ -93,7 +180,7 @@
         .o_priority > .o_priority_star {
             font-size: inherit;
         }
-    }  
+    }
 
     // Groups
     .o_group {
diff --git a/addons/web/static/src/less/form_view_extra.less b/addons/web/static/src/less/form_view_extra.less
index 300724e2819..710b668c053 100644
--- a/addons/web/static/src/less/form_view_extra.less
+++ b/addons/web/static/src/less/form_view_extra.less
@@ -19,120 +19,6 @@
     &.o_form_nosheet > header {
         margin: -16px -16px 0 -16px;
     }
-    ul.oe_form_status, ul.oe_form_status_clickable {
-        display: inline-block;
-        margin: 0;
-        padding: 0 18px 0 0;
-        li {
-            display: inline-block;
-            list-style-type: none;
-            // It is probably a bad idea to modify this margin
-            margin: 0 -18px 0 0;
-            padding: 0;
-            height: 30px;
-            .o-vertical-gradient(#fcfcfc, #dedede);
-            &:first-child > .label {
-                border-left: 1px solid #cacaca;
-                padding-left: 14px;
-            }
-            &:last-child {
-                border-right: 1px solid #cacaca;
-                > .label {
-                    padding-right: 14px;
-                }
-                > .arrow {
-                    display: none;
-                }
-            }
-            > .label {
-                color: #4c4c4c;
-                text-shadow: 0 1px 1px #fcfcfc, 0 -1px 1px #dedede;
-                padding: 7px;
-                display: inline-block;
-                padding-left: 24px;
-                margin: 0;
-                position: relative;
-                // Customize for statusbar label
-                line-height: normal;
-                font-size: 100%;
-                font-weight: normal;
-                // End of customize
-            }
-            > .arrow {
-                width: 17px;
-                height: 30px;
-                display: inline-block;
-                vertical-align: top;
-                overflow: hidden;
-                margin-left: -5px;
-                span {
-                    position: relative;
-                    width: 24px;
-                    height: 24px;
-                    display: inline-block;
-                    margin-left: -12px;
-                    margin-top: 3px;
-                    border-radius: 3px;
-                    box-shadow: -1px 1px 2px rgba(255,255,255,0.2), inset -1px 1px 1px rgba(0,0,0,0.2);
-                    .o-skew-gradient(#fcfcfc, #dedede);
-                    .o-transform(rotate(45deg));
-                }
-            }
-        }
-        ul.oe_dropdown_menu {
-            display: none;
-            padding: 0;
-            min-width: 0;
-            &.oe_opened {
-                display: block;
-            }
-            li {
-                margin: 0;
-                width: 100%;
-                span.label {
-                    padding-left: 14px;
-                }
-            }
-        }
-        li.oe_active {
-            .o-vertical-gradient(lighten(@odoo-brand-primary, 15%), darken(@odoo-brand-primary, 15%));
-            > .arrow span {
-                .o-skew-gradient(lighten(@odoo-brand-primary, 15%), darken(@odoo-brand-primary, 15%));
-            }
-            > .label {
-                color: white;
-                text-shadow: 0 1px 1px #729fcf, 0 -1px 1px #3465a4;
-            }
-        }
-    }
-    ul.oe_form_status_clickable {
-        li {
-            cursor: pointer;
-            &:hover {
-                .o-vertical-gradient(darken(#fcfcfc, 8%), darken(#dedede, 8%));
-                > .label {
-                    text-shadow: 0 -1px 1px #fcfcfc, 0 1px 1px #dedede;
-                }
-                > .arrow span {
-                    .o-vertical-gradient(darken(#fcfcfc, 8%), darken(#dedede, 8%));
-                }
-            }
-            > .label {
-                color: @link-color;
-            }
-        }
-        li.oe_active {
-            &:hover {
-                .o-vertical-gradient(@odoo-brand-primary, darken(@odoo-brand-primary, 30%));
-                > .label {
-                    text-shadow: 0 -1px 1px #729fcf, 0 1px 1px #3465a4;
-                }
-                > .arrow span {
-                    .o-skew-gradient(@odoo-brand-primary, darken(@odoo-brand-primary, 30%));
-                }
-            }
-        }
-    }
 
     // Button box
     .oe_button_box {
diff --git a/addons/web/static/src/less/form_view_layout.less b/addons/web/static/src/less/form_view_layout.less
index 111805c7325..1f3cb374036 100644
--- a/addons/web/static/src/less/form_view_layout.less
+++ b/addons/web/static/src/less/form_view_layout.less
@@ -88,6 +88,61 @@
         }
     }
 
+     // Header containing status/workflow buttons
+    .o_form_statusbar {
+        .o-flex(0, 0, auto);
+        .o-flex-display();
+        .o-justify-content(space-between);
+
+        padding-left: @odoo-horizontal-padding;
+
+        > .o_statusbar_buttons, > .o_statusbar_status {
+            .o-flex-display();
+            .o-align-items(center);
+            .o-align-content(space-around);
+        }
+
+        > .o_form_field {
+            .o-align-self(center);
+            margin-bottom: 0px;
+        }
+
+        > .o_statusbar_buttons {
+            .o-flex-flow(row, wrap);
+
+            > .btn {
+                margin: 2px 3px 2px 0;
+            }
+        }
+
+        > .o_statusbar_status {
+            .o-flex-flow(row-reverse, wrap-reverse);
+            .o-align-self(stretch);
+            .o-align-items(stretch);
+            overflow-x: hidden; // to prevent horizontal scroll due to last arrow
+        }
+
+        // Touch device mode
+        > .o_statusbar_buttons > .btn-group {
+            > .dropdown-toggle {
+                &:after {
+                    .o-caret-down();
+                    margin-left: @odoo-form-spacing-unit;
+                }
+            }
+
+            > .dropdown-menu {
+                padding: 5px 0 2px 0;
+                min-width: 100px;
+
+                > li > .btn {
+                    min-width: 100%;
+                    margin-bottom: 3px;
+                }
+            }
+        }
+    }
+
     // Title
     .oe_title {
         > h1, > h2, > h3 {
diff --git a/addons/web/static/src/less/form_view_layout_extra.less b/addons/web/static/src/less/form_view_layout_extra.less
index 0845977ef4d..51c1c3f731e 100644
--- a/addons/web/static/src/less/form_view_layout_extra.less
+++ b/addons/web/static/src/less/form_view_layout_extra.less
@@ -28,22 +28,6 @@
         }
     }
 
-    // Header containing status/workflow buttons
-    > header {
-        padding-left: 14px;
-        .clearfix();
-        ul:not(.oe_tooltip_technical):not(.oe_dropdown_menu) {
-            display: inline-block;
-            float: right;
-        }
-        > button {
-            margin: 0 2px;
-        }
-        > span {
-            margin-left: 4px;
-        }
-    }
-
     // Button box
     .oe_button_box {
         width: 400px;
diff --git a/addons/web/static/src/less/variables.less b/addons/web/static/src/less/variables.less
index 252bfbf5b92..3ba7f7d0e07 100644
--- a/addons/web/static/src/less/variables.less
+++ b/addons/web/static/src/less/variables.less
@@ -47,8 +47,9 @@
 
 @odoo-avatar-size: 90px;
 
-@odoo-statusbar-height: 36px;
+@odoo-statusbar-height: 33px;
 @odoo-statusbar-arrow-width: @odoo-statusbar-height/3;
+@odoo-statusbar-disabled-bg: lighten(@odoo-brand-lightsecondary, 7%);
 
 @odoo-label-font-size-factor: 0.8;
 @odoo-navbar-height: 34px;