pengyuthon/odoo_source
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[IMP] web: ControlPanel adaptations on mobile

Browse Source 
Part-of: odoo/odoo#116641
This commit is contained in:
Pierre Paridans
2023-05-12 22:59:18 +02:00
parent 0f065ed8ea
commit 2a09a948f8
2 changed files with 95 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/web/static/src/search/control_panel/control_panel.js
+22
View File
@@ -70,6 +70,28 @@ export class ControlPanel extends Component {
this.lastScrollTop = 0;
this.initialScrollTop = this.getScrollingElement().scrollTop;
});
this.mainButtons = useRef("mainButtons");
useEffect(() => {
if (!this.env.isSmall) {
return;
}
// on small screen, clean-up the dropdown elements
const dropdownButtons = this.mainButtons.el.querySelectorAll(".dropdown-menu button");
if (!dropdownButtons.length) {
this.mainButtons.el
.querySelectorAll(".dropdown-menu, .dropdown-toggle")
.forEach((el) => el.classList.add("d-none"));
return;
}
for (const button of dropdownButtons) {
for (const cl of Array.from(button.classList)) {
button.classList.toggle(cl, !cl.startsWith("btn-"));
}
button.classList.add("dropdown-item", "btn", "btn-link");
}
});
}
getScrollingElement() {
addons/web/static/src/search/control_panel/control_panel.xml
+73 -35
View File
@@ -4,11 +4,25 @@
<t t-name="web.ControlPanel" owl="1">
<div class="o_control_panel d-flex flex-column gap-3 gap-lg-1 px-3 pt-2 pb-3" t-ref="root">
<div class="o_control_panel_main d-flex flex-wrap flex-lg-nowrap justify-content-between align-items-lg-start gap-3">
<div class="o_control_panel_breadcrumbs d-flex align-items-center w-100 w-md-50 w-lg-auto">
<div class="o_control_panel_main_buttons d-flex gap-1 d-empty-none d-print-none me-2">
<t t-slot="control-panel-create-button"/>
<t t-slot="layout-buttons"/>
<t t-slot="control-panel-always-buttons"/>
<div class="o_control_panel_breadcrumbs d-flex align-items-center justify-content-between w-100 w-md-50 w-lg-auto">
<div class="o_control_panel_main_buttons d-flex gap-1 d-empty-none d-print-none me-md-2 order-1 order-md-0" t-ref="mainButtons">
<t t-if="env.isSmall">
<div class="btn-group">
<t t-slot="control-panel-create-button"/>
<button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<t t-slot="layout-buttons"/>
<t t-slot="control-panel-always-buttons"/>
</ul>
</div>
</t>
<t t-else="">
<t t-slot="control-panel-create-button"/>
<t t-slot="layout-buttons"/>
<t t-slot="control-panel-always-buttons"/>
</t>
</div>
<t t-if="env.config.noBreadcrumbs">
<section class="o_control_panel_breadcrumbs_actions d-contents">
@@ -26,22 +40,38 @@
<t t-slot="layout-actions"/>
</div>
<div class="o_control_panel_navigation d-flex flex-wrap flex-md-nowrap align-items-center justify-content-between justify-content-md-end w-100 w-md-auto gap-3 gap-lg-1 gap-xl-3 order-2 order-lg-3">
<div class="o_control_panel_navigation d-flex flex-wrap flex-md-nowrap align-items-center justify-content-end w-100 w-md-auto gap-3 gap-lg-1 gap-xl-3 order-2 order-lg-3">
<span class="d-none d-xl-block ms-auto"/> <!-- Spacer -->
<div t-if="pagerProps and pagerProps.total > 0" class="o_cp_pager text-nowrap order-2 order-md-1" role="search">
<Pager t-props="pagerProps"/>
</div>
<nav t-if="env.config.viewSwitcherEntries?.length > 1"
class="o_cp_switch_buttons d-print-none btn-group order-1"
t-att-class="{'w-100 w-sm-auto': env.config.viewSwitcherEntries?.length > 5}">
<t t-foreach="env.config.viewSwitcherEntries" t-as="view" t-key="view.type">
<button class="btn btn-secondary o_switch_view "
t-attf-class="o_{{view.type}} {{view.icon}} {{view.active ? 'active' : ''}}"
t-att-data-tooltip="view.name"
t-on-click="() => this.onViewClicked(view.type)"
/>
<t t-if="env.config.viewSwitcherEntries?.length > 1">
<t t-if="env.isSmall">
<Dropdown class="'o_cp_switch_buttons order-1 order-md-2'" togglerClass="'btn btn-secondary'" showCaret="true">
<t t-set-slot="toggler">
<t t-set="activeView" t-value="env.config.viewSwitcherEntries.find((view) => view.active)"/>
<i class="oi-fw" t-att-class="activeView.icon"/>
</t>
<t t-foreach="env.config.viewSwitcherEntries" t-as="view" t-key="view.type">
<DropdownItem onSelected="() => this.onViewClicked(view.type)" class="view.active ? 'selected' : ''">
<i class="oi-fw" t-att-class="view.icon"/>
<span class="ms-1" t-out="view.name"/>
</DropdownItem>
</t>
</Dropdown>
</t>
</nav>
<t t-else="">
<nav class="o_cp_switch_buttons d-print-none btn-group order-1 order-md-2">
<t t-foreach="env.config.viewSwitcherEntries" t-as="view" t-key="view.type">
<button class="btn btn-secondary o_switch_view "
t-attf-class="o_{{view.type}} {{view.icon}} {{view.active ? 'active' : ''}}"
t-att-data-tooltip="view.name"
t-on-click="() => this.onViewClicked(view.type)"
/>
</t>
</nav>
</t>
</t>
</div>
</div>
</div>
@@ -53,26 +83,34 @@
<t t-set="collapsedBreadcrumbs" t-value="breadcrumbs.slice(0, -3)"/>
<t t-set="breadcrumb" t-value="currentBreadcrumbs[0] || {}"/>
<div t-if="collapsedBreadcrumbs.length || visiblePathBreadcrumbs.length" class="d-flex flex-column align-self-stretch justify-content-between min-w-0">
<ol class="breadcrumb flex-nowrap text-nowrap small lh-1">
<li t-if="collapsedBreadcrumbs.length" class="breadcrumb-item d-inline-flex min-w-0">
<Dropdown togglerClass="'btn btn-light btn-sm p-0'">
<t t-set-slot="toggler">
<i class="fa fa-ellipsis-h"/>
</t>
<t t-foreach="collapsedBreadcrumbs" t-as="breadcrumb" t-key="breadcrumb.jsId">
<DropdownItem onSelected="() => this.onBreadcrumbClicked(breadcrumb.jsId)">
<t t-call="web.Breadcrumb.Name"/>
</DropdownItem>
</t>
</Dropdown>
</li>
<t t-foreach="visiblePathBreadcrumbs" t-as="breadcrumb" t-key="breadcrumb.jsId">
<li class="breadcrumb-item d-inline-flex min-w-0" t-att-data-hotkey="breadcrumb_last and 'b'" t-on-click.prevent="() => this.onBreadcrumbClicked(breadcrumb.jsId)">
<a href="#" class="fw-bold text-truncate" t-att-data-tooltip="'Back to &quot;' + breadcrumb.name + '&quot;'"><t t-call="web.Breadcrumb.Name"/></a>
<div t-if="collapsedBreadcrumbs.length || visiblePathBreadcrumbs.length" class="d-flex flex-row flex-md-column align-self-stretch justify-content-between min-w-0">
<t t-if="env.isSmall">
<t t-set="previousBreadcrumb" t-value="visiblePathBreadcrumbs.slice(-1)"/>
<button class="o_back_button btn btn-link px-1" t-on-click.prevent="() => this.onBreadcrumbClicked(previousBreadcrumb.jsId)">
<i class="fa fa-fw fa-arrow-left"/>
</button>
</t>
<t t-else="">
<ol class="breadcrumb flex-nowrap text-nowrap small lh-1">
<li t-if="collapsedBreadcrumbs.length" class="breadcrumb-item d-inline-flex min-w-0">
<Dropdown togglerClass="'btn btn-light btn-sm p-0'">
<t t-set-slot="toggler">
<i class="fa fa-ellipsis-h"/>
</t>
<t t-foreach="collapsedBreadcrumbs" t-as="breadcrumb" t-key="breadcrumb.jsId">
<DropdownItem onSelected="() => this.onBreadcrumbClicked(breadcrumb.jsId)">
<t t-call="web.Breadcrumb.Name"/>
</DropdownItem>
</t>
</Dropdown>
</li>
</t>
</ol>
<t t-foreach="visiblePathBreadcrumbs" t-as="breadcrumb" t-key="breadcrumb.jsId">
<li class="breadcrumb-item d-inline-flex min-w-0" t-att-data-hotkey="breadcrumb_last and 'b'" t-on-click.prevent="() => this.onBreadcrumbClicked(breadcrumb.jsId)">
<a href="#" class="fw-bold text-truncate" t-att-data-tooltip="'Back to &quot;' + breadcrumb.name + '&quot;'"><t t-call="web.Breadcrumb.Name"/></a>
</li>
</t>
</ol>
</t>
<div class="d-flex gap-1">
<div class="active d-flex gap-2 align-items-center min-w-0 lh-sm">
<span class="min-w-0 text-truncate" t-call="web.Breadcrumb.Name"/>