[IMP] theme_*: explode masonry snippet

See community commit for details

Note: this also fixes avantgarde svg/screenshot at the same time: we
remove the s_masonry_block but add the missing carousel.

(image contribution by MANO)

closes odoo/design-themes#1020

Related: odoo/odoo#183755
Related: odoo/upgrade#6642
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
Co-authored-by: mano-odoo <mano@odoo.com>

theme_avantgarde/__manifest__.py

@@ -23,7 +23,7 @@
         'website.library_image_16': '/theme_avantgarde/static/src/img/pictures/library_image_16.jpg',
     },
     'configurator_snippets': {
-        'homepage': ['s_sidegrid', 's_features_wall', 's_masonry_block', 's_carousel', 's_timeline', 's_quadrant'],
+        'homepage': ['s_sidegrid', 's_features_wall', 's_carousel', 's_timeline', 's_quadrant'],
     },
     'depends': ['theme_common'],
     'license': 'LGPL-3',

theme_avantgarde/static/src/js/tour.js

@@ -12,11 +12,6 @@ const snippets = [
         name: 'Features Wall',
         groupName: "Columns",
     },
-    {
-        id: 's_masonry_block',
-        name: 'Masonry',
-        groupName: "Images",
-    },
     {
         id: 's_carousel',
         name: 'Carousel',
@@ -40,11 +35,7 @@ wTourUtils.registerThemeHomepageTour("avantgarde_tour", () => [
     ...wTourUtils.clickOnText(snippets[0], 'h1', 'left'),
     wTourUtils.goBackToBlocks(),
     ...wTourUtils.insertSnippet(snippets[1], 'left'),
-    ...wTourUtils.insertSnippet(snippets[2], 'bottom'),
-    ...wTourUtils.clickOnSnippet(snippets[2], 'top'),
-    wTourUtils.changePaddingSize('top'),
-    wTourUtils.goBackToBlocks(),
+    ...wTourUtils.insertSnippet(snippets[2], 'top'),
     ...wTourUtils.insertSnippet(snippets[3], 'top'),
     ...wTourUtils.insertSnippet(snippets[4], 'top'),
-    ...wTourUtils.insertSnippet(snippets[5], 'top'),
 ]);

theme_avantgarde/views/customizations.xml

@@ -755,47 +755,6 @@
     </xpath>
 </template>
 
-<!-- ======== MASONRY ======== -->
-<template id="s_masonry_block" inherit_id="website.s_masonry_block">
-    <xpath expr="//section" position="attributes">
-        <attribute name="class" remove="pt48 pb48" separator=" "/>
-        <attribute name="data-masonry-template">alternate_text_image_text</attribute>
-    </xpath>
-    <xpath expr="//section/div" position="replace" mode="inner">
-        <t t-call="website.s_masonry_block_alternation_text_image_text_template"/>
-    </xpath>
-    <xpath expr="//section/div" position="attributes">
-        <attribute name="class" remove="container" add="container-fluid" separator=" "/>
-    </xpath>
-</template>
-
-<template id="s_masonry_block_alternation_text_image_text_template" inherit_id="website.s_masonry_block_alternation_text_image_text_template">
-    <!-- Block #1 -->
-    <!-- Main div -->
-    <xpath expr="(//div[hasclass('o_grid_item')])[1]" position="attributes">
-        <attribute name="style" remove="background-image: linear-gradient(135deg, var(--o-color-4) -400%, var(--o-color-2) 100%);" add="--grid-item-padding-x: 40px;" separator=";"/>
-    </xpath>
-    <!-- Title -->
-    <xpath expr="(//div[hasclass('o_grid_item')])[1]/h3" position="replace" mode="inner">
-        ✽<br/>Coming up in March<br/>✽
-    </xpath>
-    <!-- Paragraph -->
-    <xpath expr="(//div[hasclass('o_grid_item')])[1]/p" position="replace"/>
-
-    <!-- Block #2 -->
-    <!-- Main div -->
-    <xpath expr="(//div[hasclass('o_grid_item')])[3]" position="attributes">
-        <attribute name="class" remove="o_cc2" add="o_cc4" separator=" "/>
-        <attribute name="style" remove="background-image: linear-gradient(135deg, var(--o-color-4) -400%, var(--o-color-1) 100%);" add="--grid-item-padding-x: 40px;" separator=";"/>
-    </xpath>
-    <!-- Title -->
-    <xpath expr="(//div[hasclass('o_grid_item')])[3]/h3" position="replace" mode="inner">
-        ✽<br/>Our very new collection<br/>✽
-    </xpath>
-    <!-- Paragraph -->
-    <xpath expr="(//div[hasclass('o_grid_item')])[3]/p" position="replace"/>
-</template>
-
 <!-- ======== TIMELINE ======== -->
 <template id="s_timeline" inherit_id="website.s_timeline">
     <!-- Title -->

theme_aviato/__manifest__.py

@@ -72,7 +72,7 @@
         'website.s_quotes_carousel_demo_image_0': '/theme_aviato/static/src/img/content/s_quote_bg_1.jpg',
     },
     'configurator_snippets': {
-        'homepage': ['s_banner', 's_text_image', 's_image_text', 's_picture', 's_title', 's_masonry_block', 's_company_team', 's_showcase', 's_quotes_carousel'],
+        'homepage': ['s_banner', 's_text_image', 's_image_text', 's_picture', 's_title', 's_masonry_block_default_template', 's_company_team', 's_showcase', 's_quotes_carousel'],
     },
     'license': 'LGPL-3',
     'live_test_url': 'https://theme-aviato.odoo.com',

