[IMP] web_editor, web_unsplash: improve media-dialog UX

Previously, searching for images in the database and on unsplash was
mutually exclusive, and controlled by a dropdown menu next to the search
bar. Additionally, the display of db images and unsplash images was very
different, making using the search function inconsistent and awkward.

This commit merges the unsplash search into the db search. When
searching, the first few matches from the database are displayed, then
results from unsplash.

Additionally, the layout of images has been greatly improved,
eliminating almost all padding, using some flex-box magic to allow the
images to take up all the available space without being cropped or
deformed.

The input to add an attachment by URL is now collapsed by
default, and clicking on it will expand it to reduce visual clutter.

Finally, when not in multi-images mode, the clicked image is immediately
used, rather than the user having to click it and then click the add
button, or having to double click, which was not obvious.

task-2091417
closes odoo/odoo#45174

1 files changed, 16 insertions, 11 deletions

diff --git a/addons/web_editor/static/src/xml/wysiwyg.xml b/addons/web_editor/static/src/xml/wysiwyg.xml
index 9ede2572a87..6b07a92dfcd 100644
--- a/addons/web_editor/static/src/xml/wysiwyg.xml
+++ b/addons/web_editor/static/src/xml/wysiwyg.xml
@@ -146,9 +146,9 @@
             </div>
 
             <div class="input-group align-items-center ml-2">
-                <input type="text" class="form-control o_we_url_input" name="url" t-att-placeholder="urlPlaceholder"/>
+                <input type="text" class="form-control o_we_url_input o_we_horizontal_collapse o_we_transition_ease" name="url" t-att-placeholder="urlPlaceholder"/>
                 <div class="input-group-append align-items-center">
-                    <button type="button" class="btn btn-secondary o_upload_media_url_button" disabled="disabled">
+                    <button type="button" class="btn btn-secondary o_upload_media_url_button">
                         <t t-esc="addText"/>
                     </button>
                     <div class="ml-2">
@@ -167,7 +167,7 @@
         <t t-call="wysiwyg.widgets.file">
             <t t-set="uploadText">Upload an image</t>
             <t t-set="urlPlaceholder">https://www.odoo.com/logo.png</t>
-            <t t-set="addText">Add image</t>
+            <t t-set="addText">Add URL</t>
             <t t-set="searchPlaceholder">Search an image</t>
             <t t-set="urlWarningTitle">The URL does not contain any image. The file will be added in the document section.</t>
             <t t-if="widget.options.showQuickUpload" t-set="alternateUpload">
@@ -286,27 +286,32 @@
     </t>
 
     <t t-name="wysiwyg.widgets.image.existing.attachments">
-        <div class="o_we_existing_attachments o_we_images">
+        <div class="o_we_existing_attachments o_we_images d-flex flex-wrap w-100 justify-content-between align-items-stretch my-0">
             <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-else="">
                 <t t-foreach="attachments" t-as="attachment">
                     <t t-call="wysiwyg.widgets.image.existing.attachment"/>
                 </t>
-            </ol>
+                <!-- 20 placeholders is just enough for a 5K screen, change this if ImageWidget.MIN_ROW_HEIGHT changes -->
+                <t t-foreach="20">
+                    <div class="o_we_attachment_placeholder"/>
+                </t>
+            </t>
         </div>
     </t>
 
     <t t-name="wysiwyg.widgets.image.existing.attachment">
-        <li class="o_existing_attachment_cell position-relative m-2" t-att-data-id="attachment.id">
-            <i t-if="!attachment.url" class="fa fa-cog o_existing_attachment_optimize p-2" title="Optimize" role="img" aria-label="Optimize"/>
+        <div class="o_existing_attachment_cell position-relative bg-light" t-att-data-id="attachment.id">
+            <i t-if="attachment.type === 'binary'" class="fa fa-cog o_existing_attachment_optimize p-2" title="Optimize" role="img" aria-label="Optimize"/>
             <t t-call="wysiwyg.widgets.file.existing.remove"/>
-            <div t-attf-class="d-flex align-items-center h-100">
-                <img class="img img-fluid o_we_attachment_highlight" t-att-src="attachment.image_src + '?width=256&amp;height=192'" t-att-alt="attachment.name" t-att-title="attachment.name"/>
+            <div t-attf-class="d-flex align-items-center justify-content-center h-100 w-100">
+                <!-- 256 is 2 * ImageWidget.MIN_ROW_HEIGHT, hopefully the highest display width of any image -->
+                <img class="img img-fluid o_we_attachment_highlight" t-attf-src="#{attachment.image_src}?height=256" t-att-alt="attachment.name" t-att-title="attachment.name"/>
             </div>
-        </li>
+        </div>
     </t>
 
     <t t-name="wysiwyg.widgets.document.existing.attachments">