[IMP] website: add templates for masonry snippet
Add an option in the masonry snippet's allowing to choose among multiple templates for the snippet layout. The usability of the snippet also has been reviewed (restrict the ability to control background on deeper boxes). Also reviewed the bg-200 use on boxes and replaced them with a preset as otherwise it seems buggy to not be able to remove the bg-200 by selecting a preset (other than hitting the trash icon in the colorpicker). Part of https://github.com/odoo/odoo/pull/67361 task-2463033 closes odoo/odoo#67361 Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com> Co-authored-by: smottet <oms@odoo.com> Co-authored-by: qsm-odoo <qsm@odoo.com>
This commit is contained in:
Tioneb88
committed by
qsm-odoo
qsm-odoo
co-authored by
smottet
qsm-odoo
smottet
qsm-odoo
parent
bebb45e6d5
commit
c90ab7b664
@@ -174,6 +174,7 @@
|
||||
'website/static/src/snippets/s_facebook_page/options.js',
|
||||
'website/static/src/snippets/s_image_gallery/options.js',
|
||||
'website/static/src/snippets/s_countdown/options.js',
|
||||
'website/static/src/snippets/s_masonry_block/options.js',
|
||||
'website/static/src/snippets/s_popup/options.js',
|
||||
'website/static/src/snippets/s_product_catalog/options.js',
|
||||
'website/static/src/snippets/s_chart/options.js',
|
||||
|
||||
@@ -776,6 +776,12 @@
|
||||
<field name="type">url</field>
|
||||
<field name="url">/website/static/src/img/snippets_demo/s_masonry_block_1.jpg</field>
|
||||
</record>
|
||||
<record id="website.s_masonry_block_default_image_2" model="ir.attachment">
|
||||
<field name="public" eval="True"/>
|
||||
<field name="name">s_masonry_block_default_image_2.jpg</field>
|
||||
<field name="type">url</field>
|
||||
<field name="url">/website/static/src/img/snippets_demo/s_cover.jpg</field>
|
||||
</record>
|
||||
<record id="website.s_media_list_default_image_1" model="ir.attachment">
|
||||
<field name="public" eval="True"/>
|
||||
<field name="name">s_media_list_default_image_1.jpg</field>
|
||||
|
||||
+45
@@ -0,0 +1,45 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="240" height="70" viewBox="0 0 240 70">
|
||||
<defs>
|
||||
<linearGradient id="s_masonry_gradient_1" gradientUnits="userSpaceOnUse" x1="82" y1="52" x2="75" y2="45">
|
||||
<stop offset="0%" stop-color="#008374"/>
|
||||
<stop offset="100%" stop-color="#006a59"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="s_masonry_gradient_2" gradientUnits="userSpaceOnUse" x1="42" y1="42" x2="22" y2="55">
|
||||
<stop offset="0%" stop-color="#00aa89"/>
|
||||
<stop offset="100%" stop-color="#009989"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<!-- Background -->
|
||||
<rect x="0" y="5" width="240" height="60" fill="#9ccde4"/>
|
||||
<!-- Image -->
|
||||
<circle cx="45" cy="20" r="6" fill="#f3ed63"/>
|
||||
<g transform="translate(-50, 0)">
|
||||
<path fill="url(#s_masonry_gradient_1)" d="M75.2,50.2c-4.9,0-9.5,1-13.5,2.8c5.1,3.4,9.1,7.5,11.5,12.1h27.6C97.9,56.5,87.5,50.2,75.2,50.2z"/>
|
||||
<path fill="url(#s_masonry_gradient_2)" d="M0,65.1h73.2c-6.7-12.9-25.8-22.2-48.5-22.2c-9,0-17.4,1.5-24.7,4C0,46.9,0,65.1,0,65.1z"/>
|
||||
</g>
|
||||
|
||||
<!-- Text -->
|
||||
<rect x="60" y="5" width="60" height="60" fill="#ffffff"/>
|
||||
<rect x="75" y="30" width="30" height="2" fill="#333333"/>
|
||||
<rect x="75" y="35" width="30" height="1" fill="#777777"/>
|
||||
<rect x="75" y="38" width="30" height="1" fill="#777777"/>
|
||||
<rect x="75" y="41" width="20" height="1" fill="#777777"/>
|
||||
|
||||
<!-- Image -->
|
||||
<circle cx="165" cy="20" r="6" fill="#f3ed63"/>
|
||||
<mask id="o_masonry_mask_3">
|
||||
<rect x="50" y="5" width="60" height="60" fill="#ffffff"/>
|
||||
</mask>
|
||||
<g transform="translate(70, 0)">
|
||||
<path fill="url(#s_masonry_gradient_1)" d="M75.2,50.2c-4.9,0-9.5,1-13.5,2.8c5.1,3.4,9.1,7.5,11.5,12.1h27.6C97.9,56.5,87.5,50.2,75.2,50.2z"/>
|
||||
<path mask="url(#o_masonry_mask_3)" fill="url(#s_masonry_gradient_2)" d="M0,65.1h73.2c-6.7-12.9-25.8-22.2-48.5-22.2c-9,0-17.4,1.5-24.7,4C0,46.9,0,65.1,0,65.1z"/>
|
||||
</g>
|
||||
|
||||
<!-- Text -->
|
||||
<rect x="180" y="5" width="60" height="60" fill="#ffffff"/>
|
||||
<rect x="195" y="30" width="30" height="2" fill="#333333"/>
|
||||
<rect x="195" y="35" width="30" height="1" fill="#777777"/>
|
||||
<rect x="195" y="38" width="30" height="1" fill="#777777"/>
|
||||
<rect x="195" y="41" width="20" height="1" fill="#777777"/>
|
||||
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.3 KiB |
+44
@@ -0,0 +1,44 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="240" height="70" viewBox="0 0 240 70">
|
||||
<defs>
|
||||
<linearGradient id="s_masonry_gradient_1" gradientUnits="userSpaceOnUse" x1="82" y1="52" x2="75" y2="45">
|
||||
<stop offset="0%" stop-color="#008374"/>
|
||||
<stop offset="100%" stop-color="#006a59"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="s_masonry_gradient_2" gradientUnits="userSpaceOnUse" x1="42" y1="42" x2="22" y2="55">
|
||||
<stop offset="0%" stop-color="#00aa89"/>
|
||||
<stop offset="100%" stop-color="#009989"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<!-- Background -->
|
||||
<rect x="0" y="5" width="240" height="60" fill="#9ccde4"/>
|
||||
<!-- Text -->
|
||||
<rect x="0" y="5" width="60" height="60" fill="#ffffff"/>
|
||||
<rect x="15" y="30" width="30" height="2" fill="#333333"/>
|
||||
<rect x="15" y="35" width="30" height="1" fill="#777777"/>
|
||||
<rect x="15" y="38" width="30" height="1" fill="#777777"/>
|
||||
<rect x="15" y="41" width="20" height="1" fill="#777777"/>
|
||||
<!-- Image -->
|
||||
<circle cx="105" cy="20" r="6" fill="#f3ed63"/>
|
||||
<mask id="o_masonry_mask_1">
|
||||
<rect x="50" y="5" width="60" height="60" fill="#ffffff"/>
|
||||
</mask>
|
||||
<g transform="translate(10, 0)">
|
||||
<path fill="url(#s_masonry_gradient_1)" d="M75.2,50.2c-4.9,0-9.5,1-13.5,2.8c5.1,3.4,9.1,7.5,11.5,12.1h27.6C97.9,56.5,87.5,50.2,75.2,50.2z"/>
|
||||
<path mask="url(#o_masonry_mask_1)" fill="url(#s_masonry_gradient_2)" d="M0,65.1h73.2c-6.7-12.9-25.8-22.2-48.5-22.2c-9,0-17.4,1.5-24.7,4C0,46.9,0,65.1,0,65.1z"/>
|
||||
</g>
|
||||
<!-- Text -->
|
||||
<rect x="120" y="5" width="60" height="60" fill="#ffffff"/>
|
||||
<rect x="135" y="30" width="30" height="2" fill="#333333"/>
|
||||
<rect x="135" y="35" width="30" height="1" fill="#777777"/>
|
||||
<rect x="135" y="38" width="30" height="1" fill="#777777"/>
|
||||
<rect x="135" y="41" width="20" height="1" fill="#777777"/>
|
||||
<!-- Image -->
|
||||
<circle cx="225" cy="20" r="6" fill="#f3ed63"/>
|
||||
<mask id="o_masonry_mask_2">
|
||||
<rect x="50" y="5" width="60" height="60" fill="#ffffff"/>
|
||||
</mask>
|
||||
<g transform="translate(130, 0)">
|
||||
<path fill="url(#s_masonry_gradient_1)" d="M75.2,50.2c-4.9,0-9.5,1-13.5,2.8c5.1,3.4,9.1,7.5,11.5,12.1h27.6C97.9,56.5,87.5,50.2,75.2,50.2z"/>
|
||||
<path mask="url(#o_masonry_mask_2)" fill="url(#s_masonry_gradient_2)" d="M0,65.1h73.2c-6.7-12.9-25.8-22.2-48.5-22.2c-9,0-17.4,1.5-24.7,4C0,46.9,0,65.1,0,65.1z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.5 KiB |
+29
@@ -0,0 +1,29 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="240" height="70" viewBox="0 0 240 70">
|
||||
<defs>
|
||||
<linearGradient id="s_masonry_gradient_1" gradientUnits="userSpaceOnUse" x1="82" y1="52" x2="75" y2="45">
|
||||
<stop offset="0%" stop-color="#008374"/>
|
||||
<stop offset="100%" stop-color="#006a59"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="s_masonry_gradient_2" gradientUnits="userSpaceOnUse" x1="42" y1="42" x2="22" y2="55">
|
||||
<stop offset="0%" stop-color="#00aa89"/>
|
||||
<stop offset="100%" stop-color="#009989"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<!-- Text -->
|
||||
<rect x="0" y="5" width="60" height="60" fill="#ffffff"/>
|
||||
<rect x="15" y="30" width="30" height="2" fill="#333333"/>
|
||||
<rect x="15" y="35" width="30" height="1" fill="#777777"/>
|
||||
<rect x="15" y="38" width="30" height="1" fill="#777777"/>
|
||||
<rect x="15" y="41" width="20" height="1" fill="#777777"/>
|
||||
<!-- Image -->
|
||||
<rect x="60" y="5" width="120" height="60" fill="#9ccde4"/>
|
||||
<circle cx="160" cy="25" r="6" fill="#f3ed63"/>
|
||||
<path fill="url(#s_masonry_gradient_1)" d="M75.2,50.2c-4.9,0-9.5,1-13.5,2.8c5.1,3.4,9.1,7.5,11.5,12.1h27.6C97.9,56.5,87.5,50.2,75.2,50.2z" transform="translate(60, 0)"/>
|
||||
<path fill="url(#s_masonry_gradient_2)" d="M0,65.1h73.2c-6.7-12.9-25.8-22.2-48.5-22.2c-9,0-17.4,1.5-24.7,4C0,46.9,0,65.1,0,65.1z" transform="translate(60, 0)"/>
|
||||
<!-- Text -->
|
||||
<rect x="180" y="5" width="60" height="60" fill="#ffffff"/>
|
||||
<rect x="195" y="30" width="30" height="2" fill="#333333"/>
|
||||
<rect x="195" y="35" width="30" height="1" fill="#777777"/>
|
||||
<rect x="195" y="38" width="30" height="1" fill="#777777"/>
|
||||
<rect x="195" y="41" width="20" height="1" fill="#777777"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.8 KiB |
@@ -0,0 +1,26 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="240" height="70" viewBox="0 0 240 70">
|
||||
<!-- Text -->
|
||||
<rect x="0" y="5" width="60" height="60" fill="#ffffff"/>
|
||||
<rect x="15" y="30" width="30" height="2" fill="#333333"/>
|
||||
<rect x="15" y="35" width="30" height="1" fill="#777777"/>
|
||||
<rect x="15" y="38" width="30" height="1" fill="#777777"/>
|
||||
<rect x="15" y="41" width="20" height="1" fill="#777777"/>
|
||||
<!-- Text -->
|
||||
<rect x="60" y="5" width="60" height="60" fill="#c9ecfc"/>
|
||||
<rect x="75" y="30" width="30" height="2" fill="#333333"/>
|
||||
<rect x="75" y="35" width="30" height="1" fill="#777777"/>
|
||||
<rect x="75" y="38" width="30" height="1" fill="#777777"/>
|
||||
<rect x="75" y="41" width="20" height="1" fill="#777777"/>
|
||||
<!-- Text -->
|
||||
<rect x="120" y="5" width="60" height="60" fill="#ffffff"/>
|
||||
<rect x="135" y="30" width="30" height="2" fill="#333333"/>
|
||||
<rect x="135" y="35" width="30" height="1" fill="#777777"/>
|
||||
<rect x="135" y="38" width="30" height="1" fill="#777777"/>
|
||||
<rect x="135" y="41" width="20" height="1" fill="#777777"/>
|
||||
<!-- Text -->
|
||||
<rect x="180" y="5" width="60" height="60" fill="#c9ecfc"/>
|
||||
<rect x="195" y="30" width="30" height="2" fill="#333333"/>
|
||||
<rect x="195" y="35" width="30" height="1" fill="#777777"/>
|
||||
<rect x="195" y="38" width="30" height="1" fill="#777777"/>
|
||||
<rect x="195" y="41" width="20" height="1" fill="#777777"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
@@ -0,0 +1,37 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="240" height="70" viewBox="0 0 240 70">
|
||||
<defs>
|
||||
<linearGradient id="s_masonry_gradient_1" gradientUnits="userSpaceOnUse" x1="82" y1="52" x2="75" y2="45">
|
||||
<stop offset="0%" stop-color="#008374"/>
|
||||
<stop offset="100%" stop-color="#006a59"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="s_masonry_gradient_2" gradientUnits="userSpaceOnUse" x1="42" y1="42" x2="22" y2="55">
|
||||
<stop offset="0%" stop-color="#00aa89"/>
|
||||
<stop offset="100%" stop-color="#009989"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<!-- Image -->
|
||||
<rect x="0" y="5" width="120" height="60" fill="#9ccde4"/>
|
||||
<circle cx="105" cy="20" r="6" fill="#f3ed63"/>
|
||||
<path fill="url(#s_masonry_gradient_1)" d="M75.2,50.2c-4.9,0-9.5,1-13.5,2.8c5.1,3.4,9.1,7.5,11.5,12.1h27.6C97.9,56.5,87.5,50.2,75.2,50.2z"/>
|
||||
<path fill="url(#s_masonry_gradient_2)" d="M0,65.1h73.2c-6.7-12.9-25.8-22.2-48.5-22.2c-9,0-17.4,1.5-24.7,4C0,46.9,0,65.1,0,65.1z"/>
|
||||
<!-- Background -->
|
||||
<rect x="120" y="5" width="120" height="60" fill="#c9ecfc"/>
|
||||
<!-- Text -->
|
||||
<rect x="120" y="5" width="60" height="30" fill="#ffffff"/>
|
||||
<rect x="135" y="16" width="30" height="2" fill="#222222"/>
|
||||
<rect x="135" y="21" width="30" height="1" fill="#666666"/>
|
||||
<rect x="135" y="24" width="20" height="1" fill="#666666"/>
|
||||
<!-- Text -->
|
||||
<rect x="135" y="46" width="30" height="2" fill="#222222"/>
|
||||
<rect x="135" y="51" width="30" height="1" fill="#666666"/>
|
||||
<rect x="135" y="54" width="20" height="1" fill="#666666"/>
|
||||
<!-- Text -->
|
||||
<rect x="195" y="16" width="30" height="2" fill="#333333"/>
|
||||
<rect x="195" y="21" width="30" height="1" fill="#666666"/>
|
||||
<rect x="195" y="24" width="20" height="1" fill="#666666"/>
|
||||
<!-- Text -->
|
||||
<rect x="180" y="35" width="60" height="30" fill="#ffffff"/>
|
||||
<rect x="195" y="46" width="30" height="2" fill="#333333"/>
|
||||
<rect x="195" y="51" width="30" height="1" fill="#666666"/>
|
||||
<rect x="195" y="54" width="20" height="1" fill="#666666"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.1 KiB |
@@ -0,0 +1,36 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="240" height="70" viewBox="0 0 240 70">
|
||||
<defs>
|
||||
<linearGradient id="s_masonry_gradient_1" gradientUnits="userSpaceOnUse" x1="82" y1="52" x2="75" y2="45">
|
||||
<stop offset="0%" stop-color="#008374"/>
|
||||
<stop offset="100%" stop-color="#006a59"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="s_masonry_gradient_2" gradientUnits="userSpaceOnUse" x1="42" y1="42" x2="22" y2="55">
|
||||
<stop offset="0%" stop-color="#00aa89"/>
|
||||
<stop offset="100%" stop-color="#009989"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<!-- Background -->
|
||||
<rect x="0" y="5" width="240" height="60" fill="#9ccde4"/>
|
||||
<!-- Image -->
|
||||
<circle cx="45" cy="20" r="6" fill="#f3ed63"/>
|
||||
<g transform="translate(-50, 0)">
|
||||
<path fill="url(#s_masonry_gradient_1)" d="M75.2,50.2c-4.9,0-9.5,1-13.5,2.8c5.1,3.4,9.1,7.5,11.5,12.1h27.6C97.9,56.5,87.5,50.2,75.2,50.2z"/>
|
||||
<path fill="url(#s_masonry_gradient_2)" d="M0,65.1h73.2c-6.7-12.9-25.8-22.2-48.5-22.2c-9,0-17.4,1.5-24.7,4C0,46.9,0,65.1,0,65.1z"/>
|
||||
</g>
|
||||
<!-- Text -->
|
||||
<rect x="60" y="5" width="60" height="30" fill="#ffffff"/>
|
||||
<rect x="75" y="16" width="30" height="2" fill="#333333"/>
|
||||
<rect x="75" y="21" width="30" height="1" fill="#666666"/>
|
||||
<rect x="75" y="24" width="20" height="1" fill="#666666"/>
|
||||
<!-- Text -->
|
||||
<rect x="60" y="35" width="60" height="30" fill="#c9ecfc"/>
|
||||
<rect x="75" y="46" width="30" height="2" fill="#333333"/>
|
||||
<rect x="75" y="51" width="30" height="1" fill="#666666"/>
|
||||
<rect x="75" y="54" width="20" height="1" fill="#666666"/>
|
||||
<!-- Image -->
|
||||
<circle cx="225" cy="20" r="6" fill="#f3ed63"/>
|
||||
<g transform="translate(120, 0)">
|
||||
<path fill="url(#s_masonry_gradient_1)" d="M75.2,50.2c-4.9,0-9.5,1-13.5,2.8c5.1,3.4,9.1,7.5,11.5,12.1h27.6C97.9,56.5,87.5,50.2,75.2,50.2z"/>
|
||||
<path fill="url(#s_masonry_gradient_2)" d="M0,65.1h73.2c-6.7-12.9-25.8-22.2-48.5-22.2c-9,0-17.4,1.5-24.7,4C0,46.9,0,65.1,0,65.1z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.0 KiB |
@@ -0,0 +1,24 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="240" height="70" viewBox="0 0 240 70">
|
||||
<defs>
|
||||
<linearGradient id="s_masonry_gradient_1" gradientUnits="userSpaceOnUse" x1="82" y1="52" x2="75" y2="45">
|
||||
<stop offset="0%" stop-color="#008374"/>
|
||||
<stop offset="100%" stop-color="#006a59"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="s_masonry_gradient_2" gradientUnits="userSpaceOnUse" x1="42" y1="42" x2="22" y2="55">
|
||||
<stop offset="0%" stop-color="#00aa89"/>
|
||||
<stop offset="100%" stop-color="#009989"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<!-- Background -->
|
||||
<rect x="0" y="5" width="240" height="60" fill="#9ccde4"/>
|
||||
<!-- Image -->
|
||||
<circle cx="105" cy="20" r="6" fill="#f3ed63"/>
|
||||
<path fill="url(#s_masonry_gradient_1)" d="M75.2,50.2c-4.9,0-9.5,1-13.5,2.8c5.1,3.4,9.1,7.5,11.5,12.1h27.6C97.9,56.5,87.5,50.2,75.2,50.2z"/>
|
||||
<path fill="url(#s_masonry_gradient_2)" d="M0,65.1h73.2c-6.7-12.9-25.8-22.2-48.5-22.2c-9,0-17.4,1.5-24.7,4C0,46.9,0,65.1,0,65.1z"/>
|
||||
<!-- Image -->
|
||||
<circle cx="225" cy="20" r="6" fill="#f3ed63"/>
|
||||
<path fill="url(#s_masonry_gradient_1)" d="M75.2,50.2c-4.9,0-9.5,1-13.5,2.8c5.1,3.4,9.1,7.5,11.5,12.1h27.6C97.9,56.5,87.5,50.2,75.2,50.2z" transform="translate(120, 0)"/>
|
||||
<path fill="url(#s_masonry_gradient_2)" d="M0,65.1h73.2c-6.7-12.9-25.8-22.2-48.5-22.2c-9,0-17.4,1.5-24.7,4C0,46.9,0,65.1,0,65.1z" transform="translate(120, 0)"/>
|
||||
<!-- Separator -->
|
||||
<line x1="119" y1="5" x2="119" y2="65" stroke-width="2" stroke="#ffffff"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.6 KiB |
@@ -0,0 +1,55 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="240" height="70" viewBox="0 0 240 70">
|
||||
<defs>
|
||||
<linearGradient id="s_masonry_gradient_1" gradientUnits="userSpaceOnUse" x1="82" y1="52" x2="75" y2="45">
|
||||
<stop offset="0%" stop-color="#008374"/>
|
||||
<stop offset="100%" stop-color="#006a59"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="s_masonry_gradient_2" gradientUnits="userSpaceOnUse" x1="42" y1="42" x2="22" y2="55">
|
||||
<stop offset="0%" stop-color="#00aa89"/>
|
||||
<stop offset="100%" stop-color="#009989"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<!-- Background -->
|
||||
<rect x="0" y="5" width="240" height="60" fill="#9ccde4"/>
|
||||
<!-- Text -->
|
||||
<rect x="0" y="5" width="60" height="30" fill="#c9ecfc"/>
|
||||
<rect x="15" y="16" width="30" height="2" fill="#333333"/>
|
||||
<rect x="15" y="21" width="30" height="1" fill="#666666"/>
|
||||
<rect x="15" y="24" width="20" height="1" fill="#666666"/>
|
||||
<!-- Text -->
|
||||
<rect x="60" y="5" width="60" height="30" fill="#ffffff"/>
|
||||
<rect x="75" y="16" width="30" height="2" fill="#333333"/>
|
||||
<rect x="75" y="21" width="30" height="1" fill="#666666"/>
|
||||
<rect x="75" y="24" width="20" height="1" fill="#666666"/>
|
||||
<!-- Image -->
|
||||
<circle cx="105" cy="48" r="6" fill="#f3ed63"/>
|
||||
<mask id="s_masonry_mask_4">
|
||||
<rect x="0" y="28" width="120" height="30" fill="#ffffff"/>
|
||||
</mask>
|
||||
<g transform="translate(0, 7)" mask="url(#s_masonry_mask_4)" >
|
||||
<path fill="url(#s_masonry_gradient_1)" d="M75.2,50.2c-4.9,0-9.5,1-13.5,2.8c5.1,3.4,9.1,7.5,11.5,12.1h27.6C97.9,56.5,87.5,50.2,75.2,50.2z"/>
|
||||
<path fill="url(#s_masonry_gradient_2)" d="M0,65.1h73.2c-6.7-12.9-25.8-22.2-48.5-22.2c-9,0-17.4,1.5-24.7,4C0,46.9,0,65.1,0,65.1z"/>
|
||||
</g>
|
||||
|
||||
|
||||
<!-- Image -->
|
||||
<circle cx="225" cy="18" r="6" fill="#f3ed63"/>
|
||||
<!-- <mask id="s_masonry_mask_5">
|
||||
<rect x="0" y="28" width="120" height="30" fill="#ffffff"/>
|
||||
</mask> -->
|
||||
<g transform="translate(120, -23)" mask="url(#s_masonry_mask_4)" >
|
||||
<path fill="url(#s_masonry_gradient_1)" d="M75.2,50.2c-4.9,0-9.5,1-13.5,2.8c5.1,3.4,9.1,7.5,11.5,12.1h27.6C97.9,56.5,87.5,50.2,75.2,50.2z"/>
|
||||
<path fill="url(#s_masonry_gradient_2)" d="M0,65.1h73.2c-6.7-12.9-25.8-22.2-48.5-22.2c-9,0-17.4,1.5-24.7,4C0,46.9,0,65.1,0,65.1z"/>
|
||||
</g>
|
||||
|
||||
<!-- Text -->
|
||||
<rect x="120" y="35" width="60" height="30" fill="#c9ecfc"/>
|
||||
<rect x="135" y="46" width="30" height="2" fill="#222222"/>
|
||||
<rect x="135" y="51" width="30" height="1" fill="#666666"/>
|
||||
<rect x="135" y="54" width="20" height="1" fill="#666666"/>
|
||||
<!-- Text -->
|
||||
<rect x="180" y="35" width="60" height="30" fill="#ffffff"/>
|
||||
<rect x="195" y="46" width="30" height="2" fill="#333333"/>
|
||||
<rect x="195" y="51" width="30" height="1" fill="#666666"/>
|
||||
<rect x="195" y="54" width="20" height="1" fill="#666666"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.9 KiB |
@@ -0,0 +1,37 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="240" height="70" viewBox="0 0 240 70">
|
||||
<defs>
|
||||
<linearGradient id="s_masonry_gradient_1" gradientUnits="userSpaceOnUse" x1="82" y1="52" x2="75" y2="45">
|
||||
<stop offset="0%" stop-color="#008374"/>
|
||||
<stop offset="100%" stop-color="#006a59"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="s_masonry_gradient_2" gradientUnits="userSpaceOnUse" x1="42" y1="42" x2="22" y2="55">
|
||||
<stop offset="0%" stop-color="#00aa89"/>
|
||||
<stop offset="100%" stop-color="#009989"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<!-- Background -->
|
||||
<rect x="0" y="5" width="120" height="60" fill="#c9ecfc"/>
|
||||
<!-- Text -->
|
||||
<rect x="0" y="5" width="60" height="30" fill="#ffffff"/>
|
||||
<rect x="15" y="16" width="30" height="2" fill="#222222"/>
|
||||
<rect x="15" y="21" width="30" height="1" fill="#666666"/>
|
||||
<rect x="15" y="24" width="20" height="1" fill="#666666"/>
|
||||
<!-- Text -->
|
||||
<rect x="15" y="46" width="30" height="2" fill="#222222"/>
|
||||
<rect x="15" y="51" width="30" height="1" fill="#666666"/>
|
||||
<rect x="15" y="54" width="20" height="1" fill="#666666"/>
|
||||
<!-- Text -->
|
||||
<rect x="75" y="16" width="30" height="2" fill="#333333"/>
|
||||
<rect x="75" y="21" width="30" height="1" fill="#666666"/>
|
||||
<rect x="75" y="24" width="20" height="1" fill="#666666"/>
|
||||
<!-- Text -->
|
||||
<rect x="60" y="35" width="60" height="30" fill="#ffffff"/>
|
||||
<rect x="75" y="46" width="30" height="2" fill="#333333"/>
|
||||
<rect x="75" y="51" width="30" height="1" fill="#666666"/>
|
||||
<rect x="75" y="54" width="20" height="1" fill="#666666"/>
|
||||
<!-- Image -->
|
||||
<rect x="120" y="5" width="120" height="60" fill="#9ccde4"/>
|
||||
<circle cx="225" cy="20" r="6" fill="#f3ed63"/>
|
||||
<path style="s_masonry_gradient_1" fill="url(#s_masonry_gradient_1)" d="M75.2,50.2c-4.9,0-9.5,1-13.5,2.8c5.1,3.4,9.1,7.5,11.5,12.1h27.6C97.9,56.5,87.5,50.2,75.2,50.2z" transform="translate(120, 0)"/>
|
||||
<path style="s_masonry_gradient_2" fill="url(#s_masonry_gradient_2)" d="M0,65.1h73.2c-6.7-12.9-25.8-22.2-48.5-22.2c-9,0-17.4,1.5-24.7,4C0,46.9,0,65.1,0,65.1z" transform="translate(120, 0)"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.2 KiB |
@@ -0,0 +1,39 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="240" height="70" viewBox="0 0 240 70">
|
||||
<defs>
|
||||
<linearGradient id="s_masonry_gradient_1" gradientUnits="userSpaceOnUse" x1="82" y1="52" x2="75" y2="45">
|
||||
<stop offset="0%" stop-color="#008374"/>
|
||||
<stop offset="100%" stop-color="#006a59"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="s_masonry_gradient_2" gradientUnits="userSpaceOnUse" x1="42" y1="42" x2="22" y2="55">
|
||||
<stop offset="0%" stop-color="#00aa89"/>
|
||||
<stop offset="100%" stop-color="#009989"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<!-- Text -->
|
||||
<rect x="0" y="5" width="60" height="30" fill="#ffffff"/>
|
||||
<rect x="15" y="16" width="30" height="2" fill="#333333"/>
|
||||
<rect x="15" y="21" width="30" height="1" fill="#666666"/>
|
||||
<rect x="15" y="24" width="20" height="1" fill="#666666"/>
|
||||
<!-- Text -->
|
||||
<rect x="0" y="35" width="60" height="30" fill="#c9ecfc"/>
|
||||
<rect x="15" y="46" width="30" height="2" fill="#333333"/>
|
||||
<rect x="15" y="51" width="30" height="1" fill="#666666"/>
|
||||
<rect x="15" y="54" width="20" height="1" fill="#666666"/>
|
||||
<!-- Image -->
|
||||
<rect x="60" y="5" width="120" height="60" fill="#9ccde4"/>
|
||||
<circle cx="160" cy="25" r="6" fill="#f3ed63"/>
|
||||
<g transform="translate(60, 0)">
|
||||
<path fill="url(#s_masonry_gradient_1)" d="M75.2,50.2c-4.9,0-9.5,1-13.5,2.8c5.1,3.4,9.1,7.5,11.5,12.1h27.6C97.9,56.5,87.5,50.2,75.2,50.2z"/>
|
||||
<path fill="url(#s_masonry_gradient_2)" d="M0,65.1h73.2c-6.7-12.9-25.8-22.2-48.5-22.2c-9,0-17.4,1.5-24.7,4C0,46.9,0,65.1,0,65.1z"/>
|
||||
</g>
|
||||
<!-- Text -->
|
||||
<rect x="180" y="5" width="60" height="30" fill="#c9ecfc"/>
|
||||
<rect x="195" y="16" width="30" height="2" fill="#333333"/>
|
||||
<rect x="195" y="21" width="30" height="1" fill="#666666"/>
|
||||
<rect x="195" y="24" width="20" height="1" fill="#666666"/>
|
||||
<!-- Text -->
|
||||
<rect x="180" y="35" width="60" height="30" fill="#ffffff"/>
|
||||
<rect x="195" y="46" width="30" height="2" fill="#333333"/>
|
||||
<rect x="195" y="51" width="30" height="1" fill="#666666"/>
|
||||
<rect x="195" y="54" width="20" height="1" fill="#666666"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.2 KiB |
@@ -0,0 +1,99 @@
|
||||
/** @odoo-module */
|
||||
|
||||
import options from 'web_editor.snippets.options';
|
||||
|
||||
options.registry.MasonryLayout = options.Class.extend({
|
||||
custom_events: Object.assign({}, options.Class.prototype.custom_events, {
|
||||
'user_value_widget_opening': '_onWidgetOpening',
|
||||
}),
|
||||
|
||||
/**
|
||||
* @constructor
|
||||
*/
|
||||
async start() {
|
||||
this.containerEl = this.$target.find('> .container, > .container-fluid, > .o_container_small')[0];
|
||||
this._templates = {};
|
||||
return this._super(...arguments);
|
||||
},
|
||||
|
||||
//--------------------------------------------------------------------------
|
||||
// Options
|
||||
//--------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Changes the masonry snippet layout.
|
||||
*
|
||||
* @see this.selectClass for parameters
|
||||
*/
|
||||
async selectMasonryTemplate(previewMode, widgetValue, params) {
|
||||
await this._templatesLoading;
|
||||
|
||||
if (previewMode === 'reset') {
|
||||
if (!this.beforePreviewNodes) {
|
||||
// FIXME should not be necessary: only needed because we have a
|
||||
// strange 'reset' sent after a non-preview
|
||||
return;
|
||||
}
|
||||
|
||||
// Empty the container and restore the original content
|
||||
while (this.containerEl.lastChild) {
|
||||
this.containerEl.removeChild(this.containerEl.lastChild);
|
||||
}
|
||||
for (const node of this.beforePreviewNodes) {
|
||||
this.containerEl.appendChild(node);
|
||||
}
|
||||
this.beforePreviewNodes = null;
|
||||
return;
|
||||
}
|
||||
|
||||
if (!this.beforePreviewNodes) {
|
||||
// We are about the apply a template on non-previewed content,
|
||||
// save that content's nodes.
|
||||
this.beforePreviewNodes = [...this.containerEl.childNodes];
|
||||
}
|
||||
// Empty the container and add the template content
|
||||
while (this.containerEl.lastChild) {
|
||||
this.containerEl.removeChild(this.containerEl.lastChild);
|
||||
}
|
||||
this.containerEl.insertAdjacentHTML('beforeend', this._templates[widgetValue]);
|
||||
|
||||
if (!previewMode) {
|
||||
// The original content to keep saved has to be retrieved just
|
||||
// before the preview (if we save it now, we might miss other items
|
||||
// added by other options or custo).
|
||||
this.beforePreviewNodes = null;
|
||||
}
|
||||
},
|
||||
|
||||
//--------------------------------------------------------------------------
|
||||
// Handlers
|
||||
//--------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @param {OdooEvent} ev
|
||||
*/
|
||||
_onWidgetOpening(ev) {
|
||||
if (this._templatesLoading || ev.target.getName() !== 'masonry_template_opt') {
|
||||
return;
|
||||
}
|
||||
const templateParams = ev.target.getMethodsParams('selectMasonryTemplate');
|
||||
const proms = templateParams.possibleValues.map(async xmlid => {
|
||||
if (!xmlid) {
|
||||
return;
|
||||
}
|
||||
// TODO should be better and retrieve all rendering in one RPC (but
|
||||
// those ~10 RPC are only done once per edit mode if masonry snippet
|
||||
// option is opened, so I guess this is acceptable).
|
||||
this._templates[xmlid] = await this._rpc({
|
||||
model: 'ir.ui.view',
|
||||
method: 'render_public_asset',
|
||||
args: [`${xmlid}`, {}],
|
||||
kwargs: {
|
||||
context: this.options.context,
|
||||
},
|
||||
});
|
||||
});
|
||||
this._templatesLoading = Promise.all(proms);
|
||||
},
|
||||
});
|
||||
@@ -1,37 +1,305 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<odoo>
|
||||
|
||||
<!-- Template -->
|
||||
<!-- Template to fill with the chosen view -->
|
||||
<template id="s_masonry_block" name="Masonry">
|
||||
<section class="s_masonry_block" data-vcss="001">
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-lg-6 oe_img_bg o_bg_img_center text-center pb224 pt224" data-name="Block" style="background-image: url(/web/image/website.s_masonry_block_default_image_1);">
|
||||
<p><br/></p>
|
||||
<t t-call="website.s_masonry_block_default_template"/>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<template id="s_masonry_block_default_template" groups="base.group_user">
|
||||
<div class="row">
|
||||
<div class="col-lg-6 oe_img_bg text-center pb224 pt224" data-name="Block" style="background-image: url(/web/image/website.s_masonry_block_default_image_1);">
|
||||
<p><br/></p>
|
||||
</div>
|
||||
<div class="col-lg-6 s_col_no_resize">
|
||||
<div class="row h-100">
|
||||
<div class="col-lg-6 pt24 pb8 text-center o_cc o_cc2" data-name="Block">
|
||||
<h3>A great title</h3>
|
||||
<p>And a great subtitle</p>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="row h-100">
|
||||
<div class="col-lg-6 pt24 pb8 text-center o_cc o_cc3" data-name="Block">
|
||||
<h3>A great title</h3>
|
||||
<p>And a great subtitle</p>
|
||||
</div>
|
||||
<div class="col-lg-6 pt24 pb8 text-center bg-200" data-name="Block">
|
||||
<h3>A great title</h3>
|
||||
<p>And a great subtitle</p>
|
||||
</div>
|
||||
<div class="col-lg-6 pt24 pb8 text-center bg-200" data-name="Block">
|
||||
<h3>A great title</h3>
|
||||
<p>And a great subtitle</p>
|
||||
</div>
|
||||
<div class="col-lg-6 pt24 pb8 text-center o_cc o_cc4" data-name="Block">
|
||||
<h3>A great title</h3>
|
||||
<p>And a great subtitle</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6 pt24 pb8 text-center o_cc o_cc3" data-name="Block">
|
||||
<h3>A great title</h3>
|
||||
<p>And a great subtitle</p>
|
||||
</div>
|
||||
<div class="col-lg-6 pt24 pb8 text-center o_cc o_cc4" data-name="Block">
|
||||
<h3>A great title</h3>
|
||||
<p>And a great subtitle</p>
|
||||
</div>
|
||||
<div class="col-lg-6 pt24 pb8 text-center o_cc o_cc2" data-name="Block">
|
||||
<h3>A great title</h3>
|
||||
<p>And a great subtitle</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template id="s_masonry_block_reversed_template" groups="base.group_user">
|
||||
<div class="row">
|
||||
<div class="col-lg-6 s_col_no_resize">
|
||||
<div class="row h-100">
|
||||
<div class="col-lg-6 pt24 pb8 text-center o_cc o_cc3" data-name="Block">
|
||||
<h3>A great title</h3>
|
||||
<p>And a great subtitle</p>
|
||||
</div>
|
||||
<div class="col-lg-6 pt24 pb8 text-center o_cc o_cc2" data-name="Block">
|
||||
<h3>A great title</h3>
|
||||
<p>And a great subtitle</p>
|
||||
</div>
|
||||
<div class="col-lg-6 pt24 pb8 text-center o_cc o_cc2" data-name="Block">
|
||||
<h3>A great title</h3>
|
||||
<p>And a great subtitle</p>
|
||||
</div>
|
||||
<div class="col-lg-6 pt24 pb8 text-center o_cc o_cc4" data-name="Block">
|
||||
<h3>A great title</h3>
|
||||
<p>And a great subtitle</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6 oe_img_bg text-center pb224 pt224" data-name="Block" style="background-image: url(/web/image/website.s_masonry_block_default_image_1);">
|
||||
<p><br/></p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template id="s_masonry_block_images_template" groups="base.group_user">
|
||||
<div class="row">
|
||||
<div class="col-lg-6 oe_img_bg text-center pb224 pt224" data-name="Block" style="background-image: url(/web/image/website.s_masonry_block_default_image_1);">
|
||||
<p><br/></p>
|
||||
</div>
|
||||
<div class="col-lg-6 oe_img_bg text-center pb224 pt224" data-name="Block" style="background-image: url(/web/image/website.s_masonry_block_default_image_2);">
|
||||
<p><br/></p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template id="s_masonry_block_image_texts_image_template" groups="base.group_user">
|
||||
<div class="row">
|
||||
<div class="col-lg-3 oe_img_bg text-center pt224 pb224" data-name="Block" style="background-image: url(/web/image/website.s_masonry_block_default_image_2);">
|
||||
<p><br/></p>
|
||||
</div>
|
||||
<div class="col-lg-3 s_col_no_resize">
|
||||
<div class="row h-100">
|
||||
<div class="col-lg-12 pt24 pb8 text-center o_cc o_cc2" data-name="Block">
|
||||
<h3>A great title</h3>
|
||||
<p>And a great subtitle</p>
|
||||
</div>
|
||||
<div class="col-lg-12 pt24 pb8 text-center o_cc o_cc4" data-name="Block">
|
||||
<h3>A great title</h3>
|
||||
<p>And a great subtitle</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6 oe_img_bg text-center pt224 pb224" data-name="Block" style="background-image: url(/web/image/website.s_masonry_block_default_image_1);">
|
||||
<p><br/></p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template id="s_masonry_block_mosaic_template" groups="base.group_user">
|
||||
<div class="row">
|
||||
<div class="col-lg-6 s_col_no_resize">
|
||||
<div class="row">
|
||||
<div class="col-lg-6 pt24 pb8 text-center o_cc o_cc3" data-name="Block">
|
||||
<h3>A great title</h3>
|
||||
<p>And a great subtitle</p>
|
||||
</div>
|
||||
<div class="col-lg-6 pt24 pb8 text-center o_cc o_cc2" data-name="Block">
|
||||
<h3>A great title</h3>
|
||||
<p>And a great subtitle</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-lg-12 oe_img_bg text-center pt224 pb224" data-name="Block"
|
||||
style="background-image: url(/web/image/website.s_masonry_block_default_image_1);">
|
||||
<p><br/></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6 s_col_no_resize">
|
||||
<div class="row">
|
||||
<div class="col-lg-12 oe_img_bg text-center pt224 pb224" data-name="Block"
|
||||
style="background-image: url(/web/image/website.s_masonry_block_default_image_2);">
|
||||
<p><br/></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-lg-6 pt24 pb8 text-center o_cc o_cc2" data-name="Block">
|
||||
<h3>A great title</h3>
|
||||
<p>And a great subtitle</p>
|
||||
</div>
|
||||
<div class="col-lg-6 pt24 pb8 text-center o_cc o_cc4" data-name="Block">
|
||||
<h3>A great title</h3>
|
||||
<p>And a great subtitle</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template id="s_masonry_block_texts_image_texts_template" groups="base.group_user">
|
||||
<div class="row">
|
||||
<div class="col-lg-3 s_col_no_resize">
|
||||
<div class="row h-100">
|
||||
<div class="col-lg-12 pt24 pb8 text-center o_cc o_cc3" data-name="Block">
|
||||
<h3>A great title</h3>
|
||||
<p>And a great subtitle</p>
|
||||
</div>
|
||||
<div class="col-lg-12 pt24 pb8 text-center o_cc o_cc2" data-name="Block">
|
||||
<h3>A great title</h3>
|
||||
<p>And a great subtitle</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6 oe_img_bg text-center pt224 pb224" data-name="Block"
|
||||
style="background-image: url(/web/image/website.s_masonry_block_default_image_1);">
|
||||
<p><br/></p>
|
||||
</div>
|
||||
<div class="col-lg-3 s_col_no_resize">
|
||||
<div class="row h-100">
|
||||
<div class="col-lg-12 pt24 pb8 text-center o_cc o_cc2" data-name="Block">
|
||||
<h3>A great title</h3>
|
||||
<p>And a great subtitle</p>
|
||||
</div>
|
||||
<div class="col-lg-12 pt24 pb8 text-center o_cc o_cc4" data-name="Block">
|
||||
<h3>A great title</h3>
|
||||
<p>And a great subtitle</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template id="s_masonry_block_alternation_text_template" groups="base.group_user">
|
||||
<div class="row">
|
||||
<div class="col-lg-3 pt24 pb8 text-center o_cc o_cc2" data-name="Block">
|
||||
<h3>A great title</h3>
|
||||
<p>And a great subtitle</p>
|
||||
</div>
|
||||
<div class="col-lg-3 pt24 pb8 text-center o_cc o_cc4" data-name="Block">
|
||||
<h3>A great title</h3>
|
||||
<p>And a great subtitle</p>
|
||||
</div>
|
||||
<div class="col-lg-3 pt24 pb8 text-center o_cc o_cc2" data-name="Block">
|
||||
<h3>A great title</h3>
|
||||
<p>And a great subtitle</p>
|
||||
</div>
|
||||
<div class="col-lg-3 pt24 pb8 text-center o_cc o_cc3" data-name="Block">
|
||||
<h3>A great title</h3>
|
||||
<p>And a great subtitle</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template id="s_masonry_block_alternation_text_image_template" groups="base.group_user">
|
||||
<div class="row">
|
||||
<div class="col-lg-3 pt24 pb8 text-center o_cc o_cc2" data-name="Block">
|
||||
<h3>A great title</h3>
|
||||
<p>And a great subtitle</p>
|
||||
</div>
|
||||
<div class="col-lg-3 oe_img_bg text-center pt224 pb224" data-name="Block" style="background-image: url(/web/image/website.s_masonry_block_default_image_1);">
|
||||
<p><br/></p>
|
||||
</div>
|
||||
<div class="col-lg-3 pt24 pb8 text-center o_cc o_cc2" data-name="Block">
|
||||
<h3>A great title</h3>
|
||||
<p>And a great subtitle</p>
|
||||
</div>
|
||||
<div class="col-lg-3 oe_img_bg text-center pt224 pb224" data-name="Block" style="background-image: url(/web/image/website.s_masonry_block_default_image_2);">
|
||||
<p><br/></p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template id="s_masonry_block_alternation_image_text_template" groups="base.group_user">
|
||||
<div class="row">
|
||||
<div class="col-lg-3 oe_img_bg text-center pt224 pb224" data-name="Block" style="background-image: url(/web/image/website.s_masonry_block_default_image_1);">
|
||||
<p><br/></p>
|
||||
</div>
|
||||
<div class="col-lg-3 pt24 pb8 text-center o_cc o_cc4" data-name="Block">
|
||||
<h3>A great title</h3>
|
||||
<p>And a great subtitle</p>
|
||||
</div>
|
||||
<div class="col-lg-3 oe_img_bg text-center pt224 pb224" data-name="Block" style="background-image: url(/web/image/website.s_masonry_block_default_image_2);">
|
||||
<p><br/></p>
|
||||
</div>
|
||||
<div class="col-lg-3 pt24 pb8 text-center o_cc o_cc3" data-name="Block">
|
||||
<h3>A great title</h3>
|
||||
<p>And a great subtitle</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template id="s_masonry_block_alternation_text_image_text_template" groups="base.group_user">
|
||||
<div class="row">
|
||||
<div class="col-lg-3 pt24 pb8 text-center o_cc o_cc2" data-name="Block">
|
||||
<h3>A great title</h3>
|
||||
<p>And a great subtitle</p>
|
||||
</div>
|
||||
<div class="col-lg-6 oe_img_bg text-center pt224 pb224" data-name="Block" style="background-image: url(/web/image/website.s_masonry_block_default_image_1);">
|
||||
<p><br/></p>
|
||||
</div>
|
||||
<div class="col-lg-3 pt24 pb8 text-center o_cc o_cc2" data-name="Block">
|
||||
<h3>A great title</h3>
|
||||
<p>And a great subtitle</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- Options -->
|
||||
<template id="s_product_catalog_options" inherit_id="website.snippet_options">
|
||||
<xpath expr="//div[@data-js='layout_column']" position="after">
|
||||
<div data-js="MasonryLayout" data-selector=".s_masonry_block">
|
||||
<we-select string="Template"
|
||||
data-name="masonry_template_opt"
|
||||
data-attribute-name="masonryTemplate"
|
||||
data-attribute-default-value="default">
|
||||
<we-button title="Default"
|
||||
data-select-masonry-template="website.s_masonry_block_default_template"
|
||||
data-select-data-attribute="default"
|
||||
data-img="/website/static/src/img/snippets_options/masonry_template_default.svg"/>
|
||||
<we-button title="Default Reversed"
|
||||
data-select-masonry-template="website.s_masonry_block_reversed_template"
|
||||
data-select-data-attribute="default_reversed"
|
||||
data-img="/website/static/src/img/snippets_options/masonry_template_reversed.svg"/>
|
||||
<we-button title="Images"
|
||||
data-select-masonry-template="website.s_masonry_block_images_template"
|
||||
data-select-data-attribute="images"
|
||||
data-img="/website/static/src/img/snippets_options/masonry_template_images.svg"/>
|
||||
<we-button title="Image Text Image"
|
||||
data-select-masonry-template="website.s_masonry_block_image_texts_image_template"
|
||||
data-select-data-attribute="image_text_image"
|
||||
data-img="/website/static/src/img/snippets_options/masonry_template_image_texts_image.svg"/>
|
||||
<we-button title="Mosaic"
|
||||
data-select-masonry-template="website.s_masonry_block_mosaic_template"
|
||||
data-select-data-attribute="mosaic"
|
||||
data-img="/website/static/src/img/snippets_options/masonry_template_mosaic.svg"/>
|
||||
<we-button title="Text Image Text"
|
||||
data-select-masonry-template="website.s_masonry_block_texts_image_texts_template"
|
||||
data-select-data-attribute="text_image_text"
|
||||
data-img="/website/static/src/img/snippets_options/masonry_template_texts_image_texts.svg"/>
|
||||
<we-button title="Alternate Text"
|
||||
data-select-masonry-template="website.s_masonry_block_alternation_text_template"
|
||||
data-select-data-attribute="alternate_text"
|
||||
data-img="/website/static/src/img/snippets_options/masonry_template_alternate_texts.svg"/>
|
||||
<we-button title="Alternate Text Image"
|
||||
data-select-masonry-template="website.s_masonry_block_alternation_text_image_template"
|
||||
data-select-data-attribute="alternate_text_image"
|
||||
data-img="/website/static/src/img/snippets_options/masonry_template_alternate_text_image.svg"/>
|
||||
<we-button title="Alternate Image Text"
|
||||
data-select-masonry-template="website.s_masonry_block_alternation_image_text_template"
|
||||
data-select-data-attribute="alternate_image_text"
|
||||
data-img="/website/static/src/img/snippets_options/masonry_template_alternate_image_text.svg"/>
|
||||
<we-button title="Alternate Text Image Text"
|
||||
data-select-masonry-template="website.s_masonry_block_alternation_text_image_text_template"
|
||||
data-select-data-attribute="alternate_text_image_text"
|
||||
data-img="/website/static/src/img/snippets_options/masonry_template_alternate_text_image_text.svg"/>
|
||||
</we-select>
|
||||
</div>
|
||||
</xpath>
|
||||
</template>
|
||||
|
||||
<!-- Assets -->
|
||||
|
||||
@@ -440,7 +440,8 @@
|
||||
|
||||
<div data-js="layout_column"
|
||||
data-selector="section"
|
||||
data-target="> *:has(> .row:not(.s_nb_column_fixed)), > .s_allow_columns">
|
||||
data-target="> *:has(> .row:not(.s_nb_column_fixed)), > .s_allow_columns"
|
||||
data-exclude=".s_masonry_block">
|
||||
<we-select string="Columns" data-no-preview="true">
|
||||
<we-button data-select-count="0" data-name="zero_cols_opt">None</we-button>
|
||||
<we-button data-select-count="1">1</we-button>
|
||||
@@ -474,7 +475,7 @@
|
||||
<t t-set="only_bg_image_exclude" t-value="''"/>
|
||||
|
||||
<t t-set="both_bg_color_image_selector" t-value="'section, .carousel-item, .s_masonry_block .row > div, .s_color_blocks_2 .row > div, .parallax'"/>
|
||||
<t t-set="both_bg_color_image_exclude" t-value="base_only_bg_image_selector + ', .s_carousel_wrapper, .s_color_blocks_2, .s_image_gallery .carousel-item, .s_google_map, .s_map, [data-snippet] :not(.oe_structure) > [data-snippet]'"/>
|
||||
<t t-set="both_bg_color_image_exclude" t-value="base_only_bg_image_selector + ', .s_carousel_wrapper, .s_color_blocks_2, .s_image_gallery .carousel-item, .s_google_map, .s_map, [data-snippet] :not(.oe_structure) > [data-snippet], .s_masonry_block, .s_masonry_block .s_col_no_resize'"/>
|
||||
|
||||
<t t-call="web_editor.snippet_options_background_options">
|
||||
<t t-set="selector" t-value="both_bg_color_image_selector"/>
|
||||
@@ -504,14 +505,14 @@
|
||||
<!-- Border | Columns -->
|
||||
<div data-js="Box"
|
||||
data-selector="section .row > div"
|
||||
data-exclude=".s_col_no_bgcolor, .s_col_no_bgcolor.row > div, .s_image_gallery .row > div">
|
||||
data-exclude=".s_col_no_bgcolor, .s_col_no_bgcolor.row > div, .s_image_gallery .row > div, .s_masonry_block .s_col_no_resize">
|
||||
<t t-call="website.snippet_options_border_widgets"/>
|
||||
<t t-call="website.snippet_options_shadow_widgets"/>
|
||||
</div>
|
||||
|
||||
<!-- Mobile display options -->
|
||||
<div data-js="MobileVisibility" data-selector="section, section .row > div"
|
||||
data-exclude=".s_col_no_resize.row > div">
|
||||
data-exclude=".s_col_no_resize.row > div, .s_masonry_block .s_col_no_resize">
|
||||
<we-button class="o_we_link o_we_mobile" data-show-on-mobile="true" data-no-preview="true"
|
||||
data-img="/website/static/src/img/snippets_options/mobile_invisible.svg"
|
||||
data-active-img="/website/static/src/img/snippets_options/mobile_visible.svg"/>
|
||||
@@ -519,12 +520,12 @@
|
||||
|
||||
<div data-js="sizing_y"
|
||||
data-selector="section, .row > div, .parallax, .s_hr, .carousel-item, .s_rating"
|
||||
data-exclude="section:has(> .carousel), .s_image_gallery .carousel-item, .s_col_no_resize.row > div"/>
|
||||
data-exclude="section:has(> .carousel), .s_image_gallery .carousel-item, .s_col_no_resize.row > div, .s_col_no_resize"/>
|
||||
|
||||
<div data-js="sizing_x"
|
||||
data-selector=".row > div"
|
||||
data-drop-near=".row:not(.s_col_no_resize) > div"
|
||||
data-exclude=".s_col_no_resize.row > div"/>
|
||||
data-exclude=".s_col_no_resize.row > div, .s_col_no_resize"/>
|
||||
|
||||
<t t-set="so_snippet_addition_selector" t-translation="off">section, .parallax, .s_popup</t>
|
||||
<div id="so_snippet_addition"
|
||||
|
||||
Reference in New Issue
Block a user