Author: phuong_vu Date: 2011-09-05 06:59:49 -0400 (Mon, 05 Sep 2011) New Revision: 7298 Added: portal/branches/dom/portlet/web/src/main/webapp/skin/portal/webui/component/UINavigationPortlet/DefaultSkin/background/NavDownArrowHover.gif Modified: portal/branches/dom/examples/skins/simpleskin/src/main/webapp/skin/webPortlet/webui/component/UIPortalNavigationPortlet/Stylesheet.css portal/branches/dom/portlet/web/src/main/webapp/groovy/portal/webui/component/UIPortalNavigation.gtmpl portal/branches/dom/portlet/web/src/main/webapp/skin/portal/webui/component/UINavigationPortlet/DefaultSkin/background/NavDownArrow.gif portal/branches/dom/portlet/web/src/main/webapp/skin/portal/webui/component/UINavigationPortlet/DefaultStylesheet.css portal/branches/dom/web/eXoResources/src/main/webapp/javascript/eXo/portal/UIPortalControl.js portal/branches/dom/web/eXoResources/src/main/webapp/javascript/eXo/portal/UIPortalNavigation.js portal/branches/dom/web/eXoResources/src/main/webapp/javascript/eXo/webui/UIHorizontalTabs.js Log: [DOM] UIPortalNavigation optimization Modified: portal/branches/dom/examples/skins/simpleskin/src/main/webapp/skin/webPortlet/webui/component/UIPortalNavigationPortlet/Stylesheet.css =================================================================== --- portal/branches/dom/examples/skins/simpleskin/src/main/webapp/skin/webPortlet/webui/component/UIPortalNavigationPortlet/Stylesheet.css 2011-09-05 08:21:16 UTC (rev 7297) +++ portal/branches/dom/examples/skins/simpleskin/src/main/webapp/skin/webPortlet/webui/component/UIPortalNavigationPortlet/Stylesheet.css 2011-09-05 10:59:49 UTC (rev 7298) @@ -27,181 +27,80 @@ .UINavigationPortlet { border-bottom: 1px solid #e5e5e5; } - -.UINavigationPortlet .UINavigationBar { - white-space: nowrap; -} -.UINavigationPortlet .UINavigationBar .UIHorizontalTabs { - height: 30px; +.UINavigationPortlet ul { + list-style:none; + padding:0px; + margin:0px; } - -.UINavigationPortlet .UINavigationBar .UIHorizontalTabs .TabsContainer { + +.UINavigationPortlet .UINavigationBar { + white-space: nowrap; + padding: 0px 24px; + background: #f9f9f9; float: none; !position: relative; height: 30px; } -.UINavigationPortlet .UINavigationBar .LeftNavigationBar { +.UINavigationPortlet .UINavigationBar .UITab { + float:left;/* orientation=lt */ + float:right;/* orientation=rt */ + text-align:center; } -.UINavigationPortlet .UINavigationBar .RightNavigationBar { -} - -.UINavigationPortlet .UINavigationBar .MiddleNavigationBar { - padding: 0px 24px; - background: #f9f9f9; -} - -.UINavigationPortlet .UITab a.TabLabel { +.UINavigationPortlet .UITab a.TabIcon { display: block; - padding: 0px 0px 0px 20px; /* orientation=lt */ - padding: 0px 20px 0px 0px; /* orientation=rt */ - background-position: left; /* orientation=lt */ - background-position: right; /* orientation=rt */ + padding-left: 20px;/* orientation=lt */ + padding-right: 20px;/* orientation=rt */ + line-height: 27px; + background-position: right ;/* orientation=rt */ } -.UINavigationPortlet .UITab a.DefaultPageIcon { +.UINavigationPortlet .UITab > span a.DefaultPageIcon { background: none; padding: 0px; } -/*###########################--NavigationTabTab--############################*/ - -.UINavigationPortlet .UITab .NormalNavigationTab { - line-height: 230px; - margin: 0px 8px 0px 0px; +.UINavigationPortlet .SelectedNavigationTab .TabIcon { + font-weight:bold; } -.UINavigationPortlet .UITab .NormalNavigationTab .LeftTab { - line-height: 30px; +.UINavigationPortlet .UITab > span { + display:block; + padding: 0px; + margin-right: 24px;/* orientation=lt */ + margin-left: 24px;/* orientation=rt */ } -.UINavigationPortlet .UITab .NormalNavigationTab .RightTab { - line-height: 30px; +.UINavigationPortlet .UITab .DropDownArrowIcon { + background: url('background/NavDownArrow.gif') no-repeat right center; /* orientation=lt */ + background: url('background/NavDownArrow.gif') no-repeat left center; /* orientation=rt */ + padding: 0 16px 0 0px; /* orientation=lt */ + padding: 0 0px 0 16px; /* orientation=rt */ } -.UINavigationPortlet .UITab .NormalNavigationTab .MiddleTab { - line-height: 30px; - text-align: center; - padding: 0px 10px; -} - -.UINavigationPortlet .UITab .NormalNavigationTab .TabIcon { - line-height: 27px; -} - -.UINavigationPortlet .UITab .NormalNavigationTab a { - color: #565656; - font-weight: normal; -} - -.UINavigationPortlet .UITab .NormalNavigationTab .DropDownArrowIcon { - padding-right: 12px; /* orientation=lt */ - padding-left: 12px; /* orientation=rt */ - background: url('background/NavDownArrow.gif') no-repeat right; /* orientation=lt */ - background: url('background/NavDownArrow.gif') no-repeat left; /* orientation=rt */ - cursor: pointer; -} - -/*###############-Hightlight Navigation Tab -################*/ - -.UINavigationPortlet .UITab .HighlightNavigationTab { - line-height: 30px; - margin: 0px 8px 0px 0px; -} - -.UINavigationPortlet .UITab .HighlightNavigationTab .LeftTab { - line-height: 30px; -} - -.UINavigationPortlet .UITab .HighlightNavigationTab .RightTab { - line-height: 30px; -} - -.UINavigationPortlet .UITab .HighlightNavigationTab .MiddleTab { - height: 30px; - text-align: center; - padding: 0px 10px; -} - -.UINavigationPortlet .UITab .HighlightNavigationTab .TabIcon { - color: #000; - line-height: 27px; +.UINavigationPortlet .HighlightNavigationTab > span,.UINavigationPortlet .SelectedNavigationTab > span { border-bottom:3px solid #E5E5E5; } -.UINavigationPortlet .UITab .HighlightNavigationTab a { - color: #000; - font-weight: normal; -} +/*============ Submenu =====================*/ -.UINavigationPortlet .UITab .HighlightNavigationTab .DropDownArrowIcon { - padding-right: 12px; /* orientation=lt */ - padding-left: 12px; /* orientation=rt */ - background: url('background/NavDownArrow.gif') no-repeat right; /* orientation=lt */ - background: url('background/NavDownArrow.gif') no-repeat left; /* orientation=rt */ - cursor: pointer; -} -/*###############-Selected Navigation Tab-################*/ - -.UINavigationPortlet .UITab .SelectedNavigationTab { - line-height: 30px; - margin: 0px 8px 0px 0px; -} - - -.UINavigationPortlet .UITab .SelectedNavigationTab .LeftTab { - line-height: 30px; -} - -.UINavigationPortlet .UITab .SelectedNavigationTab .RightTab { - line-height: 30px; -} - -.UINavigationPortlet .UITab .SelectedNavigationTab .MiddleTab { - line-height: 30px; - text-align: center; - padding: 0px 10px; -} - -.UINavigationPortlet .UITab .SelectedNavigationTab .TabIcon { - color: #000; - line-height: 27px; - border-bottom: 3px solid #E5E5E5; -} - -.UINavigationPortlet .UITab .SelectedNavigationTab a { - color: #000; -} - -.UINavigationPortlet .UITab .SelectedNavigationTab .DropDownArrowIcon { - padding-right: 12px; /* orientation=lt */ - padding-left: 12px; /* orientation=rt */ - background: url('background/NavDownArrow.gif') no-repeat right center; /* orientation=lt */ - background: url('background/NavDownArrow.gif') no-repeat left center; /* orientation=rt */ - cursor: pointer; -} - .UINavigationPortlet .MenuItemContainer { white-space: nowrap; border: solid #b7b7b7 1px; /*fix for IE*/ text-align: left; /* orientation=lt */ text-align: right; /* orientation=rt */ + padding: 1px 1px 6px 1px; + background-color: #FFF; } -.UINavigationPortlet .MenuItemContainer .MenuItemDecorator { - border: 1px solid #fcfcfc; - background: white; - padding-bottom: 6px; -} - .UINavigationPortlet .MenuItemContainer .MenuItem { - border-bottom: 1px solid #fff; cursor: pointer; line-height: 24px; - height: 24px; width: auto; + height: 24px; + width: auto; display: block; white-space: nowrap; font-weight: normal; @@ -220,10 +119,7 @@ } .UINavigationPortlet .MenuItemContainer .SelectedItem { - line-height: 24px; - width: auto; background: #c7c7c7; - color: #3e8df0; } .UINavigationPortlet .MenuItemContainer .SelectedItem a { @@ -243,7 +139,9 @@ } .UINavigationPortlet .MenuItemContainer .ItemIcon { - height: 24px; width: auto; + height: 24px; + width: auto; + background-position: right;/* orientation=rt */ } .UINavigationPortlet .MenuItemContainer .MenuItem .ArrowIcon { @@ -251,72 +149,58 @@ width: auto; background: url('background/Button.gif') no-repeat right -48px; /* orientation=lt */ background: url('background/Button-rt.gif') no-repeat left -48px; /* orientation=rt */ + display:block; } /*============ Scroll Buttons =====================*/ .UINavigationPortlet .ScrollButtons { + margin: 10px 0 0 0; + display: none; + cursor:pointer; float: right; /* orientation=lt */ float: left; /* orientation=rt */ - padding-top: 10px; - display: none; + height: 15px; } +.UINavigationPortlet .ScrollButtons a { + display:block; + cursor:pointer; + width: 10px; + height: 15px; + float: left; /* orientation=lt */ + float: right; /* orientation=rt */ +} + .UINavigationPortlet .ScrollLeftButton { - cursor: pointer; background: url('background/Button.gif') no-repeat left -15px; /* orientation=lt */ background: url('background/Button-rt.gif') no-repeat right -15px; /* orientation=rt */ - width: 10px; - height: 15px; - padding-left: 12px; /* orientation=lt */ - padding-right: 12px; /* orientation=rt */ - margin: 0px 5px; + } .UINavigationPortlet .ScrollRightButton { - cursor: pointer; background: url('background/Button.gif') no-repeat right -15px; /* orientation=lt */ background: url('background/Button-rt.gif') no-repeat left -15px; /* orientation=rt */ - width: 10px; - height: 15px; } .UINavigationPortlet .DisableScrollLeftButton { - cursor: pointer; background: url('background/Button.gif') no-repeat left -30px; /* orientation=lt */ background: url('background/Button-rt.gif') no-repeat right -30px; /* orientation=rt */ - width: 10px; - height: 15px; - padding-left: 12px; /* orientation=lt */ - padding-right: 12px; /* orientation=rt */ - margin: 0px 5px; } .UINavigationPortlet .DisableScrollRightButton { - cursor: pointer; background: url('background/Button.gif') no-repeat right -30px; /* orientation=lt */ background: url('background/Button-rt.gif') no-repeat left -30px; /* orientation=rt */ - width: 10px; - height: 15px; } -.UINavigationPortlet .HighlightScrollLeftButton { - cursor: pointer; +.UINavigationPortlet .ScrollLeftButton:hover { background: url('background/Button.gif') no-repeat left top; /* orientation=lt */ background: url('background/Button-rt.gif') no-repeat right top; /* orientation=rt */ - width: 10px; - height: 15px; - padding-left: 12px; /* orientation=lt */ - padding-right: 12px; /* orientation=rt */ - margin: 0px 5px; } -.UINavigationPortlet .HighlightScrollRightButton { - cursor: pointer; +.UINavigationPortlet .ScrollRightButton:hover { background: url('background/Button.gif') no-repeat right top; /* orientation=lt */ background: url('background/Button-rt.gif') no-repeat left top; /* orientation=rt */ - width: 10px; - height: 15px; } /***********GroupNavigation*************/ Modified: portal/branches/dom/portlet/web/src/main/webapp/groovy/portal/webui/component/UIPortalNavigation.gtmpl =================================================================== --- portal/branches/dom/portlet/web/src/main/webapp/groovy/portal/webui/component/UIPortalNavigation.gtmpl 2011-09-05 08:21:16 UTC (rev 7297) +++ portal/branches/dom/portlet/web/src/main/webapp/groovy/portal/webui/component/UIPortalNavigation.gtmpl 2011-09-05 10:59:49 UTC (rev 7298) @@ -10,7 +10,7 @@ def rcontext = _ctx.getRequestContext(); JavascriptManager jsmanager = rcontext.getJavascriptManager(); - jsmanager.importJavascript('eXo.webui.UIHorizontalTabs'); + jsmanager.importJavascript('eXo.webui.UIHorizontalTabs'); jsmanager.importJavascript('eXo.portal.UIPortalNavigation'); jsmanager.addOnLoadJavascript('eXo.portal.UIPortalNavigation.onLoad'); jsmanager.addOnLoadJavascript('eXo.portal.UIPortalNavigation.loadScroll'); @@ -20,33 +20,15 @@ PortalURL nodeURL = nodeurl(); public void renderChildrenContainer(UserNode node, PortalURL nodeURL) { - print """ - <div class="MenuItemContainer" style="display: none;"> - <div class="MenuItemDecorator"> - <div class="LeftTopMenuDecorator"> - <div class="RightTopMenuDecorator"> - <div class="CenterTopMenuDecorator"><span></span></div> - </div> - </div> - <div class="LeftMiddleMenuDecorator"> - <div class="RightMiddleMenuDecorator"> - <div class="CenterMiddleMenuDecorator"> + print """ + <ul class="MenuItemContainer " style="display: none;"> """; for(child in node.getChildren()) { renderChildNode(child, nodeURL); } - print """ - </div> - </div> - </div> - <div class="LeftBottomMenuDecorator"> - <div class="RightBottomMenuDecorator"> - <div class="CenterBottomMenuDecorator"><span></span></div> - </div> - </div> - </div> - </div> - """; + print """ + </ul> + """; } public void renderChildNode(UserNode node, PortalURL nodeURL) { @@ -81,27 +63,18 @@ nodeURL.setAjax(uicomponent.isUseAjax()); actionLink = nodeURL.toString(); } - print """ - <div class="MenuItem $tabStyleNavigation" $getNodeURL> - <div class="$arrowIcon" title="$title"> - <div class="ItemIcon $icon"> - <a href="$actionLink">$label</a> - </div> - </div> + print """ + <li class="MenuItem $tabStyleNavigation $arrowIcon" title="$title" $getNodeURL> + <a class="ItemIcon $icon" onclick="$actionLink">$label</a> """; if (node.getChildren().size() > 0) { renderChildrenContainer(node, nodeURL); } - print "</div>"; + print "</li>"; } -%> -<div class="UINavigationBar <%=uicomponent.getCssClassName()%>"> - <div class="LeftNavigationBar"> - <div class="RightNavigationBar"> - <div class="MiddleNavigationBar"> - <div class="UIHorizontalTabs"> - <div class="TabsContainer"> +%> +<ul class="UINavigationBar <%=uicomponent.getCssClassName()%>" > <% MimeResponse res = _ctx.getRequestContext().getResponse(); @@ -119,63 +92,46 @@ if (node.getChildrenCount() > 0) { javax.portlet.ResourceURL resourceURL = res.createResourceURL(); resourceURL.setResourceID(node.getURI()); - %> - <div class="UITab" exo:getNodeURL="<%=resourceURL.toString() %>"> + %> + <li class="UITab $tabStyleNavigation" exo:getNodeURL="<%=resourceURL.toString() %>"> <% } else { %> - <div class="UITab"> - <% } %> - <div class="$tabStyleNavigation"> - <div class="LeftTab"> - <div class="RightTab"> - <div class="MiddleTab"> - <div class="TabIcon"> - <% - String arrowIcon = ""; - if (node.getChildrenCount() > 0) { - arrowIcon = "DropDownArrowIcon"; - } - String iconType = node.getIcon(); - if(iconType == null) iconType = "DefaultPageIcon"; - %> - <div class="$arrowIcon"> - <% - String label = node.getEncodedResolvedLabel(); - if(label.length() > 30) label = label.substring(0,29) + "..."; - if(node.getPageRef() != null) { - nodeURL.setNode(node); - nodeURL.setAjax(uicomponent.isUseAjax()); - print """ - <a class="TabLabel ${iconType}" href="$nodeURL">$label</a> - """; - } else {%> - <a class="TabLabel ${iconType}" href="javascript:void(0)">$label</a> - <%}%> - </div> - </div> - </div> - </div> - </div> - </div> + <li class="UITab $tabStyleNavigation"> + <% } + String arrowIcon = ""; + if (node.getChildrenCount() > 0) { + arrowIcon = "DropDownArrowIcon"; + } + String iconType = node.getIcon(); + if(iconType == null) iconType = "DefaultPageIcon"; + %> + <span class="$arrowIcon"> + <% + String label = node.getEncodedResolvedLabel(); + if(label.length() > 30) label = label.substring(0,29) + "..."; + if(node.getPageRef() != null) { + nodeURL.setNode(node); + nodeURL.setAjax(uicomponent.isUseAjax()); + print """ + <a class="TabIcon ${iconType}" href="$nodeURL">$label</a> + """; + } else {%> + <a class="TabIcon ${iconType}" href="javascript:void(0)">$label</a> + <%}%> + </span> <% /*Render Popup Menu*/ if (node.getChildren().size() > 0) { renderChildrenContainer(node, nodeURL); } %> - </div> + </li> <% } } } %> - <div class="ScrollButtons"> - <div class="ScrollLeftButton" title="<%= _ctx.appRes("UIPortalNavigation.Label.Previous") %>"> - <div class="ScrollRightButton" title="<%= _ctx.appRes("UIPortalNavigation.Label.Next") %>"><span></span></div> - </div> - </div> - </div> - </div> - </div> - </div> - </div> -</div> \ No newline at end of file + <li class="ScrollButtons"> + <a title="<%= _ctx.appRes("UIPortalNavigation.Label.Previous") %>" class="ScrollLeftButton"></a> + <a title="<%= _ctx.appRes("UIPortalNavigation.Label.Next") %>" class="ScrollRightButton"></a> + </li> +</ul> Modified: portal/branches/dom/portlet/web/src/main/webapp/skin/portal/webui/component/UINavigationPortlet/DefaultSkin/background/NavDownArrow.gif =================================================================== (Binary files differ) Added: portal/branches/dom/portlet/web/src/main/webapp/skin/portal/webui/component/UINavigationPortlet/DefaultSkin/background/NavDownArrowHover.gif =================================================================== (Binary files differ) Property changes on: portal/branches/dom/portlet/web/src/main/webapp/skin/portal/webui/component/UINavigationPortlet/DefaultSkin/background/NavDownArrowHover.gif ___________________________________________________________________ Added: svn:mime-type + application/octet-stream Modified: portal/branches/dom/portlet/web/src/main/webapp/skin/portal/webui/component/UINavigationPortlet/DefaultStylesheet.css =================================================================== --- portal/branches/dom/portlet/web/src/main/webapp/skin/portal/webui/component/UINavigationPortlet/DefaultStylesheet.css 2011-09-05 08:21:16 UTC (rev 7297) +++ portal/branches/dom/portlet/web/src/main/webapp/skin/portal/webui/component/UINavigationPortlet/DefaultStylesheet.css 2011-09-05 10:59:49 UTC (rev 7298) @@ -24,6 +24,12 @@ * version: $Id$ */ +.UINavigationPortlet ul { + list-style:none; + padding:0px; + margin:0px; +} + .UINavigationPortlet { background: #b6b6b6; padding: 0px 8px; @@ -31,209 +37,132 @@ .UINavigationPortlet .UINavigationBar { white-space: nowrap; -} - -.UINavigationPortlet .UINavigationBar .UIHorizontalTabs { - height: 33px; -} - -.UINavigationPortlet .UINavigationBar .UIHorizontalTabs .TabsContainer { - float: none; + background-color:#0e4aaa; + padding: 0 10px; + height: 33px; !position: relative; + -moz-border-radius-topleft: 5px; /* Firefox up to version 3.6 */ + -moz-border-radius-topright: 5px; + -webkit-border-top-left-radius: 5px; /* Safari, Chrome (before WebKit version 533) */ + -webkit-border-top-right-radius: 5px; + border-top-left-radius: 5px; /*Firefox 4; browsers with CSS3 support */ + border-top-right-radius: 5px; } -.UINavigationPortlet .UINavigationBar .LeftNavigationBar { - background: url('DefaultSkin/background/LeftNavigation.gif') no-repeat left top; - padding-left: 3px; - height: 32px; +.UINavigationPortlet .UINavigationBar .UITab { + float:left;/* orientation=lt */ + float:right;/* orientation=rt */ + margin: 6px 8px 0 0; + font-weight:bold; + text-align:center; } -.UINavigationPortlet .UINavigationBar .RightNavigationBar { - background: url('DefaultSkin/background/RightNavigation.gif') no-repeat right top; - padding-right: 3px; - height: 32px; -} - -.UINavigationPortlet .UINavigationBar .MiddleNavigationBar { - height: 32px; - background: url('DefaultSkin/background/MiddleNavigation.gif') repeat-x; - padding: 0px 8px 0px 8px; -} - -.UINavigationPortlet .UITab a.TabLabel { - display: block; - padding: 0px 0px 0px 20px; /* orientation=lt */ - padding: 0px 20px 0px 0px; /* orientation=rt */ - background-position: left; /* orientation=lt */ - background-position: right; /* orientation=rt */ -} - -.UINavigationPortlet .UITab a.DefaultPageIcon { - background: none; - padding: 0px; -} - -/*###########################--NavigationTabTab--############################*/ - -.UINavigationPortlet .UITab .NormalNavigationTab { - line-height: 26px; - margin: 6px 8px 0px 0px; -} - -.UINavigationPortlet .UITab .NormalNavigationTab .LeftTab { +.UINavigationPortlet .UITab > span { + padding: 0 6px; + color: #f57a00; line-height: 21px; - padding-left: 3px; + -moz-border-radius: 5px; + -webkit-border-radius: 5px; + border-radius: 5px; + display:block; + zoom:1; } -.UINavigationPortlet .UITab .NormalNavigationTab .RightTab { - line-height: 21px; - padding-right: 3px; +.UINavigationPortlet .UITab .DropDownArrowIcon { + padding: 0 19px 0 6px;/* orientation=lt */ + padding: 0 6px 0 19px;/* orientation=rt */ } -.UINavigationPortlet .UITab .NormalNavigationTab .MiddleTab { - line-height: 21px; - text-align: center; - padding: 0px 4px 0px 4px; +.UINavigationPortlet .UITab a.TabIcon { + display:block; + padding:0 0 0 20px;/* orientation=lt */ + padding:0 20px 0 0px;/* orientation=rt */ + background-position: right;/* orientation=rt */ } -.UINavigationPortlet .UITab .NormalNavigationTab .TabIcon { - color: #fff; - line-height: 21px; +.UINavigationPortlet .UITab > span a.DefaultPageIcon { + background:none; + padding:0; } -.UINavigationPortlet .UITab .NormalNavigationTab a { - color: #fff; -} -.UINavigationPortlet .UITab .NormalNavigationTab .DropDownArrowIcon { - padding-right: 16px; /* orientation=lt */ - padding-left: 16px; /* orientation=rt */ - background: url('DefaultSkin/background/NavDownArrow.gif') no-repeat right; /* orientation=lt */ - background: url('DefaultSkin/background/NavDownArrow.gif') no-repeat left; /* orientation=rt */ - cursor: pointer; - border-right: 1px solid #0a4da6; -} +/*###############-Selected Navigation Tab-################*/ -/*###############-Hightlight Navigation Tab -################*/ - -.UINavigationPortlet .UITab .HighlightNavigationTab { +.UINavigationPortlet .UINavigationBar .SelectedNavigationTab { line-height: 26px; - margin: 6px 8px 0px 0px; + background: url('DefaultSkin/background/NavigationTab.gif') no-repeat center -82px; + padding-bottom: 5px; } -.UINavigationPortlet .UITab .HighlightNavigationTab .LeftTab { - line-height: 26px; - padding-left: 3px; - background: url('DefaultSkin/background/NavigationTab.gif') no-repeat left -108px; +.UINavigationPortlet .SelectedNavigationTab > span { + background-color:#fff; } -.UINavigationPortlet .UITab .HighlightNavigationTab .RightTab { - line-height: 26px; - padding-right: 3px; - background: url('DefaultSkin/background/NavigationTab.gif') no-repeat right -130px; +.UINavigationPortlet .SelectedNavigationTab a { + color: #f57a00; } -.UINavigationPortlet .UITab .HighlightNavigationTab .MiddleTab { - height: 21px; - text-align: center; - padding: 0px 4px 0px 4px; - background: #6d94c8; - margin-bottom: 4px; +.UINavigationPortlet .SelectedNavigationTab .DropDownArrowIcon { + background:#fff url('DefaultSkin/background/NavDownArrowHover.gif') no-repeat right center; /* orientation=lt */ + background:#fff url('DefaultSkin/background/NavDownArrowHover.gif') no-repeat left center; /* orientation=rt */ } -.UINavigationPortlet .UITab .HighlightNavigationTab .TabIcon { - color: #fff; - line-height: 21px; -} +/*###########################-NormalNavigationTab--############################*/ -.UINavigationPortlet .UITab .HighlightNavigationTab a { - color: #fff; -} -.UINavigationPortlet .UITab .HighlightNavigationTab .DropDownArrowIcon { - padding-right: 16px; /* orientation=lt */ - padding-left: 16px; /* orientation=rt */ +.UINavigationPortlet .NormalNavigationTab .DropDownArrowIcon { background: url('DefaultSkin/background/NavDownArrow.gif') no-repeat right; /* orientation=lt */ background: url('DefaultSkin/background/NavDownArrow.gif') no-repeat left; /* orientation=rt */ - cursor: default; - border-right: 1px solid #6d94c8; + cursor: pointer; } -/*###############-Selected Navigation Tab-################*/ +/*###########################-Hightlight-NavigationTabTab--############################*/ -.UINavigationPortlet .UITab .SelectedNavigationTab { - line-height: 26px; - margin: 6px 8px 0px 0px; +.UINavigationPortlet .HighlightNavigationTab .TabIcon ,.UINavigationPortlet .NormalNavigationTab .TabIcon{ + color: #fff; } - -.UINavigationPortlet .UITab .SelectedNavigationTab .LeftTab { - line-height: 21px; - background: #0a4da6 url('DefaultSkin/background/NavigationTab.gif') no-repeat left -28px; - padding-left: 3px; +.UINavigationPortlet .HighlightNavigationTab > span { + background-color:#6D94C8; } -.UINavigationPortlet .UITab .SelectedNavigationTab .RightTab { - line-height: 21px; - background: #0a4da6 url('DefaultSkin/background/NavigationTab.gif') no-repeat right -55px; - padding-right: 3px; -} -.UINavigationPortlet .UITab .SelectedNavigationTab .MiddleTab { - line-height: 21px; - background: #0a4da6 url('DefaultSkin/background/NavigationTab.gif') repeat-x; - text-align: center; - padding: 0px 4px 0px 4px; +.UINavigationPortlet .HighlightNavigationTab .DropDownArrowIcon { + background:#6D94C8 url('DefaultSkin/background/NavDownArrow.gif') no-repeat right center; /* orientation=lt */ + background:#6D94C8 url('DefaultSkin/background/NavDownArrow.gif') no-repeat left center; /* orientation=rt */ } -.UINavigationPortlet .UITab .SelectedNavigationTab .TabIcon { - color: #f57a00; - line-height: 21px; - padding-bottom: 5px; - background: url('DefaultSkin/background/NavigationTab.gif') no-repeat center -82px;; -} +/*============ Submenu =====================*/ -.UINavigationPortlet .UITab .SelectedNavigationTab a { - color: #f57a00; -} - -.UINavigationPortlet .UITab .SelectedNavigationTab .DropDownArrowIcon { - padding-right: 16px; /* orientation=lt */ - padding-left: 16px; /* orientation=rt */ - background: url('DefaultSkin/background/NavDownArrow.gif') no-repeat right center; /* orientation=lt */ - background: url('DefaultSkin/background/NavDownArrow.gif') no-repeat left center; /* orientation=rt */ - cursor: pointer; - border-right: 1px solid white; -} - .UINavigationPortlet .MenuItemContainer { white-space: nowrap; border: solid #b7b7b7 1px; /*fix for IE*/ text-align: left; /* orientation=lt */ text-align: right; /* orientation=rt */ - z-index: 1; -} - -.UINavigationPortlet .MenuItemContainer .MenuItemDecorator { - border: 1px solid #fcfcfc; - background: white; - padding-bottom: 6px; + z-index: 1; + background: #FFF; + padding: 1px 1px 6px 1px; opacity: 0.9; - filter: alpha(opacity=90); } .UINavigationPortlet .MenuItemContainer .MenuItem { border-bottom: 1px solid #fff; cursor: pointer; line-height: 24px; - height: 24px; width: auto; + height: 24px; + width: auto; display: block; white-space: nowrap; font-weight: normal; - padding-left: 5px; /* orientation=lt */ - padding-right: 5px; /* orientation=rt */ + padding:0 5px; } +.UINavigationPortlet .MenuItemContainer .ArrowIcon{ + background: url('DefaultSkin/background/Button.gif') no-repeat right -46px; /* orientation=lt */ + background: url('DefaultSkin/background/Button-rt.gif') no-repeat left -46px; /* orientation=rt */ +} + + .UINavigationPortlet .MenuItemContainer .MenuItem a { padding: 0px 20px 0px 25px; /* orientation=lt */ padding: 0px 25px 0px 20px; /* orientation=rt */ @@ -247,11 +176,11 @@ .UINavigationPortlet .MenuItemContainer .SelectedItem { line-height: 24px; width: auto; - background: #c7c7c7; + background-color: #c7c7c7; color: #3e8df0; } -.UINavigationPortlet .MenuItemContainer .SelectedItem a { +.UINavigationPortlet .MenuItemContainer .SelectedItem a { color: #3e8df0; } @@ -268,127 +197,68 @@ } .UINavigationPortlet .MenuItemContainer .ItemIcon { - height: 24px; width: auto; -} - -.UINavigationPortlet .MenuItemContainer .MenuItem .ArrowIcon { height: 24px; width: auto; - background: url('DefaultSkin/background/Button.gif') no-repeat right -48px; /* orientation=lt */ - background: url('DefaultSkin/background/Button-rt.gif') no-repeat left -48px; /* orientation=rt */ -} + background-position: right;/* orientation=rt */ +} /*============ Scroll Buttons =====================*/ -.UINavigationPortlet .ScrollButtons { +.UINavigationPortlet .ScrollButtons { + margin: 10px 0 0 0; + display: none; + cursor:pointer; float: right; /* orientation=lt */ float: left; /* orientation=rt */ - padding-top: 10px; - display: none; + height: 15px; } +.UINavigationPortlet .ScrollButtons a { + display:block; + cursor:pointer; + width: 10px; + height: 15px; + float: left; /* orientation=lt */ + float: right; /* orientation=rt */ +} + .UINavigationPortlet .ScrollLeftButton { - cursor: pointer; background: url('DefaultSkin/background/Button.gif') no-repeat left -15px; /* orientation=lt */ background: url('DefaultSkin/background/Button-rt.gif') no-repeat right -15px; /* orientation=rt */ - width: 10px; - height: 15px; - padding-left: 12px; /* orientation=lt */ - padding-right: 12px; /* orientation=rt */ - margin: 0px 5px; + } .UINavigationPortlet .ScrollRightButton { - cursor: pointer; background: url('DefaultSkin/background/Button.gif') no-repeat right -15px; /* orientation=lt */ background: url('DefaultSkin/background/Button-rt.gif') no-repeat left -15px; /* orientation=rt */ - width: 10px; - height: 15px; } .UINavigationPortlet .DisableScrollLeftButton { - cursor: pointer; background: url('DefaultSkin/background/Button.gif') no-repeat left -30px; /* orientation=lt */ background: url('DefaultSkin/background/Button-rt.gif') no-repeat right -30px; /* orientation=rt */ - width: 10px; - height: 15px; - padding-left: 12px; /* orientation=lt */ - padding-right: 12px; /* orientation=rt */ - margin: 0px 5px; } .UINavigationPortlet .DisableScrollRightButton { - cursor: pointer; background: url('DefaultSkin/background/Button.gif') no-repeat right -30px; /* orientation=lt */ background: url('DefaultSkin/background/Button-rt.gif') no-repeat left -30px; /* orientation=rt */ - width: 10px; - height: 15px; } -.UINavigationPortlet .HighlightScrollLeftButton { - cursor: pointer; +.UINavigationPortlet .ScrollLeftButton:hover { background: url('DefaultSkin/background/Button.gif') no-repeat left top; /* orientation=lt */ background: url('DefaultSkin/background/Button-rt.gif') no-repeat right top; /* orientation=rt */ - width: 10px; - height: 15px; - padding-left: 12px; /* orientation=lt */ - padding-right: 12px; /* orientation=rt */ - margin: 0px 5px; } -.UINavigationPortlet .HighlightScrollRightButton { - cursor: pointer; +.UINavigationPortlet .ScrollRightButton:hover { background: url('DefaultSkin/background/Button.gif') no-repeat right top; /* orientation=lt */ background: url('DefaultSkin/background/Button-rt.gif') no-repeat left top; /* orientation=rt */ - width: 10px; - height: 15px; } /***********GroupNavigation*************/ -.UINavigationPortlet .GroupNavigation .LeftNavigationBar { - background: url('DefaultSkin/background/NavGroup.gif') no-repeat left top; -} -.UINavigationPortlet .GroupNavigation .RightNavigationBar { - background: url('DefaultSkin/background/NavGroup.gif') no-repeat right top; +.UINavigationPortlet .GroupNavigation { + background-color:#ffa200; } -.UINavigationPortlet .GroupNavigation .MiddleNavigationBar { - background: url('DefaultSkin/background/NavGroup.gif') repeat-x center bottom; -} - -.UINavigationPortlet .GroupNavigation .UITab .NormalNavigationTab .MiddleTab .DropDownArrowIcon { - border-right: 1px solid #ffa200; -} - -.UINavigationPortlet .GroupNavigation .UITab .HighlightNavigationTab .LeftTab { - background: url('DefaultSkin/background/NavigationTab.gif') no-repeat left -152px; -} - -.UINavigationPortlet .GroupNavigation .UITab .HighlightNavigationTab .RightTab { - background: url('DefaultSkin/background/NavigationTab.gif') no-repeat right -174px; -} - -.UINavigationPortlet .GroupNavigation .UITab .HighlightNavigationTab .MiddleTab { - background: #ffcf01; -} - -.UINavigationPortlet .GroupNavigation .UITab .HighlightNavigationTab .MiddleTab .DropDownArrowIcon { - border-right: 1px solid #ffcf01; -} - -.UINavigationPortlet .GroupNavigation .UITab .SelectedNavigationTab .LeftTab { - background: #ffa200 url('DefaultSkin/background/NavigationTab.gif') no-repeat left -28px; -} - -.UINavigationPortlet .GroupNavigation .UITab .SelectedNavigationTab .RightTab { - background: #ffa200 url('DefaultSkin/background/NavigationTab.gif') no-repeat right -55px; -} - -.UINavigationPortlet .GroupNavigation .UITab .SelectedNavigationTab .MiddleTab { - background: #ffa200 url('DefaultSkin/background/NavigationTab.gif') repeat-x; -} - -.UINavigationPortlet .GroupNavigation .UITab .SelectedNavigationTab .MiddleTab .DropDownArrowIcon { - border-right: 1px solid white; -} \ No newline at end of file +.UINavigationPortlet .GroupNavigation .HighlightNavigationTab > span { + background-color:#ffcf01; +} Modified: portal/branches/dom/web/eXoResources/src/main/webapp/javascript/eXo/portal/UIPortalControl.js =================================================================== --- portal/branches/dom/web/eXoResources/src/main/webapp/javascript/eXo/portal/UIPortalControl.js 2011-09-05 08:21:16 UTC (rev 7297) +++ portal/branches/dom/web/eXoResources/src/main/webapp/javascript/eXo/portal/UIPortalControl.js 2011-09-05 10:59:49 UTC (rev 7298) @@ -183,7 +183,7 @@ ScrollManager.prototype.loadElements = function(elementClass, clean) { if (clean) this.cleanElements(); this.elements.clear(); - this.elements.pushAll(eXo.core.DOMUtil.findDescendantsByClass(this.mainContainer, "div", elementClass)); + this.elements.pushAll(eXo.core.DOMUtil.findDescendantsByClass(this.mainContainer, "li", elementClass)); }; /** * Calculates the available space for the elements, and inits the elements array like this : Modified: portal/branches/dom/web/eXoResources/src/main/webapp/javascript/eXo/portal/UIPortalNavigation.js =================================================================== --- portal/branches/dom/web/eXoResources/src/main/webapp/javascript/eXo/portal/UIPortalNavigation.js 2011-09-05 08:21:16 UTC (rev 7297) +++ portal/branches/dom/web/eXoResources/src/main/webapp/javascript/eXo/portal/UIPortalNavigation.js 2011-09-05 10:59:49 UTC (rev 7298) @@ -50,7 +50,7 @@ var uiWorkingWorkspace = document.getElementById("UIWorkingWorkspace"); var uiNavPortlets = eXo.core.DOMUtil.findDescendantsByClass(uiWorkingWorkspace, "div", "UINavigationPortlet"); if (uiNavPortlets.length) { - var mainContainer = eXo.core.DOMUtil.findFirstDescendantByClass(uiNavPortlets[0], "div", "TabsContainer"); + var mainContainer = eXo.core.DOMUtil.findFirstDescendantByClass(uiNavPortlets[0], "ul", "UINavigationBar"); eXo.portal.UIPortalNavigation.init(uiNavPortlets[0], mainContainer, 0, 0); for (var i = 1; i < uiNavPortlets.length; ++i) { uiNavPortlets[i].style.display = "none"; @@ -71,10 +71,10 @@ */ UIPortalNavigation.prototype.buildMenu = function(popupMenu) { var DOMUtil = eXo.core.DOMUtil; - var topContainer = DOMUtil.findFirstDescendantByClass(popupMenu, "div", "TabsContainer"); + var topContainer = DOMUtil.findFirstDescendantByClass(popupMenu, "ul", "UINavigationBar"); topContainer.id = "PortalNavigationTopContainer"; // Top menu items - var topItems = DOMUtil.findDescendantsByClass(topContainer, "div", "UITab"); + var topItems = DOMUtil.findDescendantsByClass(topContainer, "li", "UITab"); for (var i = 0; i < topItems.length; i++) { var item = topItems[i]; item.onmouseover = eXo.portal.UIPortalNavigation.setTabStyleOnMouseOver ; @@ -88,7 +88,7 @@ /** * TODO: fix IE7; */ - var container = DOMUtil.findFirstDescendantByClass(item, "div", this.containerStyleClass); + var container = DOMUtil.findFirstDescendantByClass(item, "ul", this.containerStyleClass); if (container) { if (eXo.core.Browser.isIE6()) { container.style.width = item.offsetWidth + "px"; @@ -97,20 +97,19 @@ } } - var itemConts = DOMUtil.findDescendantsByClass(topContainer, "div", this.containerStyleClass); + var itemConts = DOMUtil.findDescendantsByClass(topContainer, "ul", this.containerStyleClass); for (var i = 0; i < itemConts.length; i++) { var cont = itemConts[i]; if(!cont.id) cont.id = DOMUtil.generateId("PortalNavigationContainer"); cont.resized = false; - var items = DOMUtil.findDescendantsByClass(cont, "div", this.tabStyleClass); + var items = DOMUtil.findDescendantsByClass(cont, "li", this.tabStyleClass); if(items.length == 0) cont.parentNode.removeChild(cont); for(var j = 0; j < items.length; j ++) { items[j].onmouseover = eXo.portal.UIPortalNavigation.onMenuItemOver; items[j].onmouseout = eXo.portal.UIPortalNavigation.onMenuItemOut; } } - }; /** * Sets the tab style on mouse over and mouse out @@ -132,31 +131,25 @@ //} UIPortalNavigation.prototype.generateContainer = function(data) { - var htmlFrags = "<div class='" + this.containerStyleClass + "' style='display: none;' id='"; + var htmlFrags = "<ul class='" + this.containerStyleClass + "' style='display: none;' id='"; htmlFrags += eXo.core.DOMUtil.generateId("PortalNavigationContainer") + "' resized='false'>"; - htmlFrags += "<div class='MenuItemDecorator'>"; - htmlFrags += "<div class='LeftTopMenuDecorator'><div class='RightTopMenuDecorator'>"; - htmlFrags += "<div class='CenterTopMenuDecorator'><span></span></div></div></div>"; - htmlFrags += "<div class='LeftMiddleMenuDecorator'><div class='RightMiddleMenuDecorator'>"; - htmlFrags += "<div class='CenterMiddleMenuDecorator'>"; + for (var i = 0; i < data.length; i++) { var node = data[i]; var actionLink = node.actionLink ? node.actionLink : "javascript:void(0);"; - htmlFrags += ("<div class='MenuItem " + (node.isSelected ? "SelectedItem'" : "NormalItem'")); + htmlFrags += ("<li class='MenuItem " + (node.hasChild ? "ArrowIcon " : "") + (node.isSelected ? "SelectedItem'" : "NormalItem'")); htmlFrags += (node.hasChild ? (" exo:getNodeURL='" + node.getNodeURL + "' ") : "" ); - htmlFrags += ("onmouseover='eXo.portal.UIPortalNavigation.onMenuItemOver(this)' onmouseout='eXo.portal.UIPortalNavigation.onMenuItemOut(this)'>"); - htmlFrags += ("<div class='" + (node.hasChild ? "ArrowIcon" : "") + "' title='" + node.label + "'>"); - htmlFrags += ("<div class='ItemIcon " + (node.icon ? node.icon : "DefaultPageIcon") + "'>"); - htmlFrags += ("<a href='" + actionLink + "'>" + (node.label.length > 40 ? node.label.substring(0,37) + "..." : node.label) + "</a>"); - htmlFrags += ("</div></div>"); + htmlFrags += ("onmouseover='eXo.portal.UIPortalNavigation.onMenuItemOver(this)' onmouseout='eXo.portal.UIPortalNavigation.onMenuItemOut(this)'"); + htmlFrags += ("' title='" + node.label + "'>"); + htmlFrags += ("<a class='ItemIcon " + (node.icon ? node.icon : "DefaultPageIcon") + "'" + + "href='" + actionLink + "'>" + (node.label.length > 40 ? node.label.substring(0,37) + "..." : node.label) + "</a>"); if (node.childs.length) { htmlFrags += eXo.portal.UIPortalNavigation.generateContainer(node.childs); } - htmlFrags += "</div>"; + htmlFrags += "</li>"; } - htmlFrags += "</div></div></div><div class='LeftBottomMenuDecorator'><div class='RightBottomMenuDecorator'>"; - htmlFrags += "<div class='CenterBottomMenuDecorator'><span></span></div></div></div></div></div>"; + htmlFrags += "</ul>"; return htmlFrags; }; @@ -169,7 +162,7 @@ eXo.portal.UIPortalNavigation.previousMenuItem = tab ; var getNodeURL = tab.getAttribute("exo:getNodeURL"); - var menuItemContainer = eXo.core.DOMUtil.findFirstDescendantByClass(tab, "div", eXo.portal.UIPortalNavigation.containerStyleClass); + var menuItemContainer = eXo.core.DOMUtil.findFirstDescendantByClass(tab, "ul", eXo.portal.UIPortalNavigation.containerStyleClass); if (getNodeURL && !menuItemContainer) { var jsChilds = ajaxAsyncGetRequest(getNodeURL,false) try { @@ -181,12 +174,12 @@ } var temp = document.createElement("div"); temp.innerHTML = eXo.portal.UIPortalNavigation.generateContainer(data); - tab.appendChild(eXo.core.DOMUtil.findFirstChildByClass(temp, "div", eXo.portal.UIPortalNavigation.containerStyleClass)); + tab.appendChild(eXo.core.DOMUtil.findFirstChildByClass(temp, "ul", eXo.portal.UIPortalNavigation.containerStyleClass)); } if (!eXo.portal.UIPortalNavigation.menuVisible) { var hideSubmenu = tab.getAttribute('hideSubmenu') ; - menuItemContainer = eXo.core.DOMUtil.findFirstDescendantByClass(tab, "div", eXo.portal.UIPortalNavigation.containerStyleClass); + menuItemContainer = eXo.core.DOMUtil.findFirstDescendantByClass(tab, "ul", eXo.portal.UIPortalNavigation.containerStyleClass); if (menuItemContainer && !hideSubmenu) { var DOMUtil = eXo.core.DOMUtil ; if(eXo.core.Browser.browserType == "ie") { @@ -197,7 +190,7 @@ for(var i = 0; i < uicomponents.length; i ++) { var navPortlet = DOMUtil.findFirstDescendantByClass(uicomponents[i], "div", "UINavigationPortlet") ; if(navPortlet && (navAncestor != navPortlet)) { - var tabsContainer = DOMUtil.findFirstDescendantByClass(navPortlet, "div", "TabsContainer"); + var tabsContainer = DOMUtil.findFirstDescendantByClass(navPortlet, "ul", "UINavigationBar"); tabsContainer.style.position = "static" ; } } @@ -213,15 +206,11 @@ UIPortalNavigation.prototype.setTabStyleOnMouseOut = function(e, src) { var tab = src || this; - var tabChildren = eXo.core.DOMUtil.getChildrenByTagName(tab, "div") ; - if (tabChildren.length <= 0) { - return ; - } - if (tabChildren[0].className != "HighlightNavigationTab") { + if (!eXo.core.DOMUtil.hasClass(tab, "HighlightNavigationTab")) { // highlights the tab eXo.webui.UIHorizontalTabs.changeTabNavigationStyle(tab, true); } else { - if(tabChildren.length <= 1 || tabChildren[1].id != eXo.portal.UIPortalNavigation.currentOpenedMenu) { + if(tab.id != eXo.portal.UIPortalNavigation.currentOpenedMenu) { // de-highlights the tab if it doesn't have a submenu (cond 1) or its submenu isn't visible (cond 2) eXo.webui.UIHorizontalTabs.changeTabNavigationStyle(tab, false); } @@ -357,7 +346,7 @@ for(var i = 0; i < uicomponents.length; i ++) { var navPortlet = DOMUtil.findFirstDescendantByClass(uicomponents[i], "div", "UINavigationPortlet") ; if(navPortlet) { - var tabsContainer = DOMUtil.findFirstDescendantByClass(navPortlet, "div", "TabsContainer"); + var tabsContainer = DOMUtil.findFirstDescendantByClass(navPortlet, "ul", "UINavigationBar"); tabsContainer.style.position = "relative" ; } } @@ -373,7 +362,7 @@ var DOMUtil = eXo.core.DOMUtil; var getNodeURL = menuItem.getAttribute("exo:getNodeURL"); - var subContainer = DOMUtil.findFirstDescendantByClass(menuItem, "div", eXo.portal.UIPortalNavigation.containerStyleClass); + var subContainer = DOMUtil.findFirstDescendantByClass(menuItem, "ul", eXo.portal.UIPortalNavigation.containerStyleClass); if (getNodeURL && !subContainer) { var jsChilds = ajaxAsyncGetRequest(getNodeURL,false) try { @@ -381,17 +370,16 @@ } catch (e) { } if (!data || !data.length) { - var arrow = DOMUtil.findFirstChildByClass(menuItem, "div", "ArrowIcon"); - DOMUtil.removeClass(arrow, "ArrowIcon"); + DOMUtil.removeClass(menuItem, "ArrowIcon"); menuItem.removeAttribute("exo:getNodeURL"); return; } var temp = document.createElement("div"); temp.innerHTML = eXo.portal.UIPortalNavigation.generateContainer(data); - menuItem.appendChild(eXo.core.DOMUtil.findFirstChildByClass(temp, "div", eXo.portal.UIPortalNavigation.containerStyleClass)); + menuItem.appendChild(eXo.core.DOMUtil.findFirstChildByClass(temp, "ul", eXo.portal.UIPortalNavigation.containerStyleClass)); } - subContainer = DOMUtil.findFirstDescendantByClass(menuItem, "div", eXo.portal.UIPortalNavigation.containerStyleClass); + subContainer = DOMUtil.findFirstDescendantByClass(menuItem, "ul", eXo.portal.UIPortalNavigation.containerStyleClass); if (subContainer) { eXo.portal.UIPortalNavigation.superClass.pushVisibleContainer(subContainer.id); eXo.portal.UIPortalNavigation.showMenuItemContainer(menuItem, subContainer) ; @@ -422,7 +410,7 @@ UIPortalNavigation.prototype.onMenuItemOut = function(menuItem) { if (!menuItem || !menuItem.nodeName) menuItem = this; - var subContainer = eXo.core.DOMUtil.findFirstDescendantByClass(menuItem, "div", eXo.portal.UIPortalNavigation.containerStyleClass); + var subContainer = eXo.core.DOMUtil.findFirstDescendantByClass(menuItem, "ul", eXo.portal.UIPortalNavigation.containerStyleClass); if (subContainer) { eXo.portal.UIPortalNavigation.superClass.pushHiddenContainer(subContainer.id); eXo.portal.UIPortalNavigation.superClass.popVisibleContainer(); @@ -446,12 +434,11 @@ uiNav.scrollMgr = eXo.portal.UIPortalControl.newScrollManager("PortalNavigationTopContainer"); uiNav.scrollMgr.initFunction = uiNav.initScroll; // Adds the tab elements to the manager - var tabs = eXo.core.DOMUtil.findAncestorByClass(portalNav, "UIHorizontalTabs"); - uiNav.scrollMgr.mainContainer = tabs; - uiNav.scrollMgr.arrowsContainer = eXo.core.DOMUtil.findFirstDescendantByClass(tabs, "div", "ScrollButtons"); + uiNav.scrollMgr.mainContainer = portalNav; + uiNav.scrollMgr.arrowsContainer = eXo.core.DOMUtil.findFirstDescendantByClass(portalNav, "li", "ScrollButtons"); uiNav.scrollMgr.loadElements("UITab"); // Configures the arrow buttons - var arrowButtons = eXo.core.DOMUtil.findDescendantsByTagName(uiNav.scrollMgr.arrowsContainer, "div"); + var arrowButtons = eXo.core.DOMUtil.findDescendantsByTagName(uiNav.scrollMgr.arrowsContainer, "a"); if (arrowButtons.length == 2) { uiNav.scrollMgr.initArrowButton(arrowButtons[0], "left", "ScrollLeftButton", "HighlightScrollLeftButton", "DisableScrollLeftButton"); uiNav.scrollMgr.initArrowButton(arrowButtons[1], "right", "ScrollRightButton", "HighlightScrollRightButton", "DisableScrollRightButton"); Modified: portal/branches/dom/web/eXoResources/src/main/webapp/javascript/eXo/webui/UIHorizontalTabs.js =================================================================== --- portal/branches/dom/web/eXoResources/src/main/webapp/javascript/eXo/webui/UIHorizontalTabs.js 2011-09-05 08:21:16 UTC (rev 7297) +++ portal/branches/dom/web/eXoResources/src/main/webapp/javascript/eXo/webui/UIHorizontalTabs.js 2011-09-05 10:59:49 UTC (rev 7298) @@ -38,12 +38,11 @@ if (clickedEle == null) return; if (!eXo.core.DOMUtil.hasClass(clickedEle, "UITab")) clickedEle = eXo.core.DOMUtil.findAncestorByClass(clickedEle, "UITab") ; - var tabStyle = eXo.core.DOMUtil.getChildrenByTagName(clickedEle, "div")[0] ; if(over) { - this.backupNavigationTabStyle = tabStyle.className ; - tabStyle.className = "HighlightNavigationTab" ; + this.backupNavigationTabStyle = clickedEle.className ; + clickedEle.className = "UITab HighlightNavigationTab" ; } else if (this.backupNavigationTabStyle){ - tabStyle.className = this.backupNavigationTabStyle ; + clickedEle.className = this.backupNavigationTabStyle ; } } /**