Menu
▾
▴
[Rhq-commits] [rhq-project.org rhq] [3561] [RHQ-1780] Fixes the scrollbar appearance on hover over the nav pane in IE6.;
|
From: <lk...@rh...> - 2009-03-30 17:53:11
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head><style type="text/css"><!-- #msg DL { border : 1px #006 solid; background-color : #369; padding : 6px; color : #fff; } #msg DT { float : left; width : 6em; font-weight : bold; } #msg DL, #msg DT, #msg UL, #msg LI { font-family : arial,helvetica,sans-serif; font-size : 10pt; } h3 { font-family : arial,helvetica,sans-serif; font-size : 10pt; font-weight : bold; } #msg PRE { overflow : auto; white-space : normal; background-color : #ffc; border : 1px #fc0 solid; padding : 6px; } #msg UL, PRE, .diff { overflow : auto; } #patch h4 { font-family : arial,helvetica,sans-serif; font-size : 10pt; } #patch h4 { padding: 8px; background : #369; color : #fff; margin : 0; } #patch .propset h4, #patch .binary h4 {margin: 0;} #patch pre {padding:0;line-height:1.2em;margin:0;} #patch .diff {background:#eeeeee;padding: 0 0 10px 0;} #patch .propset .diff, #patch .binary .diff {padding: 10px 0;} #patch span {display:block;padding:0 10px;} #patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;} #patch .add {background:#ddffdd;} #patch .rem {background:#ffdddd;} #patch .lines, .info {color:#888888;background:#ffffff;} .diff { width : 100%; } #msg DL { border : 1px #006 solid; background-color : #369; padding : 6px; color : #fff; } #msg DT { float : left; width : 6em; font-weight : bold; } #msg DL, #msg DT, #msg UL, #msg LI { font-family : arial,helvetica,sans-serif; font-size : 10pt; } h3 { font-family : arial,helvetica,sans-serif; font-size : 10pt; font-weight : bold; } #msg PRE { overflow : auto; white-space : normal; background-color : #ffc; border : 1px #fc0 solid; padding : 6px; } #msg UL, PRE, .diff { overflow : auto; } #patch h4 { font-family : arial,helvetica,sans-serif; font-size : 10pt; } #patch h4 { padding: 8px; background : #369; color : #fff; margin : 0; } #patch .propset h4, #patch .binary h4 {margin: 0;} #patch pre {padding:0;line-height:1.2em;margin:0;} #patch .diff {background:#eeeeee;padding: 0 0 10px 0;} #patch .propset .diff, #patch .binary .diff {padding: 10px 0;} #patch span {display:block;padding:0 10px;} #patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;} #patch .add {background:#ddffdd;} #patch .rem {background:#ffdddd;} #patch .lines, .info {color:#888888;background:#ffffff;} .diff { width : 100%; } --></style> <title>[rhq-project.org rhq] [3561] [RHQ-1780] Fixes the scrollbar appearance on hover over the nav pane in IE6.;</title> </head> <body> <div id="msg"> <dl> <dt>Revision</dt> <dd>3561</dd> <dt>Author</dt> <dd>lkrejci</dd> <dt>Date</dt> <dd>2009-03-30 12:53:07 -0500 (Mon, 30 Mar 2009)</dd> </dl> <h3>Log Message</h3> <pre>[RHQ-1780] Fixes the scrollbar appearance on hover over the nav pane in IE6.; The whole positioning and resizing behaviour of the two-pane layout has been revisited and updated to behave correctly under all browsers.</pre> <h3>Modified Paths</h3> <ul> <li><a href="#rhqtrunkmodulesenterpriseguiportalwarsrcmainwebappjspopupjs">rhq/trunk/modules/enterprise/gui/portal-war/src/main/webapp/js/popup.js</a></li> <li><a href="#rhqtrunkmodulesenterpriseguiportalwarsrcmainwebappjsrhqjs">rhq/trunk/modules/enterprise/gui/portal-war/src/main/webapp/js/rhq.js</a></li> <li><a href="#rhqtrunkmodulesenterpriseguiportalwarsrcmainwebappjssplitpanejs">rhq/trunk/modules/enterprise/gui/portal-war/src/main/webapp/js/splitpane.js</a></li> <li><a href="#rhqtrunkmodulesenterpriseguiportalwarsrcmainwebapprhqentitylayoutmainxhtml">rhq/trunk/modules/enterprise/gui/portal-war/src/main/webapp/rhq/entity/layout/main.xhtml</a></li> <li><a href="#rhqtrunkmodulesenterpriseguiportalwarsrcmainwebapprhqlayoutmainlayoutxhtml">rhq/trunk/modules/enterprise/gui/portal-war/src/main/webapp/rhq/layout/main-layout.xhtml</a></li> </ul> </div> <div id="patch"> <h3>Diff</h3> <a id="rhqtrunkmodulesenterpriseguiportalwarsrcmainwebappjspopupjs"></a> <div class="modfile"><h4>Modified: rhq/trunk/modules/enterprise/gui/portal-war/src/main/webapp/js/popup.js (3560 => 3561)</h4> <pre class="diff"> <span class="info">--- rhq/trunk/modules/enterprise/gui/portal-war/src/main/webapp/js/popup.js 2009-03-30 17:27:28 UTC (rev 3560) +++ rhq/trunk/modules/enterprise/gui/portal-war/src/main/webapp/js/popup.js 2009-03-30 17:53:07 UTC (rev 3561) </span><span class="lines">@@ -2,6 +2,10 @@ </span><span class="cx"> curTime : null, times: new Array(), </span><span class="add">+ _lastAnchor : null, + _lastIndex : -1, + _lastTime : null, + </span><span class="cx"> findPosX: function (obj) { var curleft = 0; if (obj.offsetParent) { </span><span class="lines">@@ -46,6 +50,8 @@ </span><span class="cx"> ovl.style.left = left + 'px'; ovl.style.top = top + 'px'; ovl.style.height = (bottom - top) + 'px'; </span><span class="add">+ + this._lastAnchor = anchor; </span><span class="cx"> }, showTimePopup: function (index,time) { </span><span class="lines">@@ -64,6 +70,9 @@ </span><span class="cx"> this.curPopup.style.height = '35px'; this.curPopup.style.visibility ='visible'; new Effect.Appear(this.curPopup); </span><span class="add">+ + this._lastIndex = index; + this._lastTime = time; </span><span class="cx"> }, hideTimePopup: function () { </span><span class="lines">@@ -97,9 +106,24 @@ </span><span class="cx"> document.body.appendChild(overlay); } return overlay; </span><span class="rem">- } </span><span class="add">+ }, + + refresh : function() { + var ovl = $('overlay'); + if (this._lastAnchor && ovl.style.visibility != 'hidden') { + this.moveOverlay(this._lastAnchor); + } + + if (this._lastTime != null && this.curPopup && this.curPopup.visibility != 'hidden') { + this.showTimePopup(this._lastIndex, this._lastTime); + } + } </span><span class="cx"> } </span><span class="add">+WindowResizeTracker.addListener(function() { + overlay.refresh(); +}); + </span><span class="cx"> /************************************************************************* This code is from Dynamic Web Coding at http://www.dyn-web.com/ Copyright 2003 by Sharon Paine </span></pre></div> <a id="rhqtrunkmodulesenterpriseguiportalwarsrcmainwebappjsrhqjs"></a> <div class="modfile"><h4>Modified: rhq/trunk/modules/enterprise/gui/portal-war/src/main/webapp/js/rhq.js (3560 => 3561)</h4> <pre class="diff"> <span class="info">--- rhq/trunk/modules/enterprise/gui/portal-war/src/main/webapp/js/rhq.js 2009-03-30 17:27:28 UTC (rev 3560) +++ rhq/trunk/modules/enterprise/gui/portal-war/src/main/webapp/js/rhq.js 2009-03-30 17:53:07 UTC (rev 3561) </span><span class="lines">@@ -655,3 +655,54 @@ </span><span class="cx"> } } } </span><span class="add">+ +/** + * WindowResizeTracker can be used by scripts that need to keep track + * of the current window/page sizes and their changes. + * This variable is a "singleton", don't create new instances of it using "new", + * but rather use directly this variable and its properties and methods. + */ +var WindowResizeTracker = { + + /** The current window and page sizes */ + currentSizes : { pageWidth : 0, pageHeight : 0, windowWidth : 0, windowHeight : 0 }, + + /** How the window/page size changed since last window resize event. */ + currentDeltas : { pageWidth : 0, pageHeight : 0, windowWidth : 0, windowHeight : 0 }, + + /** The function passed to this method will be invoked on every window resize and load event. */ + addListener : function (method) { + if (!WindowResizeTracker.listeners) { + WindowResizeTracker.listeners = []; + } + + WindowResizeTracker.listeners.push(method); + }, + + init : function () { + WindowResizeTracker.currentSizes = WindowUtilities.getPageSize(); + if (WindowResizeTracker.listeners) { + WindowResizeTracker.listeners.each(function (listener) { + listener(); + }); + } + Event.observe(window, "resize", WindowResizeTracker._fire); + }, + + _fire : function () { + var newSizes = WindowUtilities.getPageSize(); + for (var i in newSizes) { + WindowResizeTracker.currentDeltas[i] = newSizes[i] - WindowResizeTracker.currentSizes[i]; + } + WindowResizeTracker.currentSizes = newSizes; + + if (WindowResizeTracker.listeners) { + WindowResizeTracker.listeners.each(function (listener) { + listener(); + }); + } + } +}; + +//initalize the resize tracker +Event.observe(window, "load", WindowResizeTracker.init); </span></pre></div> <a id="rhqtrunkmodulesenterpriseguiportalwarsrcmainwebappjssplitpanejs"></a> <div class="modfile"><h4>Modified: rhq/trunk/modules/enterprise/gui/portal-war/src/main/webapp/js/splitpane.js (3560 => 3561)</h4> <pre class="diff"> <span class="info">--- rhq/trunk/modules/enterprise/gui/portal-war/src/main/webapp/js/splitpane.js 2009-03-30 17:27:28 UTC (rev 3560) +++ rhq/trunk/modules/enterprise/gui/portal-war/src/main/webapp/js/splitpane.js 2009-03-30 17:53:07 UTC (rev 3561) </span><span class="lines">@@ -187,41 +187,59 @@ </span><span class="cx"> if (this.active) { var pointer = [Event.pointerX(event), Event.pointerY(event)]; var delta = pointer[0] - this.start_pointer[0]; </span><span class="rem">- var delta_percent = delta * 100.0 / this.containerWidth; </span><span class="cx"> </span><span class="rem">- // Calculate new div1 width - var new_div1_width = this.start_div1_width + delta; </span><span class="add">+ this._move(delta); + + Event.stop(event); </span><span class="cx"> </span><span class="rem">- // Limit width of div1 - if (new_div1_width < 0.0) { - new_div1_width = 0.0; - delta = -this.start_div1_width; - } </span><span class="add">+ this.options.onDrag(this, event); + } + }, </span><span class="cx"> </span><span class="rem">- // Calculate new div2 width (in %) - var new_div2_width = this.start_div2_width - delta; </span><span class="add">+ _move: function(delta) { + var delta_percent = delta * 100.0 / this.containerWidth; </span><span class="cx"> </span><span class="rem">- // Limit width of div2 - if (new_div2_width < 0.0) { - new_div2_width = 0.0; - delta = this.start_div2_width; - new_div1_width = this.start_div1_width + delta; - } </span><span class="add">+ // Calculate new div1 width + var new_div1_width = this.start_div1_width + delta; </span><span class="cx"> </span><span class="rem">- // resize/position the divs - this.div1.style.width = ((new_div1_width) * 100.0 / this.containerWidth) + "%"; - this.div2.style.left = ((this.start_div2_left + delta) * 100.0 / this.containerWidth) + "%"; - this.div2.style.width = ((new_div2_width) * 100.0 / this.containerWidth) + "%"; </span><span class="add">+ // Limit width of div1 + if (new_div1_width < 0.0) { + new_div1_width = 0.0; + delta = -this.start_div1_width; + } </span><span class="cx"> </span><span class="rem">- // Set absolute position of divider - fix it up to be a % in endDrag(). - this.divider.style.left = (this.start_divider_x + delta) + "px"; </span><span class="add">+ // Calculate new div2 width (in %) + var new_div2_width = this.start_div2_width - delta; </span><span class="cx"> </span><span class="rem">- Event.stop(event); </span><span class="add">+ // Limit width of div2 + if (new_div2_width < 0.0) { + new_div2_width = 0.0; + delta = this.start_div2_width; + new_div1_width = this.start_div1_width + delta; + } </span><span class="cx"> </span><span class="rem">- this.options.onDrag(this, event); - } </span><span class="add">+ // resize/position the divs + this.div1.style.width = ((new_div1_width) * 100.0 / this.containerWidth) + "%"; + this.div2.style.left = ((this.start_div2_left + delta) * 100.0 / this.containerWidth) + "%"; + this.div2.style.width = ((new_div2_width) * 100.0 / this.containerWidth) + "%"; + + // Set absolute position of divider - fix it up to be a % in endDrag(). + this.divider.style.left = (this.start_divider_x + delta) + "px"; </span><span class="cx"> }, </span><span class="add">+ move: function(delta) { + this.containerWidth = this.getWidth(this.container); + this.start_div1_width = this.getWidth(this.div1); + this.start_div2_left = this.getX(this.div2); + this.start_div2_width = this.getWidth(this.div2); + this.start_divider_x = this.getX(this.divider); + + this._move(delta); + + this.setDividerX(); + this.setDividerHeight(); + }, + </span><span class="cx"> setDividerX: function() { // Place the center of 'divider' half way between div1 and div2 var div1_right = this.getX(this.div1) + this.getWidth(this.div1); </span></pre></div> <a id="rhqtrunkmodulesenterpriseguiportalwarsrcmainwebapprhqentitylayoutmainxhtml"></a> <div class="modfile"><h4>Modified: rhq/trunk/modules/enterprise/gui/portal-war/src/main/webapp/rhq/entity/layout/main.xhtml (3560 => 3561)</h4> <pre class="diff"> <span class="info">--- rhq/trunk/modules/enterprise/gui/portal-war/src/main/webapp/rhq/entity/layout/main.xhtml 2009-03-30 17:27:28 UTC (rev 3560) +++ rhq/trunk/modules/enterprise/gui/portal-war/src/main/webapp/rhq/entity/layout/main.xhtml 2009-03-30 17:53:07 UTC (rev 3561) </span><span class="lines">@@ -35,7 +35,13 @@ </span><span class="cx"> <script type="text/javascript" src="/js/splitpane.js"/> </span><span class="add">+ <!-- work around for IE and its broken box model. Without the concrete height value, the nav pane will shrink on hover. --> + <!--[if IE]> + <div id="contentParent" style="height: 100%"> + <![endif]--> + <!--[if !IE]><!--> </span><span class="cx"> <div id="contentParent"> </span><span class="add">+ <!--<![endif]--> </span><span class="cx"> <div id="leftContent" class="column" style="width: #{UserPreferencesUIBean.leftResourceNavState}%;"> <div class="content-left"> <ui:insert name="nav"><p>Default Entity Navigation</p></ui:insert> </span><span class="lines">@@ -66,6 +72,20 @@ </span><span class="cx"> <script language="JavaScript" type="text/JavaScript"> <!-- </span><span class="add">+ + WindowResizeTracker.addListener(function() { + var parent = $('contentParent'); + var body = $('PageBody'); + var left = $('leftContent'); + var right = $('centerContent'); + + parent.style.height = body.style.height; + parent.style.width = body.style.width; + left.style.height = body.style.height; + right.style.height = body.style.height; + right.style.width = (body.getDimensions().width - left.getDimensions().width) + "px"; + }); + </span><span class="cx"> function handleSplitPaneResize(splitPane, event) { //#{rich:element('leftResourceNavStateField')}.value = navSplitPane.getWidthPercent(navSplitPane.div1); //#{rich:element('leftResourceNavStateField')}.focus(); </span><span class="lines">@@ -76,7 +96,19 @@ </span><span class="cx"> saveSplitPaneState(navSplitPane.getWidthPercent(navSplitPane.div1)); //alert("Saved: " + navSplitPane.getWidthPercent(navSplitPane.div1)); } </span><span class="rem">- var navSplitPane = new SplitPane("leftContent", "#{UserPreferencesUIBean.leftResourceNavState}", "centerContent", { onEnd: handleSplitPaneResize, active: true }); </span><span class="add">+ var navSplitPane = new SplitPane("leftContent", "#{UserPreferencesUIBean.leftResourceNavState}", "centerContent", + { onEnd: handleSplitPaneResize, + active: true, + onDrag: function() { + overlay.refresh(); + } }); + + //resize the split pane divider on window resize + WindowResizeTracker.addListener(function() { + if (navSplitPane.divider) { + navSplitPane.move(0); + }; + }); </span><span class="cx"> // --> </script> </span></pre></div> <a id="rhqtrunkmodulesenterpriseguiportalwarsrcmainwebapprhqlayoutmainlayoutxhtml"></a> <div class="modfile"><h4>Modified: rhq/trunk/modules/enterprise/gui/portal-war/src/main/webapp/rhq/layout/main-layout.xhtml (3560 => 3561)</h4> <pre class="diff"> <span class="info">--- rhq/trunk/modules/enterprise/gui/portal-war/src/main/webapp/rhq/layout/main-layout.xhtml 2009-03-30 17:27:28 UTC (rev 3560) +++ rhq/trunk/modules/enterprise/gui/portal-war/src/main/webapp/rhq/layout/main-layout.xhtml 2009-03-30 17:53:07 UTC (rev 3561) </span><span class="lines">@@ -47,6 +47,7 @@ </span><span class="cx"> padding-top: 3px; padding-bottom: 3px; } </span><span class="add">+ HTML, BODY { overflow: hidden; } </span><span class="cx"> </style> <link rel="stylesheet" type="text/css" media="screen" href="/css/tabular.css"/> </span><span class="lines">@@ -73,11 +74,46 @@ </span><span class="cx"> <!-- =================== PAGE HEADER =================== --> </span><span class="add">+ <script language="javascript" type="text/javascript"> + //this has to be defined before the resize trackers inside + //the PageBody element because they depend on the values + //computed inside this tracker function. + WindowResizeTracker.addListener(function() { + var header = $('PageHeader'); + var borderHeight = 2; //set in the inline style of div PageHeader + + if (Prototype.Browser.IE) { + header.style.height = WindowResizeTracker.currentSizes.windowHeight + "px"; + } else { + header.style.height = (WindowResizeTracker.currentSizes.windowHeight - borderHeight) + "px"; + } + header.style.width = WindowResizeTracker.currentSizes.windowWidth + "px"; + + var body = $('PageBody'); + //27 = menu height (and the top position of PageBody) + body.style.height = (WindowResizeTracker.currentSizes.windowHeight - 27 - borderHeight) + "px"; + body.style.width = header.style.width; + + document.body.style.height = WindowResizeTracker.currentSizes.windowHeight + "px"; + }); + </script> + <!-- work around for IE and its broken box model. Without the concrete height value, the nav pane will shrink on hover. --> + <!--[if IE]> + <div id="PageHeader" style="border-bottom: 2px solid #999; position: absolute; top: 0; bottom: 0; left: 0; right: 0; height: 100%"> + <![endif]--> + <!--[if !IE]><!--> </span><span class="cx"> <div id="PageHeader" style="border-bottom: 2px solid #999; position: absolute; top: 0; bottom: 0; left: 0; right: 0;"> </span><span class="add">+ <!--<![endif]--> </span><span class="cx"> <ui:include src="/rhq/common/menu/menu.xhtml"/> </span><span class="rem">- <div style="width: 100%; position: absolute; top: 27px; bottom: 0;"> </span><span class="add">+ <!-- work around for IE and its broken box model. Without the concrete height value, the nav pane will shrink on hover. --> + <!--[if IE]> + <div id="PageBody" style="width: 100%; position: absolute; top: 27px; bottom: 0; height: 100%;"> + <![endif]--> + <!--[if !IE]><!--> + <div id="PageBody" style="width: 100%; position: absolute; top: 27px; bottom: 0;"> + <!--<![endif]--> </span><span class="cx"> <ui:insert name="body-area">Default Page Body</ui:insert> </div> </span><span class="lines">@@ -119,7 +155,7 @@ </span><span class="cx"> </f:view> <script type="text/javascript"> </span><span class="rem">- addWindowOnLoadEvent(disableConditionalButtons); </span><span class="add">+ addWindowOnLoadEvent(disableConditionalButtons); </span><span class="cx"> </script> </body> </span> </pre> </div> </div> </body> </html> |