[IMP] theme_odoo_experts: fine tune the theme with device shapes

This commit improves the global layout of theme_odoo_experts to give
more variety with the others corporate themes (buzzy, graphene, clean,
etc.).
The purpose is to have a theme that can be used to present an
application and to promote the new category of device shapes.

task-2666049

closes odoo/design-themes#525

Related: odoo/odoo#79068
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>

theme_odoo_experts/__manifest__.py

@@ -28,19 +28,19 @@
         'views/snippets/s_features_grid.xml',
         'views/snippets/s_product_list.xml',
         'views/snippets/s_quotes_carousel.xml',
+        'views/snippets/s_picture.xml',
+        'views/snippets/s_title.xml',
     ],
     'images': [
         'static/description/odoo_experts_description.jpg',
         'static/description/odoo_experts_screenshot.jpg',
     ],
     'images_preview_theme': {
-        'website.s_cover_default_image': '/theme_odoo_experts/static/src/img/snippets/s_cover.jpg',
-        'website.s_media_list_default_image_1': '/theme_odoo_experts/static/src/img/snippets/s_media_list_1.jpg',
-        'website.s_media_list_default_image_2': '/theme_odoo_experts/static/src/img/snippets/s_media_list_2.jpg',
-        'website.s_media_list_default_image_3': '/theme_odoo_experts/static/src/img/snippets/s_media_list_3.jpg',
+        'website.s_picture_default_image': '/theme_odoo_experts/static/src/img/snippets/s_picture.jpg',
+        'website.s_text_image_default_image': '/theme_odoo_experts/static/src/img/snippets/s_text_image.jpg',
     },
     'snippet_lists': {
-        'homepage': ['s_cover', 's_image_text', 's_media_list', 's_company_team', 's_references', 's_call_to_action'],
+        'homepage': ['s_picture', 's_references', 's_image_text', 's_text_image', 's_title', 's_comparisons', 's_call_to_action'],
     },
     'license': 'LGPL-3',
     'live_test_url': 'https://theme-odoo-experts.odoo.com',

theme_odoo_experts/static/src/js/tour.js

