This commit adds the possibility to use a grid to move and resize
columns inside some building blocks.
More precisely, for the majority of the building blocks having columns,
it is now possible to toggle between the current layout (= normal mode)
and the grid layout (= grid mode). The grid mode can be triggered in
two ways:
- by using the "Grid" button in the options (when available),
- by dragging a column using the move handle.
The toggle places the different columns in the grid as close as
possible as how they were placed in normal mode.
The normal mode is toggled back by clicking on the "Cols" button (when
available).
Since the move handle is now used to trigger the grid mode, the columns
in normal mode are now moved using the arrows.
NB: to avoid any confusion with the word 'column' in the explanation
below, the BS column will be called 'grid item' and the grid column
will be 'column'.
When in grid mode, the building block is a grid with 12 columns and a
number of rows which depends on the height of the grid items.
This mode offers the following functionalities:
- Moving a grid item:
When a grid item is dragged, it can be placed anywhere in the grid. If
it is dragged towards the bottom, new rows are added in the grid to
increase its height and to place the grid item lower. These added rows
are removed when it is dragged towards the top.
A grid item can also be placed over an other item (-> they can overlap)
and their order can be changed using the two new buttons to place an
item in front of/behind all the others.
A grid item can be moved from a grid to another, and also from a grid
to a building block in normal mode.
- Resizing a grid item:
A grid item can be resized vertically, horizontally and diagonally with
the help of the grid. When resized towards the bottom, new rows are
added in the grid and they are removed if it is towards the top (like
with the drag and drop).
- Adding elements:
The "Add Elements" option allows the user to add as many images, text
blocks or buttons as wanted in the grid.
Inner contents can still be dragged and dropped inside a grid item.
- Changing the padding of the grid items:
The padding option allows to change the vertical/horizontal padding of
all the grid items at the same time.
- Mobile view:
When in mobile view, the grid items are not in a grid anymore (the
display is back to flex) but they keep their grid properties. They
cannot be resized, nor dragged and dropped but they can be moved using
the arrows. By moving this way, it does not impact the desktop view.
task-2825241
closesodoo/odoo#93144
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
Commit [1] copied a lot of website snippet options into mass mailing.
Some were moved to web_editor and xpathed to be used in both without
duplicating code. Sadly that is not without side effects and it was
therefore decided to duplicate them instead so they can live separate
lives in the future.
[1] https://github.com/odoo/odoo/commit/4f7cd33d0fd69ee5984d0968233ffc73d7751030
Part-of: odoo/odoo#77724
*: website, web_unsplash, website_blog
We have recently created an odoo media library that exposes a public API
for searching for open-source media, including dynamic SVGs that can be
used with the dynamic background-shape system to create illustrations
whose colors can be changed by the user. This commit adds the
corresponding client-side functionalty: search for the images in the
media-library, creating a corresponding attachment when selected, as
well as an option to customize the colors of the dynamic SVGs.
In the process, adaptations have been made in the web_unsplash module to
avoid duplicating code and to adapt code that was making assumptions
that are no longer valid.
To make new users more aware of this feature, all default images have
been hidden from the media-dialog, so that the user is prompted so
search for images. Some tests and tours that were relying on having
default images in the media-dialog (eg in website_blog) have been
adapted to match.
task-2316651
Linked to: odoo/iap-apps#235closesodoo/odoo#57888
X-original-commit: 7a1308b426f94b33e2bd55e5d58e661067e26ff3
Signed-off-by: Jérémy Kersten (jke) <jke@openerp.com>
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
*: website
Since [1], the thumbnails of the saved snippets were not right anymore,
all fallbacking to the default image. This is because snippets thumbs
now use svg files instead of png and the snippet saving feature did not
allow it. This commit fixes that and makes the feature more robust.
- Allow to use any original thumbnail, and not only for website app.
- Remove useless defaut image, a fallback for when the feature is broken
is useless.
- Identify snippets by key instead of by main class (possible since
the new `data-snippet` attribute on snippets).
[1]: https://github.com/odoo/odoo/commit/b7fe2bdae2f45372c0d538767a226a413b806f3fclosesodoo/odoo#55896
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
*: website
The style to achieve the chess-like bg result was duplicated at many
places. The 'web' app was also actually using an image from the
'web_editor' app (we can live with it in stable as web_editor always
comes with web in auto_install but this was still a mistake).
closesodoo/odoo#54154
Also: fix some layout issue in the colorpicker widget.
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
* website, mass_mailing, website_event, website_form,
website_mass_mailing, website_sale
Now the user can save snippets to use them on other pages.
task-2120409
closesodoo/odoo#40408
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
Co-authored-by: qsm-odoo <qsm@odoo.com>
* Convert some CSS to LESS
* Split/Join LESS files
* Remove duplicates between website and web_editor
* UI improvements
* Allow simple customizations thanks to LESS var&mixins for website
Soukéina Bojabza