From 0a0341ee6a3b68144fb5d93ea3664e9406bc3cde Mon Sep 17 00:00:00 2001
From: Younn Olivier <yol@odoo.com>
Date: Thu, 11 Feb 2021 07:52:53 +0000
Subject: [PATCH] [FIX] web_editor: update the media search bar layout

Before, depending on the screen size, it was not always clear for the
user that he can use the search bar to find library images.

The upload buttons and search bars have been switched in order to make
the search the first choice for the user. Also, make the arrow pointing
at the searchbar more understandable.

task-2446852

closes odoo/odoo#68821

X-original-commit: 4237916d1f103baef5760e8508c9ebd5e91ac163
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
---
 .../static/src/js/wysiwyg/widgets/media.js    |  1 +
 .../static/src/scss/web_editor.common.scss    |  6 +++--
 addons/web_editor/static/src/xml/wysiwyg.xml  | 23 ++++++++++---------
 3 files changed, 17 insertions(+), 13 deletions(-)

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 d823a337b3e..dd0819022ea 100644
--- a/addons/web_editor/static/src/js/wysiwyg/widgets/media.js
+++ b/addons/web_editor/static/src/js/wysiwyg/widgets/media.js
@@ -1066,6 +1066,7 @@ var ImageWidget = FileWidget.extend({
     _onSearchInput: function (ev) {
         this.libraryMedia = [];
         this._super(...arguments);
+        this.$('.o_we_search_select').removeClass('d-none');
     },
     /**
      * @override
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 836d52d1de3..c393e0988d9 100644
--- a/addons/web_editor/static/src/scss/web_editor.common.scss
+++ b/addons/web_editor/static/src/scss/web_editor.common.scss
@@ -481,16 +481,18 @@ a.o_underline {
     width: 100%;
     display: flex;
     align-items: center;
-    justify-content: center;
+    justify-content: flex-start;
 
     & > h2 {
         max-width: 500px;
         text-align: center;
+        margin-left: 150px;
     }
 
     &::before {
+        transform: scale(-1, 1);
         content: "";
-        @include o-position-absolute($top: 0, $right: 50px);
+        @include o-position-absolute($top: 0, $left: 50px);
         width: 100px;
         height: 150px;
         opacity: .5;
diff --git a/addons/web_editor/static/src/xml/wysiwyg.xml b/addons/web_editor/static/src/xml/wysiwyg.xml
index 76a23984254..49090d179c3 100644
--- a/addons/web_editor/static/src/xml/wysiwyg.xml
+++ b/addons/web_editor/static/src/xml/wysiwyg.xml
@@ -125,7 +125,7 @@
     </div>
 
     <t t-name="wysiwyg.widgets.media.search">
-        <div class="input-group ml-auto">
+        <div class="input-group mr-auto">
             <input type="text" class="form-control o_we_search" t-att-placeholder="searchPlaceholder.trim()"/>
             <div class="input-group-append">
                 <div class="input-group-text o_we_search_icon">
@@ -152,13 +152,10 @@
 
     <t t-name="wysiwyg.widgets.files.submenu">
         <div class="form-inline align-items-center py-4">
-            <input type="file" class="d-none o_file_input" name="upload" t-att-accept="widget.options.accept" t-att-multiple="widget.options.multiImages &amp;&amp; 'multiple'"/>
+            <t t-call="wysiwyg.widgets.media.search"/>
+            <t t-raw="0"/>
 
-            <div class="btn-group">
-                <button type="button" class="btn btn-primary o_upload_media_button">
-                    <t t-esc="uploadText"/>
-                </button>
-            </div>
+            <input type="file" class="d-none o_file_input" name="upload" t-att-accept="widget.options.accept" t-att-multiple="widget.options.multiImages &amp;&amp; 'multiple'"/>
 
             <div class="input-group align-items-center ml-2">
                 <input type="text" class="form-control o_we_url_input o_we_horizontal_collapse o_we_transition_ease" name="url" t-att-placeholder="urlPlaceholder"/>
@@ -173,8 +170,12 @@
                     </div>
                 </div>
             </div>
-            <t t-raw="0"/>
-            <t t-call="wysiwyg.widgets.media.search"/>
+
+            <div class="btn-group">
+                <button type="button" class="btn btn-primary o_upload_media_button">
+                    <t t-esc="uploadText"/>
+                </button>
+            </div>
         </div>
     </t>
 
@@ -186,14 +187,14 @@
             <t t-set="searchPlaceholder">Search an image</t>
             <t t-set="urlWarningTitle">Uploaded image's format is not supported. Try with: </t>
             <t t-set="urlWarningTitle" t-value="urlWarningTitle + widget.IMAGE_EXTENSIONS.join(', ')"/>
-            <div class="d-flex justify-content-end flex-grow-1 pr-3">
+            <div class="d-flex justify-content-start flex-grow-1 ml-2">
                 <div t-attf-class="custom-control custom-switch #{__debug__ and 'd-flex' or 'd-none'} align-items-center mr-2">
                     <input class="o_we_show_optimized ml-2 custom-control-input" type="checkbox" id="o_we_show_optimized_switch"/>
                     <label class="custom-control-label" for="o_we_show_optimized_switch">
                         Show optimized images
                     </label>
                 </div>
-                <select class="custom-select o_we_search_select">
+                <select class="custom-select o_we_search_select d-none">
                     <option value="all">All</option>
                     <option value="database">My Images</option>
                     <option t-if="widget.options.useMediaLibrary" value="media-library">Illustrations</option>