[FIX] web: fix multiple display errors

This commit will fix some display errors :
 - The margin space between two btn-group on the control panel was too big;
-  The "Group By" menu was lacking an option to add the "fa-caret-down" to looks like other
    Dropdowns;
- The "Group By" menu on the graph view, when used as a subview, has been place in its own
    btn-group to behave exactly as the "Measures" menu;
- The background of the headers on the pivot table wasn't always gray;
- Some borders of the pivot table were missing.

closes odoo/odoo#76529

X-original-commit: 0ffe18927c2f086529de168b5665766a1b9261f7
Related: odoo/enterprise#20872
Signed-off-by: Lucas Perais (lpe) <lpe@odoo.com>
Signed-off-by: Jorge Pinna Puissant (jpp) <jpp@odoo.com>

addons/board/static/src/legacy/scss/dashboard.scss

@@ -138,6 +138,11 @@
                     height: calc(100vh - #{$o-navbar-height});
                 }
             }
+
+            //Add padding to the old dashboard view (To remove when board is converted to OWL)
+            .o_dashboard_view {
+                padding: $o-sheet-vpadding 0;
+            }
         }
     }
 }

addons/web/static/src/search/control_panel/control_panel.scss

@@ -37,7 +37,7 @@
         > .btn-group {
             margin-bottom: map-get($spacers, 2);
             // Before owl, the margin was handled by a real space!
-            margin-right: map-get($spacers, 1);
+            margin-right: map-get($spacers, 3);
         }
 
         > .o_cp_action_menus {

addons/web/static/src/search/group_by_menu/group_by_menu.js

@@ -69,4 +69,5 @@ GroupByMenu.components = { CustomGroupByItem };
 GroupByMenu.template = "web.GroupByMenu";
 GroupByMenu.defaultProps = {
     showActiveItems: true,
+    showCaretDown: false,
 };

addons/web/static/src/search/group_by_menu/group_by_menu.xml

@@ -9,7 +9,7 @@
             >
             <t t-set-slot="toggler">
                 <i class="small mr-1" t-att-class="icon"/>
-                <span class="o_dropdown_title">Group By</span>
+                <span class="o_dropdown_title">Group By<t t-if="props.showCaretDown"> <i class="fa fa-caret-down ml-1"/></t></span>
             </t>
             <t t-set="currentGroup" t-value="null"/>
             <t t-foreach="items" t-as="item" t-key="item.id">

addons/web/static/src/views/graph/graph_view.xml

@@ -2,15 +2,17 @@
 <templates xml:space="preserve">
 
     <t t-name="web.GraphView.Buttons" owl="1">
-        <div class="btn-group" role="toolbar" aria-label="Main actions">
-            <div t-on-dropdown-item-selected="onMeasureSelected">
-                <t t-call="web.ReportViewMeasures">
-                    <t t-set="measures" t-value="model.metaData.measures"/>
-                    <t t-set="activeMeasures" t-value="[model.metaData.measure]"/>
-                </t>
-            </div>
-            <GroupByMenu t-if="props.display and props.display['bottom-right'] === false"/>
+        <div class="btn-group" role="toolbar" aria-label="Main actions" t-on-dropdown-item-selected="onMeasureSelected">
+            <t t-call="web.ReportViewMeasures">
+                <t t-set="measures" t-value="model.metaData.measures"/>
+                <t t-set="activeMeasures" t-value="[model.metaData.measure]"/>
+            </t>
         </div>
+        <t t-if="props.display and props.display['bottom-right'] === false">
+            <div class="btn-group" role="toolbar" aria-label="Group By">
+                <GroupByMenu showCaretDown="true"/>
+            </div>
+        </t>
         <div class="btn-group" role="toolbar" aria-label="Change graph">
             <button class="btn btn-secondary fa fa-bar-chart-o o_graph_button" data-tooltip="Bar Chart" aria-label="Bar Chart" data-mode="bar"
                 t-on-click="onModeSelected('bar')"

addons/web/static/src/views/pivot/pivot_view.scss

@@ -40,17 +40,16 @@
         }
 
         th, td {
-            border-color: gray('400');
-            border-width: 0 $border-width $border-width 0;
+            border-color: gray('200');
+            border-width: $border-width $border-width $border-width $border-width;
         }
 
         th {
             font-weight: $font-weight-normal;  // bootstrap override
-            background-color: $o-view-background-color;
+            background-color: gray('100');
         }
 
         @mixin o-pivot-header-cell {
-            background-color: gray('100');
             cursor: pointer;
             white-space: nowrap;
             user-select: none;