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

[IMP] website: review parallax option UI

Browse Source 
Instead of two select:

Parallax: none/fixed/very slow/slow/...
Direction: Bottom to top/top to bottom

We now have:

Parallax: none/fixed/bottom to top/top to bottom
Intensity: slider

Part of https://github.com/odoo/odoo/pull/47313
task-46147

closes odoo/odoo#47313

Related: odoo/design-themes#335
Related: odoo/upgrade#1553
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
This commit is contained in:
qsm-odoo
2020-08-10 14:27:00 +00:00
parent f563b0c782
commit 2f0bf44c7a
3 changed files with 44 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/website/static/src/js/content/snippets.animation.js
+3 -7
View File
@@ -553,15 +553,11 @@ registry.Parallax = Animation.extend({
this.ratio = this.speed * (this.viewport / 10);
// Provide a "safe-area" to limit parallax
const absoluteRatio = Math.abs(this.ratio);
this.$bg.css({
top: -this.ratio,
bottom: -this.ratio,
top: -absoluteRatio,
bottom: -absoluteRatio,
});
// Get parallax direction
if (this.el.dataset.scrollBackgroundDirection === 'bottom') {
this.ratio = -this.ratio;
}
},
//--------------------------------------------------------------------------
addons/website/static/src/js/editor/snippets.options.js
+20 -1
View File
@@ -1665,9 +1665,28 @@ options.registry.Parallax = options.Class.extend({
/**
* @override
*/
async _computeVisibility() {
async _computeVisibility(widgetName) {
return !this.$target.hasClass('o_background_video');
},
/**
* @override
*/
async _computeWidgetState(methodName, params) {
if (methodName === 'selectDataAttribute' && params.parallaxTypeOpt) {
const attrName = params.attributeName;
const attrValue = (this.$target[0].dataset[attrName] || params.attributeDefaultValue).trim();
switch (attrValue) {
case '0':
case '1': {
return attrValue;
}
default: {
return (attrValue.startsWith('-') ? '-1.5' : '1.5');
}
}
}
return this._super(...arguments);
},
/**
* Updates external background-related option to work with the parallax
* element instead of the original target when necessary.
addons/website/views/snippets/snippets.xml
+21 -12
View File
@@ -144,23 +144,32 @@
<we-select string=" ⌙ Parallax"
data-attribute-name="scrollBackgroundRatio"
data-attribute-default-value="0"
data-parallax-type-opt="true"
data-no-preview="true"
data-dependencies="bg_image_opt">
<we-button data-name="parallax_none_opt" data-select-data-attribute="0">None</we-button>
<we-button data-select-data-attribute="1">Fixed</we-button>
<we-button data-name="parallax_very_slow_opt" data-select-data-attribute="0.6">Very Slow</we-button>
<we-button data-name="parallax_slow_opt" data-select-data-attribute="1.2">Slow</we-button>
<we-button data-name="parallax_fast_opt" data-select-data-attribute="1.6">Fast</we-button>
<we-button data-name="parallax_very_fast_opt" data-select-data-attribute="2">Very Fast</we-button>
</we-select>
<we-select string="  ⌙ Direction"
data-attribute-name="scrollBackgroundDirection"
data-attribute-default-value="top"
data-no-preview="true"
data-dependencies="parallax_very_slow_opt, parallax_slow_opt, parallax_fast_opt, parallax_very_fast_opt">
<we-button data-select-data-attribute="top">Bottom to Top</we-button>
<we-button data-select-data-attribute="bottom">Top to Bottom</we-button>
<we-button data-name="parallax_top_opt" data-select-data-attribute="1.5">Bottom to Top</we-button>
<we-button data-name="parallax_bottom_opt" data-select-data-attribute="-1.5">Top to Bottom</we-button>
</we-select>
<we-range string="  ⌙ Intensity"
data-dependencies="parallax_top_opt"
data-select-data-attribute=""
data-attribute-name="scrollBackgroundRatio"
data-attribute-default-value="0"
data-no-preview="true"
data-min="0"
data-max="3"
data-step="0.15"/> <!-- Make sure this cannot land on 1 -->
<we-range string="  ⌙ Intensity"
data-dependencies="parallax_bottom_opt"
data-select-data-attribute=""
data-attribute-name="scrollBackgroundRatio"
data-attribute-default-value="0"
data-no-preview="true"
data-min="0"
data-max="-3"
data-step="0.15"/> <!-- Make sure this cannot land on 1 -->
</div>
<div data-js="BackgroundVideo"
t-att-data-selector="selector"