pengyuthon/odoo_source
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[ADD] website: add text_cover snippet

Browse Source 
New text_cover snippet added for the editor. Editors are now able to use
a cover composed of an image and some text on the side.

task-2691555

closes odoo/odoo#105650

Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
This commit is contained in:
Antoine (anso)
2023-03-20 16:51:04 +01:00
committed by qsm-odoo
parent 86f102b72a
commit 5ac340b1b2
7 changed files with 88 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/website/__manifest__.py
+1
View File
@@ -35,6 +35,7 @@
'views/snippets/snippets.xml',
'views/snippets/s_title.xml',
'views/snippets/s_cover.xml',
'views/snippets/s_text_cover.xml',
'views/snippets/s_text_image.xml',
'views/snippets/s_image_text.xml',
'views/snippets/s_banner.xml',
addons/website/data/website_data.xml
+6
View File
@@ -769,6 +769,12 @@
<field name="type">url</field>
<field name="url">/website/static/src/img/snippets_demo/s_cover.jpg</field>
</record>
<record id="website.s_text_cover_default_image" model="ir.attachment">
<field name="public" eval="True"/>
<field name="name">s_text_cover_default_image.jpg</field>
<field name="type">url</field>
<field name="url">/website/static/src/img/snippets_demo/s_text_cover.jpg</field>
</record>
<record id="website.s_masonry_block_default_image_1" model="ir.attachment">
<field name="public" eval="True"/>
<field name="name">s_masonry_block_default_image_1.jpg</field>
addons/website/static/src/img/snippets_demo/s_text_cover.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 96 KiB

addons/website/static/src/img/snippets_thumbs/s_text_cover.svg
+41
View File
@@ -0,0 +1,41 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="82" height="60" viewBox="0 0 82 60">
<defs>
<linearGradient id="linearGradient-1" x1="0%" x2="100%" y1="23.23%" y2="76.77%">
<stop offset="0%" stop-color="#00A09D"/>
<stop offset="100%" stop-color="#00E2FF"/>
</linearGradient>
<rect id="path-2" width="21" height="2" x="3" y="3"/>
<filter id="filter-3" width="104.8%" height="200%" x="-2.4%" y="-25%" filterUnits="objectBoundingBox">
<feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
<feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
<feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 0.259587944 0 0 0 0 0.259629577 0 0 0 0 0.259574831 0 0 0 0.525895979 0"/>
</filter>
<path id="path-4" d="M18 11v1H3v-1h15zm2-3v1H3V8h17z"/>
<filter id="filter-5" width="105.9%" height="150%" x="-2.9%" y="-12.5%" filterUnits="objectBoundingBox">
<feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
<feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
<feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.0995137675 0"/>
</filter>
</defs>
<g fill="none" fill-rule="evenodd" class="snippets_thumbs">
<g class="s_banner">
<rect width="82" height="60" class="bg"/>
<g fill="url(#linearGradient-1)" class="group" opacity=".4">
<g class="image_1">
<rect width="82" height="60" class="rectangle"/>
</g>
</g>
<rect width="41" height="60" fill="#FFF" class="rectangle"/>
<g class="group" transform="translate(4 22)">
<g class="rectangle">
<use fill="#000" filter="url(#filter-3)" xlink:href="#path-2"/>
<use fill="#000" fill-opacity=".697" xlink:href="#path-2"/>
</g>
<g class="combined_shape">
<use fill="#000" filter="url(#filter-5)" xlink:href="#path-4"/>
<use fill="#000" fill-opacity=".348" xlink:href="#path-4"/>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

