TrizTech/ohif-viewer
15
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(modals) Fixing DOM issues with modals

Browse Source
This commit is contained in:
Bruno Alves de Faria 2018-04-10 16:04:14 -03:00 committed by Erik Ziegler
parent 2c790ff674
commit 50374038a3
3 changed files with 24 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
Packages/ohif-core/client/components/bootstrap/dialog/confirm.html
View File

@ -1,7 +1,7 @@
<template name="dialogConfirm"> <template name="dialogConfirm">
{{>dialogForm (extend this {{#dialogForm (extend this
dialogClass='modal-sm' dialogClass='modal-sm'
title=(choose this.title 'Confirmation') title=(choose this.title 'Confirmation')
message=(choose this.message 'Are you sure you want to perform this action?') message=(valueIf UI.contentBlock '' (choose this.message 'Are you sure you want to perform this action?'))
)}} )}}{{>UI.contentBlock}}{{/dialogForm}}
</template> </template>

6
Packages/ohif-core/client/components/bootstrap/dialog/simple.js
View File

@ -7,8 +7,7 @@ Template.dialogSimple.onCreated(() => {
const instance = Template.instance(); const instance = Template.instance();
instance.close = () => { instance.close = () => {
const $modal = instance.$('.modal'); instance.$('.modal').modal('hide');
$modal.one('hidden.bs.modal', () => instance.data.promiseResolve()).modal('hide');
}; };
// Automatically close the modal if a timeout value was given // Automatically close the modal if a timeout value was given
@ -31,6 +30,9 @@ Template.dialogSimple.onRendered(() => {
// Create the bootstrap modal // Create the bootstrap modal
$modal.modal(modalOptions); $modal.modal(modalOptions);
// Resolve the promise as soon as the modal is closed
$modal.one('hidden.bs.modal', () => instance.data.promiseResolve());
let position = instance.data.position; let position = instance.data.position;
const { event } = instance.data; const { event } = instance.data;

17
Packages/ohif-core/client/ui/dialog/display.js
View File

@ -4,6 +4,9 @@ import { _ } from 'meteor/underscore';
import { $ } from 'meteor/jquery'; import { $ } from 'meteor/jquery';
import { OHIF } from 'meteor/ohif:core'; import { OHIF } from 'meteor/ohif:core';
let zIndexBackdrop = 1060;
let zIndexModal = 1061;
OHIF.ui.showDialog = (templateName, dialogData={}) => { OHIF.ui.showDialog = (templateName, dialogData={}) => {
// Check if the given template exists // Check if the given template exists
const template = Template[templateName]; const template = Template[templateName];
@ -49,6 +52,20 @@ OHIF.ui.showDialog = (templateName, dialogData={}) => {
$modal = $node.find('.modal:first'); $modal = $node.find('.modal:first');
} }
$modal.one('show.bs.modal', function() {
setTimeout(() => {
const $modal = $(this);
const modal = $modal.data('bs.modal');
if (!modal) return;
const { $backdrop } = modal;
if (!$backdrop) return;
$backdrop.css('z-index', zIndexBackdrop);
$modal.css('z-index', zIndexModal);
zIndexBackdrop += 2;
zIndexModal += 2;
});
});
// Destroy the created dialog view when the promise is either resolved or rejected // Destroy the created dialog view when the promise is either resolved or rejected
const dismissModal = (hideFirst=false) => { const dismissModal = (hideFirst=false) => {
if (hideFirst || (dialogData && dialogData.promise && $modal)) { if (hideFirst || (dialogData && dialogData.promise && $modal)) {