[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>

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;
+}

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 {

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', {

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;
+    }
+}

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"/>