[FIX] web: control panel bottom content style

Before this commit, the style of the control panel's bottom section
was a bit broken: the button groups did not flex.
This was because the dom changed a bit.

After this commit, they do.
Also, the structure of control-panel-bottom-left has changed.
It should contain `.btn-group` elements at its root.
The spacing between groups is handled by the control-panel.
(before, those spaces were actual spaces in DOM)

X-original-commit: 18ea11c99a7e2bd58d7469927352587cb14c76c4
Part-of: odoo/odoo#76390
This commit is contained in:
Lucas Perais (lpe)
2021-09-14 06:01:21 +00:00
parent d9a6429e45
commit f45f12d0bd
2 changed files with 12 additions and 4 deletions
@@ -30,7 +30,15 @@
}
.o_cp_bottom_left {
display: flex;
// Bottom left holds only btn-groups
// they will handle pushing buttons on the relevant line
display: inline-block;
> .btn-group {
margin-bottom: map-get($spacers, 2);
// Before owl, the margin was handled by a real space!
margin-right: map-get($spacers, 1);
}
> .o_cp_action_menus {
padding-right: 10px;
@@ -11,7 +11,7 @@
</div>
<GroupByMenu t-if="props.display and props.display['bottom-right'] === false"/>
</div>
<div class="btn-group ml-4" role="toolbar" aria-label="Change graph">
<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')"
t-att-class="{ active: model.metaData.mode === 'bar' }"
@@ -25,13 +25,13 @@
t-att-class="{ active: model.metaData.mode === 'pie' }"
/>
</div>
<div t-if="model.metaData.mode === 'bar'" class="btn-group ml-3" role="toolbar" aria-label="Change graph">
<div t-if="model.metaData.mode === 'bar'" class="btn-group" role="toolbar" aria-label="Change graph">
<button class="btn btn-secondary fa fa-database o_graph_button" data-tooltip="Stacked" aria-label="Stacked"
t-on-click="toggleStacked"
t-att-class="{ active: model.metaData.stacked }"
/>
</div>
<div t-if="model.metaData.mode !== 'pie' and model.metaData.domains.length === 1" class="btn-group ml-3" role="toolbar" aria-label="Sort graph">
<div t-if="model.metaData.mode !== 'pie' and model.metaData.domains.length === 1" class="btn-group" role="toolbar" aria-label="Sort graph">
<button class="btn btn-secondary fa fa-sort-amount-desc o_graph_button" data-tooltip="Descending" aria-label="Descending"
t-on-click="toggleOrder('DESC')"
t-att-class="{ active: model.metaData.order === 'DESC' }"