[IMP] theme_beauty: revamp the theme

task-4178019 Part of task-4177975 Part-of: odoo/design-themes#919 Related: odoo/odoo#180736 Signed-off-by: Serge Bayet (seba) <seba@odoo.com> Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
2024-09-19 16:46:31 +02:00
parent fa78b350cc
commit f0e216f031
21 changed files with 300 additions and 329 deletions
@@ -50,6 +50,7 @@
        'views/snippets/s_image_hexagonal.xml',
        'views/snippets/s_striped_center_top.xml',
        'views/snippets/s_key_images.xml',
+        'views/snippets/s_masonry_block.xml',
        'views/snippets/s_intro_pill.xml',
        'views/snippets/s_big_number.xml',
        'views/snippets/s_image_frame.xml',
@@ -64,17 +65,18 @@
        'static/description/beauty_screenshot.jpg',
    ],
    'images_preview_theme': {
-        'website.s_cover_default_image': '/theme_beauty/static/src/img/snippets/s_cover.jpg',
+        'website.library_image_10': '/theme_beauty/static/src/img/snippets/library_image_10.jpg',
+        'website.library_image_14': '/theme_beauty/static/src/img/snippets/library_image_14.jpg',
+        'website.s_masonry_block_default_image_1': '/theme_beauty/static/src/img/snippets/s_masonry_block.jpg',
        'website.s_text_image_default_image': '/theme_beauty/static/src/img/snippets/s_text_image.jpg',
-        'website.s_product_list_default_image_1': '/theme_beauty/static/src/img/snippets/s_product_1.jpg',
-        'website.s_product_list_default_image_2': '/theme_beauty/static/src/img/snippets/s_product_2.jpg',
-        'website.s_product_list_default_image_3': '/theme_beauty/static/src/img/snippets/s_product_3.jpg',
-        'website.s_product_list_default_image_4': '/theme_beauty/static/src/img/snippets/s_product_4.jpg',
-        'website.s_product_list_default_image_5': '/theme_beauty/static/src/img/snippets/s_product_5.jpg',
-        'website.s_product_list_default_image_6': '/theme_beauty/static/src/img/snippets/s_product_6.jpg',
+        'website.s_product_catalog_default_image': '/theme_beauty/static/src/img/snippets/s_product_catalog.jpg',
+        'website.library_image_16': '/theme_beauty/static/src/img/snippets/library_image_16.jpg',
+        'website.library_image_03': '/theme_beauty/static/src/img/snippets/library_image_03.jpg',
+        'website.library_image_13': '/theme_beauty/static/src/img/snippets/library_image_13.jpg',
+        'website.s_carousel_default_image_2': '/theme_beauty/static/src/img/snippets/s_carousel_2.jpg',
    },
    'configurator_snippets': {
-        'homepage': ['s_cover', 's_text_image', 's_title', 's_product_list', 's_company_team', 's_call_to_action'],
+        'homepage': ['s_intro_pill', 's_masonry_block', 's_pricelist_boxed', 's_features_wall', 's_image_frame', 's_call_to_action'],
    },
    'license': 'LGPL-3',
    'live_test_url': 'https://theme-beauty.odoo.com',
@@ -5,5 +5,4 @@ class ThemeBeauty(models.AbstractModel):
    _inherit = 'theme.utils'

    def _theme_beauty_post_copy(self, mod):
-        self.enable_view('website.template_header_sales_one')
        self.enable_view('website.footer_custom')
