[IMP] theme_enark: revamp the theme

task-4178071
Part of task-4177978

closes odoo/design-themes#932

Signed-off-by: Benjamin Vray (bvr) <bvr@odoo.com>

theme_enark/__manifest__.py

@@ -21,12 +21,14 @@
         'views/snippets/s_card_offset.xml',
         'views/snippets/s_company_team_detail.xml',
         'views/snippets/s_text_image.xml',
+        'views/snippets/s_title.xml',
         'views/snippets/s_picture.xml',
         'views/snippets/s_quotes_carousel_minimal.xml',
         'views/snippets/s_pricelist_boxed.xml',
         'views/snippets/s_freegrid.xml',
         'views/snippets/s_sidegrid.xml',
         'views/snippets/s_media_list.xml',
+        'views/snippets/s_numbers_list.xml',
         'views/snippets/s_call_to_action.xml',
         'views/snippets/s_parallax.xml',
         'views/snippets/s_image_gallery.xml',
@@ -35,6 +37,7 @@
         'views/snippets/s_key_images.xml',
         'views/snippets/s_quadrant.xml',
         'views/snippets/s_images_mosaic.xml',
+        'views/snippets/s_references.xml',
         'views/snippets/s_unveil.xml',
         'views/snippets/s_key_benefits.xml',
         'views/snippets/s_carousel.xml',
