[IMP] theme_bistro: revamp the theme

task-4178021
Part of task-4177975

closes odoo/design-themes#919

Related: odoo/odoo#180736
Signed-off-by: Outagant Mehdi (mou) <mou@odoo.com>
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>

theme_bistro/__manifest__.py

@@ -62,12 +62,16 @@
     ],
     'images_preview_theme': {
         'website.s_cover_default_image': '/theme_bistro/static/src/img/backgrounds/17.jpg',
-        'website.s_picture_default_image': '/theme_bistro/static/src/img/content/picture.jpg',
+        'website.s_media_list_default_image_1': '/theme_bistro/static/src/img/content/media_list_01.jpg',
-        'website.s_product_catalog_default_image': '/theme_bistro/static/src/img/backgrounds/16.jpg',
+        'website.s_image_text_default_image': '/theme_bistro/static/src/img/content/image_text.jpg',
-        'website.s_quotes_carousel_demo_image_1': '/theme_bistro/static/src/img/backgrounds/19.jpg',
+        'website.s_media_list_default_image_2': '/theme_bistro/static/src/img/content/media_list_02.jpg',
+        'website.s_text_image_default_image': '/theme_bistro/static/src/img/content/text_image.jpg',
+        'website.s_quotes_carousel_demo_image_1': '/theme_bistro/static/src/img/backgrounds/s_quotes_carousel_background.jpg',
+        'website.library_image_10': '/theme_bistro/static/src/img/backgrounds/07.jpg',
+        'website.library_image_05': '/theme_bistro/static/src/img/backgrounds/11.jpg',
     },
     'configurator_snippets': {
-        'homepage': ['s_cover', 's_features', 's_picture', 's_product_catalog', 's_text_block', 's_quotes_carousel'],
+        'homepage': ['s_image_title', 's_key_images', 's_pricelist_cafe', 's_quotes_carousel', 's_quadrant'],
         'pricing': ["s_text_image", "s_product_catalog"],
     },
     'license': 'LGPL-3',

theme_bistro/models/theme_bistro.py

@@ -8,9 +8,5 @@ class ThemeBistro(models.AbstractModel):
         self.enable_view('website.template_header_vertical')
         self.enable_view('website.header_navbar_pills_style')
 
-        self.enable_view('website.template_footer_centered')
-        self.enable_view('website.template_footer_slideout')
-        self.enable_view('website.option_footer_scrolltop')
-
         self.enable_asset("website.ripple_effect_scss")
         self.enable_asset("website.ripple_effect_js")

theme_bistro/static/src/js/tour.js