addons/website/static/src/snippets/s_text_cover/000.scss
+9
View File
@@ -0,0 +1,9 @@
.s_text_cover {
// Needed to be able to stretch the inner container so that
// the snippet works with the 50% and 100% height
> * {
&, > .row {
min-height: inherit;
}
}
}
addons/website/views/snippets/s_text_cover.xml
+25
View File
@@ -0,0 +1,25 @@
<?xml version="1.0" encoding="utf-8"?>
<odoo>
<template id="s_text_cover" name="Text cover">
<section class="s_text_cover">
<div class="container-fluid">
<div class="row">
<div class="o_colored_level o_cc o_cc_1 col-lg-4 pt160 pb160 px-5">
<h1><span style="font-size: 62px;">Sell Online. <br/>Easily.</span></h1>
<p class="lead">Write one or two paragraphs describing your product, services or a specific feature. To be successful your content needs to be useful to your readers.</p>
<a t-att-href="cta_btn_href" class="btn btn-primary mb-2"><t t-esc="cta_btn_text">Contact us</t></a>
</div>
<div class="o_not_editable pt160 pb160 oe_img_bg col-lg-8 d-none d-md-block" style="background-image: url('/web/image/website.s_text_cover_default_image'); background-position: 100% 0;"/>
</div>
</div>
</section>
</template>
<record id="website.s_text_cover_000_scss" model="ir.asset">
<field name="name">Text cover 000 SCSS</field>
<field name="bundle">web.assets_frontend</field>
<field name="path">website/static/src/snippets/s_text_cover/000.scss</field>
</record>
</odoo>
addons/website/views/snippets/snippets.xml
+6 -3
View File
@@ -26,6 +26,9 @@
<t t-snippet="website.s_cover" t-thumbnail="/website/static/src/img/snippets_thumbs/s_cover.svg">
<keywords>hero, jumbotron</keywords>
</t>
<t t-snippet="website.s_text_cover" t-thumbnail="/website/static/src/img/snippets_thumbs/s_text_cover.svg">
<keywords>hero, jumbotron</keywords>
</t>
<t t-snippet="website.s_text_image" t-thumbnail="/website/static/src/img/snippets_thumbs/s_text_image.svg">
<keywords>content</keywords>
</t>
@@ -570,13 +573,13 @@
<!-- Background -->
<t t-set="only_bg_color_selector" t-value="'section .row > div, .s_text_highlight, .s_mega_menu_thumbnails_footer'"/>
<t t-set="only_bg_color_exclude" t-value="'.s_col_no_bgcolor, .s_col_no_bgcolor.row > div, .s_masonry_block .row > div, .s_color_blocks_2 .row > div, .s_image_gallery .row > div'"/>
<t t-set="only_bg_color_exclude" t-value="'.s_col_no_bgcolor, .s_col_no_bgcolor.row > div, .s_masonry_block .row > div, .s_color_blocks_2 .row > div, .s_image_gallery .row > div, .s_text_cover .row > .o_not_editable'"/>
<t t-set="base_only_bg_image_selector" t-value="'.s_tabs .oe_structure > *, footer .oe_structure > *'"/>
<t t-set="only_bg_image_selector" t-value="base_only_bg_image_selector"/>
<t t-set="only_bg_image_exclude" t-value="''"/>
<t t-set="both_bg_color_image_selector" t-value="'section, .carousel-item, .s_masonry_block .row > div, .s_color_blocks_2 .row > div, .parallax'"/>
<t t-set="both_bg_color_image_selector" t-value="'section, .carousel-item, .s_masonry_block .row > div, .s_color_blocks_2 .row > div, .parallax, .s_text_cover .row > .o_not_editable'"/>
<t t-set="both_bg_color_image_exclude" t-value="base_only_bg_image_selector + ', .s_carousel_wrapper, .s_image_gallery .carousel-item, .s_google_map, .s_map, [data-snippet] :not(.oe_structure) > [data-snippet], .s_masonry_block .s_col_no_resize'"/>
<t t-call="website.snippet_options_background_options">
@@ -611,7 +614,7 @@
<!-- Border | Columns -->
<div data-js="Box"
data-selector="section .row > div"
data-exclude=".s_col_no_bgcolor, .s_col_no_bgcolor.row > div, .s_image_gallery .row > div, .s_masonry_block .s_col_no_resize">
data-exclude=".s_col_no_bgcolor, .s_col_no_bgcolor.row > div, .s_image_gallery .row > div, .s_masonry_block .s_col_no_resize, .s_text_cover .row > .o_not_editable">
<t t-call="website.snippet_options_border_widgets"/>
<t t-call="website.snippet_options_shadow_widgets"/>
</div>