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

[IMP] website: improve edition of Showcase snippet

Browse Source 
Also no more scss required for the snippet.

Part of https://github.com/odoo/odoo/pull/46773
task-2191381

Co-authored-by: Cocographique <nmi@odoo.com>
This commit is contained in:
qsm-odoo
2020-03-03 16:12:23 +00:00
co-authored by Cocographique
parent f8cafbea87
commit 219b29c4e2
4 changed files with 63 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/website/static/src/snippets/s_showcase/options.js
+18
View File
@@ -0,0 +1,18 @@
odoo.define('website.s_showcase_options', function (require) {
'use strict';
const options = require('web_editor.snippets.options');
options.registry.Showcase = options.Class.extend({
/**
* @override
*/
onMove: function () {
const $showcaseCol = this.$target.parent().closest('.row > div');
const isLeftCol = $showcaseCol.index() <= 0;
const $title = this.$target.children('.s_showcase_title');
$title.toggleClass('flex-lg-row-reverse', isLeftCol);
$title.find('.s_showcase_icon').toggleClass('mr-lg-0 ml-3', isLeftCol);
},
});
});
addons/website/views/assets.xml
+1
View File
@@ -128,6 +128,7 @@
<script type="text/javascript" src="/website/static/src/snippets/s_tabs/options.js"/>
<script type="text/javascript" src="/website/static/src/snippets/s_progress_bar/options.js"/>
<script type="text/javascript" src="/website/static/src/snippets/s_blockquote/options.js"/>
<script type="text/javascript" src="/website/static/src/snippets/s_showcase/options.js"/>
<script type="text/javascript" src="/website/static/src/snippets/s_table_of_content/options.js"/>
<script type="text/javascript" src="/website/static/src/js/editor/wysiwyg_multizone.js"/>
addons/website/views/snippets/s_showcase.xml
+41 -17
View File
@@ -3,28 +3,52 @@
<!-- Template -->
<template name="Showcase" id="s_showcase">
<section class="s_showcase pt32 pb32" data-vcss="001">
<section class="s_showcase pt48 pb48" data-vcss="002">
<div class="container">
<div class="row text-center col-md-6 col-lg-12">
<div class="col-lg-3 offset-lg-2 my-2" data-name="Feature block">
<h3 class="mb16"><span class="fa fa-fw fa-desktop text-beta s_showcase_icon"/>First feature</h3>
<p>Focus on what the customer would like to know, not what you want to show. Write a small explanation of this great feature</p>
<div class="row no-gutters s_col_no_resize s_col_no_bgcolor s_nb_column_fixed">
<div class="col-lg text-lg-right">
<div class="row">
<div class="col-lg-12 pt24 pb24" data-name="Block">
<div class="s_showcase_title d-flex flex-lg-row-reverse mb-2">
<i class="s_showcase_icon fa fa-2x fa-desktop text-beta mr-3 mr-lg-0 ml-3"/>
<h3>First feature</h3>
</div>
<p>Focus on what the customer would like to know, not what you want to show. <br/>Write a small explanation of this great feature.</p>
</div>
<div class="col-lg-12 pt24 pb24" data-name="Block">
<div class="s_showcase_title d-flex flex-lg-row-reverse mb-2">
<i class="s_showcase_icon fa fa-2x fa-paint-brush text-beta mr-3 mr-lg-0 ml-3"/>
<h3>Second feature</h3>
</div>
<p>Focus on what the customer would like to know, not what you want to show. <br/>Write a small explanation of this great feature.</p>
</div>
</div>
</div>
<div class="col-lg-3 offset-lg-2 my-2" data-name="Feature block">
<h3 class="mb16"><span class="fa fa-paint-brush text-beta s_showcase_icon"/>Second feature</h3>
<p>Focus on what the customer would like to know, not what you want to show. Write a small explanation of this great feature</p>
<div class="col-1">
<div class="w-50 h-100 border-right"/>
</div>
<div class="col-lg-3 offset-lg-2 my-2" data-name="Feature block">
<h3 class="mb16"><span class="fa fa-heart text-beta s_showcase_icon"/>Another feature</h3>
<p>Focus on what the customer would like to know, not what you want to show. Write a small explanation of this great feature</p>
</div>
<div class="col-lg-3 offset-lg-2 my-2" data-name="Feature block">
<h3 class="mb16"><span class="fa fa-sliders text-beta s_showcase_icon"/>Last Feature</h3>
<p>Focus on what the customer would like to know, not what you want to show. Write a small explanation of this great feature</p>
<div class="col-lg">
<div class="row">
<div class="col-lg-12 pt24 pb24" data-name="Block">
<div class="s_showcase_title d-flex mb-2">
<i class="s_showcase_icon fa fa-2x fa-heart text-beta mr-3"/>
<h3>Another feature</h3>
</div>
<p>Focus on what the customer would like to know, not what you want to show. <br/>Write a small explanation of this great feature.</p>
</div>
<div class="col-lg-12 pt24 pb24" data-name="Block">
<div class="s_showcase_title d-flex mb-2">
<i class="s_showcase_icon fa fa-2x fa-gift text-beta mr-3"/>
<h3>Last Feature</h3>
</div>
<p>Focus on what the customer would like to know, not what you want to show. <br/>Write a small explanation of this great feature.</p>
</div>
</div>
</div>
</div>
</div>
<div class="pt16 text-center">
<div class="container text-lg-center">
<p><br/></p>
<a href="#" class="btn btn-primary">Discover all the features</a>
</div>
</section>
@@ -33,7 +57,7 @@
<!-- Options -->
<template id="s_showcase_options" inherit_id="website.snippet_options">
<xpath expr="//div[@data-js='background']" position="before">
<div data-js='s_showcase' data-selector=".s_showcase .feature"/>
<div data-js="Showcase" data-selector=".s_showcase .row > div:has(> .s_showcase_title)"/>
</xpath>
</template>
addons/website/views/snippets/snippets.xml
+3 -2
View File
@@ -233,12 +233,13 @@
<!-- Move snippets around -->
<div data-js="SnippetMove"
data-selector="section, .accordion > .card">
data-selector="section, .accordion > .card, .s_showcase .row:not(.s_col_no_resize) > div">
<we-button class="fa fa-fw fa-angle-up" data-move-snippet="prev" data-no-preview="true"/>
<we-button class="fa fa-fw fa-angle-down" data-move-snippet="next" data-no-preview="true"/>
</div>
<div data-js="SnippetMove"
data-selector=".row:not(.s_col_no_resize) > div, .nav-item">
data-selector=".row:not(.s_col_no_resize) > div, .nav-item"
data-exclude=".s_showcase .row > div">
<we-button class="fa fa-fw fa-angle-left" data-move-snippet="prev" data-no-preview="true"/>
<we-button class="fa fa-fw fa-angle-right" data-move-snippet="next" data-no-preview="true"/>
</div>