This commit replaces the `we-select-pager` for a full-height version
allowing better sorting and visibility of the shapes and background
shapes.
The new UI now has a navbar inside the pager which allows to scroll to
anchors inside the menu. To do so a new attribute `data-scroll-to` is
added on the button element allowing to scroll to the class contained
in the attribute with the new function `_onClickScrollPage`. Thanks to
ard the Selection widget now activates the corresponding menu section
of the new pager whenever the data-scroll matches a section that has
passed the middle of the container.
The menu being full width, the angle with the class `.o_pager_nav_angle`
triggers the `_onClickCloseMenu` to close the menu.
To avoid duplication, the label for the devices now uses the same Js
logic as the Animated label for the shapes. This frees the :before and
:after which allows to use the alpha-background extended class on the
we-button for both types of shapes. The devices label information now
shows an aspect ratio rather than full dimensions.
For the new pager to appear full-height and the content being scrollable
inside the proper section of the menu, two new containers are added
one for the pager's navigation (`o_pager_nav`) and one for the shapes
pages (`o_pager_container`). This allows to have the parent div in fixed
positioning and keeping a scrollable section on the `o_pager_container`
under its inner navigation.
The previous shapes are back to their original ratio of 800x600
since switching them in square makes them less recognizable.
Finally, in the `we-toggler` when no elements are selected or when it is
empty, we now display `None` instead of `/`.
task-3266751
closesodoo/odoo#118253
Related: odoo/design-themes#653
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
Mathieu (mano)
b7b05a2d1c