diff --git a/addons/web_editor/static/src/js/widgets/widgets.js b/addons/web_editor/static/src/js/widgets/widgets.js index daa5e868afd..194b7e15d4d 100644 --- a/addons/web_editor/static/src/js/widgets/widgets.js +++ b/addons/web_editor/static/src/js/widgets/widgets.js @@ -110,7 +110,7 @@ var AltDialog = Dialog.extend({ var MediaWidget = Widget.extend({ xmlDependencies: ['/web_editor/static/src/xml/editor.xml'], events: { - 'input input#icon-search': '_onSearchInput', + 'input input.o_we_search': '_onSearchInput', }, /** @@ -120,7 +120,7 @@ var MediaWidget = Widget.extend({ this._super.apply(this, arguments); this.media = media; this.$media = $(media); - this._onSearchInput = _.debounce(this._onSearchInput, 250); + this._onSearchInput = _.debounce(this._onSearchInput, 500); }, //-------------------------------------------------------------------------- @@ -136,17 +136,6 @@ var MediaWidget = Widget.extend({ } this._clear(); }, - /** - * @todo comment - */ - getControlPanelConfig: function () { - return { - searchEnabled: true, - pagerEnabled: true, - pagerLeftEnabled: false, - pagerRightEnabled: false, - }; - }, /** * @abstract * @param {string} needle @@ -185,6 +174,7 @@ var MediaWidget = Widget.extend({ */ _onSearchInput: function (ev) { this.search($(ev.currentTarget).val() || ''); + this.hasSearched = true; }, }); @@ -198,11 +188,11 @@ var ImageWidget = MediaWidget.extend({ 'click .o_upload_media_button_no_optimization': '_onUploadButtonNoOptimizationClick', 'change input[type=file]': '_onImageSelection', 'click .o_upload_media_url_button': '_onUploadURLButtonClick', - 'input input.url': '_onChangeInputURL', + 'input input.o_we_url_input': '_onURLInputChange', 'click .existing-attachments [data-src]': '_onImageClick', 'dblclick .existing-attachments [data-src]': '_onImageDblClick', 'click .o_existing_attachment_remove': '_onRemoveClick', - 'click .o_load_more': '_onLoadMore', + 'click .o_load_more': '_onLoadMoreClick', }), IMAGES_PER_ROW: 6, @@ -214,7 +204,8 @@ var ImageWidget = MediaWidget.extend({ init: function (parent, media, options) { this._super.apply(this, arguments); - this.IMAGES_DISPLAYED_TOTAL = this.IMAGES_PER_ROW * this.IMAGES_ROWS; + this.imagesRows = this.IMAGES_ROWS; + this.IMAGES_DISPLAYED_TOTAL = this.IMAGES_PER_ROW * this.imagesRows; this.options = options; this.accept = options.accept || (options.document ? '*/*' : 'image/*'); @@ -251,7 +242,7 @@ var ImageWidget = MediaWidget.extend({ var def = this._super.apply(this, arguments); var self = this; - this._renderImages(); + this._renderImages(true); var o = { url: null, @@ -354,7 +345,7 @@ var ImageWidget = MediaWidget.extend({ search: function (needle, noRender) { var self = this; if (!noRender) { - this.$('input.url').val('').trigger('input').trigger('change'); + this.$('input.o_we_url_input').val('').trigger('input').trigger('change'); } // TODO: Expand this for adding SVG var domain = this.domain.concat(['|', ['mimetype', '=', false], ['mimetype', this.options.document ? 'not in' : 'in', ['image/gif', 'image/jpe', 'image/jpeg', 'image/jpg', 'image/gif', 'image/png']]]); @@ -403,6 +394,7 @@ var ImageWidget = MediaWidget.extend({ }); if (!noRender) { self._renderImages(); + self._adaptLoadMore(); } }); }, @@ -411,6 +403,14 @@ var ImageWidget = MediaWidget.extend({ // Private //-------------------------------------------------------------------------- + /** + * @private + */ + _adaptLoadMore: function () { + var noMoreImgToLoad = this.IMAGES_DISPLAYED_TOTAL >= this.records.length; + this.$('.o_load_more').toggleClass('d-none', noMoreImgToLoad); + this.$('.o_load_done_msg').toggleClass('d-none', !noMoreImgToLoad); + }, /** * @override */ @@ -435,30 +435,37 @@ var ImageWidget = MediaWidget.extend({ /** * @private */ - _renderImages: function () { + _loadMoreImages: function (forceSearch) { + this.imagesRows += 2; + this.IMAGES_DISPLAYED_TOTAL = this.imagesRows * this.IMAGES_PER_ROW; + if (!forceSearch) { + this._renderImages(); + this._adaptLoadMore(); + } else { + this.search(this.$('.o_we_search').val() || ''); + } + }, + /** + * @private + */ + _renderImages: function (withEffect) { var self = this; var rows = _(this.records).chain() .slice(0, this.IMAGES_DISPLAYED_TOTAL) .groupBy(function (a, index) { return Math.floor(index / self.IMAGES_PER_ROW); }) .values() .value(); - var noMoreImgToLoad = this.IMAGES_DISPLAYED_TOTAL >= this.records.length; - this.$('.o_load_more').toggleClass('d-none', noMoreImgToLoad); - this.$('.o_load_done_msg').toggleClass('d-none', !noMoreImgToLoad); this.$('.form-text').empty(); - //Rendering menu & content for 'Image' or 'Document' tab - var templateMenu = 'web_editor.dialog.files.submenu'; - var templateContent = 'web_editor.dialog.files.existing.content'; - this.$('.o_submenu').replaceWith(QWeb.render(templateMenu, { - accept: this.accept, - isDocument: this.options.document, - })); - this.$('.existing-attachments').replaceWith(QWeb.render(templateContent, { - rows: rows, - isDocument: this.options.document, - })); + // Render menu & content + this.$('.existing-attachments').replaceWith( + QWeb.render('web_editor.dialog.files.existing.content', { + rows: rows, + isDocument: this.options.document, + withEffect: withEffect, + }) + ); var $divs = this.$('.o_image'); var imageDefs = _.map($divs, function (el) { @@ -474,11 +481,13 @@ var ImageWidget = MediaWidget.extend({ return def; } }); - $.when.apply($, imageDefs).then(function () { - _.delay(function () { - $divs.removeClass('o_image_loading'); - }, 400); - }); + if (withEffect) { + $.when.apply($, imageDefs).then(function () { + _.delay(function () { + $divs.removeClass('o_image_loading'); + }, 400); + }); + } this._highlightSelectedImages(); }, /** @@ -547,17 +556,10 @@ var ImageWidget = MediaWidget.extend({ } }); this.$el.submit(); - // Emptying file inputs + + // Empty file input this.$('.o_file_input').val(''); }, - /** - * @private - */ - _loadMoreImages: function () { - this.IMAGES_ROWS += 2; - this.IMAGES_DISPLAYED_TOTAL = this.IMAGES_ROWS * this.IMAGES_PER_ROW; - this._renderImages(); - }, //-------------------------------------------------------------------------- // Handlers @@ -596,8 +598,7 @@ var ImageWidget = MediaWidget.extend({ */ _onRemoveClick: function (ev) { var self = this; - var message = _t("Are you sure you want to delete this file ?"); - DialogBase.confirm(this, message, { + DialogBase.confirm(this, _t("Are you sure you want to delete this file ?"), { confirm_callback: function () { var $helpBlock = this.$('.form-text').empty(); var $a = $(ev.currentTarget); @@ -616,7 +617,7 @@ var ImageWidget = MediaWidget.extend({ return; } $helpBlock.replaceWith(QWeb.render('web_editor.dialog.image.existing.error', { - views: prevented[id] + views: prevented[id], })); }); } @@ -625,33 +626,29 @@ var ImageWidget = MediaWidget.extend({ /** * @private */ - _onChangeInputURL: function (ev) { + _onURLInputChange: function (ev) { var $input = $(ev.currentTarget); - var $button = $input.next('.input-group-append').children(); + var $button = this.$('.o_upload_media_url_button'); + var $success = this.$('.o_we_url_success'); + var $warning = this.$('.o_we_url_warning'); + var $error = this.$('.o_we_url_error'); + var inputValue = $input.val(); var emptyValue = (inputValue === ''); - var $warning = this.$('.warning-url'); - var $success = this.$('.success-url'); - var $error = this.$('.error-url'); - var $btn = this.$('.o_upload_media_url_button'); - var regex = /^(?:https?:\/\/)?[\w.-]+(?:\.[\w\.-]+)+[\w\-\._~:/?#[\]@!\$&'\(\)\*\+,;=.]+$/; - var isURL = regex.test(inputValue); - var showWarningOrError = (inputValue.length !== 0 ? isURL : !isURL); + + var isURL = /^.+\..+$/.test(inputValue); // TODO improve + var isImage = _.any(['.gif', '.jpe', '.jpg', '.png'], function (format) { + return inputValue.endsWith(format); + }); $button.toggleClass('btn-secondary', emptyValue).toggleClass('btn-primary', !emptyValue) - .prop('disabled', emptyValue); - + .prop('disabled', !isURL); if (!this.options.document) { - _.each(['.gif', '.jpe', '.jpg', '.png'], function (format) { - var endsWith = inputValue.endsWith(format); - $button.text(endsWith ? _t("Add image") : _t("Add as document")); - }); - } else { - $btn.prop('disabled', !isURL); + $button.text((isURL && !isImage) ? _t("Add as document") : _t("Add image")); } $success.toggleClass('d-none', !isURL); - $warning.toggleClass('d-none', showWarningOrError); - $error.toggleClass('d-none', showWarningOrError); + $warning.toggleClass('d-none', !isURL || this.options.document || isImage); + $error.toggleClass('d-none', emptyValue || isURL); }, /** * @private @@ -675,9 +672,17 @@ var ImageWidget = MediaWidget.extend({ /** * @private */ - _onLoadMore: function () { + _onLoadMoreClick: function () { this._loadMoreImages(); }, + /** + * @override + */ + _onSearchInput: function () { + this.imagesRows = this.IMAGES_ROWS; + this.IMAGES_DISPLAYED_TOTAL = this.IMAGES_PER_ROW * this.imagesRows; + this._super.apply(this, arguments); + }, }); /** @@ -725,14 +730,6 @@ var IconWidget = MediaWidget.extend({ // Public //-------------------------------------------------------------------------- - /** - * @override - */ - getControlPanelConfig: function () { - return _.extend(this._super.apply(this, arguments), { - pagerEnabled: false, - }); - }, /** * @override */ @@ -849,11 +846,11 @@ var IconWidget = MediaWidget.extend({ */ var VideoWidget = MediaWidget.extend({ template: 'web_editor.dialog.video', - events: { + events: _.extend({}, MediaWidget.prototype.events || {}, { 'change .o_video_dialog_options input': '_onUpdateVideoOption', 'input textarea#o_video_text': '_onVideoCodeInput', 'change textarea#o_video_text': '_onVideoCodeChange', - }, + }), /** * @constructor @@ -891,15 +888,6 @@ var VideoWidget = MediaWidget.extend({ // Public //-------------------------------------------------------------------------- - /** - * @override - */ - getControlPanelConfig: function () { - return _.extend(this._super.apply(this, arguments), { - searchEnabled: false, - pagerEnabled: false, - }); - }, /** * @override */ @@ -1075,7 +1063,6 @@ var VideoWidget = MediaWidget.extend({ // Hide the entire options box if no options are available $optBox.toggleClass('d-none', $optBox.find('div:not(.d-none)').length === 0); - $('.option_title').toggleClass('d-none'); if (query.type === 'yt') { // Youtube only: If 'hide controls' is checked, hide 'fullscreen' diff --git a/addons/web_editor/static/src/scss/web_editor.ui.scss b/addons/web_editor/static/src/scss/web_editor.ui.scss index 805ac4a35b6..ad9da79f788 100644 --- a/addons/web_editor/static/src/scss/web_editor.ui.scss +++ b/addons/web_editor/static/src/scss/web_editor.ui.scss @@ -1291,29 +1291,8 @@ body .modal { max-width: 80%; .modal-body { - .nav-tabs .active > a[href="#editor-media-icon"] { - background-color: white; - } - - li.search { - .form-group { - position: relative; - margin: 0 10px 0 0; - > input { - padding-right: 30px; - } - > span { - @include o-position-absolute(7px, 7px); - font-size: 1.3em; - } - } - } - - .card { - border-color: gray('200'); - border-top-width: 0; - border-top-left-radius: 0; - border-top-right-radius: 0; + .tab-pane { + min-height: 300px; } .o_existing_attachment_cell { @@ -1357,8 +1336,6 @@ body .modal { } } .font-icons-icons { - padding: 20px 0; - > span { text-align: center; font-size: 22px; @@ -1377,34 +1354,14 @@ body .modal { } #editor-media-image, #editor-media-document { - .card { - label { - margin: auto 10px; - } - - .btn-group { - margin-right: 10px; - } - } - .o_size_fa_icon { - font-size: 1.4rem; - } - .o_size_dropdown_item { - font-size: 0.9rem; + .o_we_url_input { + width: 300px; } } // VIDEO TAB - #editor-media-video .o_video_dialog_container { - padding: 0; - display: flex; - flex-flow: row wrap; - + #editor-media-video { .o_video_dialog_form { - flex: 1 1 auto; - min-width: 0; - padding: 20px; - #o_video_form_group { position: relative; width: 100%; @@ -1416,17 +1373,17 @@ body .modal { overflow-y: scroll; } - > .o_validate_feedback { + .o_validate_feedback { @include o-position-absolute(auto, 10px, 10px); > .fa { display: none; } } - &.o_has_error > .o_validate_feedback > .fa-exclamation-triangle { + &.o_has_error .o_validate_feedback > .fa-exclamation-triangle { display: block; } - &.o_has_success > .o_validate_feedback > .fa-check { + &.o_has_success .o_validate_feedback > .fa-check { display: block; } } @@ -1434,12 +1391,8 @@ body .modal { #video-preview { position: relative; - flex: 1 0 50%; - display: flex; - flex-flow: column nowrap; - justify-content: center; - @include o-we-preview-box(0 19px); + @include o-we-preview-box(); border: none; .media_iframe_video { @@ -1504,6 +1457,7 @@ body .modal { .o_bg_img_opt_cover_edition { @include o-we-preview-box; + padding: 0 25px 25px 25px; h6 { color: white; diff --git a/addons/web_editor/static/src/scss/web_editor.variables.scss b/addons/web_editor/static/src/scss/web_editor.variables.scss index 9bb6b705c8d..e556d6e5e4e 100644 --- a/addons/web_editor/static/src/scss/web_editor.variables.scss +++ b/addons/web_editor/static/src/scss/web_editor.variables.scss @@ -45,8 +45,7 @@ $o-we-switch-inactive-color: $o-we-color-paper !default; // ============ 'Preview' component Mixins =============== // Create a "preview" work-area to edit/customize specific elements -@mixin o-we-preview-box($padding: 0px 25px 25px 25px, $color-text: white) { - padding: $padding; +@mixin o-we-preview-box($color-text: white) { border-top: 1px solid black; border-bottom: 1px solid white; background-image: linear-gradient(-150deg, $o-we-color-dark, $o-we-color-darker); diff --git a/addons/web_editor/static/src/xml/editor.xml b/addons/web_editor/static/src/xml/editor.xml index 0fc6434f0aa..5fcfac2f4aa 100644 --- a/addons/web_editor/static/src/xml/editor.xml +++ b/addons/web_editor/static/src/xml/editor.xml @@ -66,12 +66,21 @@
+ +
+ +
+
+ +
+
+
+ -
@@ -79,108 +88,71 @@ -
-
-
-
-
-
- -
-
- -
- All attachments have been loaded -
+ + + + +
+
+
+ +
+ All attachments have been loaded