[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) <qsm@odoo.com>

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 @@
             <div class="form-text o_we_error_text"/>
             <div class="o_we_existing_attachments"/>
             <div class="mt-4 text-center mx-auto">
-                <button class="btn btn-primary o_load_more" type="button">Load more...</button>
+                <button class="btn btn-primary o_load_more d-none" type="button">Load more...</button>
                 <div class="mt-4 o_load_done_msg d-none">
                     <span><i>All images have been loaded</i></span>
                 </div>
@@ -224,7 +224,11 @@
 
     <t t-name="wysiwyg.widgets.image.existing.attachments">
         <div class="o_we_existing_attachments o_we_images">
-            <ol class="d-flex flex-wrap mx-auto my-0 p-2">
+            <div t-if="!attachments.length" class="o_nocontent_help">
+                <p class="o_empty_folder_image">No images found.</p>
+                <p class="o_empty_folder_subtitle">You can upload images with the button located in the top left of the screen.</p>
+            </div>
+            <ol t-else="" class="d-flex flex-wrap mx-auto my-0 p-2">
                 <t t-foreach="attachments" t-as="attachment">
                     <t t-call="wysiwyg.widgets.image.existing.attachment"/>
                 </t>
@@ -244,7 +248,11 @@
 
     <t t-name="wysiwyg.widgets.document.existing.attachments">
         <div class="o_we_existing_attachments o_we_documents">
-            <div class="row mx-auto">
+            <div t-if="!attachments.length" class="o_nocontent_help">
+                <p class="o_empty_folder_image">No documents found.</p>
+                <p class="o_empty_folder_subtitle">You can upload documents with the button located in the top left of the screen.</p>
+            </div>
+            <div t-else="" class="row mx-auto">
                 <t t-foreach="attachments" t-as="attachment">
                     <div class="col-2 o_existing_attachment_cell o_we_attachment_highlight my-2" t-att-data-id="attachment.id">
                         <t t-call="wysiwyg.widgets.file.existing.remove"/>