From 1b65309e59e4c9e24c4f8bbc8eabf18fada9a5f7 Mon Sep 17 00:00:00 2001 From: Francis Lachapelle Date: Mon, 24 Sep 2007 21:26:23 +0000 Subject: [PATCH] Monotone-Parent: 9d2034c400246e39f2d7a801f52ee4971e5b431a Monotone-Revision: 807deb2239f073e058d501505aea6ff999ed1b25 Monotone-Author: flachapelle@inverse.ca Monotone-Date: 2007-09-24T21:26:23 Monotone-Branch: ca.inverse.sogo --- NEWS | 2 +- .../ContactsUI/UIxContactsListView.wox | 17 ++-- UI/Templates/MailerUI/UIxMailListView.wox | 12 +-- UI/Templates/SchedulerUI/UIxCalMainView.wox | 8 +- UI/Templates/UIxPageFrame.wox | 1 + UI/WebServerResources/ContactsUI.css | 30 ++----- UI/WebServerResources/ContactsUI.js | 55 ++++++------ UI/WebServerResources/HTMLTableElement.js | 22 ----- UI/WebServerResources/MailerUI.css | 29 +++---- UI/WebServerResources/MailerUI.js | 85 ++++++++++--------- UI/WebServerResources/SchedulerUI.css | 21 +++-- UI/WebServerResources/SchedulerUI.js | 13 +-- UI/WebServerResources/generic.css | 14 +++ UI/WebServerResources/generic.js | 15 ++-- UI/WebServerResources/tablekit.js | 10 +++ 15 files changed, 169 insertions(+), 165 deletions(-) diff --git a/NEWS b/NEWS index 8947cccfd..0a9f33ec2 100644 --- a/NEWS +++ b/NEWS @@ -10,7 +10,7 @@ - added tooltips for toolbar buttons (English and French); - added checkmarks in live search options popup menus; - added browser detection with recommanded alternatives; -- initial support for resizable columns in tables; +- support for resizable columns in tables; - improved IE7 and Safari support: attendees selector; - countless bugfixes; diff --git a/UI/Templates/ContactsUI/UIxContactsListView.wox b/UI/Templates/ContactsUI/UIxContactsListView.wox index 950cfade2..d98db7d25 100644 --- a/UI/Templates/ContactsUI/UIxContactsListView.wox +++ b/UI/Templates/ContactsUI/UIxContactsListView.wox @@ -10,22 +10,23 @@ selectorComponentClass="selectorComponentClass" title="name"> - + - - + +
- + \ No newline at end of file diff --git a/UI/Templates/MailerUI/UIxMailListView.wox b/UI/Templates/MailerUI/UIxMailListView.wox index f77b31986..fd65c204a 100644 --- a/UI/Templates/MailerUI/UIxMailListView.wox +++ b/UI/Templates/MailerUI/UIxMailListView.wox @@ -8,22 +8,22 @@ xmlns:label="OGo:label"> + > - - - - + + + +
diff --git a/UI/Templates/UIxPageFrame.wox b/UI/Templates/UIxPageFrame.wox index d2a9086d6..91cb95945 100644 --- a/UI/Templates/UIxPageFrame.wox +++ b/UI/Templates/UIxPageFrame.wox @@ -46,6 +46,7 @@ + diff --git a/UI/WebServerResources/ContactsUI.css b/UI/WebServerResources/ContactsUI.css index ccf2bc5db..97d1d7f26 100644 --- a/UI/WebServerResources/ContactsUI.css +++ b/UI/WebServerResources/ContactsUI.css @@ -39,7 +39,7 @@ DIV#contactsListContent left: 0px; right: 0px; height: 16em; - overflow: scroll; + overflow: auto; overflow-x: hidden; } .aptview_text @@ -169,17 +169,15 @@ DIV#folderTreeContent TABLE TD padding: 0px; } TABLE#contactsList -{ display: block; - position: relative; - width: 100%; } +{ width: 100%; } -TABLE#contactsList TD -{ white-space: normal; /* pre, normal, nowrap */ - /*width: 20%;*/ } +TABLE#contactsList TD, +TABLE#contactsList TH +{ overflow: hidden; + white-space: nowrap; } /* pre, normal, nowrap */ -TD#nameHeader, -TD#mailHeader -{ /*width: 30%;*/ } +TABLE#contactsList TH +{ white-space: pre; } TABLE#contactsList TD IMG { @@ -247,18 +245,6 @@ DIV.contactColumn H4 INPUT#searchValue:focus { color: #000; } -TABLE#contactsList TD.resize-handle-active -{ cursor: e-resize; } - -DIV.resize-handle -{ cursor: e-resize; - width: 2px; - border-right: 1px solid #fff; - position: absolute; - top: 0; - left: 0; - max-height: 2em; } - /* drag handles */ DIV#dragHandle { diff --git a/UI/WebServerResources/ContactsUI.js b/UI/WebServerResources/ContactsUI.js index 2b58fa4cc..a08aac746 100644 --- a/UI/WebServerResources/ContactsUI.js +++ b/UI/WebServerResources/ContactsUI.js @@ -2,7 +2,6 @@ var cachedContacts = new Array(); var currentContactFolder = null; -var savedColumnsWidth = null; var usersRightsWindowHeight = 200; var usersRightsWindowWidth = 450; @@ -56,7 +55,7 @@ function openContactsFolder(contactsFolder, reload, idx) { if (document.contactsListAjaxRequest) { document.contactsListAjaxRequest.aborted = true; document.contactsListAjaxRequest.abort(); - } + } log (url); document.contactsListAjaxRequest = triggerAjaxRequest(url, contactsListCallback, selection); } @@ -74,33 +73,30 @@ function openContactsFolderAtIndex(element) { = triggerAjaxRequest(url, contactsListCallback); } -function configureContactsListHeaders(cells) { - for (var i = 0; i < cells.length; i++) { - var currentCell = $(cells[i]); - Event.observe(currentCell, "click", - onHeaderClick.bindAsEventListener(currentCell)); - //Event.observe(currentCell, "mousedown", listRowMouseDownHandler); - } -} - function contactsListCallback(http) { - var div = $("contactsListContent"); - if (http.readyState == 4 && http.status == 200) { document.contactsListAjaxRequest = null; - div.update(http.responseText); var table = $("contactsList"); if (table) { - TableKit.Resizable.init(table); - if (savedColumnsWidth != null) { - // Restore columns width - table.setColumnsWidth(savedColumnsWidth); - } - configureContactsListHeaders(table.tBodies[0].rows[0].cells); + // Update table + var data = http.responseText; + var html = data.replace(/^(.*\n)*.*( 0) { var sortHeader; if (sorting["attribute"] == "displayName") @@ -117,6 +113,11 @@ function contactsListCallback(http) { sortHeader = null; if (sortHeader) { + var sortImages = $(table.tHead).getElementsByClassName("sortImage"); + $(sortImages).each(function(item) { + item.remove(); + }); + var sortImage = createElement("img", "messageSortImage", "sortImage"); sortHeader.insertBefore(sortImage, sortHeader.firstChild); if (sorting["ascending"]) @@ -418,10 +419,9 @@ function onHeaderClick(event) { sorting["ascending"] = true; } - savedColumnsWidth = this.up('table').getColumnsWidth(); refreshCurrentFolder(); - preventDefault(event); + Event.stop(event); } function newContact(sender) { @@ -437,7 +437,7 @@ function onFolderSelectionChange() { if (nodes[0].hasClassName("denied")) { var div = $("contactsListContent"); - div.innerHTML = ""; + div.update(); } else { search = {}; @@ -746,6 +746,13 @@ function initContacts(event) { configureSelectionButtons(); configureContactFolders(); // initDnd(); + + var table = $("contactsList"); + if (table) { + // Initialize contacts table + configureSortableTableHeaders(table); + TableKit.Resizable.init(table, {'trueResize' : true, 'keepWidth' : true}); + } } addEvent(window, 'load', initContacts); diff --git a/UI/WebServerResources/HTMLTableElement.js b/UI/WebServerResources/HTMLTableElement.js index e029cd8ba..449175457 100644 --- a/UI/WebServerResources/HTMLTableElement.js +++ b/UI/WebServerResources/HTMLTableElement.js @@ -34,28 +34,6 @@ Element.addMethods({ node.select(); } } - }, - - getColumnsWidth: function(element) { - element = $(element); - var widths = new Array(); - if (element.tagName == 'TABLE') { - var cells = TableKit.getHeaderCells(element); - for (var i = 0; i < cells.length; i++) { - widths[i] = $(cells[i]).getWidth(); - } - } - return widths; - }, - - setColumnsWidth: function(element, widths) { - element = $(element); - if (element.tagName == 'TABLE') { - for (var i = 0; i < widths.length; i++) { - TableKit.Resizable.resize(element, i, widths[i]); - } - } } - }); // Element.addMethods diff --git a/UI/WebServerResources/MailerUI.css b/UI/WebServerResources/MailerUI.css index c1ac5c7dd..a8cad3cd4 100644 --- a/UI/WebServerResources/MailerUI.css +++ b/UI/WebServerResources/MailerUI.css @@ -52,7 +52,7 @@ DIV#mailboxContent left: 0px; right: 0px; height: 15.5em; - overflow: scroll; + overflow: auto; overflow-x: hidden; } DIV#messageContent @@ -475,10 +475,16 @@ TABLE#addr_table } TABLE#messageList -{ /*width: 100%;*/ } +{ width: 100%; } -TABLE#messageList TD -{ height: 1.2em; } +TABLE#messageList TD, +TABLE#messageList TH +{ height: 1.2em; + overflow: hidden; + white-space: nowrap; } + +TABLE#messageList TH +{ white-space: pre; } TD#messageFlagHeader, TABLE#messageList TD.messageFlagColumn @@ -500,8 +506,7 @@ TABLE#messageList TD.messageAddressColumn overflow: hidden; } TD#dateHeader, -TABLE#messageList TD.tbtv_date_headercell, -TABLE#messageList TD.messageDateColumn +TABLE#messageList TD.tbtv_date_headercell { /*width: 25%;*/ overflow: hidden; } @@ -516,18 +521,6 @@ TABLE#messageList TR._deleted TD text-decoration: line-through; } -TABLE#messageList TD.resize-handle-active -{ cursor: e-resize; } - -DIV.resize-handle -{ cursor: e-resize; - width: 2px; - border-right: 1px solid #fff; - position: absolute; - top: 0; - left: 0; - max-height: 2em; } - /* drag handles */ DIV#verticalDragHandle { diff --git a/UI/WebServerResources/MailerUI.js b/UI/WebServerResources/MailerUI.js index 074a94f94..afb052b7a 100644 --- a/UI/WebServerResources/MailerUI.js +++ b/UI/WebServerResources/MailerUI.js @@ -342,7 +342,7 @@ function onMailboxTreeItemClick(event) { else openMailbox(mailbox); - preventDefault(event); + Event.stop(event); } function onMailboxMenuMove() { @@ -415,7 +415,6 @@ function openMailbox(mailbox, reload, idx) { + rightDragHandle.offsetHeight + 'px') }); } - document.messageListAjaxRequest = triggerAjaxRequest(url, messageListCallback, currentMessage); @@ -429,18 +428,34 @@ function openMailbox(mailbox, reload, idx) { function openMailboxAtIndex(event) { openMailbox(currentMailbox, true, this.getAttribute("idx")); - preventDefault(event); + Event.stop(event); } function messageListCallback(http) { - var div = $('mailboxContent'); - + var table = $('messageList'); + if (http.readyState == 4 && http.status == 200) { document.messageListAjaxRequest = null; - div.update(http.responseText); - TableKit.Resizable.init($('messageList')); + if (table) { + // Update table + var thead = table.tHead; + var tbody = table.tBodies[0]; + var tmp = document.createElement('div'); + $(tmp).update(http.responseText); + thead.rows[1].parentNode.replaceChild(tmp.firstChild.tHead.rows[1], thead.rows[1]); + table.replaceChild(tmp.firstChild.tBodies[0], tbody); + } + else { + // Add table + var div = $('mailboxContent'); + div.update(http.responseText); + table = $('messageList'); + configureMessageListEvents(table); + TableKit.Resizable.init(table, {'trueResize' : true, 'keepWidth' : true}); + } + configureMessageListBodyEvents(table); var selected = http.callbackData; if (selected) { @@ -448,20 +463,16 @@ function messageListCallback(http) { if (row) row.select(); } - configureMessageListEvents(); if (sorting["attribute"] && sorting["attribute"].length > 0) { - var sortHeader; - if (sorting["attribute"] == "subject") - sortHeader = $("subjectHeader"); - else if (sorting["attribute"] == "from") - sortHeader = $("fromHeader"); - else if (sorting["attribute"] == "date") - sortHeader = $("dateHeader"); - else - sortHeader = null; - + var sortHeader = $(sorting["attribute"] + "Header"); + if (sortHeader) { + var sortImages = $(table.tHead).getElementsByClassName("sortImage"); + $(sortImages).each(function(item) { + item.remove(); + }); + var sortImage = createElement("img", "messageSortImage", "sortImage"); sortHeader.insertBefore(sortImage, sortHeader.firstChild); if (sorting["ascending"]) @@ -626,7 +637,7 @@ function storeCachedMessage(cachedMessage) { cachedMessages[oldest] = cachedMessage; } -function onMessageSelectionChange() { +function onMessageSelectionChange() { log ("onMessageSelectionChange"); var rows = this.getSelectedRowsId(); if (rows.length == 1) { @@ -857,7 +868,7 @@ function onHeaderClick(event) { newSortAttribute = "date"; else newSortAttribute = "arrival"; - + log ("new sort attribute = " + newSortAttribute); if (sorting["attribute"] == newSortAttribute) sorting["ascending"] = !sorting["ascending"]; else { @@ -866,7 +877,7 @@ function onHeaderClick(event) { } refreshCurrentFolder(); - + Event.stop(event); } @@ -956,35 +967,33 @@ var messageListData = function(type) { /* a model for a futur refactoring of the sortable table headers mechanism */ -function configureMessageListHeaders(cells) { - for (var i = 0; i < cells.length; i++) { - var currentCell = $(cells[i]); - Event.observe(currentCell, "click", - onHeaderClick.bindAsEventListener(currentCell)); - //Event.observe(currentCell, "mousedown", listRowMouseDownHandler); + +function configureMessageListEvents(table) { + if (table) { + // Each body row can load a message + Event.observe(table, "mousedown", + onMessageSelectionChange.bindAsEventListener(table)); + + // Sortable columns + configureSortableTableHeaders(table); } } -function configureMessageListEvents() { - var messageList = $("messageList"); - if (messageList) { - Event.observe(messageList, "mousedown", - onMessageSelectionChange.bindAsEventListener(messageList)); - - configureMessageListHeaders(messageList.tHead.rows[0].cells); - - var cell = messageList.tHead.rows[1].cells[0]; +function configureMessageListBodyEvents(table) { + if (table) { + // Page navigation + var cell = table.tHead.rows[1].cells[0]; if ($(cell).hasClassName("tbtv_navcell")) { var anchors = $(cell).childNodesWithTag("a"); for (var i = 0; i < anchors.length; i++) Event.observe(anchors[i], "click", openMailboxAtIndex.bindAsEventListener(anchors[i])); } - rows = messageList.tBodies[0].rows; + rows = table.tBodies[0].rows; for (var i = 0; i < rows.length; i++) { Event.observe(rows[i], "mousedown", onRowClick); Event.observe(rows[i], "contextmenu", onMessageContextMenu.bindAsEventListener(rows[i])); - + rows[i].dndTypes = function() { return new Array("mailRow"); }; rows[i].dndGhost = messageListGhost; rows[i].dndDataForType = messageListData; diff --git a/UI/WebServerResources/SchedulerUI.css b/UI/WebServerResources/SchedulerUI.css index 8bea4af88..18719a020 100644 --- a/UI/WebServerResources/SchedulerUI.css +++ b/UI/WebServerResources/SchedulerUI.css @@ -69,7 +69,8 @@ UL#tasksList, UL#calendarList overflow-x: hidden; } UL#calendarList -{ clear: both; +{ clear: left; + width: 100%; height: 10.5em; margin: 0px; } @@ -266,13 +267,19 @@ TABLE#dateSelectorTable border: 1px solid #deebf7; } TABLE#eventsList -{ display: block; - position: relative; - width: 100%; } +{ width: 100%; } -TABLE#eventsList td.headerTitle, -TABLE#eventsList td.headerLocation -{ width: 35%; } +TABLE#eventsList TD.headerTitle, +TABLE#eventsList TD.headerDateTime +{ width: 30%; } + +TABLE#eventsList TD, +TABLE#eventsList TH +{ overflow: hidden; + white-space: nowrap; } /* pre, normal, nowrap */ + +TABLE#eventsList TH +{ white-space: pre; } ._unfocused#dateSelector TD._selected, UL._unfocused > LI._selected, diff --git a/UI/WebServerResources/SchedulerUI.js b/UI/WebServerResources/SchedulerUI.js index 8a4d6aa42..043d4ddcd 100644 --- a/UI/WebServerResources/SchedulerUI.js +++ b/UI/WebServerResources/SchedulerUI.js @@ -307,16 +307,15 @@ function eventsListCallback(http) { var div = $("eventsListView"); document.eventsListAjaxRequest = null; - var table = $("eventsList").tBodies[0]; + var table = $("eventsList"); var params = parseQueryParameters(http.callbackData); sortKey = params["sort"]; sortOrder = params["desc"]; - configureSortableTableHeaders(); var data = http.responseText.evalJSON(true); for (var i = 0; i < data.length; i++) { var row = document.createElement("tr"); - table.appendChild(row); + table.tBodies[0].appendChild(row); $(row).addClassName("eventRow"); row.setAttribute("id", escape(data[i][0])); row.cname = escape(data[i][0]); @@ -771,7 +770,7 @@ function calendarDisplayCallback(http) { if (http.readyState == 4 && http.status == 200) { document.dayDisplayAjaxRequest = null; - div.innerHTML = http.responseText; + div.update(http.responseText); if (http.callbackData["view"]) currentView = http.callbackData["view"]; if (http.callbackData["day"]) @@ -927,8 +926,8 @@ function _loadTasksHref(href) { } function onHeaderClick(event) { -// log("onHeaderClick: " + this.link); - _loadEventHref(this.link); + //log("onHeaderClick: " + this.link); + //_loadEventHref(this.link); preventDefault(event); } @@ -1544,6 +1543,8 @@ function configureLists() { list = $("eventsList"); list.multiselect = true; + //configureSortableTableHeaders(list); + TableKit.Resizable.init(list, {'trueResize' : true, 'keepWidth' : true}); Event.observe(list, "mousedown", onEventsSelectionChange.bindAsEventListener(list)); var div = list.parentNode; diff --git a/UI/WebServerResources/generic.css b/UI/WebServerResources/generic.css index 861e7d2fc..d694da7c9 100644 --- a/UI/WebServerResources/generic.css +++ b/UI/WebServerResources/generic.css @@ -701,6 +701,20 @@ INPUT.checkBox -moz-border-bottom-colors: #000 #fff; -moz-border-right-colors: #000 #fff; } +/* tablekit resizable columns */ + +TABLE TD.resize-handle-active +{ cursor: e-resize; } + +DIV.resize-handle +{ cursor: e-resize; + width: 2px; + border-right: 1px solid #fff; + position: absolute; + top: 0; + left: 0; + max-height: 2em; } + @media print { BODY diff --git a/UI/WebServerResources/generic.js b/UI/WebServerResources/generic.js index 9a7c60538..e341d4be0 100644 --- a/UI/WebServerResources/generic.js +++ b/UI/WebServerResources/generic.js @@ -222,7 +222,7 @@ function openContactWindow(url, wId) { return w; } -function openMailComposeWindow(url, wId) { log (url); +function openMailComposeWindow(url, wId) { if (!wId) wId = "" + (new Date().getTime()); var w = window.open(url, wId, @@ -1046,7 +1046,8 @@ function accessToSubscribedFolder(serverFolder) { } function listRowMouseDownHandler(event) { - preventDefault(event); + preventDefault(event); + //Event.stop(event); } /* tabs */ @@ -1301,7 +1302,6 @@ function onLoadHandler(event) { initMenus(); initTabs(); configureDragHandles(); - configureSortableTableHeaders(); configureLinkBanner(); translateLabels(); var progressImage = $("progressIndicator"); @@ -1326,14 +1326,11 @@ function onBodyClickContextMenu(event) { preventDefault(event); } -function configureSortableTableHeaders() { - var headers = document.getElementsByClassName("sortableTableHeader"); +function configureSortableTableHeaders(table) { + var headers = $(table).getElementsByClassName("sortableTableHeader"); for (var i = 0; i < headers.length; i++) { var header = headers[i]; - var anchor = $(header).childNodesWithTag("a")[0]; - if (anchor) - Event.observe(anchor, "click", - onHeaderClick.bindAsEventListener(anchor)); + Event.observe(header, "click", onHeaderClick.bindAsEventListener(header)) } } diff --git a/UI/WebServerResources/tablekit.js b/UI/WebServerResources/tablekit.js index b7e78ffbe..cda8431a4 100644 --- a/UI/WebServerResources/tablekit.js +++ b/UI/WebServerResources/tablekit.js @@ -535,6 +535,16 @@ TableKit.Resizable = { Event.observe(c, 'mouseout', TableKit.Resizable.killDetect); }); }, + reload : function(table) { + table = $(table); + var cells = TableKit.getHeaderCells(table); + cells.each(function(c){ + c = $(c); + Event.stopObserving(c, 'mouseover', TableKit.Resizable.initDetect); + Event.stopObserving(c, 'mouseout', TableKit.Resizable.killDetect); + }); + TableKit.Resizable.init(table); + }, resize : function(table, index, w) { var cell; if(typeof index === 'number') {