@@ -5,25 +5,29 @@ import { _t } from 'web.core';
 
 const snippets = [
     {
-        id: 's_cover',
-        name: 'Cover',
-    },
-    {
-        id: 's_image_text',
-        name: 'Image - Text',
-    },
-    {
-        id: 's_media_list',
-        name: 'Media List',
-    },
-    {
-        id: 's_company_team',
-        name: 'Team',
+        id: 's_picture',
+        name: 'Picture',
     },
     {
         id: 's_references',
         name: 'References',
     },
+    {
+        id: 's_text_image',
+        name: 'Image - Text',
+    },
+    {
+        id: 's_text_image',
+        name: 'Text - Image',
+    },
+    {
+        id: 's_title',
+        name: 'Title',
+    },
+    {
+        id: 's_comparisons',
+        name: 'Comparisons',
+    },
     {
         id: 's_call_to_action',
         name: 'Call to Action',
@@ -32,14 +36,16 @@ const snippets = [
 
 wTourUtils.registerThemeHomepageTour("odoo_experts_tour", [
     wTourUtils.dragNDrop(snippets[0]),
-    wTourUtils.clickOnText(snippets[0], 'h1'),
-    wTourUtils.goBackToBlocks(),
     wTourUtils.dragNDrop(snippets[1]),
     wTourUtils.dragNDrop(snippets[2]),
+    wTourUtils.clickOnText(snippets[2], 'h2'),
+    wTourUtils.goBackToBlocks(),
     wTourUtils.dragNDrop(snippets[3]),
     wTourUtils.dragNDrop(snippets[4]),
-    wTourUtils.clickOnSnippet(snippets[4], 'top'),
-    wTourUtils.changeOption('ContainerWidth', 'we-button-group.o_we_user_value_widget', _t('width')),
-    wTourUtils.goBackToBlocks(),
     wTourUtils.dragNDrop(snippets[5]),
+    wTourUtils.clickOnSnippet(snippets[5], 'top'),
+    wTourUtils.changeOption('BackgroundShape', 'we-toggler', _t('Background Shape')),
+    wTourUtils.selectNested('we-select-page', 'BackgroundShape', ':not(.o_we_pager_controls)', _t('Background Shape')),
+    wTourUtils.goBackToBlocks(),
+    wTourUtils.dragNDrop(snippets[6]),
 ]);

theme_odoo_experts/static/src/scss/primary_variables.scss

@@ -76,9 +76,15 @@ $o-website-values-palettes: (
         'logo-height': (52 / 16) * 1rem,
         'fixed-logo-height': (52 / 16) * 1rem,
         'header-font-size': 1rem,
-        'btn-border-radius': 0,
-        'btn-border-radius-lg': 0,
-        'btn-border-radius-sm': 0,
+        'btn-border-radius': 10rem,
+        'btn-border-radius-lg': 10rem,
+        'btn-border-radius-sm': 10rem,
+        'btn-padding-y': .45rem,
+        'btn-padding-x': 1.35rem,
+        'btn-padding-y-sm': .3rem,
+        'btn-padding-x-sm': .9rem,
+        'btn-padding-y-lg': .6rem,
+        'btn-padding-x-lg': 1.8rem,
         'font': 'Lato',
         'headings-font': 'Work Sans',
         'navbar-font': 'Work Sans',
@@ -90,6 +96,7 @@ $o-website-values-palettes: (
 );
 
 $o-palette-priority-prefix: 'odoo-experts';
+$o-selected-color-palettes-names: append($o-selected-color-palettes-names, 'odoo-experts-1');
 
 $o-color-palettes-compatibility-indexes: (
     1: 'odoo-experts-1',
@@ -129,3 +136,7 @@ $o-bg-shapes: change-shape-colors-mapping('web_editor', 'Blobs/04', (5: 5));
 $o-bg-shapes: change-shape-colors-mapping('web_editor', 'Rainy/10', (1: 5, 3: 5));
 $o-bg-shapes: change-shape-colors-mapping('web_editor', 'Airy/01', (1: 3));
 $o-bg-shapes: change-shape-colors-mapping('web_editor', 'Airy/03_001', (5: 4));
+$o-bg-shapes: change-shape-colors-mapping('web_editor', 'Wavy/08', (2: 2));
+$o-bg-shapes: change-shape-colors-mapping('web_editor', 'Bold/01', (2: 2));
+$o-bg-shapes: change-shape-colors-mapping('web_editor', 'Airy/12_001', (1: 5, 3: 1));
+$o-bg-shapes: change-shape-colors-mapping('web_editor', 'Wavy/04', (1: 5, 5: 4));

theme_odoo_experts/views/images.xml

@@ -206,4 +206,21 @@ Check in theme_loftspace's primary_variables.scss and theme.scss -->
     <field name="url">/theme_odoo_experts/static/src/img/snippets/s_product_catalog_default_image.jpg</field>
 </record>
 
+<!-- Use custom records to prevent some images from changing by the Configurator -->
+<record id="s_image_text_device" model="theme.ir.attachment">
+    <field name="key">website.s_image_text_device</field>
+    <field name="name">website.s_image_text_device</field>
+    <field name="url">/theme_odoo_experts/static/src/img/snippets/s_image_text_device.jpg</field>
+</record>
+<record id="s_image_text_device_perspective" model="theme.ir.attachment">
+    <field name="key">website.s_image_text_device_perspective</field>
+    <field name="name">website.s_image_text_device_perspective</field>
+    <field name="url">/theme_odoo_experts/static/src/img/snippets/s_image_text_device_perspective.jpg</field>
+</record>
+<record id="s_picture_default_image_bg" model="theme.ir.attachment">
+    <field name="key">website.s_picture_default_image_bg</field>
+    <field name="name">website.s_picture_default_image_bg</field>
+    <field name="url">/theme_odoo_experts/static/src/img/snippets/s_picture_bg.jpg</field>
+</record>
+
 </odoo>

theme_odoo_experts/views/snippets/s_call_to_action.xml

@@ -4,23 +4,25 @@
 <template id="s_call_to_action" inherit_id="website.s_call_to_action">
     <!-- Section -->
     <xpath expr="//section" position="attributes">
-        <attribute name="class" add="o_cc4 pb120 pt120" remove="o_cc3 pt48 pb24" separator=" "/>
-        <attribute name="data-oe-shape-data">{"shape":"web_editor/Floats/07","flip":[]}</attribute>
+        <attribute name="class" add="o_cc5 pb56 pt56" remove="o_cc3 pt48 pb24" separator=" "/>
     </xpath>
-    <!-- Shape -->
-    <xpath expr="//div[hasclass('container')]" position="before">
-        <div class="o_we_shape o_web_editor_Floats_07"/>
+    <!-- Left column -->
+    <xpath expr="//div[hasclass('col-lg-9')]" position="attributes">
+        <attribute name="class" add="col-lg-12" remove="col-lg-9" separator=" "/>
+    </xpath>
+    <!-- Right column -->
+    <xpath expr="//div[hasclass('col-lg-3')]/p" position="attributes">
+        <attribute name="style">text-align: center</attribute>
+    </xpath>
+    <xpath expr="//div[hasclass('col-lg-3')]" position="attributes">
+        <attribute name="class" add="col-lg-12" remove="col-lg-3" separator=" "/>
     </xpath>
     <!-- Title & Paragraph -->
-    <xpath expr="//h3" position="replace" mode="inner">
-        50,000+ clients trust us <br/>to protect their assets
+    <xpath expr="//h3" position="replace">
+        <h3 style="text-align: center;">50,000+ clients trust us <br/>to protect their assets</h3>
     </xpath>
-    <xpath expr="//p" position="replace" mode="inner">
-        Contact us for a personalized meeting
-    </xpath>
-    <!-- Button -->
-    <xpath expr="//a[hasclass('btn')]" position="attributes">
-        <attribute name="class" add="flat" separator=" "/>
+    <xpath expr="//p" position="replace">
+        <p style="text-align: center;">Contact us for a personalized meeting</p>
     </xpath>
 </template>
 

theme_odoo_experts/views/snippets/s_comparisons.xml

@@ -4,12 +4,11 @@
 <template id="s_comparisons" inherit_id="website.s_comparisons">
     <!-- Section -->
     <xpath expr="//section" position="attributes">
-        <attribute name="class" add="o_cc o_cc5 pb48 o_colored_level" remove="pb32" separator=" "/>
-        <attribute name="data-oe-shape-data">{"shape":"web_editor/Airy/01","flip":[]}</attribute>
+        <attribute name="data-oe-shape-data">{"shape":"web_editor/Wavy/04","flip":[]}</attribute>
     </xpath>
     <!-- Shape -->
     <xpath expr="//div[hasclass('container')]" position="before">
-        <div class="o_we_shape o_web_editor_Airy_01"/>
+        <div class="o_we_shape o_web_editor_Wavy_04"/>
     </xpath>
     <!-- Box #01 -->
     <xpath expr="//div[hasclass('row')]//div" position="attributes">
@@ -18,17 +17,12 @@
     <xpath expr="//div[hasclass('card')]" position="attributes">
         <attribute name="class" add="bg-o-color-3" remove="bg-200" separator=" "/>
     </xpath>
-    <!-- Box #01 - Button -->
-    <xpath expr="//div[hasclass('card')]//a[hasclass('btn')]" position="attributes">
-        <attribute name="class" add="flat" separator=" "/>
-    </xpath>
     <!-- Box #02 -->
     <xpath expr="(//div[hasclass('card')])[2]" position="attributes">
         <attribute name="class" add="bg-o-color-1" remove="bg-o-color-5" separator=" "/>
     </xpath>
-    <!-- Box #02 - Button -->
     <xpath expr="(//div[hasclass('card')])[2]//a[hasclass('btn')]" position="attributes">
-        <attribute name="class" add="btn-secondary flat" remove="btn-primary" separator=" "/>
+        <attribute name="class" add="btn-secondary" remove="bg-primary" separator=" "/>
     </xpath>
     <!-- Box #03 -->
     <xpath expr="//div[hasclass('row')]//div[3]" position="attributes">
@@ -37,10 +31,6 @@
     <xpath expr="(//div[hasclass('card')])[3]" position="attributes">
         <attribute name="class" add="bg-o-color-3" remove="bg-secondary" separator=" "/>
     </xpath>
-    <!-- Box #03 - Button -->
-    <xpath expr="(//div[hasclass('card')])[3]//a[hasclass('btn')]" position="attributes">
-        <attribute name="class" add="flat" separator=" "/>
-    </xpath>
 </template>
 
 </odoo>

theme_odoo_experts/views/snippets/s_image_text.xml

@@ -4,24 +4,32 @@
 <template id="s_image_text" inherit_id="website.s_image_text">
     <!-- Section -->
     <xpath expr="//section" position="attributes">
-        <attribute name="class" add="pt184 pb64" remove="pt32 pb32" separator=" "/>
-        <attribute name="data-oe-shape-data">{"shape":"web_editor/Origins/08","flip":[]}</attribute>
+        <attribute name="data-oe-shape-data">{"shape":"web_editor/Bold/01","flip":[]}</attribute>
     </xpath>
     <!-- Shape -->
     <xpath expr="//div[hasclass('container')]" position="before">
-        <div class="o_we_shape o_web_editor_Origins_08"/>
+        <div class="o_we_shape o_web_editor_Bold_01"/>
     </xpath>
     <!-- Column #1 -->
     <xpath expr="//div[hasclass('col-lg-6')]" position="attributes">
-        <attribute name="class" add="col-lg-8" remove="col-lg-6" separator=" "/>
+        <attribute name="class" add="col-lg-5" remove="col-lg-6" separator=" "/>
+    </xpath>
+    <!-- Image -->
+    <xpath expr="//img" position="attributes">
+        <attribute name="src">/web_editor/image_shape/website.s_image_text_device_perspective/web_editor/devices/iphone_3d_portrait_01.svg?c5=o-color-5</attribute>
+        <attribute name="data-shape">web_editor/devices/iphone_3d_portrait_01</attribute>
+        <attribute name="data-original-mimetype">image/jpg</attribute>
+        <attribute name="data-file-name">s_image_text_device_perspective.svg</attribute>
+        <attribute name="data-shape-colors">;;;;o-color-5</attribute>
+        <attribute name="style">padding: 48px !important;</attribute>
     </xpath>
     <!-- Column #2 -->
     <xpath expr="//div[hasclass('col-lg-6')]" position="attributes">
-        <attribute name="class" add="col-lg-4" remove="col-lg-6" separator=" "/>
+        <attribute name="class" add="offset-lg-1" separator=" "/>
     </xpath>
     <!-- Column #2 - Title -->
     <xpath expr="//h2" position="replace" mode="inner">
-        Our vision
+        A solution for <br/>every need
     </xpath>
     <!-- Column #2 - Paragraphs -->
     <xpath expr="//p" position="replace" mode="inner">
@@ -30,16 +38,6 @@
     <xpath expr="//p[2]" position="replace" mode="inner">
         We see our role as that of a legal partner responsible for constantly finding practical and pragmatic solutions that are adapted to our clients' needs.
     </xpath>
-    <!-- Column #2 - Button -->
-    <xpath expr="//a[hasclass('btn')]" position="attributes">
-        <attribute name="class" add="flat" separator=" "/>
-    </xpath>
-    <!-- Image -->
-    <xpath expr="//img" position="attributes">
-        <attribute name="style">padding: 32px !important;</attribute>
-        <!-- Enable SVG dynamic color functionality -->
-        <attribute name="src">/web_editor/shape/theme_odoo_experts/s_image_text.svg?c1=o-color-1</attribute>
-    </xpath>
 </template>
 
 </odoo>

theme_odoo_experts/views/snippets/s_picture.xml

@@ -0,0 +1,49 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+
+<template id="s_picture" inherit_id="website.s_picture">
+    <!-- Section -->
+    <xpath expr="//section" position="attributes">
+        <attribute name="class" remove="o_cc2" add="o_cc1 oe_img_bg" separator=" "/>
+        <attribute name="data-oe-shape-data">{"shape":"web_editor/Wavy/08","flip":["y"]}</attribute>
+        <attribute name="style">background-image: url('/web/image/website.s_picture_default_image_bg'); background-position: center;</attribute>
+    </xpath>
+    <!-- Shape & filter -->
+    <xpath expr="//div[hasclass('container')]" position="before">
+        <div class="o_we_bg_filter bg-white-75"/>
+        <div class="o_we_shape o_web_editor_Wavy_08 o_we_flip_y"/>
+    </xpath>
+    <!-- Title -->
+    <xpath expr="//h2" position="replace">
+        <h1 style="text-align: center;">
+            <font style="background-image: linear-gradient(135deg, var(--o-color-5) 0%, var(--o-color-1) 100%);" class="text-gradient">
+            Unleash your</font><br/>
+            <font style="background-image: linear-gradient(135deg, var(--o-color-5) 0%, var(--o-color-1) 100%);" class="text-gradient">growth potential</font>
+        </h1>
+    </xpath>
+    <!-- First paragraph -->
+    <xpath expr="//p[1]" position="replace" mode="inner">
+        <br/>
+        Ask your questions and discuss your projects with our partners.<br/>
+        They are here to help you grow your business!
+    </xpath>
+    <!-- Add a button -->
+    <xpath expr="//p[2]" position="after">
+        <p style="text-align: center;">
+            <a t-att-href="cta_btn_href" class="btn btn-primary mb-2 rounded-circle btn-lg"><t t-esc="cta_btn_text">Contact Us</t></a>
+        </p>
+    </xpath>
+    <!-- Image -->
+    <xpath expr="//div[hasclass('col-lg-10')]//img" position="attributes">
+        <attribute name="src">/web_editor/image_shape/website.s_picture_default_image/web_editor/devices/macbook_front.svg?c3=o-color-3</attribute>
+        <attribute name="data-shape">web_editor/devices/macbook_front</attribute>
+        <attribute name="data-original-mimetype">image/jpg</attribute>
+        <attribute name="data-file-name">s_picture.svg</attribute>
+        <attribute name="data-shape-colors">;;o-color-3;;</attribute>
+        <attribute name="class">img-fluid</attribute>
+    </xpath>
+    <!-- Remove figcaption -->
+    <xpath expr="//figcaption" position="replace"/>
+</template>
+
+</odoo>

theme_odoo_experts/views/snippets/s_references.xml

@@ -4,38 +4,11 @@
 <template id="s_references" inherit_id="website.s_references">
     <!-- Section -->
     <xpath expr="//section" position="attributes">
-        <attribute name="class" add="pb240 pt120 o_cc o_cc2" remove="pt48 pb32" separator=" "/>
-        <attribute name="data-oe-shape-data">{"shape":"web_editor/Origins/02_001","flip":[]}</attribute>
-    </xpath>
-    <!-- Shape -->
-    <xpath expr="//div[hasclass('container')]" position="before">
-        <div class="o_we_shape o_web_editor_Origins_02_001 o_second_extra_shape_mapping"/>
-    </xpath>
-    <!-- Row -->
-    <xpath expr="//div[hasclass('row')]" position="replace">
-        <div class="row justify-content-md-center">
-            <div class="col-lg-2 pt16 pb16">
-                <img src="/web/image/website.s_reference_demo_image_1" class="img img-fluid mx-auto" alt=""/>
-            </div>
-            <div class="col-lg-2 pt16 pb16">
-                <img src="/web/image/website.s_reference_demo_image_2" class="img img-fluid mx-auto" alt=""/>
-            </div>
-            <div class="col-lg-2 pt16 pb16">
-                <img src="/web/image/website.s_reference_demo_image_3" class="img img-fluid mx-auto" alt=""/>
-            </div>
-        </div>
-        <div class="row justify-content-md-center">
-            <div class="col-lg-2 pt16 pb16">
-                <img src="/web/image/website.s_reference_demo_image_4" class="img img-fluid mx-auto" alt=""/>
-            </div>
-            <div class="col-lg-2 pt16 pb16">
-                <img src="/web/image/website.s_reference_demo_image_5" class="img img-fluid mx-auto" alt=""/>
-            </div>
-            <div class="col-lg-2 pt16 pb16">
-                <img src="/web/image/website.s_reference_default_image_6" class="img img-fluid mx-auto" alt=""/>
-            </div>
-        </div>
+        <attribute name="class" add="pt0 pb56 o_cc o_cc2" remove="pt48 pb32" separator=" "/>
     </xpath>
+    <!-- Remove title and subtitle -->
+    <xpath expr="//h2" position="replace"/>
+    <xpath expr="//p" position="replace"/>
 </template>
 
 </odoo>

theme_odoo_experts/views/snippets/s_text_image.xml

@@ -4,26 +4,44 @@
 <template id="s_text_image" inherit_id="website.s_text_image">
     <!-- Section -->
     <xpath expr="//section" position="attributes">
-        <attribute name="class" add="o_cc o_cc3 pt64 pb64" remove="pt32 pb32" separator=" "/>
-        <attribute name="data-oe-shape-data">{"shape":"web_editor/Blobs/04","flip":["x"]}</attribute>
+        <attribute name="class" add="pt64 pb64" remove="pt32 pb32" separator=" "/>
+        <attribute name="data-oe-shape-data">{"shape":"web_editor/Airy/12_001","flip":["y"]}</attribute>
     </xpath>
     <!-- Shape -->
     <xpath expr="//div[hasclass('container')]" position="before">
-        <div class="o_we_shape o_web_editor_Blobs_04 o_we_flip_x"/>
+        <div class="o_we_shape o_web_editor_Airy_12_001 o_we_flip_y"/>
     </xpath>
     <!-- Column #1 -->
     <xpath expr="//div[hasclass('col-lg-6')]" position="attributes">
-        <attribute name="class" add="col-lg-4" remove="col-lg-6" separator=" "/>
+        <attribute name="class" add="col-lg-3" remove="col-lg-6" separator=" "/>
     </xpath>
     <!-- Column #2 -->
     <xpath expr="//div[hasclass('col-lg-6')]" position="attributes">
-        <attribute name="class" add="col-lg-7 offset-lg-1" remove="col-lg-6" separator=" "/>
+        <attribute name="class" add="col-lg-8 offset-lg-1" remove="col-lg-6" separator=" "/>
+    </xpath>
+    <!-- Title -->
+    <xpath expr="//h2" position="replace" mode="inner">
+        We care about results
+    </xpath>
+    <!-- Paragraphs -->
+    <xpath expr="//p" position="replace" mode="inner">
+        <br/>
+    </xpath>
+    <xpath expr="//p[2]" position="replace" mode="inner">
+        Guided by expertise gained over 20 years of achieving success for clients, we practice with passion and strategic focus on the future.
+    </xpath>
+    <!-- Button -->
+    <xpath expr="//a[hasclass('btn')]" position="attributes">
+        <attribute name="class" add="btn-lg" separator=" "/>
     </xpath>
     <!-- Image -->
     <xpath expr="//img" position="attributes">
-        <attribute name="style">padding: 32px !important;</attribute>
-        <!-- Enable SVG dynamic color functionality -->
-        <attribute name="src">/web_editor/shape/theme_odoo_experts/s_text_image.svg?c1=o-color-1</attribute>
+        <attribute name="src">/web_editor/image_shape/website.s_text_image_default_image/web_editor/devices/browser_02.svg?c4=o-color-4&amp;c5=o-color-2</attribute>
+        <attribute name="data-shape">web_editor/devices/browser_02</attribute>
+        <attribute name="data-original-mimetype">image/jpg</attribute>
+        <attribute name="data-file-name">s_text_image.svg</attribute>
+        <attribute name="data-shape-colors">;;;o-color-4;o-color-2</attribute>
+        <attribute name="class" add="rounded shadow" separator=" "/>
     </xpath>
 </template>
 

theme_odoo_experts/views/snippets/s_title.xml

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+
+<template id="s_title" inherit_id="website.s_title">
+    <!-- Section -->
+    <xpath expr="//h1/font" position="replace" mode="inner">
+        Pricing to suit<br/> all sizes of business
+    </xpath>
+</template>
+
+</odoo>