From 0299a3fa2401e0dd9f837bd966948a4c277dcd3d Mon Sep 17 00:00:00 2001 From: fja-odoo Date: Tue, 21 May 2019 16:50:00 +0000 Subject: [PATCH] [IMP] web_editor, *: add message when no document/image * web The document/image tab in "Select a media" Dialog were not displaying any info when there was no document/images to load. Now there is a message with the same image as the backend. The "All attachments have been loaded" message is only displayed if there is no more documents to display after using the button "Load More". The "Load More" button is removed in the backend if there is no documents/images. Part of https://github.com/odoo/odoo/pull/33195 task-1945874 closes odoo/odoo#33195 Signed-off-by: Quentin Smetz (qsm) --- addons/web/static/src/scss/utils.scss | 38 +++++++++++++++++++ addons/web/static/src/scss/views.scss | 37 ++---------------- .../static/src/js/wysiwyg/widgets/media.js | 9 ++++- .../static/src/scss/web_editor.common.scss | 8 ++++ addons/web_editor/static/src/xml/wysiwyg.xml | 14 +++++-- 5 files changed, 68 insertions(+), 38 deletions(-) diff --git a/addons/web/static/src/scss/utils.scss b/addons/web/static/src/scss/utils.scss index 49485067037..9c3187d01bc 100644 --- a/addons/web/static/src/scss/utils.scss +++ b/addons/web/static/src/scss/utils.scss @@ -339,3 +339,41 @@ margin-bottom: 5px; } } + +// No content helper +@mixin o-nocontent-empty { + pointer-events: auto; + max-width: 650px; + margin: auto; + padding: 15px; + z-index: 1000; + text-align: center; + color: $o-tooltip-text-color; + font-size: 115%; + + > p:first-of-type { + margin-top: 0; + color: $o-tooltip-title-text-color; + font-weight: bold; + font-size: 125%; + } + + a { + cursor: pointer; + } +} + +%o-nocontent-init-image { + content: ""; + display: block; + margin: auto; + background-size: cover; +} + +%o-nocontent-empty-document { + @extend %o-nocontent-init-image; + @include size(120px, 80px); + margin-top: 30px; + margin-bottom: 30px; + background: transparent url(/web/static/src/img/empty_folder.svg) no-repeat center; +} diff --git a/addons/web/static/src/scss/views.scss b/addons/web/static/src/scss/views.scss index e4e86231940..d917b3fd1d6 100644 --- a/addons/web/static/src/scss/views.scss +++ b/addons/web/static/src/scss/views.scss @@ -45,51 +45,22 @@ z-index: 1; .o_nocontent_help { - pointer-events: auto; - max-width: 650px; - margin: auto; - padding: 15px; - z-index: 1000; - text-align: center; - color: $o-tooltip-text-color; - font-size: 115%; - - > p:first-of-type { - margin-top: 0; - color: $o-tooltip-title-text-color; - font-weight: bold; - font-size: 125%; - } - - a { - cursor: pointer; - } - - @mixin o-init-image { - content: ""; - display: block; - margin: auto; - background-size: cover; - } + @include o-nocontent-empty; .o_view_nocontent_smiling_face:before { - @include o-init-image; + @extend %o-nocontent-init-image; @include size(120px, 140px); background: transparent url(/web/static/src/img/smiling_face.svg) no-repeat center; } .o_view_nocontent_neutral_face:before { - @include o-init-image; + @extend %o-nocontent-init-image; @include size(120px, 140px); background: transparent url(/web/static/src/img/neutral_face.svg) no-repeat center; } .o_view_nocontent_empty_folder:before { - @include o-init-image; - @include size(120px, 80px); - margin-top: 30px; - margin-bottom: 30px; - background: transparent url(/web/static/src/img/empty_folder.svg) no-repeat center; + @extend %o-nocontent-empty-document; } .o_empty_custom_dashboard { diff --git a/addons/web_editor/static/src/js/wysiwyg/widgets/media.js b/addons/web_editor/static/src/js/wysiwyg/widgets/media.js index e116ab77e49..22c30d501d1 100644 --- a/addons/web_editor/static/src/js/wysiwyg/widgets/media.js +++ b/addons/web_editor/static/src/js/wysiwyg/widgets/media.js @@ -429,9 +429,10 @@ var FileWidget = SearchableMediaWidget.extend({ this._highlightSelected(); // adapt load more + var noLoadMoreButton = this.NUMBER_OF_ATTACHMENTS_TO_DISPLAY >= this.attachments.length; var noMoreImgToLoad = this.numberOfAttachmentsToDisplay >= this.attachments.length; + this.$('.o_load_done_msg').toggleClass('d-none', noLoadMoreButton || !noMoreImgToLoad); this.$('.o_load_more').toggleClass('d-none', noMoreImgToLoad); - this.$('.o_load_done_msg').toggleClass('d-none', !noMoreImgToLoad); }, /** * @private @@ -683,7 +684,11 @@ var FileWidget = SearchableMediaWidget.extend({ }).then(function (prevented) { if (_.isEmpty(prevented)) { self.attachments = _.without(self.attachments, attachment); - $a.closest('.o_existing_attachment_cell').remove(); + if (!self.attachments.length) { + self._renderImages(); //render the message and image if empty + } else { + $a.closest('.o_existing_attachment_cell').remove(); + } return; } self.$errorText.replaceWith(QWeb.render('wysiwyg.widgets.image.existing.error', { diff --git a/addons/web_editor/static/src/scss/web_editor.common.scss b/addons/web_editor/static/src/scss/web_editor.common.scss index bb5d5088716..846252abc8d 100644 --- a/addons/web_editor/static/src/scss/web_editor.common.scss +++ b/addons/web_editor/static/src/scss/web_editor.common.scss @@ -378,3 +378,11 @@ a.o_underline { } } } + +.o_nocontent_help { + @include o-nocontent-empty; + + .o_empty_folder_image:before { + @extend %o-nocontent-empty-document; + } +} diff --git a/addons/web_editor/static/src/xml/wysiwyg.xml b/addons/web_editor/static/src/xml/wysiwyg.xml index baff05e2356..f358f4ad178 100644 --- a/addons/web_editor/static/src/xml/wysiwyg.xml +++ b/addons/web_editor/static/src/xml/wysiwyg.xml @@ -100,7 +100,7 @@
- +
All images have been loaded
@@ -224,7 +224,11 @@
-
    +
    +

    No images found.

    +

    You can upload images with the button located in the top left of the screen.

    +
    +
      @@ -244,7 +248,11 @@
      -
      +
      +

      No documents found.

      +

      You can upload documents with the button located in the top left of the screen.

      +
      +