[IMP] theme_clean: improve theme

task-4178066
Part of task-4177975

closes odoo/design-themes#929

Signed-off-by: Serge Bayet (seba) <seba@odoo.com>

theme_clean/__manifest__.py

@@ -12,6 +12,9 @@
         'views/image_content.xml',
 
         'views/snippets/s_cta_box.xml',
+        'views/snippets/s_cta_card.xml',
+        'views/snippets/s_accordion_image.xml',
+        'views/snippets/s_banner.xml',
         'views/snippets/s_cover.xml',
         'views/snippets/s_striped_top.xml',
         'views/snippets/s_card_offset.xml',
@@ -19,6 +22,7 @@
         'views/snippets/s_text_image.xml',
         'views/snippets/s_three_columns.xml',
         'views/snippets/s_call_to_action.xml',
+        'views/snippets/s_company_team.xml',
         'views/snippets/s_title.xml',
         'views/snippets/s_features.xml',
         'views/snippets/s_numbers.xml',
@@ -30,6 +34,7 @@
         'views/snippets/s_product_catalog.xml',
         'views/snippets/s_quotes_carousel.xml',
         'views/snippets/s_unveil.xml',
+        'views/snippets/s_numbers_showcase.xml',
         'views/snippets/s_key_benefits.xml',
         'views/snippets/s_pricelist_boxed.xml',
         'views/snippets/s_striped_center_top.xml',
@@ -46,17 +51,13 @@
         'static/description/clean_screenshot.jpg',
     ],
     'images_preview_theme': {
-        'website.s_cover_default_image': '/theme_clean/static/src/img/backgrounds/bg_snippet_09.jpg',
+        'website.s_image_text_default_image': '/theme_clean/static/src/img/content/image_content_20.jpg',
-        'website.s_text_image_default_image': '/theme_clean/static/src/img/content/image_content_19.jpg',
         'website.s_banner_default_image': '/theme_clean/static/src/img/backgrounds/bg_snippet_07.jpg',
-        'website.s_carousel_default_image_1': '/theme_clean/static/src/img/content/image_content_25.jpg',
+        'website.s_text_image_default_image': '/theme_clean/static/src/img/content/image_content_19.jpg',
-        'website.s_three_columns_default_image_1': '/theme_clean/static/src/img/content/image_content_22.jpg',
+        'website.s_picture_default_image': '/theme_clean/static/src/img/content/image_content_21.jpg',
-        'website.s_three_columns_default_image_2': '/theme_clean/static/src/img/content/image_content_23.jpg',
-        'website.s_three_columns_default_image_3': '/theme_clean/static/src/img/content/image_content_24.jpg',
     },
     'configurator_snippets': {
-        'homepage': ['s_cover', 's_text_image', 's_title', 's_features', 's_carousel', 's_numbers',
+        'homepage': ['s_banner', 's_color_blocks_2', 's_title', 's_text_image', 's_image_text', 's_numbers_showcase', 's_company_team', 's_accordion_image', 's_cta_card'], 
-                     's_three_columns', 's_call_to_action'],
     },
     'license': 'LGPL-3',
     'live_test_url': 'https://theme-clean.odoo.com',

theme_clean/models/theme_clean.py

@@ -5,8 +5,5 @@ class ThemeClean(models.AbstractModel):
     _inherit = 'theme.utils'
 
     def _theme_clean_post_copy(self, mod):
-        self.enable_view('website.template_header_hamburger')
+        self.enable_view('website.template_header_default')
-        self.enable_view('website.template_header_hamburger_align_right')
-        self.enable_view('website.no_autohide_menu')
-
         self.enable_view('website.template_footer_contact')

theme_clean/static/src/js/tour.js

@@ -1,17 +1,16 @@
 /** @odoo-module */
 
 import * as wTourUtils from '@website/js/tours/tour_utils';
