[FIX] web_editor: various shape fixes (hide on mobile, bad joint, ...)

This commit fixes various things with the shapes: shapes are now hidden
on mobile by default, the shapes "blobs 02" and "blobs 03" now connect
properly, and the shape pager now shows the name of the current page.
Airy shapes now have embedded media-queries so that they're more visible
in the shape selector. The order of the pages in the shape selector has
been adapted so that shapes that are easier to use are on the first few
pages. A number of shapes have been "cut" differently to leave more
space for content, and some shapes have had their top/bottom anchoring
swapped.

task-2319484

closes odoo/odoo#56567

Signed-off-by: Jérémy Kersten (jke) <jke@openerp.com>

1 files changed, 13 insertions, 5 deletions

diff --git a/addons/web_editor/static/src/js/editor/snippets.options.js b/addons/web_editor/static/src/js/editor/snippets.options.js
index 23fe6ff1bfd..5b7aba79184 100644
--- a/addons/web_editor/static/src/js/editor/snippets.options.js
+++ b/addons/web_editor/static/src/js/editor/snippets.options.js
@@ -1680,7 +1680,6 @@ const SelectPagerUserValueWidget = SelectUserValueWidget.extend({
 
         this.pageNum = document.createElement('span');
         this.currentPage = 0;
-        this._updatePageNum();
 
         const next = document.createElement('i');
         next.classList.add('o_we_pager_next', 'fa', 'fa-chevron-right');
@@ -1691,9 +1690,16 @@ const SelectPagerUserValueWidget = SelectUserValueWidget.extend({
         pagerControls.appendChild(this.pageNum);
         pagerControls.appendChild(next);
 
+        this.pageName = document.createElement('b');
+        const pagerHeader = document.createElement('div');
+        pagerHeader.classList.add('o_we_pager_header');
+        pagerHeader.appendChild(this.pageName);
+        pagerHeader.appendChild(pagerControls);
+
         await _super(...arguments);
         this.menuEl.classList.add('o_we_has_pager');
-        $(this.menuEl).prepend(pagerControls);
+        $(this.menuEl).prepend(pagerHeader);
+        this._updatePage();
     },
 
     //--------------------------------------------------------------------------
@@ -1705,9 +1711,11 @@ const SelectPagerUserValueWidget = SelectUserValueWidget.extend({
      *
      * @private
      */
-    _updatePageNum() {
+    _updatePage() {
         this.pages.forEach((page, i) => page.classList.toggle('active', i === this.currentPage));
         this.pageNum.textContent = `${this.currentPage + 1}/${this.numPages}`;
+        const activePage = this.pages.find((page, i) => i === this.currentPage);
+        this.pageName.textContent = activePage.getAttribute('string');
     },
 
     //--------------------------------------------------------------------------
@@ -1724,7 +1732,7 @@ const SelectPagerUserValueWidget = SelectUserValueWidget.extend({
         ev.stopPropagation();
         const delta = ev.target.matches('.o_we_pager_next') ? 1 : -1;
         this.currentPage = (this.currentPage + this.numPages + delta) % this.numPages;
-        this._updatePageNum();
+        this._updatePage();
     },
     /**
      * @override
@@ -1735,7 +1743,7 @@ const SelectPagerUserValueWidget = SelectUserValueWidget.extend({
             const currentPage = this.pages.indexOf(activeButton.el.closest('we-select-page'));
             if (currentPage !== -1) {
                 this.currentPage = currentPage;
-                this._updatePageNum();
+                this._updatePage();
             }
         }
         return this._super(...arguments);