[REF] web_editor: BS4, review media dialog layout

3 files changed, 28 insertions, 33 deletions

diff --git a/addons/web_editor/static/src/js/widgets/widgets.js b/addons/web_editor/static/src/js/widgets/widgets.js
index 4f2d952c6d8..b1a480ae56e 100644
--- a/addons/web_editor/static/src/js/widgets/widgets.js
+++ b/addons/web_editor/static/src/js/widgets/widgets.js
@@ -613,7 +613,7 @@ var ImageWidget = MediaWidget.extend({
      */
     _onSearchInput: function (ev) {
         var $input = $(ev.currentTarget);
-        var $button = $input.next('button');
+        var $button = $input.next('.input-group-append').children();
         var emptyValue = ($input.val() === '');
         $button.toggleClass('btn-secondary', emptyValue).toggleClass('btn-primary', !emptyValue)
                .prop('disabled', emptyValue);
@@ -1104,7 +1104,7 @@ var MediaDialog = Dialog.extend({
     events : _.extend({}, Dialog.prototype.events, {
         'input input#icon-search': '_onSearchInput',
         'shown.bs.tab a[data-toggle="tab"]': '_onTabChange',
-        'click .pager > li > a:not(.disabled)': '_onPagerClick',
+        'click .previous:not(.disabled), .next:not(.disabled)': '_onPagerClick',
     }),
     custom_events: _.extend({}, Dialog.prototype.custom_events || {}, {
         save_request: '_onSaveRequest',
@@ -1274,9 +1274,9 @@ var MediaDialog = Dialog.extend({
     _updateControlPanel: function () {
         var cpConfig = this.active.getControlPanelConfig();
         this.$('li.search').toggleClass('d-none', !cpConfig.searchEnabled);
-        this.$('li.previous, li.next').toggleClass('d-none', !cpConfig.pagerEnabled);
-        this.$('li.previous > a').toggleClass("disabled", !cpConfig.pagerLeftEnabled);
-        this.$('li.next > a').toggleClass("disabled", !cpConfig.pagerRightEnabled);
+        this.$('.previous, .next').toggleClass('d-none', !cpConfig.pagerEnabled);
+        this.$('.previous').toggleClass("disabled", !cpConfig.pagerLeftEnabled);
+        this.$('.next').toggleClass("disabled", !cpConfig.pagerRightEnabled);
     },
 
     //--------------------------------------------------------------------------
@@ -1287,7 +1287,7 @@ var MediaDialog = Dialog.extend({
      * @private
      */
     _onPagerClick: function (ev) {
-        this.active.goToPage(this.active.page + ($(ev.currentTarget).parent().hasClass('previous') ? -1 : 1));
+        this.active.goToPage(this.active.page + ($(ev.currentTarget).hasClass('previous') ? -1 : 1));
         this._updateControlPanel();
     },
     /**
diff --git a/addons/web_editor/static/src/scss/web_editor.ui.scss b/addons/web_editor/static/src/scss/web_editor.ui.scss
index 771f4a938ad..9b3c2e34853 100644
--- a/addons/web_editor/static/src/scss/web_editor.ui.scss
+++ b/addons/web_editor/static/src/scss/web_editor.ui.scss
@@ -1332,7 +1332,7 @@ body.editor_enable {
 body .modal {
     // SELECT MEDIA
     .o_select_media_dialog {
-        width: 80%;
+        max-width: 80%;
 
         .modal-body {
             .nav-tabs .active > a[href="#editor-media-icon"] {
@@ -1340,9 +1340,6 @@ body .modal {
             }
 
             li.search {
-                ul.pager li:last-child{
-                    margin-left: 2px;
-                }
                 .form-group {
                     position: relative;
                     margin: 0 10px 0 0;
@@ -1359,6 +1356,8 @@ body .modal {
             .card {
                 border-color: gray('200');
                 border-top-width: 0;
+                border-top-left-radius: 0;
+                border-top-right-radius: 0;
             }
 
             .o_existing_attachment_cell {
diff --git a/addons/web_editor/static/src/xml/editor.xml b/addons/web_editor/static/src/xml/editor.xml
index 8659f354aee..7bac85692e2 100644
--- a/addons/web_editor/static/src/xml/editor.xml
+++ b/addons/web_editor/static/src/xml/editor.xml
@@ -47,30 +47,26 @@
     <!-- Media Dialog (allows to choose an img/pictogram/video) -->
     <div t-name="web_editor.dialog.media">
         <ul class="nav nav-tabs" role="tablist">
-            <li class="nav-item"><a role="tab" href="#editor-media-image" aria-controls="editor-media-image" data-toggle="tab" t-attf-class="nav-link active#{widget.noImages ? ' d-none' : ''}">Image</a></li>
+            <li class="nav-item"><a role="tab" href="#editor-media-image" aria-controls="editor-media-image" data-toggle="tab" t-attf-class="nav-link#{widget.noImages ? ' d-none' : ''}">Image</a></li>
             <li class="nav-item"><a role="tab" href="#editor-media-document" aria-controls="editor-media-document" data-toggle="tab" t-attf-class="nav-link#{widget.noDocuments ? ' d-none' : ''}">Document</a></li>
             <li class="nav-item"><a role="tab" href="#editor-media-icon" aria-controls="editor-media-icon" data-toggle="tab" t-attf-class="nav-link#{widget.noIcons ? ' d-none' : ''}">Pictogram</a></li>
             <li class="nav-item"><a role="tab" href="#editor-media-video" aria-controls="editor-media-video" data-toggle="tab" t-attf-class="nav-link#{widget.noVideos ? ' d-none' : ''}">Video</a></li>
-            <li class="nav-item search float-right">
-                <ul class="pager mb0 mt0">
-                    <li class="previous">
-                        <a role="button" class="btn btn-secondary disabled" href="#"><i class="fa fa-angle-left"/>&#32;Previous</a>
-                    </li>
-                    <li class="next">
-                        <a role="button" class="btn btn-secondary disabled" href="#">Next&#32;<i class="fa fa-angle-right"/></a>
-                    </li>
-                </ul>
-            </li>
-            <li class="nav-item search float-right">
+            <li class="nav-item ml-auto search">
                 <div class="form-group">
                     <input class="form-control" id="icon-search" type="search"/>
                     <span class="fa fa-search" title="Search" role="img" aria-label="Search"/>
                 </div>
             </li>
+            <li class="nav-item search">
+                <div class="btn-group">
+                    <a role="button" class="btn btn-secondary disabled previous" href="#"><i class="fa fa-angle-left"/>&#32;Previous</a>
+                    <a role="button" class="btn btn-secondary disabled next" href="#">Next&#32;<i class="fa fa-angle-right"/></a>
+                </div>
+            </li>
         </ul>
         <!-- Tab panes -->
         <div class="tab-content">
-            <div role="tabpanel" class="tab-pane fade in active" id="editor-media-image"/>
+            <div role="tabpanel" class="tab-pane fade" id="editor-media-image"/>
             <div role="tabpanel" class="tab-pane fade" id="editor-media-document"/>
             <div role="tabpanel" class="tab-pane fade" id="editor-media-icon"/>
             <div role="tabpanel" class="tab-pane fade" id="editor-media-video"/>
@@ -90,26 +86,26 @@
             <input t-if="widget.options.res_model" type="hidden" name="res_model" t-att-value="widget.options.res_model"/>
             <div class="card">
                 <div class="card-body">
-                    <div class="form-group float-left">
+                    <div class="form-inline">
                         <input type="file" class="d-none" name="upload" t-att-accept="widget.accept" multiple="multiple"/>
                         <input type="hidden" name="disable_optimization" value=""/>
                         <div class="btn-group">
                             <button class="btn btn-primary o_upload_image_button" type="button">Upload an image</button>
-                            <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown" type="button">
+                            <button class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" type="button">
                                 <span class="sr-only">Alternate Upload</span>
                             </button>
                             <div class="dropdown-menu" role="menu">
                                 <a role="menuitem" class="dropdown-item o_upload_image_button_no_optimization">Upload image without optimization</a>
                             </div>
                         </div>
-                    </div>
-                </div>
-                <div>
-                    <span class="text-muted">— or —</span>
-                    <label for="imageurl">Add an image URL</label>
-                    <div class="form-group btn-group">
-                        <input type="text" class="form-control url float-left" id="imageurl" name="url" placeholder="https://www.odoo.com/logo.png" style="width: 250px;"/>
-                        <button type="button" class="btn btn-secondary o_upload_image_url_button" disabled="disabled">Add</button>
+                        <span class="text-muted">— or —</span>
+                        <label for="imageurl">Add an image URL</label>
+                        <div class="input-group">
+                            <input type="text" class="form-control url" id="imageurl" name="url" placeholder="https://www.odoo.com/logo.png" style="width: 250px;"/>
+                            <div class="input-group-append">
+                                <button type="button" class="btn btn-secondary o_upload_image_url_button" disabled="disabled">Add</button>
+                            </div>
+                        </div>
                     </div>
                 </div>
             </div>