Skip to content

Commit

Permalink
[FIX] menu: non-aligned menu items
Browse files Browse the repository at this point in the history 
If the menu items were too long, and that the menu item had a blank
space in place of an icon, the menu texts were not aligned properly
because of a flex shrink.

closes #3906

Task: 3814222
X-original-commit: 261616d
Signed-off-by: Lucas Lefèvre (lul) <lul@odoo.com>
Signed-off-by: Adrien Minne (adrm) <adrm@odoo.com>
  • Loading branch information
@hokolomopo
hokolomopo committed Mar 25, 2024
1 parent 50fc6c5 commit d485705
Show file tree
Hide file tree
Showing 3 changed files with 24 additions and 24 deletions.
2 changes: 1 addition & 1 deletion src/components/menu/menu.xml
View file
Expand Up @@ -22,7 +22,7 @@
t-att-class="{ 'o-menu-root': isMenuRoot, 'disabled': !isMenuEnabled, 'o-menu-item-active': isParentMenu(subMenu, menuItem)}"
t-att-style="getColor(menuItem)">
<div class="d-flex w-100">
<div t-if="childrenHaveIcon" class="o-menu-item-icon align-middle">
<div t-if="childrenHaveIcon" class="o-menu-item-icon align-middle flex-shrink-0">
<t t-if="getIconName(menuItem)" t-call="{{getIconName(menuItem)}}"/>
</div>
<div class="o-menu-item-name align-middle text-truncate" t-esc="getName(menuItem)"/>
Expand Down
24 changes: 12 additions & 12 deletions tests/__snapshots__/top_bar_component.test.ts.snap
View file
Expand Up @@ -612,7 +612,7 @@ exports[`TopBar component can set cell format 1`] = `
class="d-flex w-100"
>
<div
class="o-menu-item-icon align-middle"
class="o-menu-item-icon align-middle flex-shrink-0"
>
<svg
class="o-icon"
Expand Down Expand Up @@ -646,7 +646,7 @@ exports[`TopBar component can set cell format 1`] = `
class="d-flex w-100"
>
<div
class="o-menu-item-icon align-middle"
class="o-menu-item-icon align-middle flex-shrink-0"
/>
<div
Expand All @@ -673,7 +673,7 @@ exports[`TopBar component can set cell format 1`] = `
class="d-flex w-100"
>
<div
class="o-menu-item-icon align-middle"
class="o-menu-item-icon align-middle flex-shrink-0"
/>
<div
Expand Down Expand Up @@ -701,7 +701,7 @@ exports[`TopBar component can set cell format 1`] = `
class="d-flex w-100"
>
<div
class="o-menu-item-icon align-middle"
class="o-menu-item-icon align-middle flex-shrink-0"
/>
<div
Expand Down Expand Up @@ -733,7 +733,7 @@ exports[`TopBar component can set cell format 1`] = `
class="d-flex w-100"
>
<div
class="o-menu-item-icon align-middle"
class="o-menu-item-icon align-middle flex-shrink-0"
/>
<div
Expand Down Expand Up @@ -761,7 +761,7 @@ exports[`TopBar component can set cell format 1`] = `
class="d-flex w-100"
>
<div
class="o-menu-item-icon align-middle"
class="o-menu-item-icon align-middle flex-shrink-0"
/>
<div
Expand Down Expand Up @@ -789,7 +789,7 @@ exports[`TopBar component can set cell format 1`] = `
class="d-flex w-100"
>
<div
class="o-menu-item-icon align-middle"
class="o-menu-item-icon align-middle flex-shrink-0"
/>
<div
Expand All @@ -816,7 +816,7 @@ exports[`TopBar component can set cell format 1`] = `
class="d-flex w-100"
>
<div
class="o-menu-item-icon align-middle"
class="o-menu-item-icon align-middle flex-shrink-0"
/>
<div
Expand Down Expand Up @@ -844,7 +844,7 @@ exports[`TopBar component can set cell format 1`] = `
class="d-flex w-100"
>
<div
class="o-menu-item-icon align-middle"
class="o-menu-item-icon align-middle flex-shrink-0"
/>
<div
Expand Down Expand Up @@ -872,7 +872,7 @@ exports[`TopBar component can set cell format 1`] = `
class="d-flex w-100"
>
<div
class="o-menu-item-icon align-middle"
class="o-menu-item-icon align-middle flex-shrink-0"
/>
<div
Expand Down Expand Up @@ -900,7 +900,7 @@ exports[`TopBar component can set cell format 1`] = `
class="d-flex w-100"
>
<div
class="o-menu-item-icon align-middle"
class="o-menu-item-icon align-middle flex-shrink-0"
/>
<div
Expand Down Expand Up @@ -932,7 +932,7 @@ exports[`TopBar component can set cell format 1`] = `
class="d-flex w-100"
>
<div
class="o-menu-item-icon align-middle"
class="o-menu-item-icon align-middle flex-shrink-0"
/>
<div
Expand Down
22 changes: 11 additions & 11 deletions tests/menus/__snapshots__/context_menu_component.test.ts.snap
View file
Expand Up @@ -14,7 +14,7 @@ exports[`Context Menu integration tests context menu simple rendering 1`] = `
class="d-flex w-100"
>
<div
class="o-menu-item-icon align-middle"
class="o-menu-item-icon align-middle flex-shrink-0"
>
<svg
class="o-icon"
Expand Down Expand Up @@ -52,7 +52,7 @@ exports[`Context Menu integration tests context menu simple rendering 1`] = `
class="d-flex w-100"
>
<div
class="o-menu-item-icon align-middle"
class="o-menu-item-icon align-middle flex-shrink-0"
>
<svg
class="o-icon"
Expand Down Expand Up @@ -90,7 +90,7 @@ exports[`Context Menu integration tests context menu simple rendering 1`] = `
class="d-flex w-100"
>
<div
class="o-menu-item-icon align-middle"
class="o-menu-item-icon align-middle flex-shrink-0"
>
<svg
class="o-icon"
Expand Down Expand Up @@ -128,7 +128,7 @@ exports[`Context Menu integration tests context menu simple rendering 1`] = `
class="d-flex w-100"
>
<div
class="o-menu-item-icon align-middle"
class="o-menu-item-icon align-middle flex-shrink-0"
>
<svg
class="o-icon"
Expand Down Expand Up @@ -185,7 +185,7 @@ exports[`Context Menu integration tests context menu simple rendering 1`] = `
class="d-flex w-100"
>
<div
class="o-menu-item-icon align-middle"
class="o-menu-item-icon align-middle flex-shrink-0"
>
<svg
class="o-icon"
Expand Down Expand Up @@ -218,7 +218,7 @@ exports[`Context Menu integration tests context menu simple rendering 1`] = `
class="d-flex w-100"
>
<div
class="o-menu-item-icon align-middle"
class="o-menu-item-icon align-middle flex-shrink-0"
>
<svg
class="o-icon"
Expand Down Expand Up @@ -251,7 +251,7 @@ exports[`Context Menu integration tests context menu simple rendering 1`] = `
class="d-flex w-100"
>
<div
class="o-menu-item-icon align-middle"
class="o-menu-item-icon align-middle flex-shrink-0"
>
<svg
class="o-icon"
Expand Down Expand Up @@ -308,7 +308,7 @@ exports[`Context Menu integration tests context menu simple rendering 1`] = `
class="d-flex w-100"
>
<div
class="o-menu-item-icon align-middle"
class="o-menu-item-icon align-middle flex-shrink-0"
>
<svg
class="o-icon"
Expand Down Expand Up @@ -341,7 +341,7 @@ exports[`Context Menu integration tests context menu simple rendering 1`] = `
class="d-flex w-100"
>
<div
class="o-menu-item-icon align-middle"
class="o-menu-item-icon align-middle flex-shrink-0"
>
<svg
class="o-icon"
Expand Down Expand Up @@ -374,7 +374,7 @@ exports[`Context Menu integration tests context menu simple rendering 1`] = `
class="d-flex w-100"
>
<div
class="o-menu-item-icon align-middle"
class="o-menu-item-icon align-middle flex-shrink-0"
>
<svg
class="o-icon"
Expand Down Expand Up @@ -431,7 +431,7 @@ exports[`Context Menu integration tests context menu simple rendering 1`] = `
class="d-flex w-100"
>
<div
class="o-menu-item-icon align-middle"
class="o-menu-item-icon align-middle flex-shrink-0"
>
<svg
class="o-icon"
Expand Down

0 comments on commit d485705

Please sign in to comment.