diff --git a/addons/web_editor/static/src/js/editor/snippets.options.js b/addons/web_editor/static/src/js/editor/snippets.options.js
index d36df85d1c8..8da2237136b 100644
--- a/addons/web_editor/static/src/js/editor/snippets.options.js
+++ b/addons/web_editor/static/src/js/editor/snippets.options.js
@@ -1447,7 +1447,7 @@ const MediapickerUserValueWidget = UserValueWidget.extend({
} else {
iconEl.classList.add('fa', 'fa-fw', 'fa-refresh', 'mr-1');
this.el.classList.add('o_we_no_toggle');
- this.containerEl.textContent = _t("Replace media");
+ this.containerEl.textContent = _t("Replace");
}
$(this.containerEl).prepend(iconEl);
},
@@ -3162,7 +3162,6 @@ registry['sizing_y'] = registry.sizing.extend({
* options that handles all the common parts.
*/
const ImageHandlerOption = SnippetOptionWidget.extend({
-
/**
* @override
*/
@@ -3171,6 +3170,36 @@ const ImageHandlerOption = SnippetOptionWidget.extend({
await this._loadImageInfo();
return _super(...arguments);
},
+ /**
+ * @override
+ */
+ async start() {
+ await this._super(...arguments);
+ const weightEl = document.createElement('span');
+ weightEl.classList.add('o_we_image_weight', 'o_we_tag', 'o_we_tag_small', 'd-none');
+ weightEl.title = _t("Size");
+ this.$weight = $(weightEl);
+ },
+
+ //--------------------------------------------------------------------------
+ // Public
+ //--------------------------------------------------------------------------
+
+ /**
+ * @override
+ */
+ async updateUI() {
+ await this._super(...arguments);
+
+ if (this._filesize === undefined) {
+ await this._applyOptions(false);
+ }
+ if (this._filesize !== undefined) {
+ this.$weight.text(`${this._filesize.toFixed(1)} kb`);
+ this.$weight.removeClass('d-none');
+ this._relocateWeightEl();
+ }
+ },
//--------------------------------------------------------------------------
// Options
@@ -3266,6 +3295,10 @@ const ImageHandlerOption = SnippetOptionWidget.extend({
}
return this._super(...arguments);
},
+ /**
+ * @abstract
+ */
+ _relocateWeightEl() {},
/**
* @override
*/
@@ -3318,21 +3351,26 @@ const ImageHandlerOption = SnippetOptionWidget.extend({
* Applies all selected options on the original image.
*
* @private
+ * @param {boolean} [update=true] If this is false, this does not actually
+ * modifies the image but only simulates the modifications on it to
+ * be able to update the filesize UI.
*/
- async _applyOptions() {
+ async _applyOptions(update = true) {
const img = this._getImg();
+ if (!update && !(img && img.complete)) {
+ return;
+ }
if (!['image/jpeg', 'image/png'].includes(img.dataset.mimetype)) {
this.originalId = null;
return;
}
const dataURL = await applyModifications(img);
- const weight = dataURL.split(',')[1].length / 4 * 3;
- const $weight = this.$el.find('.o_we_image_weight');
- $weight.find('> small').text(_t("New size"));
- $weight.find('b').text(`${(weight / 1024).toFixed(1)} kb`);
- $weight.removeClass('d-none');
- img.classList.add('o_modified_image_to_save');
- return loadImage(dataURL, img);
+ this._filesize = dataURL.split(',')[1].length / 4 * 3 / 1024;
+
+ if (update) {
+ img.classList.add('o_modified_image_to_save');
+ return loadImage(dataURL, img);
+ }
},
/**
* Loads the image's attachment info.
@@ -3429,6 +3467,14 @@ registry.ImageOptimize = ImageHandlerOption.extend({
_getImg() {
return this.$target[0];
},
+ /**
+ * @override
+ */
+ _relocateWeightEl() {
+ const leftPanelEl = this.$overlay.data('$optionsSection')[0];
+ const titleTextEl = leftPanelEl.querySelector('we-title > span');
+ this.$weight.appendTo(titleTextEl);
+ },
//--------------------------------------------------------------------------
// Handlers
@@ -3511,9 +3557,11 @@ registry.BackgroundOptimize = ImageHandlerOption.extend({
/**
* @override
*/
- async _applyOptions() {
+ async _applyOptions(update = true) {
await this._super(...arguments);
- this.$target.css('background-image', `url('${this._getImg().getAttribute('src')}')`);
+ if (update) {
+ this.$target.css('background-image', `url('${this._getImg().getAttribute('src')}')`);
+ }
},
/**
* Initializes this.img to an image with the background image url as src.
@@ -3530,6 +3578,22 @@ registry.BackgroundOptimize = ImageHandlerOption.extend({
this.img.src = src.startsWith('/') ? src : '';
return await this._super(...arguments);
},
+ /**
+ * @override
+ */
+ _relocateWeightEl() {
+ this.trigger_up('option_update', {
+ optionNames: ['BackgroundImage'],
+ name: 'add_size_indicator',
+ data: this.$weight,
+ });
+ // Hack to align on the right
+ this.$weight.css({
+ 'width': '200px', // Make parent row grow by faking a width
+ 'flex': '0 0 0', // But force no forced width
+ 'margin-left': 'auto',
+ });
+ },
//--------------------------------------------------------------------------
// Handlers
@@ -3742,6 +3806,16 @@ registry.BackgroundImage = SnippetOptionWidget.extend({
// Public
//--------------------------------------------------------------------------
+ /**
+ * @override
+ */
+ notify(name, data) {
+ if (name === 'add_size_indicator') {
+ this._requestUserValueWidgets('bg_image_opt')[0].$el.after(data);
+ } else {
+ this._super(...arguments);
+ }
+ },
/**
* @override
*/
diff --git a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
index 321458929cc..587eceb1d61 100644
--- a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
+++ b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
@@ -1273,26 +1273,24 @@ body.editor_enable.editor_has_snippets {
}
.o_we_image_weight {
- display: flex;
- justify-content: flex-end;
- align-items: center;
- margin: $o-we-sidebar-content-field-spacing *.25 $o-we-item-border-width $o-we-sidebar-content-field-spacing*2;
-
- b {
- margin-left: $o-we-sidebar-content-field-label-spacing;
- font: 1em/1 bold $o-we-sidebar-content-field-input-font-family;
- color: $o-we-color-success;
- }
+ margin-left: $o-we-sidebar-content-field-label-spacing * 2;
}
.o_we_tag {
padding: ($o-we-sidebar-content-field-label-spacing / 2) $o-we-sidebar-content-field-label-spacing;
border-radius: 5px;
background-color: $o-we-bg-darkest;
+ white-space: nowrap;
+ .fa {
margin: 0 0 0 5px;
}
+
+ &.o_we_tag_small {
+ padding: ($o-we-sidebar-content-field-label-spacing / 4) ($o-we-sidebar-content-field-label-spacing / 2);
+ border-radius: 3px;
+ font-size: 0.85em;
+ }
}
.o_we_tag_wrapper {
display: inline-flex;
diff --git a/addons/web_editor/views/snippets.xml b/addons/web_editor/views/snippets.xml
index 2ac1734a4ae..4245b74d6ef 100644
--- a/addons/web_editor/views/snippets.xml
+++ b/addons/web_editor/views/snippets.xml
@@ -120,8 +120,6 @@
Quality
-
-