[IMP] web: display stat button of form_view similar to enterprise

In order to display properly the futur ribbon, community stat buttons to
be displayed like in enterprise

task-2035081

closes odoo/odoo#35040

Signed-off-by: VincentSchippefilt <VincentSchippefilt@users.noreply.github.com>

3 files changed, 184 insertions, 88 deletions

diff --git a/addons/web/static/src/scss/form_view.scss b/addons/web/static/src/scss/form_view.scss
index 35c5b6c5d74..e742f8f059b 100644
--- a/addons/web/static/src/scss/form_view.scss
+++ b/addons/web/static/src/scss/form_view.scss
@@ -1,3 +1,26 @@
+// Define left and right padding according to screen resolution
+@mixin o-form-sheet-inner-left-padding {
+    padding-left: $o-horizontal-padding;
+    @include media-breakpoint-between(lg, xl, $o-extra-grid-breakpoints) {
+        padding-left: $o-horizontal-padding*2;
+    }
+}
+@mixin o-form-sheet-inner-right-padding {
+    padding-right: $o-horizontal-padding;
+    @include media-breakpoint-between(lg, xl, $o-extra-grid-breakpoints) {
+        padding-right: $o-horizontal-padding*2;
+    }
+}
+// Compensate margins
+@mixin o-form-sheet-negative-margin {
+    margin-left: -$o-horizontal-padding;
+    margin-right: -$o-horizontal-padding;
+    @include media-breakpoint-between(lg, xl, $o-extra-grid-breakpoints) {
+        margin-left: -$o-horizontal-padding*2;
+        margin-right: -$o-horizontal-padding*2;
+    }
+}
+
 .o_form_view {
     background-color: $o-view-background-color;
 
@@ -137,10 +160,6 @@
     // Non-chatter rules
     .o_form_sheet_bg {
         position: relative;
-
-        > .o_form_sheet {
-            margin: $o-sheet-vpadding*0.5 auto;
-        }
     }
 
     // Statusbar
@@ -278,13 +297,148 @@
 
     // Button box
     .oe_button_box {
-        .oe_stat_button {
+        position: relative;
+        display: block;
+        margin-bottom: $o-sheet-vpadding;
+        margin-top: -$o-sheet-vpadding;
+        @include o-form-sheet-negative-margin;
+        text-align: right;
+        // Use box-shadow instead of border-bottom because some button boxes are
+        // empty in some cases and we do not want to see a floating border in
+        // that cases.
+        box-shadow: inset 0 -1px 0 gray('400');
+
+        &.o_full .oe_stat_button:not(.o_invisible_modifier) ~ .oe_stat_button {
+            border-left: 1px solid gray('400');
+        }
+        &.o_not_full .oe_stat_button {
+            border-left: 1px solid gray('400');
+        }
+
+        > .btn.oe_stat_button, > .o_dropdown_more {
+            flex: 0 0 auto;
+            width: percentage(1/3); // Adapt the number of visible buttons for each screen width
+            @include media-breakpoint-up(md) {
+                width: percentage(1/5);
+            }
+            @include media-breakpoint-up(lg) {
+                width: percentage(1/7);
+            }
+            @include media-breakpoint-up(xl) {
+                width: percentage(1/8);
+            }
+        }
+
+        .btn.oe_stat_button {
+            color: $o-main-text-color;
+            height: $o-statbutton-height;
+            padding: 0 $o-statbutton-spacing 0 0; // padding-left will be achieved through margin-left of content
+            text-align: left;
+            white-space: nowrap;
+            background-color: transparent;
+            opacity: 0.8;
+            border-radius: 0px;
+
+            &:hover, &:focus {
+                background-color: rgba(black, 0.03);
+                color: inherit;
+                opacity: 1;
+            }
+
+            > .o_button_icon {
+                margin-left: $o-statbutton-spacing; // To create the button padding left (firefox bug)
+                display: inline-block;
+                vertical-align: middle;
+                line-height: $o-statbutton-height;
+                width: 30%;
+
+                &:before {
+                    font-size: 22px;
+                    vertical-align: middle;
+                }
+            }
+
+            > .o_field_percent_pie {
+                margin-left: $o-statbutton-spacing; // To create the button padding left (firefox bug)
+            }
+
+            // Some buttons only display text without using StatInfo template
+            > span {
+                @include o-text-overflow(block);
+                white-space: normal; // text on several lines if needed
+            }
+
+            > .o_stat_info, > span { // contains the value and text
+                display: inline-block;
+                vertical-align: middle;
+                font-weight: 500;
+
+                max-width: 70%;
+                padding-right: $o-statbutton-spacing;
+                line-height: 1.3;
+
+                > .o_stat_value, > .o_stat_text {
+                    @include o-text-overflow(block);
+                }
+
+                .o_stat_value {
+                    font-weight: 700;
+                    color: $o-brand-odoo;
+                    line-height: 1.2;
+                }
+                .o_stat_text {
+                    line-height: 1.2;
+                }
+            }
+
             &:not(:hover) .o_stat_info > .o_hover {
                 display: none !important;
             }
             &:hover .o_stat_info > .o_not_hover {
                 display: none !important
             }
+
+            &.o_button_more {
+                text-align: center;
+                &:after {
+                    margin-left: 5px;
+                    @include o-caret-down;
+                }
+                &[aria-expanded="true"]:after {
+                    margin-left: 5px;
+                    @include o-caret-up;
+                }
+            }
+        }
+
+        > .o_dropdown_more {
+            @include o-position-absolute(100%, 0);
+            min-width: 0;
+            border: none;
+            border: 1px solid gray('300');
+            margin: 0;
+            padding: 0;
+            @include media-breakpoint-down(sm) {
+                // avoid b4 drowdown inline style
+                position: relative !important;
+                transform: none !important;
+                will-change: inherit!important;
+                margin-bottom: 20px;
+                width: 100%;
+                border-width: 0px;
+            }
+            > .btn.oe_stat_button {
+                width: 100%;
+                border: none;
+                border-bottom: 1px solid gray('300');
+
+                @include media-breakpoint-down(sm) {
+                    display: inline-block;
+                    width: percentage(1/3);
+                    // avoid touch_device style
+                    padding: inherit!important;
+                }
+            }
         }
     }
 
@@ -301,6 +455,19 @@
         }
     }
 
