diff --git a/ChangeLog b/ChangeLog index 5d3fb4434..d116f77d6 100644 --- a/ChangeLog +++ b/ChangeLog @@ -1,3 +1,12 @@ +2010-08-04 Francis Lachapelle + + * UI/WebServerResources/generic.js (createDialog): when the + position class is set to "none", the dialog will be modal (with a + dimmed background). + + * UI/WebServerResources/ContactsUI.js: replaced window.confirm by + a CSS modal dialog. + 2010-08-03 Wolfgang Sourdeau * SoObjects/SOGo/SOGoUser.m (-_appendSystemMailAccount): new diff --git a/UI/WebServerResources/ContactsUI.js b/UI/WebServerResources/ContactsUI.js index b19fea399..5629981e7 100644 --- a/UI/WebServerResources/ContactsUI.js +++ b/UI/WebServerResources/ContactsUI.js @@ -9,7 +9,8 @@ var usersRightsWindowWidth = 450; var Contact = { currentAddressBook: null, currentContact: null, - deleteContactsRequestCount: null + deleteContactsRequestCount: null, + dialogs: {} }; function validateEditorInput(sender) { @@ -433,17 +434,27 @@ function onToolbarDeleteSelectedContacts(event) { var rows = contactsList.getSelectedRowsId(); if (rows.length) { - var label = _("Are you sure you want to delete the selected contacts?"); - if (window.confirm(label)) { - for (var i = 0; i < rows.length; i++) { - delete cachedContacts[Contact.currentAddressBook + "/" + rows[i]]; - var urlstr = (URLForFolderID(Contact.currentAddressBook) + "/" - + rows[i] + "/delete"); - Contact.deleteContactsRequestCount++; - triggerAjaxRequest(urlstr, onContactDeleteEventCallback, - rows[i]); - } + var dialogId = "deleteContactsDialog"; + var dialog = Contact.dialogs[dialogId]; + if (dialog) { + dialog.show(); + $("bgDialogDiv").show(); } + else { + var label = _("Are you sure you want to delete the selected contacts?"); + var fields = createElement("p"); + fields.appendChild(createButton("confirmBtn", "Yes", onToolbarDeleteSelectedContactsConfirm.bind(fields, dialogId))); + fields.appendChild(createButton("cancelBtn", "No", onBodyClickDialogHandler.bind(document.body, dialogId))); + var dialog = createDialog(dialogId, + _("Confirmation"), + label, + fields, + "none"); + document.body.appendChild(dialog); + dialog.show(); + Contact.dialogs[dialogId] = dialog; + } + return false; } else { window.alert(_("Please select a contact.")); @@ -452,6 +463,21 @@ function onToolbarDeleteSelectedContacts(event) { return false; } +function onToolbarDeleteSelectedContactsConfirm(dialogId) { + var contactsList = $('contactsList'); + var rows = contactsList.getSelectedRowsId(); + for (var i = 0; i < rows.length; i++) { + delete cachedContacts[Contact.currentAddressBook + "/" + rows[i]]; + var urlstr = (URLForFolderID(Contact.currentAddressBook) + "/" + + rows[i] + "/delete"); + Contact.deleteContactsRequestCount++; + triggerAjaxRequest(urlstr, onContactDeleteEventCallback, + rows[i]); + } + + onBodyClickDialogHandler(dialogId); +} + function onContactDeleteEventCallback(http) { if (http.readyState == 4) { if (isHttpStatus204(http.status)) { @@ -774,25 +800,71 @@ function onAddressBookRemove(event) { function deletePersonalAddressBook(folderId) { if (folderId == "personal") { - var label = _("You cannot remove nor unsubscribe from your personal addressbook."); - window.alert(label); - } - else { - var label - = _("Are you sure you want to delete the selected address book?"); - if (window.confirm(label)) { - if (document.deletePersonalABAjaxRequest) { - document.deletePersonalABAjaxRequest.aborted = true; - document.deletePersonalABAjaxRequest.abort(); - } - var url = ApplicationBaseURL + folderId + "/delete"; - document.deletePersonalABAjaxRequest - = triggerAjaxRequest(url, deletePersonalAddressBookCallback, - folderId); + var dialogId = "deletePersonalAddressBook"; + var dialog = Contact.dialogs[dialogId]; + if (dialog) { + dialog.show(); + $("bgDialogDiv").show(); + } + else { + var label = _("You cannot remove nor unsubscribe from your personal addressbook."); + var fields = createElement("p"); + fields.appendChild(createButton(dialogId + "ContinueBtn", + "Continue", + onBodyClickDialogHandler.bind(document.body, dialogId))); + var dialog = createDialog(dialogId, + _("Warning"), + label, + fields, + "none"); + document.body.appendChild(dialog); + dialog.show(); + Contact.dialogs[dialogId] = dialog; } } + else { + var dialogId = "deleteAddressBook"; + var dialog = Contact.dialogs[dialogId]; + if (dialog) { + dialog.show(); + $("bgDialogDiv").show(); + } + else { + var label = _("Are you sure you want to delete the selected address book?"); + var fields = createElement("p"); + fields.appendChild(createButton(dialogId + "confirmBtn", + "Yes", + deletePersonalAddressBookConfirm.bind(fields, folderId, dialogId))); + fields.appendChild(createButton(dialogId + "cancelBtn", + "No", + onBodyClickDialogHandler.bind(document.body, dialogId))); + var dialog = createDialog(dialogId, + _("Confirmation"), + label, + fields, + "none"); + document.body.appendChild(dialog); + dialog.show(); + Contact.dialogs[dialogId] = dialog; + } + } + return false; + } + +function deletePersonalAddressBookConfirm(folderId, dialogId) { + if (document.deletePersonalABAjaxRequest) { + document.deletePersonalABAjaxRequest.aborted = true; + document.deletePersonalABAjaxRequest.abort(); + } + var url = ApplicationBaseURL + folderId + "/delete"; + document.deletePersonalABAjaxRequest + = triggerAjaxRequest(url, deletePersonalAddressBookCallback, + folderId); + + onBodyClickDialogHandler(dialogId); } + function deletePersonalAddressBookCallback(http) { if (http.readyState == 4) { if (isHttpStatus204(http.status)) { diff --git a/UI/WebServerResources/generic.css b/UI/WebServerResources/generic.css index 5d5a342a3..b4a962279 100644 --- a/UI/WebServerResources/generic.css +++ b/UI/WebServerResources/generic.css @@ -545,7 +545,7 @@ DIV.resize-handle color: #fff !important; } -DIV.dialog +DIV.dialog { position: absolute; width: 350px; z-index: 50; } @@ -576,6 +576,28 @@ DIV.dialog.right DIV margin-right: 19px; text-align: right; } +DIV.dialog.none +{ position: relative; + opacity: 1; + margin: 100px auto; /* top margin could be dynamically set depending on window height */ + z-index: 10000; } + +DIV.dialog.none DIV +{ padding: 10px; + padding-bottom: 31px; } + +DIV.dialog.none H3 +{ margin: 0; } + +DIV#bgDialogDiv +{ position: absolute; + margin: auto; + top: 0; left: 0; + width: 100%; height: 100%; + z-index: 9999; + opacity: .3; + background-color: #000!important; } + DIV#uploadDialog, DIV#uploadResults { border-width: 1px; @@ -929,3 +951,7 @@ DIV.bottomToolbar A.bottomButton SPAN:active /* row editing */ .editing > INPUT[type="text"] { width: 98%; } + +/* modalbox */ +DIV#modalbox SPAN +{ float: right; } \ No newline at end of file diff --git a/UI/WebServerResources/generic.js b/UI/WebServerResources/generic.js index 91be90dbc..b7fa4432e 100644 --- a/UI/WebServerResources/generic.js +++ b/UI/WebServerResources/generic.js @@ -1684,6 +1684,18 @@ function createDialog(id, title, legend, content, positionClass) { var newDialog = createElement("div", id, ["dialog", positionClass]); newDialog.setStyle({"display": "none"}); + if (positionClass == "none") { + var bgDiv = $("bgDialogDiv"); + if (bgDiv) { + bgDiv.show(); + } + else { + bgDiv = createElement("div", "bgDialogDiv", ["bgDialog"]); + document.body.appendChild(bgDiv); + bgDiv.observe("click", onBodyClickDialogHandler.bind(document.body, id)); + } + } + var subdiv = createElement("div", null, null, null, null, newDialog); if (title && title.length > 0) { var titleh3 = createElement("h3", null, null, null, null, subdiv); @@ -1711,6 +1723,11 @@ function createButton(id, caption, action) { return newButton; } +function onBodyClickDialogHandler(dialogId) { + $(dialogId).hide(); + $("bgDialogDiv").hide(); +} + function readCookie(name) { var foundCookie = null;