theme_aviato/static/src/js/tour.js

@@ -29,7 +29,7 @@ const snippets = [
         groupName: "Text",
     },
     {
-        id: 's_masonry_block',
+        id: 's_masonry_block_default_template',
         name: 'Masonry',
         groupName: "Images",
     },

theme_aviato/views/snippets/s_masonry_block.xml

@@ -2,13 +2,12 @@
 <odoo>
 
 <template id="s_masonry_block" inherit_id="website.s_masonry_block" name="Masonry">
-    <xpath expr="//section" position="replace">
-        <section class="s_masonry_block o_cc1 pt24 pb104" data-vcss="001" data-vxml="001" data-oe-shape-data="{'shape':'web_editor/Connections/20','colors':{'c5':'o-color-3'},'flip':['y'],'showOnMobile':true}">
-            <div class="o_we_shape o_web_editor_Connections_20 o_shape_show_mobile" style="background-image: url('/web_editor/shape/web_editor/Connections/20.svg?c5=o-color-3&amp;flip=y'); background-position: 50% 0%;"/>
-            <div class="container">
-                <t t-call="website.s_masonry_block_default_template"/>
-            </div>
-        </section>
+    <xpath expr="//section" position="attributes">
+        <attribute name="class" add="o_cc o_cc1 pt24 pb104" remove="pt48 pb48" separator=" "/>
+        <attribute name="data-oe-shape-data">{'shape':'web_editor/Connections/20','colors':{'c5':'o-color-3'},'flip':['y'],'showOnMobile':true}</attribute>
+    </xpath>
+    <xpath expr="//section/div" position="before">
+        <div class="o_we_shape o_web_editor_Connections_20 o_shape_show_mobile" style="background-image: url('/web_editor/shape/web_editor/Connections/20.svg?c5=o-color-3&amp;flip=y'); background-position: 50% 0%;"/>
     </xpath>
 </template>
 

theme_beauty/__manifest__.py

@@ -76,7 +76,7 @@
         'website.s_carousel_default_image_2': '/theme_beauty/static/src/img/snippets/s_carousel_2.jpg',
     },
     'configurator_snippets': {
-        'homepage': ['s_intro_pill', 's_masonry_block', 's_pricelist_boxed', 's_features_wall', 's_image_frame', 's_call_to_action'],
+        'homepage': ['s_intro_pill', 's_masonry_block_mosaic_template', 's_pricelist_boxed', 's_features_wall', 's_image_frame', 's_call_to_action'],
     },
     'license': 'LGPL-3',
     'live_test_url': 'https://theme-beauty.odoo.com',

theme_beauty/static/src/js/tour.js

@@ -9,7 +9,7 @@ const snippets = [
         groupName: "Intro",
     },
     {
-        id: 's_masonry_block',
+        id: 's_masonry_block_mosaic_template',
         name: 'Masonry',
         groupName: "Images",
     },

theme_beauty/views/snippets/s_masonry_block.xml

@@ -1,15 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <odoo>
 
-<template id="s_masonry_block" inherit_id="website.s_masonry_block">
-    <xpath expr="//t[@t-call='website.s_masonry_block_default_template']" position="replace">
-        <t t-call="website.s_masonry_block_mosaic_template"/>
-    </xpath>
-    <xpath expr="//section" position="attributes">
-        <attribute name="data-masonry-template">mosaic</attribute>
-    </xpath>
-</template>
-
 <template id="s_masonry_block_mosaic_template" inherit_id="website.s_masonry_block_mosaic_template">
     <xpath expr="//img" position="attributes">
         <attribute name="class" add="rounded" separator=" "/>

