[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>

1 files changed, 8 insertions, 83 deletions

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;
         }
     }