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

[REF] web: dropdown: make "menu" the default slot

Browse Source 
The dropdown Component takes 2 slots: one for the toggler, and one
for the actual dropdown content. Before this commit, the default
slot was the toggler, and the other one was named "menu".

However, as the toggler is actually optional, and the "menu" slot
contains the central information about the dropdown, we decided to
swap them. The content of the dropdown is now the default slot and
the toggler can be specified with the "toggler" slot.
This commit is contained in:
Aaron Bohy
2021-07-19 08:54:31 +00:00
parent a1c983250e
commit 923ba830db
6 changed files with 72 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/web/static/src/core/debug/debug_menu.xml
+12 -12
View File
@@ -6,19 +6,19 @@
beforeOpen="beforeOpenDropdown"
t-on-dropdown-item-selected.stop="onDropdownItemSelected"
togglerClass="'btn btn-link'">
<span class="fa fa-bug"/>
<t t-set-slot="menu">
<t t-foreach="getElements()" t-as="element" t-key="element_index">
<t t-if="!element.hide">
<t t-if="element.type == 'item'">
<DropdownItem payload="{ callback: element.callback }">
<a t-if="element.href" t-att-href="element.href" t-esc="element.description" t-on-click.prevent=""/>
<span t-else="" t-esc="element.description"/>
</DropdownItem>
</t>
<div t-if="element.type == 'separator'" role="separator" class="dropdown-divider"/>
<t t-if="element.type == 'component'" t-component="element.Component" t-props="element.props"/>
<t t-set-slot="toggler">
<span class="fa fa-bug"/>
</t>
<t t-foreach="getElements()" t-as="element" t-key="element_index">
<t t-if="!element.hide">
<t t-if="element.type == 'item'">
<DropdownItem payload="{ callback: element.callback }">
<a t-if="element.href" t-att-href="element.href" t-esc="element.description" t-on-click.prevent=""/>
<span t-else="" t-esc="element.description"/>
</DropdownItem>
</t>
<div t-if="element.type == 'separator'" role="separator" class="dropdown-divider"/>
<t t-if="element.type == 'component'" t-component="element.Component" t-props="element.props"/>
</t>
</t>
</Dropdown>
addons/web/static/src/core/dropdown/dropdown.xml
+2 -2
View File
@@ -15,11 +15,11 @@
t-att-title="props.title"
t-att-data-hotkey="props.hotkey">
<span>
<t t-slot="default" />
<t t-slot="toggler" />
</span>
</button>
<ul t-if="state.open" class="o_dropdown_menu d-block overflow-auto" t-att-class="props.menuClass">
<t t-slot="menu" />
<t t-slot="default" />
</ul>
</t>
</t>
addons/web/static/src/webclient/navbar/navbar.xml
+33 -33
View File
@@ -44,19 +44,19 @@
<t t-name="web.NavBar.AppsMenu" owl="1">
<Dropdown hotkey="'h'" title="'Home Menu'" class="o_navbar_apps_menu">
<i class="fa fa-th-large" />
<t t-set-slot="menu">
<MenuItem
t-foreach="apps"
t-as="app"
t-key="app.id"
class="o_app"
t-att-class="{ o_dropdown_active: menuService.getCurrentApp() === app }"
payload="app"
>
<a t-att-href="getMenuItemHref(app)" t-esc="app.name" t-on-click.prevent="" />
</MenuItem>
<t t-set-slot="toggler">
<i class="fa fa-th-large" />
</t>
<MenuItem
t-foreach="apps"
t-as="app"
t-key="app.id"
class="o_app"
t-att-class="{ o_dropdown_active: menuService.getCurrentApp() === app }"
payload="app"
>
<a t-att-href="getMenuItemHref(app)" t-esc="app.name" t-on-click.prevent="" />
</MenuItem>
</Dropdown>
</t>
@@ -93,11 +93,11 @@
title="section.name"
xmlid="section.xmlid"
>
<span t-esc="section.name" t-att-data-section="section.id" />
<t t-set-slot="menu">
<t t-call="web.NavBar.SectionsMenu.Dropdown.MenuSlot">
<t t-set="items" t-value="section.childrenTree" />
</t>
<t t-set-slot="toggler">
<span t-esc="section.name" t-att-data-section="section.id" />
</t>
<t t-call="web.NavBar.SectionsMenu.Dropdown.MenuSlot">
<t t-set="items" t-value="section.childrenTree" />
</t>
</MenuDropdown>
</t>
@@ -135,23 +135,23 @@
<t t-name="web.NavBar.SectionsMenu.MoreDropdown" owl="1">
<Dropdown tag="'li'" class="o_menu_sections_more" title="'More Menu'" hotkey="hotkey">
<i class="fa fa-plus" />
<t t-set-slot="menu">
<t t-foreach="sections" t-as="section" t-key="section.id">
<t t-set-slot="toggler">
<i class="fa fa-plus" />
</t>
<t t-foreach="sections" t-as="section" t-key="section.id">
<t t-if="!section.childrenTree.length">
<MenuItem class="o_more_dropdown_section" payload="section">
<a t-att-href="getMenuItemHref(section)" t-esc="section.name" t-on-click.prevent="" />
</MenuItem>
</t>
<t t-else="">
<div
class="o_more_dropdown_section o_more_dropdown_section_group bg-200 font-weight-bold"
t-esc="section.name"
/>
<t t-call="web.NavBar.SectionsMenu.Dropdown.MenuSlot">
<t t-set="items" t-value="section.childrenTree" />
</t>
<t t-if="!section.childrenTree.length">
<MenuItem class="o_more_dropdown_section" payload="section">
<a t-att-href="getMenuItemHref(section)" t-esc="section.name" t-on-click.prevent="" />
</MenuItem>
</t>
<t t-else="">
<div
class="o_more_dropdown_section o_more_dropdown_section_group bg-200 font-weight-bold"
t-esc="section.name"
/>
<t t-call="web.NavBar.SectionsMenu.Dropdown.MenuSlot">
<t t-set="items" t-value="section.childrenTree" />
</t>
</t>
</t>
addons/web/static/src/webclient/switch_company_menu/switch_company_menu.xml
+8 -8
View File
@@ -3,14 +3,14 @@
<t t-name="web.SwitchCompanyMenu" owl="1">
<Dropdown class="o_switch_company_menu" menuClass="'o_dropdown_menu_right'">
<span t-attf-class="{{env.isSmall ? 'fa fa-building-o' : 'oe_topbar_name'}}">
<t t-if="!env.isSmall"><t t-esc="currentCompany.name"/></t>
</span>
<t t-set-slot="menu">
<t t-foreach="Object.values(companyService.availableCompanies)" t-as="company">
<t t-call="web.SwitchCompanyItem">
<t t-set="company" t-value="company" />
</t>
<t t-set-slot="toggler">
<span t-attf-class="{{env.isSmall ? 'fa fa-building-o' : 'oe_topbar_name'}}">
<t t-if="!env.isSmall"><t t-esc="currentCompany.name"/></t>
</span>
</t>
<t t-foreach="Object.values(companyService.availableCompanies)" t-as="company">
<t t-call="web.SwitchCompanyItem">
<t t-set="company" t-value="company" />
</t>
</t>
</Dropdown>
addons/web/static/src/webclient/user_menu/user_menu.xml
+11 -11
View File
@@ -3,18 +3,18 @@
<t t-name="web.UserMenu" owl="1">
<Dropdown class="o_user_menu" menuClass="'o_dropdown_menu_right'" t-on-dropdown-item-selected.stop="onDropdownItemSelected">
<img class="rounded-circle o_user_avatar" t-att-src="source" alt="User"/> <span class="oe_topbar_name"><t t-esc="user.name"/><t t-if="env.debug" t-esc="' (' + user.db.name + ')'"/></span>
<t t-set-slot="menu">
<t t-foreach="getElements()" t-as="element" t-key="element_index">
<t t-if="!element.hide">
<t t-if="element.type == 'item'">
<UserMenuItem payload="{ callback: element.callback, id: element.id }">
<a t-if="element.href" t-att-href="element.href" t-esc="element.description" t-on-click.prevent="" />
<span t-else="" t-esc="element.description"/>
</UserMenuItem>
</t>
<div t-if="element.type == 'separator'" role="separator" class="dropdown-divider"/>
<t t-set-slot="toggler">
<img class="rounded-circle o_user_avatar" t-att-src="source" alt="User"/> <span class="oe_topbar_name"><t t-esc="user.name"/><t t-if="env.debug" t-esc="' (' + user.db.name + ')'"/></span>
</t>
<t t-foreach="getElements()" t-as="element" t-key="element_index">
<t t-if="!element.hide">
<t t-if="element.type == 'item'">
<UserMenuItem payload="{ callback: element.callback, id: element.id }">
<a t-if="element.href" t-att-href="element.href" t-esc="element.description" t-on-click.prevent="" />
<span t-else="" t-esc="element.description"/>
</UserMenuItem>
</t>
<div t-if="element.type == 'separator'" role="separator" class="dropdown-divider"/>
</t>
</t>
</Dropdown>
addons/web/static/tests/core/dropdown_tests.js
+6 -42
View File
@@ -74,9 +74,7 @@ QUnit.module("Components", (hooks) => {
class Parent extends owl.Component {}
Parent.template = owl.tags.xml`
<Dropdown class="one" togglerClass="'two'" menuClass="'three'">
<t t-set-slot="menu">
<DropdownItem class="four" />
</t>
</Dropdown>
`;
env = await makeTestEnv();
@@ -179,9 +177,7 @@ QUnit.module("Components", (hooks) => {
class Parent extends owl.Component {}
Parent.template = owl.tags.xml`
<Dropdown>
<t t-set-slot="menu">
<DropdownItem/>
</t>
</Dropdown>
`;
env = await makeTestEnv();
@@ -199,9 +195,7 @@ QUnit.module("Components", (hooks) => {
}
Parent.template = owl.tags.xml`
<Dropdown t-on-dropdown-item-selected="onItemSelected">
<t t-set-slot="menu">
<DropdownItem payload="{ answer: 42 }"/>
</t>
</Dropdown>
`;
env = await makeTestEnv();
@@ -214,13 +208,9 @@ QUnit.module("Components", (hooks) => {
class Parent extends owl.Component {}
Parent.template = owl.tags.xml`
<Dropdown>
<t t-set-slot="menu">
<Dropdown>
<t t-set-slot="menu">
<Dropdown/>
</t>
</Dropdown>
</t>
</Dropdown>
`;
env = await makeTestEnv();
@@ -235,13 +225,9 @@ QUnit.module("Components", (hooks) => {
class Parent extends owl.Component {}
Parent.template = owl.tags.xml`
<Dropdown startOpen="true">
<t t-set-slot="menu">
<Dropdown startOpen="true">
<t t-set-slot="menu">
<Dropdown startOpen="true"/>
</t>
</Dropdown>
</t>
</Dropdown>
`;
env = await makeTestEnv();
@@ -255,13 +241,9 @@ QUnit.module("Components", (hooks) => {
<div>
<div class="outside">outside</div>
<Dropdown>
<t t-set-slot="menu">
<Dropdown>
<t t-set-slot="menu">
<Dropdown/>
</t>
</Dropdown>
</t>
</Dropdown>
</div>
`;
@@ -290,13 +272,9 @@ QUnit.module("Components", (hooks) => {
Parent.template = owl.tags.xml`
<div>
<Dropdown>
<t t-set-slot="menu">
<Dropdown>
<t t-set-slot="menu">
<Dropdown/>
</t>
</Dropdown>
</t>
<Dropdown>
<Dropdown/>
</Dropdown>
</Dropdown>
<t t-component="dc.Component" t-props="dc.props" />
</div>
@@ -323,13 +301,9 @@ QUnit.module("Components", (hooks) => {
class Parent extends owl.Component {}
Parent.template = owl.tags.xml`
<Dropdown>
<t t-set-slot="menu">
<Dropdown>
<t t-set-slot="menu">
<DropdownItem/>
</t>
</Dropdown>
</t>
</Dropdown>
`;
env = await makeTestEnv();
@@ -345,16 +319,12 @@ QUnit.module("Components", (hooks) => {
class Parent extends owl.Component {}
Parent.template = owl.tags.xml`
<Dropdown>
<t t-set-slot="menu">
<Dropdown>
<t t-set-slot="menu">
<DropdownItem class="item1" parentClosingMode="'none'" />
<DropdownItem class="item2" parentClosingMode="'closest'" />
<DropdownItem class="item3" parentClosingMode="'all'" />
<DropdownItem class="item4" />
</t>
</Dropdown>
</t>
</Dropdown>
`;
env = await makeTestEnv();
@@ -393,13 +363,9 @@ QUnit.module("Components", (hooks) => {
}
Parent.template = owl.tags.xml`
<Dropdown t-on-dropdown-item-selected="onItemSelected">
<t t-set-slot="menu">
<Dropdown t-on-dropdown-item-selected="onItemSelected">
<t t-set-slot="menu">
<DropdownItem payload="{ answer: 42 }" />
</t>
</Dropdown>
</t>
</Dropdown>
`;
env = await makeTestEnv();
@@ -414,8 +380,9 @@ QUnit.module("Components", (hooks) => {
QUnit.test("multi-level dropdown: recursive template can be rendered", async (assert) => {
const recursiveTemplate = `
<Dropdown startOpen="true">
<t t-esc="name" />
<t t-set-slot="menu">
<t t-set-slot="toggler">
<t t-esc="name" />
</t>
<t t-foreach="items" t-as="item">
<t t-if="!item.children.length">
@@ -428,7 +395,6 @@ QUnit.module("Components", (hooks) => {
</t>
</t>
</t>
</Dropdown>
`;
class Parent extends owl.Component {
@@ -642,11 +608,9 @@ QUnit.module("Components", (hooks) => {
}
Parent.template = owl.tags.xml`
<Dropdown hotkey="'m'" t-on-dropdown-item-selected="onItemSelected">
<t t-set-slot="menu">
<DropdownItem class="item1" payload="{val:1}">item1</DropdownItem>
<DropdownItem class="item2" hotkey="'2'" payload="{val:2}">item2</DropdownItem>
<DropdownItem class="item3" payload="{val:3}">item3</DropdownItem>
</t>
</Dropdown>
`;
env = await makeTestEnv();