pengyuthon/odoo_source
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[IMP] web: add new options to the Dialog widget

Browse Source 
Now we can display dialogs with or without header / footer / backdrop
and we can force the DOM to be put elsewhere than the body.

Part of https://github.com/odoo/odoo/pull/29353
task-1903256
This commit is contained in:
Kishan Gajjar
2019-06-25 08:56:58 +00:00
committed by qsm-odoo
parent 3e6bbe93af
commit 2ad49ec93e
2 changed files with 32 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/web/static/src/js/core/dialog.js
+30 -3
View File
@@ -50,6 +50,15 @@ var Dialog = Widget.extend({
* @param {boolean} [options.technical=true]
* If set to false, the modal will have the standard frontend style
* (use this for non-editor frontend features)
* @param {jQueryElement} [options.$parentNode]
* Element in which dialog will be appended, by default it will be
* in the body
* @param {boolean} [options.backdrop=true]
* Whether modal rendered with backdrop or not
* @param {boolean} [options.renderHeader=true]
* Whether or not the dialog should be rendered with header
* @param {boolean} [options.renderFooter=true]
* Whether or not the dialog should be rendered with footer
*/
init: function (parent, options) {
var self = this;
@@ -65,6 +74,10 @@ var Dialog = Widget.extend({
$content: false,
buttons: [{text: _t("Ok"), close: true}],
technical: true,
$parentNode: false,
backdrop: true,
renderHeader: true,
renderFooter: true,
});
this.$content = options.$content;
@@ -75,6 +88,10 @@ var Dialog = Widget.extend({
this.size = options.size;
this.buttons = options.buttons;
this.technical = options.technical;
this.$parentNode = options.$parentNode;
this.backdrop = options.backdrop;
this.renderHeader = options.renderHeader;
this.renderFooter = options.renderFooter;
},
/**
* Wait for XML dependencies and instantiate the modal structure (except
@@ -91,6 +108,8 @@ var Dialog = Widget.extend({
title: self.title,
subtitle: self.subtitle,
technical: self.technical,
renderHeader: self.renderHeader,
renderFooter: self.renderFooter,
}));
switch (self.size) {
case 'large':
@@ -100,8 +119,10 @@ var Dialog = Widget.extend({
self.$modal.find('.modal-dialog').addClass('modal-sm');
break;
}
self.$footer = self.$modal.find(".modal-footer");
self.set_buttons(self.buttons);
if (self.renderFooter) {
self.$footer = self.$modal.find(".modal-footer");
self.set_buttons(self.buttons);
}
self.$modal.on('hidden.bs.modal', _.bind(self.destroy, self));
});
},
@@ -186,7 +207,13 @@ var Dialog = Widget.extend({
self.$modal.find(".modal-body").replaceWith(self.$el);
self.$modal.attr('open', true);
self.$modal.removeAttr("aria-hidden");
self.$modal.modal('show');
if (self.$parentNode) {
self.$modal.appendTo(self.$parentNode);
}
self.$modal.modal({
show: true,
backdrop: self.backdrop,
});
self._openedResolver();
if (options && options.shouldFocusButtons) {
self._onFocusControlButton();
addons/web/static/src/xml/dialog.xml
+2 -2
View File
@@ -6,12 +6,12 @@
<div role="dialog" t-name="Dialog" t-attf-class="modal#{technical ? ' o_technical_modal' : ''}#{fullscreen ? ' o_modal_full': ''}" tabindex="-1" data-backdrop="static" t-att-id="_.uniqueId('modal_')" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<header class="modal-header">
<header t-if="renderHeader" class="modal-header">
<h4 class="modal-title"><t t-raw="title"/><span class="o_subtitle text-muted small"><t t-esc="subtitle"/></span></h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close" tabindex="-1">×</button>
</header>
<main class="modal-body"/>
<footer class="modal-footer"/>
<footer t-if="renderFooter" class="modal-footer"/>
</div>
</div>
</div>