[REF]add bootstrap modal window based, cleaned, refactored from trunk-ui-to-boostrap-modal branch

bzr revid: csn@openerp.com-20140410100631-5v6a71oi5wyunbda

4 files changed, 100 insertions, 77 deletions

diff --git a/addons/web/static/src/js/chrome.js b/addons/web/static/src/js/chrome.js
index de56927799e..f9085af3854 100644
--- a/addons/web/static/src/js/chrome.js
+++ b/addons/web/static/src/js/chrome.js
@@ -57,16 +57,6 @@ instance.web.action_warn = function(element, action) {
 instance.web.client_actions.add("action_warn", "instance.web.action_warn");
 
 /**
- * The very minimal function everything should call to create a dialog
- * in OpenERP Web Client.
- */
-instance.web.dialog = function(element) {
-    var result = element.dialog.apply(element, _.rest(_.toArray(arguments)));
-    result.dialog("widget").openerpClass();
-    return result;
-};
-
-/**
     A useful class to handle dialogs.
 
     Attributes:
@@ -91,10 +81,11 @@ instance.web.Dialog = instance.web.Widget.extend({
     */
     init: function (parent, options, content) {
         var self = this;
+        this.css_layout_outer = ['width','min_width','max_width'];
+        this.css_layout_inner = ['height','min_height','max_height'];
         this._super(parent);
         this.content_to_set = content;
         this.dialog_options = {
-            modal: true,
             destroy_on_close: true,
             width: 900,
             min_width: 0,
@@ -102,18 +93,14 @@ instance.web.Dialog = instance.web.Widget.extend({
             height: 'auto',
             min_height: 0,
             max_height: $(window.top).height() - 200,
-            autoOpen: false,
-            position: [false, 40],
+            resizable: true,
             buttons: null,
-            resizeStop: function() {
-                self.trigger("resized");
-            },
         };
         if (options) {
             _.extend(this.dialog_options, options);
         }
         this.on("closing", this, this._closing);
-        this.$buttons = $('<div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix"><span class="oe_dialog_custom_buttons"/></div>');
+        this.$buttons = $('<div class="modal-footer"><span class="oe_dialog_custom_buttons"/></div>');
     },
     _get_options: function() {
         var self = this;
@@ -133,6 +120,20 @@ instance.web.Dialog = instance.web.Widget.extend({
                 o[unit] = o['max_' + unit];
             }
         });
+        var layout_inner = {};
+        var layout_outer = {};
+        _.each(o, function(value,key){
+            if (_.contains(self.css_layout_inner, ''+key+'')){
+                layout_inner[key] = value;
+                delete o[key];
+            }
+            if (_.contains(self.css_layout_outer, ''+key+'')){
+                layout_outer[key] = value;
+                delete o[key];
+            }
+        });
+        o.layout_inner = layout_inner;
+        o.layout_outer = layout_outer;
         o.title = o.title || this.dialog_title;
         return o;
     },
@@ -162,8 +163,7 @@ instance.web.Dialog = instance.web.Widget.extend({
         if (!this.dialog_inited) {
             this.init_dialog();
         }
-        this.$el.dialog('open');
-        this.$el.dialog("widget").append(this.$buttons);
+        this.$buttons.insertAfter(this.$dialog_box.find(".modal-body"));
         return this;
     },
     _add_buttons: function(buttons) {
@@ -188,16 +188,49 @@ instance.web.Dialog = instance.web.Widget.extend({
         @return The result returned by start().
     */
     init_dialog: function() {
+        var self = this;
         var options = this._get_options();
         if (options.buttons) {
             this._add_buttons(options.buttons);
             delete(options.buttons);
         }
         this.renderElement();
-        instance.web.dialog(this.$el, options);
-        if (options.height === 'auto' && options.max_height) {
-            this.$el.css({ 'max-height': options.max_height, 'overflow-y': 'auto' });
+
+        this.$dialog_box = $(QWeb.render('Dialog', options)).appendTo("body");
+        this.$el.modal({
+            'backdrop': false,
+            'keyboard': true,
+        });
+        this.$el.appendTo(this.$dialog_box.find(".modal-body"));
+        var dialog_body = this.$dialog_box.find('.modal-content');
+        if (options.layout_outer || options.layout_inner){
+            dialog_body.parent().css(options.layout_outer);
+            dialog_body.css(options.layout_inner);
         }
+        if (options.dialogClass){
+            dialog_body.find(".modal-body").addClass(options.dialogClass);
+        }
+        dialog_body.openerpClass();
+        dialog_body.draggable({ handle: ".modal-header", containment: "window" });
+        this.$dialog_box.on('hidden.bs.modal',this,function(){
+            self.trigger("closing");
+        });
+        this.$dialog_box.modal('show');
+
+        if (options.layout_inner.height === 'auto' && options.layout_inner.max_height) {
+            this.$el.css({ 'max-height': options.layout_inner.max_height, 'overflow-y': 'auto' });
+        }
+        var dialog_body = this.$dialog_box.find('.modal-content');
+        if (options.resizable){
+            dialog_body.resizable({ handles: 'n, e, s, w, ne, se, sw, nw' });
+        }
+        dialog_body.resize(function() {
+            var main_modal = dialog_body.parent();
+            var modal_body = main_modal.find(".modal-body .in");
+            var modal_content = main_modal.find(".modal-content").height();
+            modal_body.height(modal_content - 150);
+            main_modal.find(".modal-content").height((modal_body.height() + main_modal.find(".modal-header").height() + main_modal.find(".modal-footer").height()) + 85);
+        });
         this.dialog_inited = true;
         var res = this.start();
         return res;
@@ -206,9 +239,8 @@ instance.web.Dialog = instance.web.Widget.extend({
         Closes the popup, if destroy_on_close was passed to the constructor, it is also destroyed.
     */
     close: function(reason) {
-        if (this.dialog_inited && this.$el.is(":data(dialog)")) {
-            this.trigger("closing", reason);
-            this.$el.dialog('close');
+        if (this.dialog_inited && this.$el.is(":data(bs.modal)")) {
+            this.$el.parents('.modal').modal('hide');
         }
     },
     _closing: function() {
@@ -233,8 +265,8 @@ instance.web.Dialog = instance.web.Widget.extend({
             this.close(reason);
             this.__tmp_dialog_destroying = undefined;
         }
-        if (this.dialog_inited && !this.isDestroyed() && this.$el.is(":data(dialog)")) {
-            this.$el.dialog('destroy');
+        if (this.dialog_inited && !this.isDestroyed() && this.$el.is(":data(bs.modal)")) {
+            this.$el.parents('.modal').remove();
         }
         this._super();
     }
@@ -272,12 +304,12 @@ instance.web.CrashManager = instance.web.Class.extend({
         if (error.data.exception_type === "except_osv") {
             error = _.extend({}, error, {data: _.extend({}, error.data, {message: error.data.arguments[0] + "\n\n" + error.data.arguments[1]})});
         }
-        instance.web.dialog($('<div>' + QWeb.render('CrashManager.warning', {error: error}) + '</div>'), {
+        new instance.web.Dialog(this, {
             title: "OpenERP " + (_.str.capitalize(error.type) || "Warning"),
             buttons: [
-                {text: _t("Ok"), click: function() { $(this).dialog("close"); }}
-            ]
-        });
+                {text: _t("Ok"), click: function() { this.parents('.modal').modal('hide'); }}
+            ],
+        }, $('<div>' + QWeb.render('CrashManager.warning', {error: error}) + '</div>')).open();
     },
     show_error: function(error) {
         if (!this.active) {
@@ -285,17 +317,13 @@ instance.web.CrashManager = instance.web.Class.extend({
         }
         var buttons = {};
         buttons[_t("Ok")] = function() {
-            $(this).dialog("close");
+            this.parents('.modal').modal('hide');
         };
-        var dialog = new instance.web.Dialog(this, {
+        new instance.web.Dialog(this, {
             title: "OpenERP " + _.str.capitalize(error.type),
             width: '80%',
-            height: '50%',
-            min_width: '800px',
-            min_height: '600px',
             buttons: buttons
-        }).open();
-        dialog.$el.html(QWeb.render('CrashManager.error', {session: instance.session, error: error}));
+        }, QWeb.render('CrashManager.error', {session: instance.session, error: error})).open();
     },
     show_message: function(exception) {
         this.show_error({
@@ -342,16 +370,16 @@ instance.web.RedirectWarningHandler = instance.web.Dialog.extend(instance.web.Ex
         error = this.error;
         error.data.message = error.data.arguments[0];
 
-        instance.web.dialog($('<div>' + QWeb.render('CrashManager.warning', {error: error}) + '</div>'), {
+        new instance.web.Dialog(this, {
             title: "OpenERP " + (_.str.capitalize(error.type) || "Warning"),
             buttons: [
-                {text: _t("Ok"), click: function() { $(this).dialog("close"); }},
+                {text: _t("Ok"), click: function() { this.$el.parents('.modal').modal('hide'); }},
                 {text: error.data.arguments[2], click: function() {
                     window.location.href='#action='+error.data.arguments[1];
-                    $(this).dialog("close");
+                    this.$el.parents('.modal').modal('hide');
                 }}
-            ]
-        });
+            ],
+        }, QWeb.render('CrashManager.warning', {error: error}));
         this.destroy();
     }
 });
@@ -498,13 +526,12 @@ instance.web.DatabaseManager = instance.web.Widget.extend({
      * @param {String} error.error message of the error dialog
      */
     display_error: function (error) {
-        return instance.web.dialog($('<div>'), {
-            modal: true,
+        return new instance.web.Dialog(this, {
             title: error.title,
             buttons: [
-                {text: _t("Ok"), click: function() { $(this).dialog("close"); }}
+                {text: _t("Ok"), click: function() { this.$el.parents('.modal').modal('hide'); }}
             ]
-        }).html(error.error);
+        }, $('<div>').html(error.error)).open();
     },
     do_create: function(form) {
         var self = this;
@@ -731,13 +758,12 @@ instance.web.ChangePassword =  instance.web.Widget.extend({
        });
     },
     display_error: function (error) {
-        return instance.web.dialog($('<div>'), {
-            modal: true,
+        return new instance.web.Dialog(this, {
             title: error.title,
             buttons: [
-                {text: _t("Ok"), click: function() { $(this).dialog("close"); }}
+                {text: _t("Ok"), click: function() { this.$el.parents('.modal').modal('hide'); }}
             ]
-        }).html(error.error);
+        }, $('<div>').html(error.error)).open();
     },
 });
 instance.web.client_actions.add("change_password", "instance.web.ChangePassword");
@@ -1052,8 +1078,11 @@ instance.web.UserMenu =  instance.web.Widget.extend({
                 e.preventDefault();
                 window.location = $.param.querystring( window.location.href, 'debug');
             });
-            instance.web.dialog($help, {autoOpen: true,
-                modal: true, width: 507, height: 290, resizable: false, title: _t("About")});
+            new instance.web.Dialog(this, {
+                resizable: false,
+                title: _t("About"),
+                width: 507, height: 290,
+            }, $help).open();
         });
     },
 });
diff --git a/addons/web/static/src/js/data_export.js b/addons/web/static/src/js/data_export.js
index 252a5a378cc..2de933f45e8 100644
--- a/addons/web/static/src/js/data_export.js
+++ b/addons/web/static/src/js/data_export.js
@@ -46,7 +46,6 @@ instance.web.DataExport = instance.web.Dialog.extend({
     start: function() {
         var self = this;
         this._super.apply(this, arguments);
-        self.$el.removeClass('ui-dialog-content ui-widget-content');
 
         var got_fields = new $.Deferred();
         this.$el.find('#import_compat').change(function() {
@@ -413,7 +412,6 @@ instance.web.DataExport = instance.web.Dialog.extend({
         });
     },
     close: function() {
-        this.$el.remove();
         this._super();
     }
 });
diff --git a/addons/web/static/src/js/view_form.js b/addons/web/static/src/js/view_form.js
index 34e5d26c7c2..79bd078b6de 100644
--- a/addons/web/static/src/js/view_form.js
+++ b/addons/web/static/src/js/view_form.js
@@ -586,13 +586,12 @@ instance.web.FormView = instance.web.View.extend(instance.web.form.FieldManagerM
             this._internal_set_values(result.value, processed);
         }
         if (!_.isEmpty(result.warning)) {
-            instance.web.dialog($(QWeb.render("CrashManager.warning", result.warning)), {
+            new instance.web.Dialog(this, {
                 title:result.warning.title,
-                modal: true,
                 buttons: [
-                    {text: _t("Ok"), click: function() { $(this).dialog("close"); }}
+                    {text: _t("Ok"), click: function() { this.parents('.modal').modal('hide'); }}
                 ]
-            });
+            }, QWeb.render("CrashManager.warning", result.warning)).open();
         }
 
         return $.Deferred().resolve();
@@ -1080,7 +1079,6 @@ instance.web.FormView = instance.web.View.extend(instance.web.form.FieldManagerM
                 };
             })
             .value();
-
         var d = new instance.web.Dialog(this, {
             title: _t("Set Default"),
             args: {
@@ -1956,26 +1954,23 @@ instance.web.form.WidgetButton = instance.web.form.FormWidget.extend({
         var exec_action = function() {
             if (self.node.attrs.confirm) {
                 var def = $.Deferred();
-                var dialog = instance.web.dialog($('<div/>').text(self.node.attrs.confirm), {
+                var dialog = instance.web.Dialog(this, {
                     title: _t('Confirm'),
-                    modal: true,
                     buttons: [
                         {text: _t("Cancel"), click: function() {
-                                $(this).dialog("close");
+                                this.parents('.modal').modal('hide');
                             }
                         },
                         {text: _t("Ok"), click: function() {
                                 var self2 = this;
                                 self.on_confirmed().always(function() {
-                                    $(self2).dialog("close");
+                                    self2.parents('.modal').modal('hide');
                                 });
                             }
                         }
                     ],
-                    beforeClose: function() {
-                        def.resolve();
-                    },
-                });
+                }, $('<div/>').text(self.node.attrs.confirm)).open();
+                dialog.on("closing", null, function() {def.resolve();});
                 return def.promise();
             } else {
                 return self.on_confirmed();
@@ -3302,7 +3297,7 @@ instance.web.form.FieldMany2One = instance.web.form.AbstractField.extend(instanc
             delete this.$drop_down;
         }
         if (this.$input) {
-            this.$input.closest(".ui-dialog .ui-dialog-content").off('scroll');
+            this.$input.closest(".modal .modal-content").off('scroll');
             this.$input.off('keyup blur autocompleteclose autocompleteopen ' +
                             'focus focusout change keydown');
             delete this.$input;
@@ -3395,7 +3390,7 @@ instance.web.form.FieldMany2One = instance.web.form.AbstractField.extend(instanc
                 self.$input.autocomplete("close");
             }
         }, 50);
-        this.$input.closest(".ui-dialog .ui-dialog-content").on('scroll', this, close_autocomplete);
+        this.$input.closest(".modal .modal-content").on('scroll', this, close_autocomplete);
 
         self.ed_def = $.Deferred();
         self.uned_def = $.Deferred();
@@ -4919,11 +4914,11 @@ instance.web.form.AbstractFormPopup = instance.web.Widget.extend({
         var dialog = new instance.web.Dialog(this, {
             min_width: '800px',
             dialogClass: 'oe_act_window',
-            close: function() {
-                self.check_exit(true);
-            },
             title: this.options.title || "",
         }, this.$el).open();
+        dialog.on('closing', this, function (e){
+            self.check_exit(true);
+        });
         this.$buttonpane = dialog.$buttons;
         this.start();
     },
@@ -4970,6 +4965,7 @@ instance.web.form.AbstractFormPopup = instance.web.Widget.extend({
                 });
             });
             var $cbutton = self.$buttonpane.find(".oe_abstractformpopup-form-close");
+            // $cbutton = $cbutton.add(self.$el.parents('.modal:first').find('.close')[0]);
             $cbutton.click(function() {
                 self.view_form.trigger('on_button_cancel');
                 self.check_exit();
@@ -4990,8 +4986,8 @@ instance.web.form.AbstractFormPopup = instance.web.Widget.extend({
     },
     destroy: function () {
         this.trigger('closed');
-        if (this.$el.is(":data(dialog)")) {
-            this.$el.dialog('close');
+        if (this.$el.is(":data(bs.modal)")) {
+            this.$el.parents('.modal').modal('hide');
         }
         this._super();
     },
diff --git a/addons/web/static/src/js/views.js b/addons/web/static/src/js/views.js
index 2f401445f7e..c9c4ef879c3 100644
--- a/addons/web/static/src/js/views.js
+++ b/addons/web/static/src/js/views.js
@@ -410,10 +410,10 @@ instance.web.ActionManager = instance.web.Widget.extend({
             }
             this.dialog_stop(executor.action);
             this.dialog = new instance.web.Dialog(this, {
+                title: executor.action.name,
                 dialogClass: executor.klass,
             });
             this.dialog.on("closing", null, options.on_close);
-            this.dialog.dialog_title = executor.action.name;
             if (widget instanceof instance.web.ViewManager) {
                 _.extend(widget.flags, {
                     $buttons: this.dialog.$buttons,
@@ -1223,7 +1223,7 @@ instance.web.Sidebar = instance.web.Widget.extend({
                 domain = $.Deferred().resolve(undefined);
             }
             if (ids.length === 0) {
-                instance.web.dialog($("<div />").text(_t("You must choose at least one record.")), { title: _t("Warning"), modal: true });
+                new instance.web.Dialog(this, { title: _t("Warning")}, $("<div />").text(_t("You must choose at least one record."))).open();
                 return false;
             }
             var active_ids_context = {