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

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

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;

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>