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>
This commit is the first step towards the addition of various SVG shapes
for the website app.
The purpose of this commit is to add the new shapes SVGs and to sort the
current shape menu into new categories.
The avoid duplicating the shapes added in mass_mailing, the 3 shapes:
- Circle
- Slanted
- Triangle (corner)
Are now in the web_editor, their existing reference in mass_mailing
template have have been changed to their new locations. To adapt to
`b1a3a3b18370ad76280726298602815769dce1c2` the paths have been changed
and a new record for `s_tech_default_image.jpg` have been created in
the new file `mass_mailing_themes/data/ir_attachment_data.xml` since
it's an image only used in themes. (Also removing `noupdate=0` from
the data element in `mass_mailing/data/ir_attachment_data.xml`
since it is the default value).
I also removed the .png and old .jpg of this image since now the shape
is applied directly on the image.
Since the shapes + their image are converted in a base64 img+svg on
save, we can move the assets of the current website shapes in use
without compatibility issue. Therefore these shapes were renamed and
moved their new folder category.
The SVG width and height of the new and previous shapes was set to
600x600 since they are mostly squarish and are going to be rendered in a
square preview in the future.
To simulate the future preview of the shape selection menu, the
`we-button img` width was set to
`$o-we-sidebar-content-field-dropdown-grid-item-height` and the
`we-button` width to `1/4` in the file `wysiwyg_snippets.scss`.
It makes the preview 60x60 and displayed in a four tiles layout.
Note :
- If later on the SVG are rendered as inline-svg rather than base64
the current IDs inside the .svg might conflict if multiple svg are
on the same page.
- The previous shapes might look a bit weird with the squarish ratio
in preview, alternatives solutions should be explored during the
implementation of the new UI.
task-3094258
closesodoo/odoo#110673
Signed-off-by: Romain Derie (rde) <rde@odoo.com>
Mathieu (mano)