+    // Avatar
+    .oe_avatar {
+        float: right;
+        margin-bottom: 10px;
+
+        > img {
+            max-width: $o-avatar-size;
+            max-height: $o-avatar-size;
+            vertical-align: top;
+            border: 1px solid $o-main-color-muted;
+        }
+    }
+
     // Groups
     .o_group {
         display: inline-block;
diff --git a/addons/web/static/src/scss/form_view_extra.scss b/addons/web/static/src/scss/form_view_extra.scss
index 0d59483c2d8..b9bd6775acd 100644
--- a/addons/web/static/src/scss/form_view_extra.scss
+++ b/addons/web/static/src/scss/form_view_extra.scss
@@ -14,11 +14,18 @@
             min-width: $sheet-min-width;
             max-width: $sheet-max-width;
             min-height: 330px;
-            padding: 16px;
             border: 1px solid #c8c8d3;
             box-shadow: 0 4px 20px rgba(0,0,0,0.15);
             background: white;
 
+            margin: $o-sheet-vpadding*0.2 auto;
+            @include media-breakpoint-up(md) {
+                margin: $o-sheet-vpadding*0.5 auto;
+            }
+            padding: $o-sheet-vpadding;
+            @include o-form-sheet-inner-right-padding;
+            @include o-form-sheet-inner-left-padding;
+
             .ui-tabs {
                 margin: 0 -16px;
             }
@@ -30,11 +37,6 @@
 
     // Button box
     .oe_button_box {
-        width: 400px;
-        text-align: right;
-        float: right;
-        margin-bottom: 4px;
-
         &, & + .oe_avatar {
             + .oe_title {
                 width: 400px;
@@ -48,89 +50,12 @@
         }
 
         .oe_stat_button {
-            color: $o-main-text-color;
-            text-align: left;
-            width: 132px !important;
-            height: 40px;
-            margin: 0px -1px -1px 0px;
-            padding: 0;
-            border-radius: 0;
-            border-color: #ccc;
-            background: white;
-            outline: none;
-
             &:hover {
                 background-color: #e6e6e6;
             }
-
             .o_button_icon {
-                display: inline-block;
-                width: 37px;
-                padding: 0px 3px;
-                text-align: center;
-                vertical-align: middle;
                 color: #7C7BAD;
-                font-size: 24px;
-            }
-
-            // Some buttons only display text without using StatInfo template
-            .o_stat_info, > span { // contains the value and text
-                display: inline-block;
-                vertical-align: middle;
-                max-width: 70%;
-                line-height: 1.2;
-
-                > .o_stat_value, > .o_stat_text {
-                    @include o-text-overflow(block);
-                }
-
-                .o_stat_value {
-                    font-weight: 700;
-                    color: $o-brand-odoo;
-                }
-                .o_stat_text {
-                    font-size: small;
-                }
-            }
-            > span {
-                font-size: small;
-                white-space: normal; // text on several lines if needed
             }
-
-            > div {
-                text-align: left;
-                padding: 0;
-                line-height: 120%;
-                vertical-align: middle;
-            }
-        }
-
-        &.o_full {
-            position: relative;
-            .o_button_more {
-                padding: 0 10px;
-            }
-            .o_dropdown_more {
-                @include o-position-absolute($top: 100%, $right: 0);
-                min-width: 0;
-                padding: 0px;
-            }
-        }
-    }
-
-    // Avatar
-    .oe_avatar {
-        float: left;
-        > img {
-            max-height: 90px;
-            max-width: 90px;
-            margin-bottom: 10px;
-            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
-            border: none;
-        }
-        + .oe_title {
-            padding-left: 95px;
-            margin-left: 5px;
         }
     }
 
diff --git a/addons/web/static/src/scss/primary_variables.scss b/addons/web/static/src/scss/primary_variables.scss
index 2370ffb7be2..6610cd97c73 100644
--- a/addons/web/static/src/scss/primary_variables.scss
+++ b/addons/web/static/src/scss/primary_variables.scss
@@ -62,6 +62,10 @@ $o-dropdown-hpadding: 20px;
 
 $o-sheet-vpadding: 24px;
 
+$o-statbutton-height: 44px;
+$o-statbutton-vpadding: 0px;
+$o-statbutton-spacing: 6px;
+
 $o-modal-lg: 980px;
 $o-modal-md: 650px;