From 5699e5e1b405fc6cfa8e8f9e580bdc80973dd8e7 Mon Sep 17 00:00:00 2001 From: Alexandre Cloutier Date: Tue, 8 Apr 2014 12:12:30 -0400 Subject: [PATCH] Add datepicker for contact birthday --- .gitignore | 1 + UI/Templates/ContactsUI/UIxContactEditor.wox | 115 +++++++-------- UI/WebServerResources/UIxContactEditor.css | 74 +++++++--- UI/WebServerResources/UIxContactEditor.js | 141 +++++++++---------- UI/WebServerResources/datepicker.js | 55 ++++---- UI/WebServerResources/generic.js | 4 +- 6 files changed, 210 insertions(+), 180 deletions(-) diff --git a/.gitignore b/.gitignore index 88becdaa6..16bc03de4 100644 --- a/.gitignore +++ b/.gitignore @@ -1,5 +1,6 @@ config.make tags +*._* */obj/ */*/obj/ */*/*/obj/ diff --git a/UI/Templates/ContactsUI/UIxContactEditor.wox b/UI/Templates/ContactsUI/UIxContactEditor.wox index 14f4206c3..6d3532887 100644 --- a/UI/Templates/ContactsUI/UIxContactEditor.wox +++ b/UI/Templates/ContactsUI/UIxContactEditor.wox @@ -10,39 +10,46 @@ title="name" const:userDefaultsKeys="SOGoContactsCategories" const:popup="YES" - > + const:cssFiles="datepicker.css" + const:jsFiles="datepicker.js"> +
-
- - + +
+ -
+ var:selection="componentAddressBook"/> +
+
    • -
  • -
    • + +
  • + +
    • +
  • -
    • -
  • -
    • + + + +
  • + +
    • +
  • -
    • + +
+
@@ -171,18 +178,18 @@
- -
-
-
- + + +
+
+ + +
- +
@@ -339,42 +346,40 @@ + var:value="ldifRecord.mozillaworkurl"/> +
-
- -
- + +
+ + + +
+ +
- +
- - - - - - - +
+ + +
- + +
@@ -382,8 +387,8 @@
- + + diff --git a/UI/WebServerResources/UIxContactEditor.css b/UI/WebServerResources/UIxContactEditor.css index 26f3c8ba6..a4c80d3fb 100644 --- a/UI/WebServerResources/UIxContactEditor.css +++ b/UI/WebServerResources/UIxContactEditor.css @@ -7,45 +7,54 @@ DIV#addressBookSelector SELECT SELECT { width: 8em; } -DIV#buttons -{ color: #535D6D; - visibility: visible; - position: absolute; - right: 1em; - bottom: 1em; } - TR { width: 100% !important; border: 2px solid #0ff; } + +/********** Frame of the current tab **********/ DIV#editorTabs { position: absolute; - top: 5px; left: 5px; right: 5px; - bottom: 40px; } + top: 5px; + bottom: 5px; +} DIV#editorTabs DIV.tab TD.titleCell { text-align: left; font-weight: bold; } +DIV#buttons +{ color: #535D6D; + visibility: visible; + position: absolute; + bottom: 12px; + right: 10px; } + +#cancelButton:hover +{ + font-weight:bold; +} +#submitButton:hover +{ + font-weight:bold; +} + +/********** Contact **********/ + INPUT.textField { width: 60%; } TD#htmlMailFormat { text-align: left !important; } -TABLE#emailInfos TD -{ width: 90%; } - TABLE#emailInfos TD.preferred { width: 10% !important; overflow: visible; text-align: center; } -DIV.tab TD.firstColumn INPUT.textField, -DIV.tab TD.secondColumn INPUT.textField -{ width: 35%; } +/********** Categories **********/ #categoryContainer { max-height: 400px; @@ -67,11 +76,34 @@ INPUT.comboBoxField, #emptyCategory margin-bottom: 0px; margin-top: 0px; } -#otherInfos TEXTAREA -{ width: 70%; } +/********** Address **********/ -#birthday, #birthmonth -{ width: 18px; } +DIV.tab TD.firstColumn INPUT.textField, +DIV.tab TD.secondColumn INPUT.textField +{ width: 35%; } -#birthyear -{ width: 36px; } +/********** Photos **********/ + + + +/********** OTHER **********/ + +#birthdayDate +{ width: auto; + vertical-align: 8px; +} + +#birthdayLabel +{ + vertical-align: 8px; +} + +#otherInfos table td +{ text-align: left; + padding-bottom: 8px; +} + +#otherInfos textarea +{ width: 100%; + height: 100%; +} \ No newline at end of file diff --git a/UI/WebServerResources/UIxContactEditor.js b/UI/WebServerResources/UIxContactEditor.js index 47813a1b2..2ea317035 100644 --- a/UI/WebServerResources/UIxContactEditor.js +++ b/UI/WebServerResources/UIxContactEditor.js @@ -36,10 +36,9 @@ function unescapeCallbackParameter(s) { return s; } -function copyContact(type, email, uid, sn, - displayname, givenname, telephonenumber, facsimiletelephonenumber, - mobile, postalAddress, homePostalAddress, - departmentnumber, l) +function copyContact(type, email, uid, sn, displayname, + givenname, telephonenumber, facsimiletelephonenumber, + mobile, postalAddress, homePostalAddress, departmentnumber, l) { // var type = arguments[0]; // var email = arguments[1]; @@ -79,55 +78,39 @@ function copyContact(type, email, uid, sn, }; function validateContactEditor() { - var rc = true; + var rc = true; - var e = $('mail'); - if (e.value.length > 0 - && !emailRE.test(e.value)) { - alert(_("invalidemailwarn")); - rc = false; - } + var e = $('mail'); + if (e.value.length > 0 + && !emailRE.test(e.value)) { + alert(_("invalidemailwarn")); + rc = false; + } - e = $('mozillasecondemail'); - if (e.value.length > 0 - && !emailRE.test(e.value)) { - alert(_("invalidemailwarn")); - rc = false; - } - - var today = new Date(); - var yyyy = today.getFullYear(); - var mm = today.getMonth(); - var dd = today.getDay(); - - var byear = $('birthyear'); - var bmonth = $('birthmonth'); - var bday = $('birthday'); - - if(byear.value <= yyyy && (byear.value.length == 4)){ - if(bmonth.value <= mm && bmonth.value <= 12 && bmonth.value >=1){ - if(bday.value <= dd && bday.value <= 31 && bday.value >=1){ - var bdayValue = byear.value + "-" + bmonth.value + "-" + bday.value; - if (bdayValue != "--" && !dateRegex.test(bdayValue)) { - alert(_("invaliddatewarn")); - rc = false; - } - } - else{ - alert(_("invaliddatewarn")); - rc = false;} - } - else{ - alert(_("invalidmonthwarn")); - rc = false;} - } - else{ - alert(_("invalidyearwarn")); - rc = false;} - - return rc; + e = $('mozillasecondemail'); + if (e.value.length > 0 + && !emailRE.test(e.value)) { + alert(_("invalidemailwarn")); + rc = false; + } + return rc } +this.initTimeWidgets = function (widgets) { + this.timeWidgets = widgets; + var firstDay = new Date(); + firstDay.setFullYear(1900,0,1); + var lastDay = new Date(); + + jQuery(widgets['birthday']['date']).closest('.date').datepicker({autoclose: true, + weekStart: 0, + endDate: lastDay, + startDate: firstDay, + setStartDate: lastDay, + startView: 2, + position: "below-shifted-left"}); +}; + function onDisplaynameKeyDown() { var fn = $("displayname"); fn.onkeydown = null; @@ -286,39 +269,43 @@ function onEmptyCategoryClick(event) { } function initEditorForm() { - var tabsContainer = $("editorTabs"); - var controller = new SOGoTabsController(); - controller.attachToTabsContainer(tabsContainer); + var tabsContainer = $("editorTabs"); + var controller = new SOGoTabsController(); + controller.attachToTabsContainer(tabsContainer); - displaynameChanged = ($("displayname").value.length > 0); - $("displayname").onkeydown = onDisplaynameKeyDown; - $("sn").onkeyup = onDisplaynameNewValue; - $("givenname").onkeyup = onDisplaynameNewValue; + displaynameChanged = ($("displayname").value.length > 0); + $("displayname").onkeydown = onDisplaynameKeyDown; + $("sn").onkeyup = onDisplaynameNewValue; + $("givenname").onkeyup = onDisplaynameNewValue; - $("cancelButton").observe("click", onEditorCancelClick); - var submitButton = $("submitButton"); - if (submitButton) { - submitButton.observe("click", onEditorSubmitClick); + $("cancelButton").observe("click", onEditorCancelClick); + var submitButton = $("submitButton"); + if (submitButton) { + submitButton.observe("click", onEditorSubmitClick); + } + + Event.observe(document, "keydown", onDocumentKeydown); + + if (typeof(gCategories) != "undefined") { + regenerateCategoriesMenu(); + } + var catsInput = $("jsonContactCategories"); + if (catsInput && catsInput.value.length > 0) { + var contactCats = $(catsInput.value.evalJSON(false)); + for (var i = 0; i < contactCats.length; i++) { + appendCategoryInput(contactCats[i]); } + } - Event.observe(document, "keydown", onDocumentKeydown); + var emptyCategory = $("emptyCategory"); + if (emptyCategory) { + emptyCategory.tabIndex = 10000; + emptyCategory.observe("click", onEmptyCategoryClick); + } + + var widgets = {'birthday': {'date': $("birthdayDate")}}; + initTimeWidgets(widgets); - if (typeof(gCategories) != "undefined") { - regenerateCategoriesMenu(); - } - var catsInput = $("jsonContactCategories"); - if (catsInput && catsInput.value.length > 0) { - var contactCats = $(catsInput.value.evalJSON(false)); - for (var i = 0; i < contactCats.length; i++) { - appendCategoryInput(contactCats[i]); - } - } - - var emptyCategory = $("emptyCategory"); - if (emptyCategory) { - emptyCategory.tabIndex = 10000; - emptyCategory.observe("click", onEmptyCategoryClick); - } } document.observe("dom:loaded", initEditorForm); diff --git a/UI/WebServerResources/datepicker.js b/UI/WebServerResources/datepicker.js index 9c19590df..91aa6c029 100644 --- a/UI/WebServerResources/datepicker.js +++ b/UI/WebServerResources/datepicker.js @@ -31,14 +31,11 @@ var that = this; this.element = $(element); - this.position = options.position||this.element.data('position')||"bellow"; + this.position = options.position||this.element.data('position'); this.format = DPGlobal.parseFormat(options.format||this.element.data('date-format')||'mm/dd/yyyy'); - this.picker = $(DPGlobal.template) - .addClass(this.position) - .appendTo('body') - .on({ - click: $.proxy(this.click, this) - }); + this.picker = $(DPGlobal.template).addClass(this.position) + .appendTo('body') + .on({click: $.proxy(this.click, this)}); this.isInput = this.element.is('input'); this.component = this.element.is('.date') ? this.element.find('.add-on') : false; this.hasInput = this.component && this.element.find('input').length; @@ -51,7 +48,8 @@ keyup: $.proxy(this.update, this), keydown: $.proxy(this.keydown, this) }); - } else { + } + else { if (this.component && this.hasInput){ // For components that are not readonly, allow keyboard nav this.element.find('input').on({ @@ -59,9 +57,9 @@ keyup: $.proxy(this.update, this), keydown: $.proxy(this.keydown, this) }); - - this.component.on('click', $.proxy(this.show, this)); - } else { + this.component.on('click', $.proxy(this.show, this)); + } + else { this.element.on('click', $.proxy(this.show, this)); } } @@ -76,14 +74,16 @@ this.autoclose = false; if ('autoclose' in options) { this.autoclose = options.autoclose; - } else if ('dateAutoclose' in this.element.data()) { + } + else if ('dateAutoclose' in this.element.data()) { this.autoclose = this.element.data('date-autoclose'); } this.keyboardNavigation = true; if ('keyboardNavigation' in options) { this.keyboardNavigation = options.keyboardNavigation; - } else if ('dateKeyboardNavigation' in this.element.data()) { + } + else if ('dateKeyboardNavigation' in this.element.data()) { this.keyboardNavigation = this.element.data('date-keyboard-navigation'); } @@ -182,19 +182,24 @@ }).first().css('z-index'))+10; var offset = this.component ? this.component.offset() : this.element.offset(); var width = this.component ? this.component.width() : this.element.width(); - if (this.position == 'bellow') - this.picker.css({ - top: offset.top + this.height, - left: offset.left, - right: 'auto', - zIndex: zIndex + if (this.position == 'bellow') + this.picker.css({top: offset.top + this.height, + left: offset.left, + right: 'auto', + zIndex: zIndex }); - else // above - this.picker.css({ - top: offset.top - this.height - this.picker.outerHeight(), - right: window.width() - offset.left - width, - left: 'auto', - zIndex: zIndex + + if (this.position == 'below-shifted-left') + this.picker.css({top: offset.top + this.height, + left: offset.left - 83, + right: 'auto', + zIndex: zIndex + }); + else // above + this.picker.css({ top: offset.top - this.height - this.picker.outerHeight(), + right: window.width() - offset.left - width, + left: 'auto', + zIndex: zIndex }); }, diff --git a/UI/WebServerResources/generic.js b/UI/WebServerResources/generic.js index 89149d9a0..8aace44cb 100644 --- a/UI/WebServerResources/generic.js +++ b/UI/WebServerResources/generic.js @@ -267,7 +267,7 @@ function openContactWindow(url, wId) { wId = sanitizeWindowName(wId); var w = window.open(url, wId, - "width=450,height=530,resizable=0,location=0"); + "width=460,height=560,resizable=0,location=0"); w.focus(); return w; @@ -1743,7 +1743,7 @@ function onPreferencesClick(event) { } else { var w = window.open(urlstr, "SOGoPreferences", - "width=580,height=476,resizable=1,scrollbars=0,location=0"); + "width=615,height=520,resizable=1,scrollbars=0,location=0"); w.opener = window; w.focus(); }