theme_bewise/__manifest__.py

@@ -24,7 +24,7 @@
         'website.s_masonry_block_default_image_1': '/theme_bewise/static/src/img/content/content_img_25.jpg',
     },
     'configurator_snippets': {
-        'homepage': ['s_striped_center_top', 's_title', 's_color_blocks_2', 's_faq_collapse', 's_masonry_block', 's_company_team_shapes'],
+        'homepage': ['s_striped_center_top', 's_title', 's_color_blocks_2', 's_faq_collapse', 's_masonry_block_default_template', 's_company_team_shapes'],
     },
     'license': 'LGPL-3',
     'live_test_url': 'https://theme-bewise.odoo.com',

theme_bewise/static/src/js/tour.js

@@ -23,7 +23,7 @@ const snippets = [
         groupName: "Text",
     },
     {
-        id: 's_masonry_block',
+        id: 's_masonry_block_default_template',
         name: 'Masonry',
         groupName: "Images",
     },

theme_bookstore/__manifest__.py

@@ -83,7 +83,7 @@
             'personal': ['s_text_cover', 's_image_text', 's_text_block_h2', 's_numbers', 's_features', 's_call_to_action'],
         },
         'landing': {
-            '1': ['s_banner', 's_features', 's_masonry_block', 's_call_to_action', 's_references', 's_quotes_carousel'],
+            '1': ['s_banner', 's_features', 's_masonry_block_default_template', 's_call_to_action', 's_references', 's_quotes_carousel'],
             '2': ['s_cover', 's_text_image', 's_text_block_h2', 's_three_columns_landing_1', 's_call_to_action'],
             '3': ['s_text_cover', 's_text_block_h2', 's_three_columns', 's_showcase', 's_color_blocks_2', 's_quotes_carousel', 's_call_to_action'],
         },

theme_buzzy/__manifest__.py

@@ -78,7 +78,7 @@
             'personal': ['s_text_cover', 's_image_text', 's_text_block_h2', 's_numbers', 's_features', 's_call_to_action'],
         },
         'landing': {
-            '1': ['s_banner', 's_features', 's_masonry_block', 's_call_to_action', 's_references', 's_quotes_carousel'],
+            '1': ['s_banner', 's_features', 's_masonry_block_default_template', 's_call_to_action', 's_references', 's_quotes_carousel'],
             '2': ['s_cover', 's_text_image', 's_text_block_h2', 's_three_columns_landing_1', 's_call_to_action'],
             '3': ['s_text_cover', 's_text_block_h2', 's_three_columns', 's_showcase', 's_color_blocks_2', 's_quotes_carousel', 's_call_to_action'],
         },

theme_enark/__manifest__.py

@@ -74,7 +74,7 @@
             'personal': ['s_text_cover', 's_image_text', 's_text_block_h2', 's_numbers', 's_features', 's_call_to_action'],
         },
         'landing': {
-            '1': ['s_banner', 's_features', 's_masonry_block', 's_call_to_action', 's_references', 's_quotes_carousel'],
+            '1': ['s_banner', 's_features', 's_masonry_block_default_template', 's_call_to_action', 's_references', 's_quotes_carousel'],
             '2': ['s_cover', 's_text_image', 's_text_block_h2', 's_three_columns_landing_1', 's_call_to_action'],
             '3': ['s_text_cover', 's_text_block_h2', 's_three_columns', 's_showcase', 's_color_blocks_2', 's_quotes_carousel', 's_call_to_action'],
         },

theme_nano/__manifest__.py

@@ -78,7 +78,7 @@
             'personal': ['s_text_cover', 's_image_text', 's_text_block_h2', 's_numbers', 's_features', 's_call_to_action'],
         },
         'landing': {
-            '1': ['s_banner', 's_features', 's_masonry_block', 's_call_to_action', 's_references', 's_quotes_carousel'],
+            '1': ['s_banner', 's_features', 's_masonry_block_default_template', 's_call_to_action', 's_references', 's_quotes_carousel'],
             '2': ['s_cover', 's_text_image', 's_text_block_h2', 's_three_columns_landing_1', 's_call_to_action'],
             '3': ['s_text_cover', 's_text_block_h2', 's_three_columns', 's_showcase', 's_color_blocks_2', 's_quotes_carousel', 's_call_to_action'],
         },

theme_orchid/__manifest__.py

