[FIX] fixes modal window layout bugs (addon web)

5 files changed, 55 insertions, 28 deletions

diff --git a/addons/web/static/src/css/base.css b/addons/web/static/src/css/base.css
index 8ddb382b1db..2dc3b8b6f09 100644
--- a/addons/web/static/src/css/base.css
+++ b/addons/web/static/src/css/base.css
@@ -1161,8 +1161,11 @@
 .openerp .oe_view_manager_inline > .oe-view-manager-header, .openerp .oe_view_manager_inlineview > .oe-view-manager-header {
   display: none;
 }
+.openerp .o-modal-header > div {
+  margin-left: 45%;
+}
 .openerp .oe_popup_form {
-  display: table;
+  display: none;
 }
 .openerp .oe_popup_form .oe_formview .oe_form_pager {
   display: none !important;
@@ -3082,8 +3085,21 @@ body.oe_single_form .oe_single_form_container {
   font-size: 20px;
 }
 .modal .modal-body {
-  overflow-x: auto;
-  min-height: 200px;
+  overflow: auto;
+  padding: 0;
+}
+.modal .modal-body .oe_application {
+  width: 100%;
+}
+.modal .modal-body .oe_popup_list {
+  display: none;
+  min-height: 150px;
+}
+.modal .modal-body .oe-view-manager {
+  min-height: 150px;
+}
+.modal .modal-body .oe_form_sheetbg .oe_form_sheet {
+  padding: 0;
 }
 .modal .modal-footer {
   text-align: left;
@@ -3100,8 +3116,8 @@ body.oe_single_form .oe_single_form_container {
 
 @media (min-width: 768px) {
   .modal .modal-body {
-    max-height: -webkit-calc(100vh - 200px);
-    max-height: calc(100vh - 200px);
+    max-height: -webkit-calc(100vh - 170px);
+    max-height: calc(100vh - 170px);
   }
 }
 .ui-datepicker {
diff --git a/addons/web/static/src/css/base.sass b/addons/web/static/src/css/base.sass
index dc8286a1630..2d9c5b9cd33 100644
--- a/addons/web/static/src/css/base.sass
+++ b/addons/web/static/src/css/base.sass
@@ -1002,8 +1002,11 @@ $sheet-padding: 16px
 
         // }}}
     // FormPopup {{{
+    .o-modal-header
+        > div
+            margin-left: 45%
     .oe_popup_form 
-        display: table
+        display: none
         .oe_formview .oe_form_pager
             display: none !important
         // Customize label weight for popup wizard appear from another wizard according bootstrap3
@@ -2542,8 +2545,18 @@ body.oe_single_form
         height: 18px
         font-size: 20px
     .modal-body
-        overflow-x: auto
-        min-height: 200px
+        overflow: auto
+        padding: 0
+        .oe_application
+            width: 100%
+        .oe_popup_list
+            display: none
+            min-height: 150px
+        .oe-view-manager
+            min-height: 150px
+        .oe_form_sheetbg
+            .oe_form_sheet
+                padding: 0
     .modal-footer
         text-align: left
     .oe_button
@@ -2555,8 +2568,8 @@ body.oe_single_form
 
 @media (min-width: 768px)
     .modal .modal-body
-        max-height: -webkit-calc(100vh - 200px)
-        max-height: calc(100vh - 200px)
+        max-height: -webkit-calc(100vh - 170px)
+        max-height: calc(100vh - 170px)
 
 .ui-datepicker
     z-index: 1500 !important
diff --git a/addons/web/static/src/js/view_form.js b/addons/web/static/src/js/view_form.js
index c6b45c2bbbb..971f3622b94 100644
--- a/addons/web/static/src/js/view_form.js
+++ b/addons/web/static/src/js/view_form.js
@@ -5184,7 +5184,7 @@ instance.web.form.AbstractFormPopup = instance.web.Widget.extend({
         if (this.options.alternative_form_view) {
             this.view_form.set_embedded_view(this.options.alternative_form_view);
         }
-        this.view_form.appendTo(this.$el.find(".oe_popup_form"));
+        this.view_form.appendTo(this.$(".oe_popup_form").show());
         this.view_form.on("form_view_loaded", self, function() {
             var multi_select = self.row_id === null && ! self.options.disable_multiple_selection;
             self.$buttonpane.html(QWeb.render("AbstractFormPopup.buttons", {
@@ -5297,7 +5297,7 @@ instance.web.form.SelectCreatePopup = instance.web.form.AbstractFormPopup.extend
         if (this.searchview) {
             this.searchview.destroy();
         }
-        var $buttons = this.$('.oe-search-options');
+        var $buttons = this.$('.o-search-options');
         this.searchview = new instance.web.SearchView(this,
                 this.dataset, false,  search_defaults, {$buttons: $buttons});
         this.searchview.on('search_data', self, function(domains, contexts, groupbys) {
@@ -5309,7 +5309,7 @@ instance.web.form.SelectCreatePopup = instance.web.form.AbstractFormPopup.extend
                 self.do_search(domains.concat([self.domain]), contexts.concat(self.context), groupbys);
             }
         });
-        this.searchview.appendTo(this.$(".oe_popup_search")).done(function() {
+        this.searchview.appendTo(this.$(".o-popup-search")).done(function() {
             self.searchview.toggle_visibility(true);
             self.view_list = new instance.web.form.SelectCreateListView(self,
                     self.dataset, false,
@@ -5324,7 +5324,7 @@ instance.web.form.SelectCreatePopup = instance.web.form.AbstractFormPopup.extend
                 e.cancel = true;
             });
             self.view_list.popup = self;
-            self.view_list.appendTo($(".oe_popup_list", self.$el)).then(function() {
+            self.view_list.appendTo(self.$(".oe_popup_list").show()).then(function() {
                 self.view_list.do_show();
             }).then(function() {
                 self.searchview.do_search();
diff --git a/addons/web/static/src/js/views.js b/addons/web/static/src/js/views.js
index ebbcff3de06..e6ea273859e 100644
--- a/addons/web/static/src/js/views.js
+++ b/addons/web/static/src/js/views.js
@@ -831,6 +831,9 @@ instance.web.ViewManager =  instance.web.Widget.extend({
                         var dialog = new instance.web.Dialog(this, {
                             title: _.str.sprintf(_t("Metadata (%s)"), self.dataset.model),
                             size: 'medium',
+                            buttons: {
+                                Ok: function() { this.parents('.modal').modal('hide');}
+                            },
                         }, QWeb.render('ViewManagerDebugViewLog', {
                             perm : result[0],
                             format : instance.web.format_value
@@ -873,6 +876,9 @@ instance.web.ViewManager =  instance.web.Widget.extend({
                     new instance.web.Dialog(self, {
                         title: _.str.sprintf(_t("Model %s fields"),
                                              self.dataset.model),
+                        buttons: {
+                            Ok: function() { this.parents('.modal').modal('hide');}
+                        },
                         }, $root).open();
                 });
                 break;
diff --git a/addons/web/static/src/xml/base.xml b/addons/web/static/src/xml/base.xml
index 4b4fcba4277..a4e0bfe7386 100644
--- a/addons/web/static/src/xml/base.xml
+++ b/addons/web/static/src/xml/base.xml
@@ -1480,21 +1480,13 @@
 </t>
 
 <t t-name="AbstractFormPopup.render">
-    <div class="container-fluid">
-        <div class="row oe-modal-header">
-            <div class="col-md-8 col-md-offset-4 oe_popup_search">
-            </div>
-        </div>
-        <div class="row oe-modal-header">
-            <div class="col-md-8 col-md-offset-4">
-                <div class="oe-search-options btn-group"/>
-                <div class="oe_popup_list_pager"/>
-            </div>
-        </div>
-        <div class="row">
-            <div class="oe_popup_list"/>
+    <div>
+        <div class="o-modal-header">
+            <div class="o-popup-search"/>
+            <div class="o-search-options oe-search-options"/>
         </div>
-        <div class="row oe_popup_form"></div>
+        <div class="oe_popup_list"/>
+        <div class="oe_popup_form"/>
     </div>
 </t>
 <t t-name="SelectCreatePopup.search.buttons">