@@ -4,29 +4,29 @@ import * as wTourUtils from '@website/js/tours/tour_utils';

 const snippets = [
    {
-        id: 's_cover',
-        name: 'Cover',
+        id: 's_intro_pill',
+        name: 'Intro Pill',
        groupName: "Intro",
    },
    {
-        id: 's_text_image',
-        name: 'Text - Image',
+        id: 's_masonry_block',
+        name: 'Masonry',
+        groupName: "Images",
+    },
+    {
+        id: 's_pricelist_boxed',
+        name: 'Pricelist Boxed',
        groupName: "Content",
    },
    {
-        id: 's_title',
-        name: 'Title',
-        groupName: "Text",
+        id: 's_features_wall',
+        name: 'Features Wall',
+        groupName: "Columns",
    },
    {
-        id: 's_product_list',
-        name: 'Items',
-        groupName: "Content",
-    },
-    {
-        id: 's_company_team',
-        name: 'Team',
-        groupName: "People",
+        id: 's_image_frame',
+        name: 'Image Frame',
+        groupName: "Images",
    },
    {
        id: 's_call_to_action',
@@ -36,7 +36,7 @@ const snippets = [
 ];

 wTourUtils.registerThemeHomepageTour("beauty_tour", () => [
-    wTourUtils.assertCssVariable('--color-palettes-name', '"beauty-1"'),
+    wTourUtils.assertCssVariable('--color-palettes-name', '"default-light-3"'),
    ...wTourUtils.dragNDrop(snippets[0]),
    ...wTourUtils.clickOnText(snippets[0], 'h1'),
    wTourUtils.goBackToBlocks(),
@@ -58,15 +58,14 @@ $o-theme-font-configs: (

 $o-website-values-palettes: (
    (
-        'color-palettes-name': 'beauty-1',
+        'color-palettes-name': 'default-light-3',

        'header-font-size': (18 / 16) * 1rem,

        'font': 'Questrial',
        'headings-font': 'DM Serif Display',

-        'header-template': 'sales_one',
-        'header-links-style': 'outline',
+        'header-template': 'default',

        // Buttons
        'btn-padding-y':                    .45rem,
@@ -81,8 +80,6 @@ $o-website-values-palettes: (
    ),
 );

-$o-selected-color-palettes-names: append($o-selected-color-palettes-names, 'beauty-1');
-
 $o-color-palettes-compatibility-indexes: (
    1: 'beauty-1',
    2: 'beauty-2',
@@ -430,5 +430,20 @@ Check in theme_loftspace's primary_variables.scss and theme.scss -->
    <field name="name">website.s_empowerment_default_image</field>
    <field name="url">/theme_beauty/static/src/img/snippets/s_empowerment_default_image.jpg</field>
 </record>
+<record id="s_text_cover_default_image" model="theme.ir.attachment">
+    <field name="key">website.s_text_cover_default_image</field>
+    <field name="name">website.s_text_cover_default_image</field>
+    <field name="url">/theme_beauty/static/src/img/snippets/library_image_16.jpg</field>
+</record>
+<record id="s_pricelist_boxed_default_background" model="theme.ir.attachment">
+    <field name="key">website.s_pricelist_boxed_default_background</field>
+    <field name="name">website.s_pricelist_boxed_default_background</field>
+    <field name="url">/theme_beauty/static/src/img/snippets/s_pricelist_boxed_default_background.jpg</field>
+</record>
+<record id="s_image_frame_default_image" model="theme.ir.attachment">
+    <field name="key">website.s_image_frame_default_image</field>
+    <field name="name">website.s_image_frame_default_image</field>
+    <field name="url">/theme_beauty/static/src/img/snippets/s_image_frame_default_image.jpg</field>
+</record>

 </odoo>
@@ -26,15 +26,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/Rainy/05_001","flip":[]}</attribute>
-    </xpath>
-    <!-- Shape -->
-    <xpath expr="//div[hasclass('container')]" position="before">
-        <div class="o_we_shape o_web_editor_Rainy_05_001"/>
-    </xpath>
-</template>
-
 </odoo>
@@ -2,6 +2,23 @@
 <odoo>

 <template id="s_features_wall" inherit_id="website.s_features_wall">
+    <!-- Layout -->
+    <xpath expr="//section" position="attributes">
+        <attribute name="data-oe-shape-data">{'shape':'web_editor/Origins/07_002','colors':{'c3':'o-color-4','c4':'o-color-4','c5':'o-color-1'},'flip':[],'showOnMobile':false,'shapeAnimationSpeed':'0'}</attribute>
+    </xpath>
+    <xpath expr="//div[hasclass('o_web_editor_Airy_04_001')]" position="replace">
+        <div class="o_we_shape o_web_editor_Origins_07_002" style="background-image: url('/web_editor/shape/web_editor/Origins/07_002.svg?c3=o-color-4&amp;c4=o-color-4&amp;c5=o-color-1');"/>
+    </xpath>
+    <xpath expr="//img" position="attributes">
+        <attribute name="class" add="rounded-circle" separator=" "/>
+    </xpath>
+    <xpath expr="(//img)[2]" position="attributes">
+        <attribute name="class" add="rounded-circle" separator=" "/>
+    </xpath>
+    <xpath expr="(//img)[3]" position="attributes">
+        <attribute name="class" add="rounded-circle" separator=" "/>
+    </xpath>
+
    <!-- Card 1 -->
    <xpath expr="//div[hasclass('g-col-lg-3')]//h3" position="replace" mode="inner">
        Natural Skincare Products
@@ -2,9 +2,15 @@
 <odoo>

 <template id="s_image_frame" inherit_id="website.s_image_frame">
-    <!-- Image -->
+    <xpath expr="//section" position="attributes">
+        <attribute name="class" add="o_cc4" remove="o_cc1" separator=" "/>
+        <attribute name="data-oe-shape-data">{'shape':'web_editor/Origins/02_001','colors':{'c4':'o-color-5','c5':'o-color-1'},'flip':[],'showOnMobile':false,'shapeAnimationSpeed':'0'}</attribute>
+    </xpath>
+    <xpath expr="//div[hasclass('container')]" position="before">
+        <div class="o_we_shape o_web_editor_Origins_02_001" style="background-image: url('/web_editor/shape/web_editor/Origins/02_001.svg?c4=o-color-5&amp;c5=o-color-1');"/>
+    </xpath>
    <xpath expr="//img" position="attributes">
-        <attribute name="src">/web/image/website.s_carousel_default_image_3</attribute>
+        <attribute name="style"/>
    </xpath>
 </template>

@@ -1,14 +1,13 @@
 <?xml version="1.0" encoding="utf-8"?>
 <odoo>
-
 <template id="s_intro_pill" inherit_id="website.s_intro_pill">
    <!-- Title -->
    <xpath expr="//h1" position="replace" mode="inner">
-        Discover our<br/>new products
+        Confidence and<br/>Timeless Elegance
    </xpath>
    <!-- Button -->
    <xpath expr="//a[hasclass('btn')]" position="replace" mode="inner">
-        Shop now
+        Discover our products
    </xpath>
 </template>

@@ -0,0 +1,23 @@
+<?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=" "/>
+        <attribute name="src">/web/image/website.s_text_image_default_image</attribute>
+    </xpath>
+    <xpath expr="(//img)[2]" position="attributes">
+        <attribute name="class" add="rounded" separator=" "/>
+    </xpath>
+</template>
+
+</odoo>
@@ -2,6 +2,20 @@
 <odoo>

 <template id="s_pricelist_boxed" inherit_id="website.s_pricelist_boxed">
+    <!-- Layout -->
+    <xpath expr="//section" position="attributes">
+        <attribute name="class" add="pt0 pb0" remove="pt72 pb72" separator=" "/>
+        <attribute name="data-oe-shape-data">{'shape':'web_editor/Origins/06_001','colors':{'c3':'o-color-4','c4':'rgba(255, 0, 0, 0)'},'flip':[],'showOnMobile':true,'shapeAnimationSpeed':'0'}</attribute>
+    </xpath>
+    <xpath expr="//div[hasclass('container')]" position="before">
+        <div class="o_we_shape o_web_editor_Origins_06_001" style="background-image: url('/web_editor/shape/web_editor/Origins/06_001.svg?c3=o-color-4&amp;c4=rgba(255, 0, 0, 0)');"/>
+    </xpath>
+    <xpath expr="//div[hasclass('row')]/div" position="attributes">
+        <attribute name="class" add="o_cc2 col-lg-5 border" remove="o_cc1 offset-lg-2 col-lg-8" separator=" "/>
+        <attribute name="style">border-width: 16px !important; border-color: rgb(255, 255, 255) !important;</attribute>
+    </xpath>
+
+    <!-- Texts -->
    <xpath expr="//h2" position="replace" mode="inner">
        Our Beauty Collection
    </xpath>
@@ -86,15 +86,4 @@
    </xpath>
 </template>

-<template id="configurator_s_product_list" inherit_id="website.configurator_s_product_list">
-    <!-- Shape option -->
-    <xpath expr="//section" position="attributes">
-        <attribute name="data-oe-shape-data">{"shape":"web_editor/Wavy/15","flip":[]}</attribute>
-    </xpath>
-    <!-- Shape -->
-    <xpath expr="//div[hasclass('container')]" position="before">
-        <div class="o_we_shape o_web_editor_Wavy_15"/>
-    </xpath>
-</template>
-
 </odoo>