From 0c7f3b90b7248392cea14576776d24f88986ca1d Mon Sep 17 00:00:00 2001 From: Francis Lachapelle Date: Fri, 4 Jan 2008 20:58:52 +0000 Subject: [PATCH] Monotone-Parent: 4bfedf0d0ab8fc8042756a4922e29e7270a9c9c0 Monotone-Revision: ad74fe2a39d0af65f91d5693fada5eaec21e1c0d Monotone-Author: flachapelle@inverse.ca Monotone-Date: 2008-01-04T20:58:52 Monotone-Branch: ca.inverse.sogo --- NEWS | 4 + .../SchedulerUI/UIxAttendeesEditor.wox | 53 ++++--- UI/Templates/UIxPageFrame.wox | 1 - UI/WebServerResources/UIxAttendeesEditor.css | 130 ++++++++--------- UI/WebServerResources/UIxAttendeesEditor.js | 134 +++++++++++++----- UI/WebServerResources/iefixes.css | 21 ++- 6 files changed, 208 insertions(+), 135 deletions(-) diff --git a/NEWS b/NEWS index 89447f0b2..da5414179 100644 --- a/NEWS +++ b/NEWS @@ -1,3 +1,7 @@ +0.9.0-2008MMDD (1.0 rc4) +------------------------ +- improved the attendees window; + 0.9.0-20071217 (1.0 rc3) ------------------------ - mail folders state is now saved; diff --git a/UI/Templates/SchedulerUI/UIxAttendeesEditor.wox b/UI/Templates/SchedulerUI/UIxAttendeesEditor.wox index 8895bcafc..540fd2660 100644 --- a/UI/Templates/SchedulerUI/UIxAttendeesEditor.wox +++ b/UI/Templates/SchedulerUI/UIxAttendeesEditor.wox @@ -29,9 +29,8 @@ string="itemZoomText" selection="zoom"/> -
- - - - + + + + - - - + + + +
+
+ + + +
+
+
+ + + + +
+ 		+
+ + + + +
+
diff --git a/UI/Templates/UIxPageFrame.wox b/UI/Templates/UIxPageFrame.wox index 3d936ae62..7aefda2c9 100644 --- a/UI/Templates/UIxPageFrame.wox +++ b/UI/Templates/UIxPageFrame.wox @@ -127,7 +127,6 @@ - diff --git a/UI/WebServerResources/UIxAttendeesEditor.css b/UI/WebServerResources/UIxAttendeesEditor.css index 76e5bb819..28f3bdcee 100644 --- a/UI/WebServerResources/UIxAttendeesEditor.css +++ b/UI/WebServerResources/UIxAttendeesEditor.css @@ -18,9 +18,9 @@ DIV#freeBusyView margin-top: 0.5em; top: 2em; bottom: 14.5em; - left: 15em; + left: 0px; right: 0px; - overflow: auto; + overflow: hidden; border-top: 2px solid #222; border-left: 2px solid #222; border-right: 1px solid #fff; @@ -28,96 +28,97 @@ DIV#freeBusyView -moz-border-top-colors: #9c9a94 #000; -moz-border-left-colors: #9c9a94 #000; } -TABLE#freeBusy -{ border-collapse: collapse; - table-layout: auto; } +TABLE +{ border-collapse: separated; + table-layout: auto; + border-spacing: 0px 0px; } -TABLE#freeBusy THEAD TH +TABLE#freeBusyHeader TH { white-space: nowrap; } TABLE#freeBusy TD, TABLE#freeBusy TH { padding: 0px; margin: 0px; - border: 0px; } + border: 0px; + vertical-align: top; } -TABLE#freeBusy TH.attendees, -TABLE#freeBusy TD.attendees -{ position: fixed; - padding: 0px .5em; - padding-right: 0px; - margin: 0px; - width: 15em; - border: 0px !important; - background-color: #d4d0c8; - overflow: hidden; - left: 0px; } +TABLE#freeBusy TD.freeBusyHeader DIV, +TABLE#freeBusy TD.freeBusyAttendees DIV +{ overflow: hidden; } -TABLE#freeBusy TD.attendees IMG -{ position: absolute; - left: 0em; - top: 0.5em; } +TABLE#freeBusy TD.freeBusyData DIV +{ overflow: scroll; } -TABLE#freeBusy TD.attendees INPUT -{ background-image: url("abcard.gif"); - background-repeat: no-repeat; - background-position: 2px center; - width: 12em; - margin: 0px; - padding-left: 24px; - margin-left: 5px; - margin-left: 1.5em; } - -TABLE#freeBusy TR.needs-action TD.attendees +TABLE#freeBusyAttendees TR.needs-action TD.attendees { background-image: url("needs-action.png"); background-repeat: no-repeat; background-position: 5px center; } -TABLE#freeBusy TR.declined TD.attendees +TABLE#freeBusyAttendees TR.declined TD.attendees { background-image: url("declined.png"); background-repeat: no-repeat; background-position: 5px center; } -TABLE#freeBusy TR.accepted TD.attendees +TABLE#freeBusyAttendees TR.accepted TD.attendees { background-image: url("accepted.png"); background-repeat: no-repeat; background-position: 5px center; } -TABLE#freeBusy TR.futureAttendee INPUT -{ background-image: none; } - -TABLE#freeBusy TR.freeBusyHeader2 TH +TABLE#freeBusyHeader TR.freeBusyHeader2 TH { font-weight: normal; } -TABLE#freeBusy TR.freeBusyHeader1 TH, -TABLE#freeBusy TR.freeBusyHeader2 TH, -TABLE#freeBusy TR.freeBusyHeader3 TH +TABLE#freeBusyHeader TR.freeBusyHeader1 TH, +TABLE#freeBusyHeader TR.freeBusyHeader2 TH, +TABLE#freeBusyHeader TR.freeBusyHeader3 TH { text-align: left; color: #777; background: #fff; } -TABLE#freeBusy TR.freeBusyHeader2 TH +TABLE#freeBusyHeader TR.freeBusyHeader2 TH { padding-right: 2em; } -TABLE#freeBusy TR.freeBusyHeader3 TH +TABLE#freeBusyHeader TR.freeBusyHeader3 TH { border-left: 1px solid #fff; border-bottom: 1px solid #cecbff; } -TABLE#freeBusy TR.attendeeModel +TABLE#freeBusyAttendees TR.attendeeModel, +TABLE#freeBusyData TR.dataModel { display: none; } -TABLE#freeBusy TR.futureAttendee TD -{ border-right: none; } +TABLE#freeBusy TD.freeBusyHeader, +TABLE#freeBusy TD.freeBusyData +{ border-left: 2px solid #bbb; } -TABLE#freeBusy TD +TABLE#freeBusyAttendees TD, +TABLE#freeBusyData TD { border-bottom: 1px solid #cecbff; - border-right: 1px solid #cecbff; + border-left: 1px solid #cecbff; + border-top: 0px; + border-right: 0px; height: 2em; background-color: #fff; } -TABLE#freeBusy TD.noFreeBusy -{ background-color: #559; - border-right: 0px; } +TABLE#freeBusyAttendees TD +{ border-left: 1px solid #fff; } + +TABLE#freeBusyData TR.futureData TD +{ border-left: none; } + +TABLE#freeBusy TD.freeBusyAttendees DIV +{ width: 16em; } + +TABLE#freeBusyAttendees TD.attendees INPUT +{ background-image: url("abcard.gif"); + background-repeat: no-repeat; + background-position: 4px center; + border: 0px; + width: 12em; + padding-left: 24px; + margin-left: 2em; } + +TABLE#freeBusyAttendees TR.futureAttendee INPUT +{ background-image: none; } SPAN.freeBusyZoneElement { display: block; @@ -128,17 +129,17 @@ SPAN.freeBusyZoneElement padding: 0px; border: 0px; } -TABLE#freeBusy TR.freeBusyHeader3 SPAN.freeBusyZoneElement +TABLE#freeBusyHeader TR.freeBusyHeader3 SPAN.freeBusyZoneElement { height: .25em; } -TABLE#freeBusy TD SPAN.freeBusyZoneElement -{ height: 100%; } +TABLE#freeBusyData TD SPAN.freeBusyZoneElement +{ height: 98%; /* not nice under Safari */ } -SPAN[class~="colorBox"].free, -TABLE#freeBusy TD SPAN.freeBusyZoneElement +SPAN.colorBox.free, +TABLE#freeBusyData TD SPAN.freeBusyZoneElement { background-color: #8ca6bd; } -TABLE#freeBusy TH SPAN[class~="freeBusyZoneElement"].busy +TABLE#freeBusyHeader TH SPAN.freeBusyZoneElement.busy { background-color: #c55 !important; } DIV#freeBusyFooter @@ -184,15 +185,16 @@ SPAN.colorBox width: 1em; height: .75em; } -SPAN[class~="colorBox"].busy, -SPAN[class~="freeBusyZoneElement"].busy +SPAN.colorBox.busy, +SPAN.freeBusyZoneElement.busy { background-color: #5a6b79 !important; } -SPAN[class~="colorBox"].maybe-busy, -SPAN[class~="freeBusyZoneElement"].maybe-busy +SPAN.colorBox.maybe-busy, +SPAN.freeBusyZoneElement.maybe-busy { background-color: #adc0d0 !important; } -SPAN[class~="colorBox"].noFreeBusy +SPAN.colorBox.noFreeBusy, +TABLE#freeBusyData TD.noFreeBusy { background-color: #559; } DIV#freeBusyViewButtons @@ -202,7 +204,7 @@ DIV#freeBusyViewButtons padding: 3px; height: 2em; top: 0px; - left: 15em; } + left: 16em; } DIV#freeBusyZoomButtons { position: absolute; diff --git a/UI/WebServerResources/UIxAttendeesEditor.js b/UI/WebServerResources/UIxAttendeesEditor.js index 14aae456e..21b4ae462 100644 --- a/UI/WebServerResources/UIxAttendeesEditor.js +++ b/UI/WebServerResources/UIxAttendeesEditor.js @@ -99,12 +99,9 @@ function performSearchCallback(http) { } // Show popup menu - var offset; - if (isSafari()) - offset = Position.positionedOffset(currentField); - else - offset = Position.cumulativeOffset(currentField); - var top = offset[1] + node.offsetHeight + 3; + var offsetScroll = Element.cumulativeScrollOffset(currentField); + var offset = Element.cumulativeOffset(currentField); + var top = offset[1] - offsetScroll[1] + node.offsetHeight + 3; var height = 'auto'; if (data.length > 5) { height = 5 * node.getHeight() + 'px'; @@ -161,9 +158,9 @@ function onAttendeeResultClick(event) { } function resetFreeBusyZone() { - var table = $("freeBusy"); - var row = table.tHead.rows[2]; - for (var i = 1; i < row.cells.length; i++) { + var table = $("freeBusyHeader"); + var row = table.rows[2]; + for (var i = 0; i < row.cells.length; i++) { var nodes = $(row.cells[i]).childNodesWithTag("span"); for (var j = 0; j < nodes.length; j++) nodes[j].removeClassName("busy"); @@ -171,8 +168,8 @@ function resetFreeBusyZone() { } function redisplayFreeBusyZone() { - var table = $("freeBusy"); - var row = table.tHead.rows[2]; + var table = $("freeBusyHeader"); + var row = table.rows[2]; var stDay = $("startTime_date").valueAsDate(); var etDay = $("endTime_date").valueAsDate(); @@ -215,7 +212,7 @@ function redisplayFreeBusyZone() { var deltaCells = (etHour - stHour) + (11 * addDays); var deltaSpans = (deltaCells * 4 ) + (etMinute - stMinute); - var currentCellNbr = stHour - 7; + var currentCellNbr = stHour - 7 - 1; var currentCell = row.cells[currentCellNbr]; var currentSpanNbr = stMinute; var spans = $(currentCell).childNodesWithTag("span"); @@ -235,12 +232,12 @@ function redisplayFreeBusyZone() { } function newAttendee(event) { - var table = $("freeBusy"); + var table = $("freeBusyAttendees"); var tbody = table.tBodies[0]; var model = tbody.rows[tbody.rows.length - 1]; - var newAttendeeRow = tbody.rows[tbody.rows.length - 2]; + var futureRow = tbody.rows[tbody.rows.length - 2]; var newRow = model.cloneNode(true); - tbody.insertBefore(newRow, newAttendeeRow); + tbody.insertBefore(newRow, futureRow); $(newRow).removeClassName("attendeeModel"); @@ -250,6 +247,19 @@ function newAttendee(event) { input.focussed = true; input.activate(); + + table = $("freeBusyData"); + tbody = table.tBodies[0]; + model = tbody.rows[tbody.rows.length - 1]; + futureRow = tbody.rows[tbody.rows.length - 2]; + newRow = model.cloneNode(true); + tbody.insertBefore(newRow, futureRow); + $(newRow).removeClassName("dataModel"); + + var attendeesDiv = $$('TABLE#freeBusy TD.freeBusyAttendees DIV').first(); + var dataDiv = $$('TABLE#freeBusy TD.freeBusyData DIV').first(); + + dataDiv.scrollTop = attendeesDiv.scrollTop; } function checkAttendee() { @@ -267,8 +277,12 @@ function checkAttendee() { this.focussed = false; var row = this.parentNode.parentNode; var tbody = row.parentNode; - if (tbody && this.value.trim().length == 0) + if (tbody && this.value.trim().length == 0) { + var dataTable = $("freeBusyData").tBodies[0]; + var dataRow = dataTable.rows[row.sectionRowIndex]; tbody.removeChild(row); + dataTable.removeChild(dataRow); + } else if (this.readAttribute("modified") == "1") { if (!$(row).hasClassName("needs-action")) { $(row).addClassName("needs-action"); @@ -287,13 +301,14 @@ function checkAttendee() { currentField = null; } -function displayFreeBusyForNode(node) { - var nodes = node.parentNode.parentNode.cells; - if (node.uid) { +function displayFreeBusyForNode(input) { + var rowIndex = input.parentNode.parentNode.sectionRowIndex; + var nodes = $("freeBusyData").tBodies[0].rows[rowIndex].cells; + if (input.uid) { if (document.contactFreeBusyAjaxRequest) - awaitingFreeBusyRequests.push(node); + awaitingFreeBusyRequests.push(input); else { - for (var i = 1; i < nodes.length; i++) { + for (var i = 0; i < nodes.length; i++) { $(nodes[i]).removeClassName("noFreeBusy"); $(nodes[i]).innerHTML = ('' + '' @@ -307,16 +322,16 @@ function displayFreeBusyForNode(node) { } var sd = $('startTime_date').valueAsShortDateString(); var ed = $('endTime_date').valueAsShortDateString(); - var urlstr = ( UserFolderURL + "../" + node.uid + "/freebusy.ifb/ajaxRead?" + var urlstr = ( UserFolderURL + "../" + input.uid + "/freebusy.ifb/ajaxRead?" + "sday=" + sd + "&eday=" + ed + "&additional=" + additionalDays ); document.contactFreeBusyAjaxRequest = triggerAjaxRequest(urlstr, updateFreeBusyDataCallback, - node); + input); } } else { - for (var i = 1; i < nodes.length; i++) { + for (var i = 0; i < nodes.length; i++) { $(nodes[i]).addClassName("noFreeBusy"); $(nodes[i]).update(); } @@ -333,7 +348,7 @@ function setSlot(tds, nbr, status) { } if (tdnbr > 7 && tdnbr < 19) { var i = (days * 11 + tdnbr - 7); - var td = tds[i]; + var td = tds[i - 1]; var spans = $(td).childNodesWithTag("span"); if (status == '2') $(spans[spannbr]).addClassName("maybe-busy"); @@ -345,12 +360,13 @@ function setSlot(tds, nbr, status) { function updateFreeBusyDataCallback(http) { if (http.readyState == 4) { if (http.status == 200) { - var node = http.callbackData; + var input = http.callbackData; var slots = http.responseText.split(","); - var tds = node.parentNode.parentNode.cells; + var rowIndex = input.parentNode.parentNode.sectionRowIndex; + var nodes = $("freeBusyData").tBodies[0].rows[rowIndex].cells; for (var i = 0; i < slots.length; i++) { if (slots[i] != '0') - setSlot(tds, i, slots[i]); + setSlot(nodes, i, slots[i]); } } document.contactFreeBusyAjaxRequest = null; @@ -516,7 +532,7 @@ function prepareTableHeaders() { var endDate = endTimeDate.valueAsDate(); endDate.setTime(endDate.getTime() + (additionalDays * 86400000)); - var rows = $("freeBusy").tHead.rows; + var rows = $("freeBusyHeader").rows; var days = startDate.daysUpTo(endDate); for (var i = 0; i < days.length; i++) { var header1 = document.createElement("th"); @@ -550,29 +566,37 @@ function prepareTableRows() { var endDate = endTimeDate.valueAsDate(); endDate.setTime(endDate.getTime() + (additionalDays * 86400000)); - var rows = $("freeBusy").tBodies[0].rows; + var rows = $("freeBusyData").tBodies[0].rows; var days = startDate.daysUpTo(endDate); + var width = $('freeBusyHeader').getWidth(); + $("freeBusyData").setStyle({ width: width + 'px' }); for (var i = 0; i < days.length; i++) for (var rowNbr = 0; rowNbr < rows.length; rowNbr++) - for (var hour = dayStartHour; hour < (dayEndHour + 1); hour++) - rows[rowNbr].appendChild(document.createElement("td")); + for (var hour = dayStartHour; hour < (dayEndHour + 1); hour++) + rows[rowNbr].appendChild(document.createElement("td")); } function prepareAttendees() { var value = parent$("attendeesNames").value; - var table = $("freeBusy"); + var tableAttendees = $("freeBusyAttendees"); + var tableData = $("freeBusyData"); if (value.length > 0) { attendeesEditor.names = parent$("attendeesNames").value.split(","); attendeesEditor.UIDs = parent$("attendeesUIDs").value.split(","); attendeesEditor.emails = parent$("attendeesEmails").value.split(","); attendeesEditor.states = parent$("attendeesStates").value.split(","); - var tbody = table.tBodies[0]; - var model = tbody.rows[tbody.rows.length - 1]; - var newAttendeeRow = tbody.rows[tbody.rows.length - 2]; + var tbodyAttendees = tableAttendees.tBodies[0]; + var modelAttendee = tbodyAttendees.rows[tbodyAttendees.rows.length - 1]; + var newAttendeeRow = tbodyAttendees.rows[tbodyAttendees.rows.length - 2]; + + var tbodyData = tableData.tBodies[0]; + var modelData = tbodyData.rows[tbodyData.rows.length - 1]; + var newDataRow = tbodyData.rows[tbodyData.rows.length - 2]; + for (var i = 0; i < attendeesEditor.names.length; i++) { - var row = model.cloneNode(true); - tbody.insertBefore(row, newAttendeeRow); + var row = modelAttendee.cloneNode(true); + tbodyAttendees.insertBefore(row, newAttendeeRow); $(row).removeClassName("attendeeModel"); $(row).addClassName(attendeesEditor.states[i]); var input = $(row).down("input"); @@ -587,6 +611,11 @@ function prepareAttendees() { input.setAttribute("modified", "0"); input.observe("blur", checkAttendee); input.observe("keydown", onContactKeydown); + + row = modelData.cloneNode(true); + tbodyData.insertBefore(row, newDataRow); + $(row).removeClassName("dataModel"); + displayFreeBusyForNode(input); } } @@ -596,11 +625,35 @@ function prepareAttendees() { attendeesEditor.emails = new Array(); } - var inputs = table.getElementsByTagName("input"); + var inputs = tableAttendees.getElementsByTagName("input"); inputs[inputs.length - 2].setAttribute("autocomplete", "off"); Event.observe(inputs[inputs.length - 2], "click", newAttendee); } +function onWindowResize(event) { + var view = $('freeBusyView'); + var attendeesCell = $$('TABLE#freeBusy TD.freeBusyAttendees').first(); + var headerDiv = $$('TABLE#freeBusy TD.freeBusyHeader DIV').first(); + var attendeesDiv = $$('TABLE#freeBusy TD.freeBusyAttendees DIV').first(); + var dataDiv = $$('TABLE#freeBusy TD.freeBusyData DIV').first(); + var width = view.getWidth() - attendeesCell.getWidth(); + var height = view.getHeight() - headerDiv.getHeight(); + + attendeesDiv.setStyle({ height: (height - 20) + 'px' }); + headerDiv.setStyle({ width: (width - 20) + 'px' }); + dataDiv.setStyle({ width: (width - 4) + 'px', + height: (height - 2) + 'px' }); +} + +function onScroll(event) { + var headerDiv = $$('TABLE#freeBusy TD.freeBusyHeader DIV').first(); + var attendeesDiv = $$('TABLE#freeBusy TD.freeBusyAttendees DIV').first(); + var dataDiv = $$('TABLE#freeBusy TD.freeBusyData DIV').first(); + + headerDiv.scrollLeft = dataDiv.scrollLeft; + attendeesDiv.scrollTop = dataDiv.scrollTop; +} + function onFreeBusyLoadHandler() { initializeWindowButtons(); initializeTimeWidgets(); @@ -608,6 +661,9 @@ function onFreeBusyLoadHandler() { prepareTableRows(); redisplayFreeBusyZone(); prepareAttendees(); + onWindowResize(null); + Event.observe(window, "resize", onWindowResize); + Event.observe($$('TABLE#freeBusy TD.freeBusyData DIV').first(), "scroll", onScroll); } FastInit.addOnLoad(onFreeBusyLoadHandler); diff --git a/UI/WebServerResources/iefixes.css b/UI/WebServerResources/iefixes.css index 0dd08ca0d..8fcecab35 100644 --- a/UI/WebServerResources/iefixes.css +++ b/UI/WebServerResources/iefixes.css @@ -78,23 +78,20 @@ DIV#attendeesMenu overflow-x: hidden; } DIV#attendeesView -{ left: 0px; } +{ left: 0.5em; } DIV#freeBusyView { border-bottom: 1px solid #fff; border-right: 1px solid #fff; border-top: 2px solid #222; border-left: 2px solid #222; - left: 0.5em; - margin-left: 0.5em; } + left: 0.5em; } -TABLE#freeBusy TH.attendees, -TABLE#freeBusy TD.attendees -{ background-color: #fff !important; - padding-right: 5px; - padding-left: 0px; } +TABLE#freeBusyData TD.noFreeBusy +{ height: 2.2em; } -TABLE#freeBusy TD.attendees INPUT -{ border-bottom: 1px solid #ccc; - border-right: 1px solid #ccc; - margin-left: 2.0em; } +TABLE#freeBusyData TD SPAN.freeBusyZoneElement +{ height: 103%; } + +TABLE +{ empty-cells: show; } \ No newline at end of file