[IMP] web: improve list control panel style

Before this commit, the bottom row of control panel in
list view could change height when reducing window size
and give an ugly layout.
This commit gives more flex to this row to keep a correct
layout when reducing window size.

task 3095775

closes odoo/odoo#110277

Related: odoo/enterprise#36895
Signed-off-by: Adrien Dieudonné (adr) <adr@odoo.com>
This commit is contained in:
Michael (mcm)
2023-02-10 09:11:54 +01:00
parent 802d50219f
commit 50aaf73eea
4 changed files with 18 additions and 15 deletions
@@ -44,7 +44,7 @@
</div>
<t t-if="env.config.viewSwitcherEntries.length > 1">
<nav class="btn-group o_cp_switch_buttons">
<nav class="btn-group o_cp_switch_buttons ms-auto">
<t t-foreach="env.config.viewSwitcherEntries" t-as="view" t-key="view.type">
<button class="btn btn-light o_switch_view "
t-attf-class="o_{{view.type}} {{view.icon}} {{view.active ? 'active' : ''}}"
@@ -32,7 +32,7 @@
</t>
<t t-name="web.ListView.Buttons" owl="1">
<div class="o_list_buttons d-flex" role="toolbar" aria-label="Main actions">
<div class="o_list_buttons d-flex flex-wrap" role="toolbar" aria-label="Main actions">
<t t-if="props.showButtons">
<t t-if="model.root.editedRecord">
<button type="button" class="btn btn-primary o_list_button_save" data-hotkey="s" t-on-click.stop="onClickSave">
@@ -71,21 +71,16 @@
</t>
<t t-name="web.ListView.Selection" owl="1">
<div class="o_list_selection_box alert alert-info d-inline-flex align-items-center ps-0 px-lg-2 py-0 mb-0 ms-0 ms-md-2" role="alert">
<t t-if="env.isSmall">
<button class="btn btn-link py-0 o_discard_selection" t-on-click="discardSelection">
<span class="fa-2x">&#215;</span>
</button>
</t>
<span t-if="isDomainSelected">All <span class="font-monospace" t-esc="nbTotal"/> selected</span>
<div class="o_list_selection_box alert alert-info d-inline-flex align-items-center p-1" role="alert">
<span t-if="isDomainSelected" class="p-1">All <t t-esc="nbTotal"/> selected</span>
<t t-else="">
<span class="font-monospace me-1" t-esc="nbSelected"/> selected
<a t-if="isPageSelected and nbTotal > nbSelected" href="#" class="o_list_select_domain ms-2 btn btn-sm btn-info px-2 py-1 border-0 fw-normal" t-on-click="onSelectDomain">
<i class="fa fa-arrow-right"/> Select all <span class="font-monospace" t-esc="nbTotal"/>
<span class="me-1" t-esc="nbSelected"/> selected
<a t-if="isPageSelected and nbTotal > nbSelected" href="#" class="o_list_select_domain ms-2 btn btn-sm btn-info p-1 border-0 fw-normal" t-on-click="onSelectDomain">
<i class="fa fa-fw fa-arrow-right"/> Select all <span t-esc="nbTotal"/>
</a>
</t>
<a t-if="nbSelected > 1" href="#" class="o_list_unselect_all ms-2 btn btn-sm btn-info px-2 py-1 border-0 fw-normal" t-on-click="onUnselectAll">
Unselect all
<a t-if="nbSelected > 1" href="#" class="o_list_unselect_all ms-2 btn btn-sm btn-info p-1 border-0 fw-normal" t-att-class="{'btn-link': env.isSmall}" t-on-click="onUnselectAll">
<i class="fa fa-fw fa-times"/><t t-if="!env.isSmall"> Unselect all</t>
</a>
</div>
</t>
@@ -475,3 +475,11 @@
@include o-sample-data-disabled;
}
}
.o_list_view .o_list_buttons {
gap: 0.5rem;
> * {
margin: auto 0;
}
}
@@ -92,7 +92,7 @@ QUnit.module("Mobile Views", ({ beforeEach }) => {
);
// unselect all
await click(fixture, ".o_discard_selection");
await click(fixture, ".o_list_unselect_all");
assert.containsNone(fixture, ".o_list_selection_box");
assert.containsOnce(fixture, ".o_control_panel .o_cp_bottom_right");
});