From 08207c46d07ca650619db4d30319e022d66e3737 Mon Sep 17 00:00:00 2001 From: Wolfgang Sourdeau Date: Fri, 25 Aug 2006 20:46:29 +0000 Subject: [PATCH] Monotone-Parent: 2e8ad34005721407e216ea0f211d634d0dcc3e72 Monotone-Revision: 6fa26b1733ea260edb32bcddc77494ec35d87765 Monotone-Author: wsourdeau@inverse.ca Monotone-Date: 2006-08-25T20:46:29 Monotone-Branch: ca.inverse.sogo --- ChangeLog | 3 + UI/WebServerResources/generic.css | 154 ++++++++++++++++++++++++++++-- UI/WebServerResources/generic.js | 63 +++++++++++- 3 files changed, 209 insertions(+), 11 deletions(-) diff --git a/ChangeLog b/ChangeLog index b9c0756e4..b6b6ad7b3 100644 --- a/ChangeLog +++ b/ChangeLog @@ -1,5 +1,8 @@ 2006-08-25 Wolfgang Sourdeau + * UI/WebServerResources/generic.js: added code for handling tabbed + views. + * UI/Common/UIxPageFrame.m ([UIxPageFrame -productFrameworkName]): returns the bundle name associated to the current running product. diff --git a/UI/WebServerResources/generic.css b/UI/WebServerResources/generic.css index 2ef9e3288..7934c67ab 100644 --- a/UI/WebServerResources/generic.css +++ b/UI/WebServerResources/generic.css @@ -82,7 +82,7 @@ a:hover { /* tabs */ -.tab { +.oldtab { color: #000000; background-color: #e8e8e0; text-decoration: none; @@ -92,13 +92,13 @@ a:hover { border-right: 1px solid #06348b; } -.tab a { +.oldtab a { color: #000000; border: none; text-decoration: none; } -.tab_selected { +.oldtab_selected { color: #000000; background-color: #f5f5e9; text-decoration: none; @@ -109,13 +109,13 @@ a:hover { border-right: 1px solid #06348b; } -.tab_selected a { +.oldtab_selected a { color: #000000; border: none; text-decoration: none; } -.tabview_body { +.oldtabview_body { background-color: #f5f5e9; } @@ -353,7 +353,7 @@ INPUT.button:active -moz-border-right-colors: ThreeDDarkShadow ThreeDShadow transparent; margin: 0px; padding: 1px 0px; - height: 3.8em; + height: 3.54em; background-color: #dbdad5; -moz-appearance: toolbar !important; white-space: nowrap; @@ -656,9 +656,9 @@ td img.tbtv_sortcell height: 12px; } +TD.subjectCell, td.tbtv_subject_headercell { - width: 50%; overflow: hidden; } @@ -694,3 +694,143 @@ INPUT#searchValue background-position: 2px 2px; color: #aaa; } + +DIV#noJavascriptError +{ + position: absolute; + background: #aaa; + -moz-opacity: 0.6; + top: 0px; + left: 0px; + right: 0px; + bottom: 0px; + text-align: center; +} + +DIV.noJavascriptErrorMessage +{ + position: absolute; + border-top: 2px solid #fffffb; + border-left: 2px solid #fffffb; + border-bottom: 2px solid #888; + border-right: 2px solid #888; + -moz-border-top-colors: -moz-buttonhoverface ThreeDHighlight; + -moz-border-left-colors: -moz-buttonhoverface ThreeDHighlight; + -moz-border-bottom-colors: ThreeDDarkShadow ThreeDShadow transparent; + -moz-border-right-colors: ThreeDDarkShadow ThreeDShadow transparent; + padding: 1em; + top: 10em; + left: 10em; + width: 24em; + margin: 0px auto; + background: #fff; + -moz-opacity: 1.0; + color: #000; + background: #dedede; +} + +DIV.noJavascriptErrorMessage A +{ + float: right; + cursor: default; + margin: 0px auto; + padding: .2em; + border-top: 2px solid #fffffb; + border-left: 2px solid #fffffb; + border-bottom: 2px solid #888; + border-right: 2px solid #888; + -moz-border-top-colors: -moz-buttonhoverface ThreeDHighlight; + -moz-border-left-colors: -moz-buttonhoverface ThreeDHighlight; + -moz-border-bottom-colors: ThreeDDarkShadow ThreeDShadow transparent; + -moz-border-right-colors: ThreeDDarkShadow ThreeDShadow transparent; + text-decoration: none; + color: inherit; +} + +DIV.noJavascriptErrorMessage A:hover +{ + color: inherit; + background: -moz-buttonhoverface; +} + +DIV.noJavascriptErrorMessage A:active +{ + color: -moz-buttonhovertext; + background-color: #c4c2bd; + -moz-border-bottom-colors: -moz-buttonhoverface ThreeDHighlight; + -moz-border-right-colors: -moz-buttonhoverface ThreeDHighlight; + -moz-border-top-colors: ThreeDShadow ThreeDDarkShadow; + -moz-border-left-colors: ThreeDShadow ThreeDDarkShadow; +} + +/* tabs */ +DIV.tabsContainer +{ + position: relative; + color: #000; + background: #dbdad5; + margin-top: 1.5em; + padding-top: 1em; + border-top: 2px solid #fffffb; + border-left: 2px solid #fffffb; + border-right: 2px solid #888; + border-bottom: 2px solid #888; + -moz-border-top-colors: -moz-buttonhoverface ThreeDHighlight; + -moz-border-left-colors: -moz-buttonhoverface ThreeDHighlight; + -moz-border-right-colors: ThreeDDarkShadow ThreeDShadow transparent; + -moz-border-bottom-colors: ThreeDDarkShadow ThreeDShadow transparent; +} + +DIV.tabsContainer UL +{ + cursor: default; + list-style-type: none; + list-style-image: none; + margin: 0px; + margin-top: -2.4em; + padding: 0px; +} + +DIV.tabsContainer UL LI +{ + z-index: 3; + float: left; + padding: 0em .5em; + padding-top: 1px; + border-top: 2px solid #fffffb; + border-bottom: 0px solid #fffffb; + border-right: 2px solid #888; + -moz-border-top-colors: -moz-buttonhoverface ThreeDHighlight; + -moz-border-right-colors: ThreeDDarkShadow ThreeDShadow transparent; + -moz-border-bottom-colors: -moz-buttonhoverface ThreeDHighlight; + color: #000; + background: #fff; + background: #c4c2bd; +} + +DIV.tabsContainer UL LI.first, +DIV.tabsContainer UL LI.active +{ + border-left: 2px solid #fffffb; + margin-left: -2px; + -moz-border-left-colors: -moz-buttonhoverface ThreeDHighlight; +} + +DIV.tabsContainer UL LI.active +{ + z-index: 5; + background: #dbdad5; + padding-top: 2px; + padding-bottom: 2px; + margin-top: -2px; +} + +DIV.tabsContainer DIV.tab +{ + position: absolute; + top: .5em; + left: .5em; + right: .5em; + bottom: .5em; + visibility: hidden; +} diff --git a/UI/WebServerResources/generic.js b/UI/WebServerResources/generic.js index d4de580c1..4e084cc53 100644 --- a/UI/WebServerResources/generic.js +++ b/UI/WebServerResources/generic.js @@ -909,6 +909,52 @@ function addContact(selectorId, contactId, contactName) return false; } +/* tabs */ +function initTabs() +{ + var containers = document.getElementsByClassName("tabsContainer"); + for (var x = 0; x < containers.length; x++) { + var container = containers[x]; + var nodes = container.getElementsByTagName("li"); + for (var i = 0; i < nodes.length; i++) { + nodes[i].addEventListener("mousedown", onTabMouseDown, true); + nodes[i].addEventListener("click", onTabClick, true); + } + + var firstTab = nodes[0]; + firstTab.addClassName("first"); + firstTab.addClassName("active"); + container.activeTab = firstTab; + + var target = $(firstTab.getAttribute("target")); + target.style.visibility = "visible;"; + } +} + +function onTabMouseDown(event) { + event.cancelBubble = true; + return false; +} + +function onTabClick(event) { + var node = event.target; + + var target = node.getAttribute("target"); + var container = node.parentNode.parentNode; + var oldTarget = container.activeTab.getAttribute("target"); + var content = $(target); + var oldContent = $(oldTarget); + + container.activeTab.removeClassName("active"); + container.activeTab = node; + container.activeTab.addClassName("active"); + + oldContent.style.visibility = "hidden;"; + content.style.visibility = "visible;"; + + return false; +} + /* custom extensions to the DOM api */ HTMLElement.prototype.addClassName = function(className) { var classStr = '' + this.getAttribute("class"); @@ -1025,17 +1071,26 @@ HTMLElement.prototype.getSelectedNodesId = function() { } HTMLTableElement.prototype.getSelectedRows = function() { - var rows = new Array(); - var tbody = (this.getElementsByTagName('tbody'))[0]; return tbody.getSelectedNodes(); } HTMLTableElement.prototype.getSelectedRowsId = function() { - var rows = new Array(); - var tbody = (this.getElementsByTagName('tbody'))[0]; return tbody.getSelectedNodesId(); } + +HTMLTableElement.prototype.selectRowsMatchingClass = function(className) { + var tbody = (this.getElementsByTagName('tbody'))[0]; + var nodes = tbody.childNodes; + for (var i = 0; i < nodes.length; i++) { + var node = nodes.item(i); + if (node instanceof HTMLElement ) { + var classStr = '' + node.getAttribute("class"); + if (classStr.indexOf(className, 0) >= 0) + selectNode(node); + } + } +}