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

[IMP] web_editor: replace media padding select with px input

Browse Source 
Currently, adding a padding to media is done with a select, which gives
a limited amount of options based on bootstrap classes.
This opens up the play field for the user by letting them input their
own pixel value.

closes odoo/odoo#72112

Signed-off-by: David Monjoie (dmo) <dmo@odoo.com>
This commit is contained in:
Antoine Guenet
2021-06-14 09:36:18 +00:00
parent 926af37343
commit 169bec084a
2 changed files with 5 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/web_editor/static/src/js/editor/snippets.options.js
+4 -16
View File
@@ -4148,20 +4148,8 @@ registry.StaticMediaTools = SnippetOptionWidget.extend({
toggleShapeThumbnail(previewMode) {
this._toggleShape(previewMode, 'img-thumbnail');
},
setPadding(previewMode, padding, params) {
if (previewMode === true) {
this.currentPadding = params.possibleValues.find(c => this.$target.hasClass(c)) || '';
}
for (const value of params.possibleValues) {
if (previewMode === 'reset') {
this.$target.toggleClass(value, value === this.currentPadding);
} else {
this.$target.toggleClass(value, value === padding)
}
}
if (previewMode === false) {
this.currentPadding = padding;
}
setPadding(previewMode, padding) {
this.$target.css('padding', padding);
},
align(previewMode, alignment, params) {
if (previewMode === true) {
@@ -4187,7 +4175,7 @@ registry.StaticMediaTools = SnippetOptionWidget.extend({
if (['toggleShapeRounded', 'toggleShapeCircle', 'toggleShapeShadow', 'toggleShapeThumbnail'].includes(methodName)) {
return params.possibleValues.find(c => this.$target.hasClass(c)) || '';
} else if (methodName === 'setPadding') {
return params.possibleValues.find(c => this.$target.hasClass(c)) || '';
return this.$target.css('padding');
} else if (methodName === 'align') {
return this._getAlignment();
}
@@ -4255,7 +4243,7 @@ registry.FontawesomeTools = SnippetOptionWidget.extend({
* General options of an image.
*/
registry.ImageTools = SnippetOptionWidget.extend({
setWidth(previewMode, width, params) {
setWidth(previewMode, width) {
if (previewMode === true) {
this.currentWidth = this.$target.css('width');
}
addons/web_editor/views/snippets.xml
+1 -7
View File
@@ -425,13 +425,7 @@
<we-button data-toggle-shape-thumbnail="img-thumbnail" title="Shape: Thumbnail"><i class="fa fa-picture-o fa-fw"></i></we-button>
</we-row>
<we-select string="Padding">
<we-button data-set-padding="" title="Padding: None">None</we-button>
<we-button data-set-padding="padding-small" title="Padding: Small">Small</we-button>
<we-button data-set-padding="padding-medium" title="Padding: Medium">Medium</we-button>
<we-button data-set-padding="padding-large" title="Padding: Large">Large</we-button>
<we-button data-set-padding="padding-xl" title="Padding: XL">Extra Large</we-button>
</we-select>
<we-input string="Padding" data-set-padding="" data-unit="px"/>
</div>
<div data-js="ImageOptimize"