From 082212d13f5caa04c85a99d13a7d6c4f627f10c2 Mon Sep 17 00:00:00 2001 From: Wolfgang Sourdeau Date: Thu, 13 Jul 2006 19:13:18 +0000 Subject: [PATCH] - added code to handle cascading menus, drag handles (DIV separators) and a debugging log window; Monotone-Parent: 71f5497685935ad02acaf78a809e3fbb32e91905 Monotone-Revision: 4b71e3eef15cd1ab9ca89e11d3ac734a8d821243 Monotone-Author: wsourdeau@inverse.ca Monotone-Date: 2006-07-13T19:13:18 Monotone-Branch: ca.inverse.sogo --- UI/Templates/MailerUI/UIxMailListView.wox | 63 +++++++- UI/Templates/MailerUI/UIxMailMainFrame.wox | 12 +- UI/WebServerResources/UIxMailToSelection.js | 6 + UI/WebServerResources/generic.js | 154 +++++++++++++++++++- UI/WebServerResources/mailer.css | 19 +++ UI/WebServerResources/uix.css | 25 ++++ 6 files changed, 266 insertions(+), 13 deletions(-) diff --git a/UI/Templates/MailerUI/UIxMailListView.wox b/UI/Templates/MailerUI/UIxMailListView.wox index f68138718..bf97a2d6c 100644 --- a/UI/Templates/MailerUI/UIxMailListView.wox +++ b/UI/Templates/MailerUI/UIxMailListView.wox @@ -31,17 +31,29 @@ onclick="">
    • + onclick="">
    • + onclick="">
    • + onclick="">
    • + onclick="">
    • + +
    diff --git a/UI/Templates/MailerUI/UIxMailMainFrame.wox b/UI/Templates/MailerUI/UIxMailMainFrame.wox index a77fbe86f..3fd53f82d 100644 --- a/UI/Templates/MailerUI/UIxMailMainFrame.wox +++ b/UI/Templates/MailerUI/UIxMailMainFrame.wox @@ -65,7 +65,7 @@
    -
    +
    @@ -79,7 +79,15 @@
    -
    +
    +
    + +
    diff --git a/UI/WebServerResources/UIxMailToSelection.js b/UI/WebServerResources/UIxMailToSelection.js index 1966931ba..caa5f2a15 100644 --- a/UI/WebServerResources/UIxMailToSelection.js +++ b/UI/WebServerResources/UIxMailToSelection.js @@ -127,9 +127,15 @@ function addressFieldGotFocus(sender) { idx = this.getIndexFromIdentifier(sender.id); if ((lastIndex == idx) || (idx == 0)) return; this.removeLastEditedRowIfEmpty(); + + + return false; } + function addressFieldLostFocus(sender) { lastIndex = this.getIndexFromIdentifier(sender.id); + + return false; } function removeLastEditedRowIfEmpty() { diff --git a/UI/WebServerResources/generic.js b/UI/WebServerResources/generic.js index 0befa66e0..7b32d0112 100644 --- a/UI/WebServerResources/generic.js +++ b/UI/WebServerResources/generic.js @@ -24,6 +24,18 @@ /* generic stuff */ +logWindow = window.open('', 'logWindow', + 'directories = no; location = no; menubar = no; resizable = no;' + + 'scrollbars = yes; status = no; toolbar = no; width = 80em; height = 25em;'); +logWindow.document.write('JavaScript log' + + '' + + '
    ' + +''); +logWindow.resizeTo(640,480); +logArea = logWindow.document.getElementById('logArea'); +logArea.innerHTML = ''; + function ml_stripActionInURL(url) { if (url[url.length - 1] != '/') { var i; @@ -282,9 +294,10 @@ function onRowClick(node, event) { /* popup menus */ -bodyOnClick = ""; -acceptClick = false; -menuClickNode = null; +var bodyOnClick = ""; +var acceptClick = false; +var menuClickNode = null; +var currentSubmenu = null; function onMenuClick(node, event, menuId) { @@ -295,9 +308,11 @@ function onMenuClick(node, event, menuId) acceptClick = false; bodyOnClick = "" + document.body.getAttribute("onclick"); document.body.setAttribute("onclick", "onBodyClick('" + menuId + "'); return false;"); - popup = document.getElementById(menuId); - popup.setAttribute("style", "visibility: visible; top: " + event.pageY - + "px; left: " + event.pageX + "px;" ); + var popup = document.getElementById(menuId); + hideMenu(popup); + popup.style.top = event.pageY + "px"; + popup.style.left = event.pageX + "px"; + popup.style.visibility = "visible"; menuClickNode = node; return false; @@ -310,13 +325,25 @@ function onBodyClick(menuId) else { popup = document.getElementById(menuId); - popup.setAttribute("style", "visibility: hidden"); + hideMenu(popup); document.body.setAttribute("onclick", bodyOnClick); } return false; } +function hideMenu(menuNode) +{ +// log('hiding menu "' + menuNode.getAttribute('id') + '"'); + if (menuNode.submenu) + { + hideMenu(menuNode.submenu); + menuNode.submenu = null; + } + + menuNode.style.visibility = "hidden"; +} + function onMenuEntryClick(node, event, menuId) { id = node.getAttribute("id"); @@ -325,3 +352,116 @@ function onMenuEntryClick(node, event, menuId) return false; } +function log(message) { + if (logArea) + logArea.innerHTML = logArea.innerHTML + message + '
    ' + "\n"; +} + +function dropDownSubmenu(event) +{ + var node = event.target; + var submenu = node.getAttribute("submenu"); + if (submenu && submenu != "") { + if (node.parentNode.parentNode.submenu) + hideMenu(node.parentNode.parentNode.submenu); + + var submenuNode = document.getElementById(submenu); + node.parentNode.parentNode.submenu = submenuNode; + var menuTop = (node.parentNode.parentNode.offsetTop + + node.offsetTop - 1); + var menuLeft = (node.parentNode.parentNode.offsetLeft + + node.parentNode.parentNode.offsetWidth + - 2); + submenuNode.style.top = menuTop + "px"; + submenuNode.style.left = menuLeft + "px"; + submenuNode.style.visibility = "visible"; + } +} + +/* drag handle */ + +var dragHandle; +var dragHandleOrigX; +var dragHandleOrigLeft; +var dragHandleOrigRight; + +function startHandleDragging(event) { + if (event.button == 0) { + var leftBlock = event.target.getAttribute('leftblock'); + var rightBlock = event.target.getAttribute('rightblock'); + + dragHandle = event.target; + dragHandleOrigX = dragHandle.offsetLeft; + dragHandleOrigLeft = document.getElementById(leftBlock).offsetWidth; + dragHandleOrigRight = document.getElementById(rightBlock).offsetLeft; + + document.body.setAttribute('onmouseup', 'stopHandleDragging(event);'); + document.body.setAttribute('onmousemove', 'dragHandleMove(event, "' + + leftBlock + + '", "' + + rightBlock + + '");'); + document.body.style.cursor = "e-resize"; + + dragHandleMove(event, leftBlock, rightBlock); + event.cancelBubble = true; + } + + return false; +} + +function stopHandleDragging(event) { + var diffX = (event.clientX - dragHandleOrigX + - (dragHandle.offsetWidth / 2)); + var lBlock + = document.getElementById(dragHandle.getAttribute('leftblock')); + var rBlock + = document.getElementById(dragHandle.getAttribute('rightblock')); + + lBlock.style.width = (dragHandleOrigLeft + diffX) + 'px'; + rBlock.style.left = (dragHandleOrigRight + diffX) + 'px'; + + document.body.setAttribute('onmousemove', ''); + document.body.setAttribute('onmouseup', ''); + document.body.setAttribute('style', ''); + event.cancelBubble = true; + + return false; +} + +function dragHandleMove(event, leftBlock, rightBlock) { + if (typeof(dragHandle) == undefined + || !dragHandle) + stopHandling(event); + else { + var width = dragHandle.offsetWidth; + + var hX = event.clientX; + if (hX > -1) { + var newLeft = hX - (width / 2); + + dragHandle.style.left = newLeft + 'px'; + event.cancelBubble = true; + + return false; + } + } +} + +function dragHandleDoubleClick(event) { + dragHandle = event.target; + var lBlock + = document.getElementById(dragHandle.getAttribute('leftblock')); + var lLeft = lBlock.offsetLeft; + + if (dragHandle.offsetLeft > lLeft) { + var rBlock + = document.getElementById(dragHandle.getAttribute('rightblock')); + var leftDiff = rBlock.offsetLeft - dragHandle.offsetLeft; + + dragHandle.style.left = lLeft + 'px'; + lBlock.style.width = '0px'; + rBlock.style.left = (lLeft + leftDiff) + 'px'; + } +} + diff --git a/UI/WebServerResources/mailer.css b/UI/WebServerResources/mailer.css index 907adf82f..4d9e17d0f 100644 --- a/UI/WebServerResources/mailer.css +++ b/UI/WebServerResources/mailer.css @@ -544,3 +544,22 @@ SPAN.searchBox INPUT background-repeat: no-repeat; background-position: 2px 2px; } + + +/* drag handles */ +DIV#dragHandle +{ + position: absolute; + z-index: 1; + top: 5.5em; + left: 14.6em; + width: .4em; + bottom: 0px; +} + +DIV#dragHandle:active +{ + cursor: e-resize; + background: #dbdad5; + -moz-opacity: 0.5; +} diff --git a/UI/WebServerResources/uix.css b/UI/WebServerResources/uix.css index be9a686b6..49fe177c9 100644 --- a/UI/WebServerResources/uix.css +++ b/UI/WebServerResources/uix.css @@ -378,6 +378,7 @@ SPAN.toolbarButton:active padding-bottom: .2em; margin: 0px; width: auto; + white-space: nowrap; } .menu LI:hover @@ -394,3 +395,27 @@ SPAN.toolbarButton:active border-top: 1px solid #aaa; border-bottom: 1px solid #fff; } + +.menu LI.submenu +{ + padding-right: .5em; + background-image: url('submenu.gif'); + background-position: 98% 50%; + background-repeat: no-repeat; } + +.menu LI.submenu:hover +{ + background-image: url('submenu-active.gif'); +} + +DIV.log#logArea +{ + z-index: 1000; + font-family: monospace; + position: absolute; + background: #000; + color: #fff; + top: 0px; + left: 0px; + width: 100%; +}