@@ -55,18 +58,16 @@
         'static/description/enark_screenshot.jpg',
     ],
     'images_preview_theme': {
-        'website.s_banner_default_image': '/theme_enark/static/src/img/snippets/s_banner.jpg',
+        'website.library_image_03': '/theme_enark/static/src/img/snippets/library_image_03.jpg',
-        'website.s_picture_default_image': '/theme_enark/static/src/img/snippets/s_picture.jpg',
+        'website.library_image_13': '/theme_enark/static/src/img/snippets/library_image_13.jpg',
-        'website.s_text_image_default_image': '/theme_enark/static/src/img/snippets/s_text_image.jpg',
+        'website.library_image_10': '/theme_enark/static/src/img/snippets/library_image_10.jpg',
-        'website.library_image_10': '/theme_enark/static/src/img/snippets/library_image_03.jpg',
+        'website.library_image_05': '/theme_enark/static/src/img/snippets/library_image_05.jpg',
-        'website.library_image_05': '/theme_enark/static/src/img/snippets/library_image_15.jpg',
+        'website.library_image_14': '/theme_enark/static/src/img/snippets/library_image_14.jpg',
-        'website.library_image_16': '/theme_enark/static/src/img/snippets/library_image_14.jpg',
+        'website.library_image_16': '/theme_enark/static/src/img/snippets/library_image_16.jpg',
-        'website.library_image_13': '/theme_enark/static/src/img/snippets/library_image_10.jpg',
+        'website.library_image_02': '/theme_enark/static/src/img/snippets/library_image_02.jpg',
-        'website.library_image_08': '/theme_enark/static/src/img/snippets/library_image_05.jpg',
-        'website.library_image_02': '/theme_enark/static/src/img/snippets/library_image_16.jpg',
     },
     'configurator_snippets': {
-        'homepage': ['s_banner', 's_picture', 's_numbers', 's_text_image', 's_images_wall', 's_call_to_action'],
+        'homepage': ['s_freegrid', 's_features_wall', 's_numbers_list', 's_title', 's_images_wall', 's_references', 's_cta_box'],
     },
     'new_page_templates': {
         'about': {

theme_enark/models/theme_enark.py

@@ -6,3 +6,4 @@ class ThemeEnark(models.AbstractModel):
 
     def _theme_enark_post_copy(self, mod):
         self.enable_view('website.template_footer_descriptive')
+        self.enable_view('website.template_header_stretch')

theme_enark/static/src/js/tour.js

@@ -4,24 +4,24 @@ import * as wTourUtils from "@website/js/tours/tour_utils";
 
 const snippets = [
     {
-        id: 's_banner',
+        id: 's_freegrid',
-        name: 'Banner',
+        name: 'Free grid',
-        groupName: "Intro",
+        groupName: "Columns",
     },
     {
-        id: 's_picture',
+        id: 's_features_wall',
-        name: 'Title - Image',
+        name: 'Features Wall',
-        groupName: "Images",
+        groupName: "Columns",
     },
     {
-        id: 's_numbers',
+        id: 's_numbers_list',
-        name: 'Numbers',
+        name: 'Numbers list',
         groupName: "Content",
     },
     {
-        id: 's_text_image',
+        id: 's_title',
-        name: 'Text - Image',
+        name: 'Title',
-        groupName: "Content",
+        groupName: "Text",
     },
     {
         id: 's_images_wall',
@@ -29,14 +29,19 @@ const snippets = [
         groupName: "Images",
     },
     {
-        id: 's_call_to_action',
+        id: 's_references',
-        name: 'Call to Action',
+        name: 'References',
+        groupName: "People",
+    },
+    {
+        id: 's_cta_box',
+        name: 'Box Call to Action',
         groupName: "Content",
     },
 ];
 
 wTourUtils.registerThemeHomepageTour("enark_tour", () => [
-    wTourUtils.assertCssVariable('--color-palettes-name', '"enark-1"'),
+    wTourUtils.assertCssVariable('--color-palettes-name', '"default-light-12"'),
     ...wTourUtils.dragNDrop(snippets[0]),
     ...wTourUtils.clickOnText(snippets[0], 'h1'),
     wTourUtils.goBackToBlocks(),
@@ -45,4 +50,5 @@ wTourUtils.registerThemeHomepageTour("enark_tour", () => [
     ...wTourUtils.dragNDrop(snippets[3]),
     ...wTourUtils.dragNDrop(snippets[4]),
     ...wTourUtils.dragNDrop(snippets[5]),
+    ...wTourUtils.dragNDrop(snippets[6]),
 ]);

theme_enark/static/src/scss/primary_variables.scss

@@ -127,6 +127,14 @@ $o-theme-font-configs: (
         'family': ('Vollkorn', serif),
         'url': 'Vollkorn:300,300i,400,400i,700,700i',
     ),
+    'Inter': (
+        'family': ('Inter', sans-serif),
+        'url': 'Inter:300,300i,400,400i,700,700i',
+    ),
+    'Oxygen': (
+        'family': ('Oxygen', sans-serif),
+        'url': 'Oxygen:300,400,700',
+    ),
 );
 
 //------------------------------------------------------------------------------
@@ -135,20 +143,19 @@ $o-theme-font-configs: (
 
 $o-website-values-palettes: (
     (
-        'color-palettes-name': 'enark-1',
+        'color-palettes-name':  'default-light-12',
         'header-font-size':     1rem,
-        'font':                 'Open Sans',
+        'font':                 'Inter',
-        'headings-font':        'Bitter',
+        'headings-font':        'Oxygen',
-        'navbar-font':          'Bitter',
-        'buttons-font':         'Bitter',
         'footer-template':      'descriptive',
-        'header-links-style':   'outline',
+        'header-links-style':   'flat',
-        'btn-primary-outline':  true,
+        'btn-primary-flat':     true,
+        'btn-secondary-flat':   true,
+        'btn-border-radius':    0,
+        'input-border-radius':  0,
     ),
 );
 
-$o-selected-color-palettes-names: append($o-selected-color-palettes-names, 'enark-1');
-
 $o-color-palettes-compatibility-indexes: (
     1: 'enark-1',
     2: 'enark-2',

theme_enark/views/image_library.xml

@@ -335,5 +335,10 @@
     <field name="name">website.s_text_cover_default_image</field>
     <field name="url">/theme_enark/static/src/img/snippets/library_image_02.jpg</field>
 </record>
+<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_enark/static/src/img/snippets/library_image_14.jpg</field>
+</record>
 
 </odoo>

theme_enark/views/snippets/s_cta_box.xml

@@ -2,9 +2,14 @@
 <odoo>
 
 <template id="s_cta_box" inherit_id="website.s_cta_box">
+    <!-- Section -->
+    <xpath expr="//section" position="attributes">
+        <attribute name="class" add="o_cc o_cc2 pt0" remove="pt80" separator=" "/>
+    </xpath>
     <!-- Card -->
     <xpath expr="//div[hasclass('card')]" position="attributes">
         <attribute name="class" add="o_cc5" remove="o_cc4" separator=" "/>
+        <attribute name="style" add="border-radius: 0px !important;" separator=" "/>
     </xpath>
     <!-- Title -->
     <xpath expr="//h2" position="replace" mode="inner">
@@ -17,6 +22,7 @@
     <!-- Image -->
     <xpath expr="//img" position="attributes">
         <attribute name="src">/theme_enark/static/src/img/snippets/library_image_02.jpg</attribute>
+        <attribute name="class" remove="rounded-end" separator=" "/>
     </xpath>
     <!-- Button -->
     <xpath expr="//a[hasclass('btn')]" position="replace" mode="inner">

theme_enark/views/snippets/s_features_wall.xml

@@ -2,25 +2,70 @@
 <odoo>
 
 <template id="s_features_wall" inherit_id="website.s_features_wall">
+    <!-- Section -->
+    <xpath expr="//section" position="attributes">
+        <attribute name="data-oe-shape-data">{'shape':'web_editor/Airy/10','flip':[],'showOnMobile':false,'shapeAnimationSpeed':'0'}</attribute>
+    </xpath>
+    <xpath expr="//div[hasclass('o_we_shape')]" position="replace">
+        <div class="o_we_shape o_web_editor_Airy_10"/>
+    </xpath>
+    <xpath expr="//div[hasclass('o_grid_mode')]" position="attributes">
+        <attribute name="style">gap: 0px 16px;</attribute>
+    </xpath>
+    <!-- Intro -->
+    <xpath expr="//div[hasclass('o_grid_item')]" position="attributes">
+        <attribute name="style">z-index: 1; --grid-item-padding-y: 0px; --grid-item-padding-x: 0px; grid-area: 1 / 8 / 22 / 13;</attribute>
+    </xpath>
+    <xpath expr="//h2" position="attributes">
+        <attribute name="class"/>
+        <attribute name="style">text-align: right;</attribute>
+    </xpath>
+    <xpath expr="//p[hasclass('lead')]" position="attributes">
+        <attribute name="style">text-align: right;</attribute>
+    </xpath>
+    <xpath expr="//p[hasclass('lead')]" position="replace" mode="inner">
+        Discover our latest collection: sustainable, innovative designs that blend modern elegance with timeless architectural beauty.
+    </xpath>
     <!-- Card 1 -->
-    <xpath expr="//div[hasclass('g-col-lg-3')]//h3" position="replace" mode="inner">
+    <xpath expr="//div[hasclass('o_grid_item_image')]" position="attributes">
+        <attribute name="class" add="g-height-8" remove="g-height-6" separator=" "/>
+        <attribute name="style">z-index: 2; --grid-item-padding-y: 0px; --grid-item-padding-x: 0px; grid-area: 2 / 1 / 10 / 4;</attribute>
+    </xpath>
+    <xpath expr="(//div[hasclass('o_grid_item')])[3]" position="attributes">
+        <attribute name="style">z-index: 3; --grid-item-padding-y: 12px; --grid-item-padding-x: 0px; grid-area: 10 / 1 / 14 / 4;</attribute>
+    </xpath>
+    <xpath expr="(//div[hasclass('o_grid_item')])[3]//h3" position="replace" mode="inner">
         Innovative Design Solutions
     </xpath>
-    <xpath expr="//div[hasclass('g-col-lg-3')]//p" position="replace" mode="inner">
+    <xpath expr="(//div[hasclass('o_grid_item')])[3]//p" position="replace" mode="inner">
         Transform your vision into reality with cutting-edge architectural designs tailored to your unique needs and aesthetic preferences.
     </xpath>
     <!-- Card 2 -->
-    <xpath expr="//div[hasclass('g-col-lg-3')][4]//h3" position="replace" mode="inner">
+    <xpath expr="(//div[hasclass('o_grid_item_image')])[2]" position="attributes">
+        <attribute name="class" add="g-height-3" remove="g-height-6" separator=" "/>
+        <attribute name="style">z-index: 4; --grid-item-padding-y: 0px; --grid-item-padding-x: 0px; grid-area: 1 / 4 / 4 / 7;</attribute>
+    </xpath>
+    <xpath expr="(//div[hasclass('o_grid_item')])[5]" position="attributes">
+        <attribute name="style">z-index: 5; --grid-item-padding-y: 12px; --grid-item-padding-x: 0px; grid-area: 4 / 4 / 8 / 7;</attribute>
+    </xpath>
+    <xpath expr="(//div[hasclass('o_grid_item')])[5]//h3" position="replace" mode="inner">
         Sustainable Building Practices
     </xpath>
-    <xpath expr="//div[hasclass('g-col-lg-3')][4]//p" position="replace" mode="inner">
+    <xpath expr="(//div[hasclass('o_grid_item')])[5]//p" position="replace" mode="inner">
-        Embrace eco-friendly architecture with sustainable design solutions that enhance efficiency and reduce environmental impact.
+        Embrace eco-friendly architecture with sustainable design solutions that reduce environmental impact.
     </xpath>
     <!-- Card 3 -->
-    <xpath expr="//div[hasclass('g-col-lg-3')][6]//h3" position="replace" mode="inner">
+    <xpath expr="(//div[hasclass('o_grid_item_image')])[3]" position="attributes">
+        <attribute name="class" add="g-height-4" remove="g-height-6" separator=" "/>
+        <attribute name="style">z-index: 6; --grid-item-padding-y: 0px; --grid-item-padding-x: 0px; grid-area: 8 / 4 / 12 / 7;</attribute>
+    </xpath>
+    <xpath expr="(//div[hasclass('o_grid_item')])[7]" position="attributes">
+        <attribute name="style">z-index: 7; --grid-item-padding-y: 12px; --grid-item-padding-x: 0px; grid-area: 12 / 4 / 16 / 7;</attribute>
+    </xpath>
+    <xpath expr="//div[hasclass('o_grid_item')][7]//h3" position="replace" mode="inner">
         Detailed Project Management
     </xpath>
-    <xpath expr="//div[hasclass('g-col-lg-3')][6]//p" position="replace" mode="inner">
+    <xpath expr="//div[hasclass('o_grid_item')][7]//p" position="replace" mode="inner">
         Experience seamless project execution with meticulous planning, budgeting, and oversight from concept to completion.
     </xpath>
 </template>

theme_enark/views/snippets/s_freegrid.xml

@@ -2,9 +2,30 @@
 <odoo>
 
 <template id="s_freegrid" inherit_id="website.s_freegrid">
+    <!-- Layout -->
+    <xpath expr="//section" position="attributes">
+        <attribute name="data-oe-shape-data">{'shape':'web_editor/Origins/04_001','colors':{'c3':'o-color-5'},'flip':[],'showOnMobile':true,'shapeAnimationSpeed':'0'}</attribute>
+        <attribute name="class" add="pt128" remove="pt64" separator=" "/>
+    </xpath>
+    <xpath expr="//div[hasclass('o_grid_mode')]" position="attributes">
+        <attribute name="data-row-count">17</attribute>
+    </xpath>
+    <xpath expr="//div[hasclass('container-fluid')]" position="before">
+        <div class="o_we_shape o_web_editor_Origins_04_001 o_shape_show_mobile" style="background-image: url('/web_editor/shape/web_editor/Origins/04_001.svg?c3=o-color-5');"/>
+    </xpath>
+    <xpath expr="//div[hasclass('container-fluid')]" position="attributes">
+        <attribute name="class" add="container" remove="container-fluid" separator=" "/>
+    </xpath>
+    <xpath expr="(//div[hasclass('o_grid_item')])[7]" position="attributes">
+        <attribute name="class" add="g-height-6" remove="g-height-5" separator=" "/>
+        <attribute name="style">z-index: 7; grid-area: 12 / 1 / 18 / 8; --grid-item-padding-y: 16px; --grid-item-padding-x: 0px;</attribute>
+    </xpath>
+    <xpath expr="(//div[hasclass('o_grid_item')])[8]" position="attributes">
+        <attribute name="style">z-index: 8; grid-area: 12 / 10 / 14 / 13; --grid-item-padding-y: 16px; --grid-item-padding-x: 0px;"</attribute>
+    </xpath>
     <!-- Title -->
-    <xpath expr="//h2" position="replace" mode="inner">
+    <xpath expr="//h2" position="replace">
-        Architectural Excellence for Corporate Success
+        <h1 class="display-4">Architectural Excellence for Corporate Success</h1>
     </xpath>
     <!-- Paragraph -->
     <xpath expr="//p[hasclass('lead')]" position="replace" mode="inner">

theme_enark/views/snippets/s_media_list.xml

@@ -6,17 +6,6 @@
     <xpath expr="//section" position="attributes">
         <attribute name="class" add="o_cc1" remove="o_cc2" separator=" "/>
     </xpath>
-    <!-- Row 1 - Layout -->
-    <xpath expr="(//div[hasclass('row')])[2]" position="attributes">
-        <attribute name="class" add="border rounded" separator=" "/>
-        <attribute name="style" add="border-width: 1px !important; border-color: rgb(70, 77, 83) !important; border-radius: 4px !important;" separator=" "/>
-    </xpath>
-    <xpath expr="//div[hasclass('col-lg-4')]" position="attributes">
-        <attribute name="class" add="col-lg-6" remove="col-lg-4" separator=" "/>
-    </xpath>
-    <xpath expr="//div[hasclass('col-lg-8')]" position="attributes">
-        <attribute name="class" add="col-lg-6" remove="col-lg-8" separator=" "/>
-    </xpath>
     <!-- Row #1 - Title & paragraph -->
     <xpath expr="//div[hasclass('s_media_list_body')]//h3" position="replace" mode="inner">
         Construction site
@@ -24,11 +13,6 @@
     <xpath expr="//div[hasclass('s_media_list_body')]//p" position="replace" mode="inner">
         Our mastery of construction techniques has been built up over time through our close collaboration with the workers and our sustained presence on the construction sites.
     </xpath>
-    <!-- Row 2 - Layout -->
-    <xpath expr="(//div[hasclass('row')])[3]" position="attributes">
-        <attribute name="class" add="border rounded" separator=" "/>
-        <attribute name="style" add="border-width: 1px !important; border-color: rgb(70, 77, 83) !important; border-radius: 4px !important;" separator=" "/>
-    </xpath>
     <!-- Row #2 - Title & paragraph -->
     <xpath expr="(//div[hasclass('s_media_list_body')])[2]//h3" position="replace" mode="inner">
         Nature friendly
@@ -36,11 +20,6 @@
     <xpath expr="(//div[hasclass('s_media_list_body')])[2]//p" position="replace" mode="inner">
         Our creations integrate and are in perfect harmony with their environment.
     </xpath>
-    <!-- Row 3 - Layout -->
-    <xpath expr="(//div[hasclass('row')])[4]" position="attributes">
-        <attribute name="class" add="o_cc o_cc5 flex-row-reverse border rounded" remove="o_cc o_cc1" separator=" "/>
-        <attribute name="style" add="border-width: 1px !important; border-color: rgb(70, 77, 83) !important; border-radius: 4px !important;" separator=" "/>
-    </xpath>
     <!-- Row #3 - Title & paragraph -->
     <xpath expr="(//div[hasclass('s_media_list_body')])[3]//h3" position="replace" mode="inner">
         Know our clients.

theme_enark/views/snippets/s_numbers_list.xml

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+
+<template id="s_numbers_list" inherit_id="website.s_numbers_list">
+    <xpath expr="//div[hasclass('col-lg-5')]//p" position="after">
+        <p><br/></p>
+        <p><a href="#" class="btn btn-secondary">More details</a></p>
+    </xpath>
+</template>
+
+</odoo>

theme_enark/views/snippets/s_references.xml

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

theme_enark/views/snippets/s_title.xml

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+
+<template id="s_title" inherit_id="website.s_title">
+    <xpath expr="//h2" position="attributes">
+        <attribute name="class"/>
+        <attribute name="style">text-align: left;</attribute>
+    </xpath>
+    <xpath expr="//h2" position="replace" mode="inner">
+        Innovative architecture <br/>and sustainable design solutions
+    </xpath>
+</template>
+
+</odoo>