[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, 66 insertions, 64 deletions

diff --git a/addons/web_editor/views/snippets.xml b/addons/web_editor/views/snippets.xml
index cc3986d2417..5edda5c1dfd 100644
--- a/addons/web_editor/views/snippets.xml
+++ b/addons/web_editor/views/snippets.xml
@@ -226,57 +226,7 @@
                 <we-select-pager class="o_we_shape_menu" string="⌙ Shape" data-dependencies="!shape_none_opt" data-name="bg_shape_opt">
                     <!-- Invisible None button to be used for select's placeholder text -->
                     <we-button data-shape="" data-name="shape_none_opt"/>
-                    <we-select-page>
-                        <we-button data-shape="web_editor/Airy/01" data-select-label="Airy 01"/>
-                        <we-button data-shape="web_editor/Airy/02" data-select-label="Airy 02"/>
-                        <we-button data-shape="web_editor/Airy/03" data-select-label="Airy 03"/>
-                        <we-button data-shape="web_editor/Airy/04" data-select-label="Airy 04"/>
-                        <we-button data-shape="web_editor/Airy/05" data-select-label="Airy 05"/>
-                        <we-button data-shape="web_editor/Airy/06" data-select-label="Airy 06"/>
-                        <we-button data-shape="web_editor/Airy/07" data-select-label="Airy 07"/>
-                        <we-button data-shape="web_editor/Airy/08" data-select-label="Airy 08"/>
-                        <we-button data-shape="web_editor/Airy/09" data-select-label="Airy 09"/>
-                        <we-button data-shape="web_editor/Airy/10" data-select-label="Airy 10"/>
-                        <we-button data-shape="web_editor/Airy/11" data-select-label="Airy 11"/>
-                        <we-button data-shape="web_editor/Airy/12" data-select-label="Airy 12"/>
-                        <we-button data-shape="web_editor/Airy/13" data-select-label="Airy 13"/>
-                        <we-button data-shape="web_editor/Airy/14" data-select-label="Airy 14"/>
-                    </we-select-page>
-                    <we-select-page>
-                        <we-button data-shape="web_editor/Blobs/01" data-select-label="Blobs 01"/>
-                        <we-button data-shape="web_editor/Blobs/02" data-select-label="Blobs 02"/>
-                        <we-button data-shape="web_editor/Blobs/03" data-select-label="Blobs 03"/>
-                        <we-button data-shape="web_editor/Blobs/04" data-select-label="Blobs 04"/>
-                        <we-button data-shape="web_editor/Blobs/05" data-select-label="Blobs 05"/>
-                        <we-button data-shape="web_editor/Blobs/06" data-select-label="Blobs 06"/>
-                        <we-button data-shape="web_editor/Blobs/07" data-select-label="Blobs 07"/>
-                        <we-button data-shape="web_editor/Blobs/08" data-select-label="Blobs 08"/>
-                        <we-button data-shape="web_editor/Blobs/09" data-select-label="Blobs 09"/>
-                        <we-button data-shape="web_editor/Blobs/10" data-select-label="Blobs 10"/>
-                        <we-button data-shape="web_editor/Blobs/11" data-select-label="Blobs 11"/>
-                        <we-button data-shape="web_editor/Blobs/12" data-select-label="Blobs 12"/>
-                    </we-select-page>
-                    <we-select-page>
-                        <we-button data-shape="web_editor/Blocks/01" data-select-label="Blocks 01"/>
-                        <we-button data-shape="web_editor/Blocks/02" data-select-label="Blocks 02"/>
-                        <we-button data-shape="web_editor/Blocks/03" data-select-label="Blocks 03"/>
-                        <we-button data-shape="web_editor/Blocks/04" data-select-label="Blocks 04"/>
-                    </we-select-page>
-                    <we-select-page>
-                        <we-button data-shape="web_editor/Bold/01" data-select-label="Bold 01"/>
-                        <we-button data-shape="web_editor/Bold/02" data-select-label="Bold 02"/>
-                        <we-button data-shape="web_editor/Bold/03" data-select-label="Bold 03"/>
-                        <we-button data-shape="web_editor/Bold/04" data-select-label="Bold 04"/>
-                        <we-button data-shape="web_editor/Bold/05" data-select-label="Bold 05"/>
-                        <we-button data-shape="web_editor/Bold/06" data-select-label="Bold 06"/>
-                        <we-button data-shape="web_editor/Bold/07" data-select-label="Bold 07"/>
-                        <we-button data-shape="web_editor/Bold/08" data-select-label="Bold 08"/>
-                        <we-button data-shape="web_editor/Bold/09" data-select-label="Bold 09"/>
-                        <we-button data-shape="web_editor/Bold/10" data-select-label="Bold 10"/>
-                        <we-button data-shape="web_editor/Bold/11" data-select-label="Bold 11"/>
-                        <we-button data-shape="web_editor/Bold/12" data-select-label="Bold 12"/>
-                    </we-select-page>
-                    <we-select-page>
+                    <we-select-page string="Origins">
                         <we-button data-shape="web_editor/Origins/01" data-select-label="Origins 01"/>
                         <we-button data-shape="web_editor/Origins/02" data-select-label="Origins 02"/>
                         <we-button data-shape="web_editor/Origins/03" data-select-label="Origins 03"/>
@@ -293,18 +243,13 @@
                         <we-button data-shape="web_editor/Origins/14" data-select-label="Origins 14"/>
                         <we-button data-shape="web_editor/Origins/15" data-select-label="Origins 15"/>
                     </we-select-page>
-                    <we-select-page>
-                        <we-button data-shape="web_editor/Rainy/01" data-select-label="Rainy 01"/>
-                        <we-button data-shape="web_editor/Rainy/02" data-select-label="Rainy 02"/>
-                        <we-button data-shape="web_editor/Rainy/03" data-select-label="Rainy 03"/>
-                        <we-button data-shape="web_editor/Rainy/04" data-select-label="Rainy 04"/>
-                        <we-button data-shape="web_editor/Rainy/05" data-select-label="Rainy 05"/>
-                        <we-button data-shape="web_editor/Rainy/06" data-select-label="Rainy 06"/>
-                        <we-button data-shape="web_editor/Rainy/07" data-select-label="Rainy 07"/>
-                        <we-button data-shape="web_editor/Rainy/08" data-select-label="Rainy 08"/>
-                        <we-button data-shape="web_editor/Rainy/09" data-select-label="Rainy 09"/>
+                    <we-select-page string="Blocks">
+                        <we-button data-shape="web_editor/Blocks/01" data-select-label="Blocks 01"/>
+                        <we-button data-shape="web_editor/Blocks/02" data-select-label="Blocks 02"/>
+                        <we-button data-shape="web_editor/Blocks/03" data-select-label="Blocks 03"/>
+                        <we-button data-shape="web_editor/Blocks/04" data-select-label="Blocks 04"/>
                     </we-select-page>
-                    <we-select-page>
+                    <we-select-page string="Wavy">
                         <we-button data-shape="web_editor/Wavy/01" data-select-label="Wavy 01"/>
                         <we-button data-shape="web_editor/Wavy/02" data-select-label="Wavy 02"/>
                         <we-button data-shape="web_editor/Wavy/03" data-select-label="Wavy 03"/>
@@ -329,19 +274,76 @@
                         <we-button data-shape="web_editor/Wavy/22" data-select-label="Wavy 22"/>
                         <we-button data-shape="web_editor/Wavy/23" data-select-label="Wavy 23"/>
                     </we-select-page>
-                    <we-select-page>
+                    <we-select-page string="Blobs">
+                        <we-button data-shape="web_editor/Blobs/01" data-select-label="Blobs 01"/>
+                        <we-button data-shape="web_editor/Blobs/02" data-select-label="Blobs 02"/>
+                        <we-button data-shape="web_editor/Blobs/03" data-select-label="Blobs 03"/>
+                        <we-button data-shape="web_editor/Blobs/04" data-select-label="Blobs 04"/>
+                        <we-button data-shape="web_editor/Blobs/05" data-select-label="Blobs 05"/>
+                        <we-button data-shape="web_editor/Blobs/06" data-select-label="Blobs 06"/>
+                        <we-button data-shape="web_editor/Blobs/07" data-select-label="Blobs 07"/>
+                        <we-button data-shape="web_editor/Blobs/08" data-select-label="Blobs 08"/>
+                        <we-button data-shape="web_editor/Blobs/09" data-select-label="Blobs 09"/>
+                        <we-button data-shape="web_editor/Blobs/10" data-select-label="Blobs 10"/>
+                        <we-button data-shape="web_editor/Blobs/11" data-select-label="Blobs 11"/>
+                        <we-button data-shape="web_editor/Blobs/12" data-select-label="Blobs 12"/>
+                    </we-select-page>
+                    <we-select-page string="Rainy">
+                        <we-button data-shape="web_editor/Rainy/01" data-select-label="Rainy 01"/>
+                        <we-button data-shape="web_editor/Rainy/02" data-select-label="Rainy 02"/>
+                        <we-button data-shape="web_editor/Rainy/03" data-select-label="Rainy 03"/>
+                        <we-button data-shape="web_editor/Rainy/04" data-select-label="Rainy 04"/>
+                        <we-button data-shape="web_editor/Rainy/05" data-select-label="Rainy 05"/>
+                        <we-button data-shape="web_editor/Rainy/06" data-select-label="Rainy 06"/>
+                        <we-button data-shape="web_editor/Rainy/07" data-select-label="Rainy 07"/>
+                        <we-button data-shape="web_editor/Rainy/08" data-select-label="Rainy 08"/>
+                        <we-button data-shape="web_editor/Rainy/09" data-select-label="Rainy 09"/>
+                    </we-select-page>
+                    <we-select-page string="Zigs">
                         <we-button data-shape="web_editor/Zigs/01" data-select-label="Zigs 01"/>
                         <we-button data-shape="web_editor/Zigs/02" data-select-label="Zigs 02"/>
                         <we-button data-shape="web_editor/Zigs/03" data-select-label="Zigs 03"/>
                         <we-button data-shape="web_editor/Zigs/04" data-select-label="Zigs 04"/>
                         <we-button data-shape="web_editor/Zigs/05" data-select-label="Zigs 05"/>
                     </we-select-page>
+                    <we-select-page string="Bold">
+                        <we-button data-shape="web_editor/Bold/01" data-select-label="Bold 01"/>
+                        <we-button data-shape="web_editor/Bold/02" data-select-label="Bold 02"/>
+                        <we-button data-shape="web_editor/Bold/03" data-select-label="Bold 03"/>
+                        <we-button data-shape="web_editor/Bold/04" data-select-label="Bold 04"/>
+                        <we-button data-shape="web_editor/Bold/05" data-select-label="Bold 05"/>
+                        <we-button data-shape="web_editor/Bold/06" data-select-label="Bold 06"/>
+                        <we-button data-shape="web_editor/Bold/07" data-select-label="Bold 07"/>
+                        <we-button data-shape="web_editor/Bold/08" data-select-label="Bold 08"/>
+                        <we-button data-shape="web_editor/Bold/09" data-select-label="Bold 09"/>
+                        <we-button data-shape="web_editor/Bold/10" data-select-label="Bold 10"/>
+                        <we-button data-shape="web_editor/Bold/11" data-select-label="Bold 11"/>
+                        <we-button data-shape="web_editor/Bold/12" data-select-label="Bold 12"/>
+                    </we-select-page>
+                    <we-select-page string="Airy">
+                        <we-button data-shape="web_editor/Airy/01" data-select-label="Airy 01"/>
+                        <we-button data-shape="web_editor/Airy/02" data-select-label="Airy 02"/>
+                        <we-button data-shape="web_editor/Airy/03" data-select-label="Airy 03"/>
+                        <we-button data-shape="web_editor/Airy/04" data-select-label="Airy 04"/>
+                        <we-button data-shape="web_editor/Airy/05" data-select-label="Airy 05"/>
+                        <we-button data-shape="web_editor/Airy/06" data-select-label="Airy 06"/>
+                        <we-button data-shape="web_editor/Airy/07" data-select-label="Airy 07"/>
+                        <we-button data-shape="web_editor/Airy/08" data-select-label="Airy 08"/>
+                        <we-button data-shape="web_editor/Airy/09" data-select-label="Airy 09"/>
+                        <we-button data-shape="web_editor/Airy/10" data-select-label="Airy 10"/>
+                        <we-button data-shape="web_editor/Airy/11" data-select-label="Airy 11"/>
+                        <we-button data-shape="web_editor/Airy/12" data-select-label="Airy 12"/>
+                        <we-button data-shape="web_editor/Airy/13" data-select-label="Airy 13"/>
+                        <we-button data-shape="web_editor/Airy/14" data-select-label="Airy 14"/>
+                    </we-select-page>
                 </we-select-pager>
                 <we-row string=" ⌙ Flip"><!-- &emsp; -->
                     <we-button data-flip-x="true" data-no-preview="true" data-dependencies="!shape_none_opt"><i class="fa fa-fw fa-arrows-h"/></we-button>
                     <we-button data-flip-y="true" data-no-preview="true" data-dependencies="!shape_none_opt"><i class="fa fa-fw fa-arrows-v"/></we-button>
                 </we-row>
-                <we-row string=" ⌙ Colors" data-name="colors"/>
+                <we-row string=" ⌙ Colors" data-name="colors">
+                    <we-colorpicker data-select-style="" data-css-property="background-color" data-color-prefix="bg-" data-apply-to=".o_we_shape"/>
+                </we-row>
             </we-collapse>
         </div>
     </t>