-import { _t } from "@web/core/l10n/translation";
 
 const snippets = [
     {
-        id: 's_cover',
+        id: 's_banner',
-        name: 'Cover',
+        name: 'Banner',
         groupName: "Intro",
     },
     {
-        id: 's_text_image',
+        id: 's_color_blocks_2',
-        name: 'Text - Image',
+        name: 'Big Boxes',
         groupName: "Content",
     },
     {
@@ -20,28 +19,33 @@ const snippets = [
         groupName: "Text",
     },
     {
-        id: 's_features',
+        id: 's_text_image',
-        name: 'Features',
+        name: 'Text - Image',
         groupName: "Content",
     },
     {
-        id: 's_carousel',
+        id: 's_image_text',
-        name: 'Carousel',
+        name: 'Image - Text',
-        groupName: "Intro",
-    },
-    {
-        id: 's_numbers',
-        name: 'Numbers',
         groupName: "Content",
     },
     {
-        id: 's_three_columns',
+        id: 's_numbers_showcase',
-        name: 'Columns',
+        name: 'Numbers Showcase',
-        groupName: "Columns",
+        groupName: "Content",
     },
     {
-        id: 's_call_to_action',
+        id: 's_company_team',
-        name: 'Call to Action',
+        name: 'Team',
+        groupName: "People",
+    },
+    {
+        id: 's_accordion_image',
+        name: 'Accordion Image',
+        groupName: "Content",
+    },
+    {
+        id: 's_cta_card',
+        name: 'Card Call to Action',
         groupName: "Content",
     },
 ];
@@ -54,11 +58,9 @@ wTourUtils.registerThemeHomepageTour("clean_tour", () => [
     ...wTourUtils.dragNDrop(snippets[1]),
     ...wTourUtils.dragNDrop(snippets[2]),
     ...wTourUtils.dragNDrop(snippets[3]),
-    ...wTourUtils.clickOnSnippet(snippets[3]),
-    wTourUtils.changeOption('ContainerWidth', 'we-button-group.o_we_user_value_widget', _t('width')),
-    wTourUtils.goBackToBlocks(),
     ...wTourUtils.dragNDrop(snippets[4]),
     ...wTourUtils.dragNDrop(snippets[5]),
     ...wTourUtils.dragNDrop(snippets[6]),
     ...wTourUtils.dragNDrop(snippets[7]),
+    ...wTourUtils.dragNDrop(snippets[8]),
 ]);

theme_clean/static/src/scss/primary_variables.scss

@@ -117,9 +117,13 @@ $o-theme-font-configs: (
         'family': ('Ubuntu', sans-serif),
         'url': 'Ubuntu:300,300i,400,400i,700,700i',
     ),
-    'Bitter': (
+    'IBM Plex Sans': (
-        'family': ('Bitter', serif),
+        'family': ('IBM Plex Sans', sans-serif),
-        'url': 'Bitter:300,300i,400,400i,700,700i',
+        'url': 'IBM+Plex+Sans:300,300i,400,400i,700,700i',
+    ),
+    'Inter': (
+        'family': ('Inter', sans-serif),
+        'url': 'Inter:300,300i,400,400i,700,700i',
     ),
     'Noto Serif': ( // font update - Droid Serif -> Noto+Serif
         'family': ('Noto Serif', serif),
@@ -145,46 +149,6 @@ $o-theme-font-configs: (
         'family': ('Josefin Slab', serif),
         'url': 'Josefin+Slab:300,300i,400,400i,700,700i',
     ),
-    'Abel': (
-        'family': ('Abel', sans-serif),
-        'url': 'Abel:300,300i,400,400i,700,700i',
-    ),
-    'Mulish': (
-        'family': ('Mulish', sans-serif),
-        'url': 'Mulish:300,300i,400,400i,700,700i',
-    ),
-    'Libre Baskerville': (
-        'family': ('Libre Baskerville', serif),
-        'url': 'Libre+Baskerville:300,300i,400,400i,700,700i',
-    ),
-    'Medula One': (
-        'family': ('Medula One', cursive),
-        'url': 'Medula+One:300,300i,400,400i,700,700i',
-    ),
-    'Montserrat Alternates': (
-        'family': ('Montserrat Alternates', sans-serif),
-        'url': 'Montserrat+Alternates:300,300i,400,400i,700,700i',
-    ),
-    'Imprima': (
-        'family': ('Imprima', sans-serif),
-        'url': 'Imprima:300,300i,400,400i,700,700i',
-    ),
-    'Oswald': (
-        'family': ('Oswald', sans-serif),
-        'url': 'Oswald:300,300i,400,400i,700,700i',
-    ),
-    'Quattrocento': (
-        'family': ('Quattrocento', serif),
-        'url': 'Quattrocento:300,300i,400,400i,700,700i',
-    ),
-    'Vollkorn': (
-        'family': ('Vollkorn', serif),
-        'url': 'Vollkorn:300,300i,400,400i,700,700i',
-    ),
-    'Alice': (
-        'family': ('Alice', serif),
-        'url': 'Alice:300,300i,400,400i,700,700i',
-    ),
 );
 
 //------------------------------------------------------------------------------
@@ -194,12 +158,10 @@ $o-theme-font-configs: (
 $o-website-values-palettes: (
     (
         'color-palettes-name': 'clean-1',
-        'headings-font': 'Dosis',
+        'headings-font': 'IBM Plex Sans',
-        'navbar-font': 'Dosis',
+        'navbar-font': 'Inter',
-        'buttons-font': 'Dosis',
+        'buttons-font': 'Inter',
-        'header-template': 'hamburger',
+        'header-template': 'default',
-        'hamburger-position': 'right',
-        'footer-template': 'contact',
     ),
 );
 

theme_clean/views/image_content.xml

@@ -10,7 +10,7 @@
 <record id="s_banner_default_image_2" model="theme.ir.attachment">
     <field name="key">website.s_banner_default_image_2</field>
     <field name="name">website.s_banner_default_image_2</field>
-    <field name="url">/theme_clean/static/src/img/backgrounds/bg_snippet_12.jpg</field>
+    <field name="url">/theme_clean/static/src/img/content/image_content_27.jpg</field>
 </record>
 <record id="s_banner_default_image_3" model="theme.ir.attachment">
     <field name="key">website.s_banner_default_image_3</field>

theme_clean/views/snippets/s_accordion_image.xml

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+
+<template id="s_accordion_image" inherit_id="website.s_accordion_image">
+    <!-- Section -->
+    <xpath expr="//section" position="attributes">
+        <attribute name="class" add="o_cc1" remove="o_cc2" separator=" "/>
+    </xpath>
+</template>
+
+</odoo>

theme_clean/views/snippets/s_banner.xml

@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+
+<template id="s_banner" inherit_id="website.s_banner">
+    <!-- Text -->
+    <xpath expr="//h1" position="replace">
+        <h1 class="display-3 o_default_snippet_text">Unleash your <strong class="o_default_snippet_text"><span class="o_text_highlight o_translate_inline o_text_highlight_circle_2 o_text_highlight_fill" style="--text-highlight-width: 6px;"><span class="o_text_highlight_item">potential<svg fill="none" class="o_text_highlight_svg o_content_no_merge position-absolute overflow-visible top-0 start-0 w-100 h-100 pe-none"><path stroke-width="var(--text-highlight-width)" stroke="var(--text-highlight-color)" stroke-linecap="round" fill="var(--text-highlight-color)" transform="scale(1.2835546875, 0.6916666666666667)" d="M112.58 21.164h18.516c-.478-.176-1.722-.64-2.967-1.105.101-.401.214-.803.315-1.192 12.255 2.912 24.561 5.573 36.716 8.823 5.896 1.582 11.628 3.967 17.171 6.527 10.433 4.832 14.418 14.22 16.479 24.739.377 1.92.566 3.878.83 5.823 2.212 15.94-5.858 23.986-21.595 33.813-.993.615-2.288.79-3.181 1.494-14.229 11.308-31.412 14.32-48.608 17.107-29.01 4.694-57.431 2.209-84.91-8.372-8.145-3.138-16.164-6.853-23.706-11.22C6.176 90.986 1.16 80.053.193 67.25c-1.798-23.809 9.025-42.485 30.356-53.304C44.678 6.793 59.8 3.367 75.45 2.375 90.583 1.42 105.793.379 120.927.78c16.089.427 32.041 3.05 46.911 9.84 2.074.941 3.67 2.912 4.915 5.083-9.73-1.443-19.433-2.987-29.175-4.305-4.89-.665-9.842-1.067-14.77-1.33-23.82-1.28-47.376.514-70.391 7.003a133.771 133.771 0 0 0-22.639 8.648c-17.9 8.786-27.616 26.935-25.567 46.364.666 6.263 3.507 11.133 9.05 14.308 26.862 15.401 55.748 21.965 86.645 19.819 15.561-1.08 31.01-2.787 45.767-8.284 11.099-4.142 21.658-9.25 30.595-17.195 9.779-8.698 11.715-18.55 5.669-30.249-1.131-2.196-3.256-4.079-5.33-5.56-7.981-5.736-17.773-7.48-26.459-11.534-13.249-6.175-27.541-6.916-41.343-10.167-.817-.188-1.571-.64-2.35-.966.037-.364.088-.728.125-1.092Z" class="o_text_highlight_path_circle_2"></path></svg></span></span>.</strong></h1>
+    </xpath>
+    <!-- Remove panels -->
+    <xpath expr="(//div[hasclass('o_grid_item_image')])[2]" position="replace"/>
+    <xpath expr="//div[hasclass('col-lg-5')]" position="replace"/>
+    <!-- Image Layout -->
+    <xpath expr="//div[hasclass('o_grid_item_image')]" position="attributes">
+        <attribute name="class" add="g-col-lg-6 col-lg-6" remove="o_grid_item g-col-lg-4 col-lg-4" separator=" "/>
+        <attribute name="style" add="grid-area: 1 / 7 / 11 / 13;" remove="grid-area: 1 / 8 / 11 / 12;" separator=" "/>
+    </xpath>
+    <!-- Img -->
+    <xpath expr="//img" position="attributes">
+        <attribute name="src">/web_editor/image_shape/website.s_banner_default_image_2/web_editor/composition/composition_oval_line.svg?c2=o-color-2</attribute>
+        <attribute name="data-shape">web_editor/composition/composition_oval_line</attribute>
+        <attribute name="data-original-mimetype">image/jpeg</attribute>
+        <attribute name="data-file-name">s_banner_2.svg</attribute>
+        <attribute name="data-shape-colors">;#34495E;;;</attribute>
+    </xpath>
+</template>
+
+</odoo>

theme_clean/views/snippets/s_call_to_action.xml

@@ -18,15 +18,4 @@
     </xpath>
 </template>
 
-<template id="configurator_s_call_to_action" inherit_id="website.configurator_s_call_to_action">
-    <!-- Shape option -->
-    <xpath expr="//section" position="attributes">
-        <attribute name="data-oe-shape-data">{"shape":"web_editor/Origins/14_001", "flip":["y"]}</attribute>
-    </xpath>
-    <!-- Shape -->
-    <xpath expr="//div[hasclass('container')]" position="before">
-        <div class="o_we_shape o_web_editor_Origins_14_001" style="background-image: url('/web_editor/shape/web_editor/Origins/14_001.svg?c3=o-color-4&amp;c4=o-color-3&amp;flip=y'); background-position: 50% 0%;"/>
-    </xpath>
-</template>
-
 </odoo>

theme_clean/views/snippets/s_color_blocks_2.xml

@@ -3,21 +3,22 @@
 
 <template id="s_color_blocks_2" inherit_id="website.s_color_blocks_2">
     <!-- Column #1 -->
-    <xpath expr="//div[hasclass('col-lg-6')]" position="attributes">
+    <xpath expr="//div[hasclass('col-lg-6')]" position="replace">
-        <attribute name="class" add="oe_img_bg" separator=" "/>
+        <div class="col-lg-6 o_cc o_cc4">
-        <attribute name="style">background-image: url('/web/image/website.s_color_blocks_2_default_image_1');</attribute>
+            <h2>We are committed to helping you achieve success with unparalleled support and expert guidance, every step of the way.</h2>
-    </xpath>
+        </div>
-    <xpath expr="//h2" position="before">
-        <div class="o_we_bg_filter bg-black-50"/>
     </xpath>
     <!-- Column #2 -->
     <xpath expr="//div[hasclass('col-lg-6')][2]" position="attributes">
-        <attribute name="class" add="oe_img_bg" separator=" "/>
+        <attribute name="class" add="oe_img_bg pt152 pb152" separator=" "/>
         <attribute name="style">background-image: url('/web/image/website.s_color_blocks_2_default_image_2');</attribute>
     </xpath>
-    <xpath expr="(//h2)[2]" position="before">
+    <xpath expr="//div[hasclass('col-lg-6')][2]" position="inside">
         <div class="o_we_bg_filter bg-black-50"/>
     </xpath>
+    <xpath expr="//div[hasclass('col-lg-6')][2]/h2" position="replace"/>
+    <xpath expr="//div[hasclass('col-lg-6')][2]/p" position="replace"/>
+    <xpath expr="//div[hasclass('col-lg-6')][2]/a" position="replace"/>
 </template>
 
 </odoo>

theme_clean/views/snippets/s_company_team.xml

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+
+<template id="configurator_s_company_team" inherit_id="website.configurator_s_company_team">
+    <xpath expr="//section" position="attributes">
+        <attribute name="class" add="pt0 pb16" remove="pt48 pb48" separator=" "/>
+    </xpath>
+</template>
+
+</odoo>

theme_clean/views/snippets/s_cta_card.xml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+
+<template id="s_cta_card" inherit_id="website.s_cta_card">
+    <!-- Section -->
+    <xpath expr="//section" position="attributes">
+        <attribute name="class" add="pt48 pb56 o_cc3" remove="pt64 pb64 o_cc2" separator=" "/>
+    </xpath>
+
+</template>
+
+</odoo>

theme_clean/views/snippets/s_image_text.xml

@@ -4,7 +4,7 @@
 <template id="s_image_text" inherit_id="website.s_image_text">
     <!-- Section -->
     <xpath expr="//section" position="attributes">
-        <attribute name="class" add="o_cc o_cc4 pt72 pb72" remove="pt80 pb80" separator=" "/>
+        <attribute name="class" add="o_cc o_cc1 pt48 pb72" remove="pt80 pb80" separator=" "/>
     </xpath>
     <!-- Add space after title -->
     <xpath expr="//h2" position="after">

theme_clean/views/snippets/s_numbers_showcase.xml

@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+
+<template id="s_numbers_showcase" inherit_id="website.s_numbers_showcase">
+    <!-- Section -->
+    <xpath expr="//section" position="attributes">
+        <attribute name="class" add="o_cc o_cc4 pt88" remove="pt80" separator=" "/>
+        <attribute name="data-oe-shape-data">{"shape":"web_editor/Origins/04_001","colors":{"c3": "#FFFFFF"},"flip":["y"]}</attribute>
+    </xpath>
+    <xpath expr="//div[hasclass('container')]" position="before">
+        <div class="o_we_shape o_web_editor_Origins_04_001" style="background-image: url('/web_editor/shape/web_editor/Origins/04_001.svg?c3=o-color-4&amp;flip=y');"/>
+    </xpath>
+    <!-- Grid items -->
+    <xpath expr="(//div[hasclass('o_grid_item')])[2]" position="attributes">
+        <attribute name="class" add="o_cc1 rounded" remove="o_cc3" separator=" "/>
+    </xpath>
+    <xpath expr="(//div[hasclass('o_grid_item')])[3]" position="attributes">
+        <attribute name="class" add="rounded" separator=" "/>
+    </xpath>
+    <xpath expr="(//div[hasclass('o_grid_item')])[4]" position="attributes">
+        <attribute name="class" add="o_cc3 rounded" remove="o_cc4" separator=" "/>
+    </xpath>
+</template>
+
+</odoo>

theme_clean/views/snippets/s_text_image.xml

@@ -4,7 +4,7 @@
 <template id="s_text_image" inherit_id="website.s_text_image">
     <!-- Section -->
     <xpath expr="//section" position="attributes">
-        <attribute name="class" add="o_cc o_cc2 pt72 pb72" remove="pt80 pb80" separator=" "/>
+        <attribute name="class" add="o_cc o_cc1 pt16 pb16" remove="pt80 pb80" separator=" "/>
     </xpath>
     <!-- Title & Paragraphs -->
     <xpath expr="//h2" position="replace" mode="inner">

theme_clean/views/snippets/s_title.xml

@@ -4,28 +4,14 @@
 <template id="s_title" inherit_id="website.s_title">
     <!-- Section -->
     <xpath expr="//section" position="attributes">
-        <attribute name="class" add="o_cc o_cc5 o_full_screen_height parallax s_parallax_is_fixed" separator=" "/>
+        <attribute name="class" remove="pt40" add="pt80" separator=" "/>
-        <attribute name="data-scroll-background-ratio">1</attribute>
-    </xpath>
-    <!-- Filter & background image -->
-    <xpath expr="//div[hasclass('container')]" position="before">
-        <span class="s_parallax_bg oe_img_bg" style="background-image: url('/web/image/website.s_banner_default_image');"/>
-        <div class="o_we_bg_filter bg-black-50"/>
     </xpath>
     <!-- Title -->
     <xpath expr="//h2" position="replace" mode="inner">
-        <b>We create the perfect <br/>tailored solution for you</b>
+        We create the perfect <br/>tailored solution for you
     </xpath>
-</template>
+    <xpath expr="//h2" position="attributes">
-
+        <attribute name="class" remove="display-3-fs" separator=" "/>
-<template id="configurator_s_title" inherit_id="website.configurator_s_title">
-    <!-- Shape option -->
-    <xpath expr="//section" position="attributes">
-        <attribute name="data-oe-shape-data">{"shape":"web_editor/Origins/07_002","flip":[]}</attribute>
-    </xpath>
-    <!-- Shape -->
-    <xpath expr="//div[hasclass('container')]" position="before">
-        <div class="o_we_shape o_web_editor_Origins_07_002"/>
     </xpath>
 </template>