@@ -71,7 +71,7 @@
             'personal': ['s_text_cover', 's_image_text', 's_text_block_h2', 's_numbers', 's_features', 's_call_to_action'],
         },
         'landing': {
-            '1': ['s_banner', 's_features', 's_masonry_block', 's_call_to_action', 's_references', 's_quotes_carousel'],
+            '1': ['s_banner', 's_features', 's_masonry_block_default_template', 's_call_to_action', 's_references', 's_quotes_carousel'],
             '2': ['s_cover', 's_text_image', 's_text_block_h2', 's_three_columns_landing_1', 's_call_to_action'],
             '3': ['s_text_cover', 's_text_block_h2', 's_three_columns', 's_showcase', 's_color_blocks_2', 's_quotes_carousel', 's_call_to_action'],
         },

theme_paptic/__manifest__.py

@@ -18,7 +18,7 @@
         'static/description/paptic_screenshot.jpg',
     ],
     'configurator_snippets': {
-        'homepage': ['s_cover', 's_references', 's_image_text', 's_text_image', 's_masonry_block', 's_faq_list', 's_cta_box'],
+        'homepage': ['s_cover', 's_references', 's_image_text', 's_text_image', 's_masonry_block_images_template', 's_faq_list', 's_cta_box'],
     },
     'new_page_templates': {
         'about': {

theme_paptic/static/src/js/tour.js

@@ -24,7 +24,7 @@ const snippets = [
         groupName: "Content",
     },
     {
-        id: 's_masonry_block',
+        id: 's_masonry_block_images_template',
         name: 'Masonry',
         groupName: "Images",
     },

theme_paptic/views/customizations.xml

@@ -745,15 +745,6 @@
 </template>
 
 <!-- ==== Masonry Block ===== -->
-<template id="s_masonry_block" inherit_id="website.s_masonry_block">
-    <xpath expr="//t[@t-call='website.s_masonry_block_default_template']" position="replace">
-        <t t-call="website.s_masonry_block_images_template"/>
-    </xpath>
-    <xpath expr="//section" position="attributes">
-        <attribute name="data-masonry-template">images</attribute>
-    </xpath>
-</template>
-
 <template id="s_masonry_block_images_template" inherit_id="website.s_masonry_block_images_template">
     <xpath expr="//div[hasclass('row')]" position="attributes">
         <attribute name="data-row-count">11</attribute>

theme_real_estate/views/snippets/s_masonry_block.xml

@@ -4,13 +4,6 @@
 <template id="s_masonry_block" inherit_id="website.s_masonry_block" name="Masonry">
     <xpath expr="//section" position="attributes">
         <attribute name="class" remove="pt48 pb48" separator=" "/>
-        <attribute name="data-masonry-template">default_reversed</attribute>
-    </xpath>
-    <xpath expr="//section/div" position="attributes">
-        <attribute name="class" remove="container" add="container-fluid" separator=" "/>
-    </xpath>
-    <xpath expr="//section/div" position="replace" mode="inner">
-        <t t-call="website.s_masonry_block_reversed_template"/>
     </xpath>
 </template>
 

theme_vehicle/views/customizations.xml

@@ -156,35 +156,6 @@
     </xpath>
 </template>
 
-<!-- ======== MASONRY BLOCK ======== -->
-<template id="s_masonry_block" inherit_id="website.s_masonry_block">
-    <xpath expr="//t[@t-call]" position="attributes">
-        <attribute name="t-call">website.s_masonry_block_image_texts_image_template</attribute>
-    </xpath>
-    <xpath expr="//section" position="attributes">
-        <attribute name="data-masonry-template">image_text_image</attribute>
-    </xpath>
-    <xpath expr="//section/div" position="attributes">
-        <attribute name="class" add="container-fluid" remove="container" separator=" "></attribute>
-    </xpath>
-</template>
-
-<template id="s_masonry_block_image_texts_image_template" inherit_id="website.s_masonry_block_image_texts_image_template" name="Vehicle s_masonry_block">
-    <xpath expr="//div[hasclass('col-lg-3')]" position="replace" mode="inner">
-        <img src="/web/image/website.s_parallax_default_image" class="img img-fluid mx-auto" alt=""/>
-    </xpath>
-    <!-- Block #02 -->
-    <xpath expr="(//h3)[2]" position="replace" mode="inner">
-        Electrifying <b>Performance</b>.
-    </xpath>
-    <xpath expr="//p" position="replace" mode="inner"/>
-    <!-- Block #03 -->
-    <xpath expr="(//h3)[3]" position="replace" mode="inner">
-        Smarter <b>Range</b>.
-    </xpath>
-    <xpath expr="(//p)[2]" position="replace" mode="inner"/>
-</template>
-
 <!-- ======== REFERENCES ======== -->
 <template id="s_references" inherit_id="website.s_references" name="Vehicle s_references">
     <xpath expr="//section" position="attributes">