@@ -4,39 +4,34 @@ import * as wTourUtils from '@website/js/tours/tour_utils';
 
 const snippets = [
     {
-        id: 's_cover',
+        id: 's_image_title',
-        name: 'Cover',
+        name: 'Image Title',
-        groupName: "Intro",
-    },
-    {
-        id: 's_features',
-        name: 'Features',
-        groupName: "Content",
-    },
-    {
-        id: 's_picture',
-        name: 'Title - Image',
         groupName: "Images",
     },
     {
-        id: 's_product_catalog',
+        id: 's_key_images',
-        name: 'Pricelist',
+        name: 'Key Images',
-        groupName: "Content",
+        groupName: "Columns",
     },
     {
-        id: 's_text_block',
+        id: 's_pricelist_cafe',
-        name: 'Text',
+        name: 'Pricelist cafe',
-        groupName: "Text",
+        groupName: "Content",
     },
     {
         id: 's_quotes_carousel',
         name: 'Quotes',
         groupName: "People",
     },
+    {
+        id: 's_quadrant',
+        name: 'Quadrant',
+        groupName: "Images",
+    },
 ];
 
 wTourUtils.registerThemeHomepageTour("bistro_tour", () => [
-    wTourUtils.assertCssVariable('--color-palettes-name', '"bistro-5"'),
+    wTourUtils.assertCssVariable('--color-palettes-name', '"default-22"'),
     ...wTourUtils.dragNDrop(snippets[0]),
     ...wTourUtils.clickOnText(snippets[0], 'h1', 'top'),
     wTourUtils.goBackToBlocks(),
@@ -48,5 +43,4 @@ wTourUtils.registerThemeHomepageTour("bistro_tour", () => [
     wTourUtils.goBackToBlocks(),
     ...wTourUtils.dragNDrop(snippets[3]),
     ...wTourUtils.dragNDrop(snippets[4]),
-    ...wTourUtils.dragNDrop(snippets[5]),
 ]);

theme_bistro/static/src/scss/primary_variables.scss

@@ -4,7 +4,7 @@
 
 $o-website-values-palettes: (
     (
-        'color-palettes-name':              'bistro-5',
+        'color-palettes-name':              'default-22',
 
         // Header
         'header-template':                  'vertical',
@@ -33,7 +33,7 @@ $o-website-values-palettes: (
         'input-padding-y-lg':               .6rem,
 
         // Footer
-        'footer-template':                  'centered',
+        'footer-template':                  'default',
         'footer-effect':                    'slideout_slide_hover',
         'footer-scrolltop':                 true,
     ),
@@ -164,8 +164,6 @@ $o-theme-color-palettes: map-merge($o-theme-color-palettes,
     )
 );
 
-$o-selected-color-palettes-names: append($o-selected-color-palettes-names, 'bistro-5');
-
 $o-color-palettes-compatibility-indexes: (
     1: 'bistro-1',
     2: 'bistro-2',

theme_bistro/views/images_library.xml

@@ -237,7 +237,7 @@
 <record id="s_quotes_carousel_demo_image_1" model="theme.ir.attachment">
     <field name="key">website.s_quotes_carousel_demo_image_1</field>
     <field name="name">website.s_quotes_carousel_demo_image_1</field>
-    <field name="url">/theme_bistro/static/src/img/backgrounds/19.jpg</field>
+    <field name="url">/theme_bistro/static/src/img/backgrounds/s_quotes_carousel_background.jpg</field>
 </record>
 <record id="s_quotes_carousel_demo_image_3" model="theme.ir.attachment">
     <field name="key">website.s_quotes_carousel_demo_image_3</field>
@@ -401,7 +401,7 @@
 <record id="s_image_title_default_image" model="theme.ir.attachment">
     <field name="key">website.s_image_title_default_image</field>
     <field name="name">website.s_image_title_default_image</field>
-    <field name="url">/theme_bistro/static/src/img/backgrounds/14.jpg</field>
+    <field name="url">/theme_bistro/static/src/img/backgrounds/s_image_title.jpg</field>
 </record>
 
 <!-- Pricelist boxed -->
@@ -420,7 +420,7 @@
 <record id="s_quadrant_default_image_2" model="theme.ir.attachment">
     <field name="key">website.s_quadrant_default_image_2</field>
     <field name="name">website.s_quadrant_default_image_2</field>
-    <field name="url">/theme_bistro/static/src/img/backgrounds/16.jpg</field>
+    <field name="url">/theme_bistro/static/src/img/content/s_quadrant_default_image_2.jpg</field>
 </record>
 <record id="s_quadrant_default_image_3" model="theme.ir.attachment">
     <field name="key">website.s_quadrant_default_image_3</field>
@@ -430,7 +430,7 @@
 <record id="s_quadrant_default_image_4" model="theme.ir.attachment">
     <field name="key">website.s_quadrant_default_image_4</field>
     <field name="name">website.s_quadrant_default_image_4</field>
-    <field name="url">/theme_bistro/static/src/img/content/picture.jpg</field>
+    <field name="url">/theme_bistro/static/src/img/content/s_quadrant_default_image_4.jpg</field>
 </record>
 
 <!-- Image Hexagonal -->
@@ -449,7 +449,7 @@
 <record id="s_key_images_default_image_2" model="theme.ir.attachment">
     <field name="key">website.s_key_images_default_image_2</field>
     <field name="name">website.s_key_images_default_image_2</field>
-    <field name="url">/theme_bistro/static/src/img/content/media_list_02.jpg</field>
+    <field name="url">/theme_bistro/static/src/img/content/s_key_images_02.jpg</field>
 </record>
 <record id="s_key_images_default_image_3" model="theme.ir.attachment">
     <field name="key">website.s_key_images_default_image_3</field>
@@ -459,7 +459,7 @@
 <record id="s_key_images_default_image_4" model="theme.ir.attachment">
     <field name="key">website.s_key_images_default_image_4</field>
     <field name="name">website.s_key_images_default_image_4</field>
-    <field name="url">/theme_bistro/static/src/img/content/three_columns_01.jpg</field>
+    <field name="url">/theme_bistro/static/src/img/content/s_key_images_04.jpg</field>
 </record>
 
 <!-- Kickoff -->
@@ -563,4 +563,25 @@
     <field name="url">/theme_bistro/static/src/img/content/s_empowerment_default_image.jpg</field>
 </record>
 
+<!-- Text Cover -->
+<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_bistro/static/src/img/backgrounds/08.jpg</field>
+</record>
+
+<!-- Framed Intro -->
+<record id="s_framed_intro_default_image" model="theme.ir.attachment">
+    <field name="key">website.s_framed_intro_default_image</field>
+    <field name="name">website.s_framed_intro_default_image</field>
+    <field name="url">/theme_bistro/static/src/img/backgrounds/20.jpg</field>
+</record>
+
+<!-- Showcase -->
+<record id="s_showcase_default_image" model="theme.ir.attachment">
+    <field name="key">website.s_showcase_default_image</field>
+    <field name="name">website.s_showcase_default_image</field>
+    <field name="url">/theme_bistro/static/src/img/content/s_key_images_04.jpg</field>
+</record>
+
 </odoo>

theme_bistro/views/snippets/s_big_number.xml

@@ -4,12 +4,12 @@
 <template id="s_big_number" inherit_id="website.s_big_number">
     <!-- Section -->
     <xpath expr="//section" position="attributes">
-        <attribute name="data-oe-shape-data">{"shape":"web_editor/Blobs/02"}</attribute>
+        <attribute name="data-oe-shape-data">{"shape":"web_editor/Blobs/02","colors":{"c1":"o-color-1","c2":"o-color-1"},"flip":[],"showOnMobile":false,"shapeAnimationSpeed":"0"}</attribute>
     </xpath>
 
     <!-- Shape -->
     <xpath expr="//div[hasclass('o_we_shape')]" position="replace">
-        <div class="o_we_shape o_web_editor_Blobs_02"/>
+        <div class="o_we_shape o_web_editor_Blobs_02" style="background-image: url('/web_editor/shape/web_editor/Blobs/02.svg?c1=o-color-1&amp;c2=o-color-1');"/>
     </xpath>
 
     <!-- Text -->

theme_bistro/views/snippets/s_image_title.xml

@@ -2,6 +2,17 @@
 <odoo>
 
 <template id="s_image_title" inherit_id="website.s_image_title">
+    <!-- Layout -->
+    <xpath expr="//section" position="attributes">
+        <attribute name="class" add="parallax" separator=" "/>
+        <attribute name="style"/>
+        <attribute name="data-scroll-background-ratio">-3</attribute>
+    </xpath>
+    <xpath expr="//div[hasclass('o_we_bg_filter')]" position="before">
+        <span class="s_parallax_bg oe_img_bg o_bg_img_center" style="background-image: url('/web/image/website.s_image_title_default_image') !important;"/>
+    </xpath>
+
+    <!-- Texts -->
     <xpath expr="//h1" position="replace" mode="inner">
         A Deep Dive into Flavor and Innovation
     </xpath>

theme_bistro/views/snippets/s_picture.xml

@@ -24,15 +24,4 @@
     </xpath>
 </template>
 
-<template id="configurator_s_picture" inherit_id="website.configurator_s_picture">
-    <!-- Shape option -->
-    <xpath expr="//section" position="attributes">
-        <attribute name="data-oe-shape-data">{"shape":"web_editor/Origins/04_001"}</attribute>
-    </xpath>
-    <!-- Shape -->
-    <xpath expr="//div[hasclass('o_container_small')]" position="before">
-        <div class="o_we_shape o_web_editor_Origins_04_001"/>
-    </xpath>
-</template>
-
 </odoo>

theme_bistro/views/snippets/s_quadrant.xml

@@ -2,6 +2,13 @@
 <odoo>
 
 <template id="s_quadrant" inherit_id="website.s_quadrant">
+    <!-- Layout -->
+    <xpath expr="//section" position="attributes">
+        <attribute name="class" add="o_cc o_cc3 o_colored_level" separator=" "/>
+    </xpath>
+    <xpath expr="(//div[hasclass('o_grid_item_image')])[1]" position="replace"/>
+    <xpath expr="(//div[hasclass('o_grid_item_image')])[2]" position="replace"/>
+
     <!-- Title -->
     <xpath expr="//h2" position="replace" mode="inner">
         Taste &amp; Enjoy

theme_bistro/views/snippets/s_quotes_carousel.xml

@@ -4,8 +4,24 @@
 <template id="s_quotes_carousel" inherit_id="website.s_quotes_carousel">
     <!-- Carousel -->
     <xpath expr="//*[hasclass('s_quotes_carousel')]" position="attributes">
-        <attribute name="class" add="s_carousel_rounded oe_img_bg o_bg_img_center" remove="s_carousel_default o_cc o_cc2" separator=" "/>
+        <attribute name="class" add="s_carousel_default oe_img_bg o_bg_img_center" remove="s_carousel_boxed carousel-dark o_cc o_cc2" separator=" "/>
         <attribute name="style">background-image: url('/web/image/website.s_quotes_carousel_demo_image_1');</attribute>
+        <attribute name="data-oe-shape-data">{'shape':'web_editor/Origins/19','colors':{'c5':'o-color-1'},'flip':['x'],'showOnMobile':false,'shapeAnimationSpeed':'0'}</attribute>
+    </xpath>
+    <xpath expr="//div[hasclass('carousel-indicators')]" position="attributes">
+        <attribute name="class" remove="s_carousel_indicators_dots" separator=" "/>
+    </xpath>
+    <xpath expr="//div[hasclass('carousel-inner')]" position="before">
+        <div class="o_we_shape o_web_editor_Origins_19" style="background-image: url('/web_editor/shape/web_editor/Origins/19.svg?c5=o-color-1&amp;flip=x');"/>
+    </xpath>
+    <xpath expr="//blockquote" position="attributes">
+        <attribute name="class" add="s_blockquote_default" remove="s_blockquote_with_icon" separator=" "/>
+    </xpath>
+    <xpath expr="(//blockquote)[2]" position="attributes">
+        <attribute name="class" add="s_blockquote_default" remove="s_blockquote_with_icon" separator=" "/>
+    </xpath>
+    <xpath expr="(//blockquote)[3]" position="attributes">
+        <attribute name="class" add="s_blockquote_default" remove="s_blockquote_with_icon" separator=" "/>
     </xpath>
     <!-- Slide #01 -->
     <xpath expr="//*[hasclass('carousel-item')][1]" position="attributes">