diff --git a/addons/web/static/src/scss/utils.scss b/addons/web/static/src/scss/utils.scss
index 494850670379860d73c705e9d4d1f42737d3dfba..9c3187d01bc6c5a3f35a030d72ce8a50a9165232 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 e4e86231940e11409369e50fca3167c742c7545a..d917b3fd1d6f00233ec7660624e290f4292b2b1d 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 e116ab77e497ad2632ebc711f09a49bc6dc9dfc7..22c30d501d1815c735f7fe4a739ec82aaaed8ed8 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 bb5d5088716c4a755a10ee6974900bdee6cd3ef2..846252abc8d93adf6ff02979488c3203f4fddc20 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 baff05e235628ae9895bb3a6a793ff277e39ca1d..f358f4ad1783dfdd2fc0bc7c581915d2533cf4fa 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"/>