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

[IMP] website, *: replace spacing selection by a slider

Browse Source 
*: web_editor

The goal of this commit is to tweak the code of <we-range> widget
to be able to select a css using class values.
This way, the image spacing selection can be easily replaced by
a slider of 4 levels [0 -> none, 1 -> small, 2 -> medium, 3 -> big].

Part of https://github.com/odoo/odoo/pull/66544
task-2326573
This commit is contained in:
xO-Tx
2021-03-09 11:02:42 +00:00
committed by qsm-odoo
parent 90b1b1b1b0
commit 38dc9c82c5
2 changed files with 35 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/web_editor/static/src/js/editor/snippets.options.js
+32 -4
View File
@@ -2013,9 +2013,7 @@ const RangeUserValueWidget = UnitUserValueWidget.extend({
[min, max] = [max, min];
this.input.classList.add('o_we_inverted_range');
}
this.input.setAttribute('min', min);
this.input.setAttribute('max', max);
this.input.setAttribute('step', step);
this._setInputAttributes(min, max, step);
this.containerEl.appendChild(this.input);
},
@@ -2023,12 +2021,34 @@ const RangeUserValueWidget = UnitUserValueWidget.extend({
// Public
//--------------------------------------------------------------------------
/**
* @override
*/
loadMethodsData(validMethodNames) {
this._super(...arguments);
for (const methodName of this._methodsNames) {
const possibleValues = this._methodsParams.optionsPossibleValues[methodName];
if (possibleValues.length > 1) {
this._setInputAttributes(0, possibleValues.length - 1, 1);
break;
}
}
},
/**
* @override
*/
async setValue(value, methodName) {
await this._super(...arguments);
this.input.value = this._value;
const possibleValues = this._methodsParams.optionsPossibleValues[methodName];
this.input.value = possibleValues.length > 1 ? possibleValues.indexOf(value) : this._value;
},
/**
* @override
*/
getValue(methodName) {
const value = this._super(...arguments);
const possibleValues = this._methodsParams.optionsPossibleValues[methodName];
return possibleValues.length > 1 ? possibleValues[+value] : value;
},
//--------------------------------------------------------------------------
@@ -2042,6 +2062,14 @@ const RangeUserValueWidget = UnitUserValueWidget.extend({
this._value = ev.target.value;
this._onUserValueChange(ev);
},
/**
* @private
*/
_setInputAttributes(min, max, step) {
this.input.setAttribute('min', min);
this.input.setAttribute('max', max);
this.input.setAttribute('step', step);
},
});
const SelectPagerUserValueWidget = SelectUserValueWidget.extend({
addons/website/views/snippets/s_image_gallery.xml
+3 -6
View File
@@ -97,12 +97,9 @@
<we-button data-columns="6">6</we-button>
<we-button data-columns="12">12</we-button>
</we-select>
<we-select string="Images spacing" data-dependencies="!slideshow_mode_opt">
<we-button data-select-class="o_spc-none">None</we-button>
<we-button data-select-class="o_spc-small">Small</we-button>
<we-button data-select-class="o_spc-medium">Medium</we-button>
<we-button data-select-class="o_spc-big">Big</we-button>
</we-select>
<we-range string="Images Spacing"
data-dependencies="!slideshow_mode_opt"
data-select-class="o_spc-none|o_spc-small|o_spc-medium|o_spc-big"/>
<we-select string="Styling" data-apply-to="img">
<we-button data-select-class="">Standard</we-button>
<we-button data-select-class="img-thumbnail">Thumbnails</we-button>