From: Jouni Koivuviita Date: Fri, 3 Oct 2008 10:51:37 +0000 (+0000) Subject: New default theme for sub window. Shadow implementation much simplified, now we can... X-Git-Tag: 6.7.0.beta1~4030 X-Git-Url: https://source.dussan.org/?a=commitdiff_plain;h=48e587119a4a4bd6c654dc35f74f5d02b3e301aa;p=vaadin-framework.git New default theme for sub window. Shadow implementation much simplified, now we can have different kind of shadows in classes extending IToolkitOverlay. IWindow now extends IToolkitOverlay. svn changeset:5591/svn branch:trunk --- diff --git a/WebContent/ITMILL/themes/default/shadow/shadow.css b/WebContent/ITMILL/themes/default/shadow/shadow.css index f4c1392755..dbe1a7858a 100644 --- a/WebContent/ITMILL/themes/default/shadow/shadow.css +++ b/WebContent/ITMILL/themes/default/shadow/shadow.css @@ -1,70 +1,68 @@ .i-shadow { position: absolute; - overflow: auto; } .i-shadow .top-left { position: absolute; overflow: hidden; - top: 0; left: 0; + top: -3px; left: -4px; width: 8px; height: 8px; background: transparent url(img/top-left.png); } .i-shadow .top { position: absolute; overflow: hidden; - top: 0; left: 8px; - height: 8px; - right: 8px; + top: -3px; left: 4px; + height: 8px; right: 4px; background: transparent url(img/top.png); } .i-shadow .top-right { position: absolute; overflow: hidden; - top: 0; right: 0; + top: -3px; right: -4px; width: 8px; height: 8px; background: transparent url(img/top-right.png); } .i-shadow .left { position: absolute; overflow: hidden; - top: 8px; left: 0; + top: 5px; left: -4px; width: 8px; - bottom: 8px; + bottom: 3px; background: transparent url(img/left.png); } .i-shadow .center { position: absolute; overflow: hidden; - top: 8px; left: 8px; - bottom: 8px; right: 8px; + top: 5px; left: 4px; + bottom: 3px; right: 4px; background: transparent url(img/center.png); } .i-shadow .right { position: absolute; overflow: hidden; - top: 8px; right: 0; + top: 5px; right: -4px; width: 8px; - bottom: 8px; + bottom: 3px; background: transparent url(img/right.png); } .i-shadow .bottom-left { position: absolute; overflow: hidden; - bottom: 0; left: 0; + bottom: -5px; left: -4px; width: 8px; height: 8px; background: transparent url(img/bottom-left.png); } .i-shadow .bottom { position: absolute; overflow: hidden; - bottom: 0; left: 8px; - right: 8px; height: 8px; + bottom: -5px; left: 4px; + right: 4px; height: 8px; background: transparent url(img/bottom.png); } .i-shadow .bottom-right { position: absolute; overflow: hidden; - bottom: 0; right: 0; + bottom: -5px; right: -4px; width: 8px; height: 8px; background: transparent url(img/bottom-right.png); } @@ -73,73 +71,15 @@ -/* And all the same for IE6 (transparent png's) */ +/* For IE6 (no transparent png's, we use a blur filter) */ -* html .i-shadow .top-left { - background: transparent; - filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="ITMILL/themes/default/shadow/img/top-left.png", sizingMethod='crop'); - filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="../ITMILL/themes/default/shadow/img/top-left.png", sizingMethod='crop'); - filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="../../ITMILL/themes/default/shadow/img/top-left.png", sizingMethod='crop'); +* html .i-shadow * { + display: none; } -* html .i-shadow .top { - background: transparent; - filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="ITMILL/themes/default/shadow/img/top.png", sizingMethod='scale'); - filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="../ITMILL/themes/default/shadow/img/top.png", sizingMethod='scale'); - filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="../../ITMILL/themes/default/shadow/img/top.png", sizingMethod='scale'); - width: expression((this.parentNode.offsetWidth - this.previousSibling.offsetWidth - this.nextSibling.offsetWidth) + "px"); -} - -* html .i-shadow .top-right { - background: transparent; - filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="ITMILL/themes/default/shadow/img/top-right.png", sizingMethod='crop'); - filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="../ITMILL/themes/default/shadow/img/top-right.png", sizingMethod='crop'); - filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="../../ITMILL/themes/default/shadow/img/top-right.png", sizingMethod='crop'); -} - -* html .i-shadow .left { - background: transparent; - filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="ITMILL/themes/default/shadow/img/left.png", sizingMethod='scale'); - filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="../ITMILL/themes/default/shadow/img/left.png", sizingMethod='scale'); - filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="../../ITMILL/themes/default/shadow/img/left.png", sizingMethod='scale'); - height: expression((this.parentNode.offsetHeight - this.parentNode.firstChild.offsetHeight - this.parentNode.childNodes[6].offsetHeight) + "px"); -} - -* html .i-shadow .center { - background: transparent; - filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="ITMILL/themes/default/shadow/img/center.png", sizingMethod='scale'); - filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="../ITMILL/themes/default/shadow/img/center.png", sizingMethod='scale'); - filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="../../ITMILL/themes/default/shadow/img/center.png", sizingMethod='scale'); - height: expression(this.parentNode.offsetHeight - this.parentNode.firstChild.offsetHeight - this.parentNode.childNodes[6].offsetHeight); - width: expression((this.parentNode.offsetWidth - this.previousSibling.offsetWidth - this.nextSibling.offsetWidth) + "px"); -} - -* html .i-shadow .right { - background: transparent; - filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="ITMILL/themes/default/shadow/img/right.png", sizingMethod='scale'); - filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="../ITMILL/themes/default/shadow/img/right.png", sizingMethod='scale'); - filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="../../ITMILL/themes/default/shadow/img/right.png", sizingMethod='scale'); - height: expression((this.parentNode.offsetHeight - this.parentNode.firstChild.offsetHeight - this.parentNode.childNodes[6].offsetHeight) + "px"); -} - -* html .i-shadow .bottom-left { - background: transparent; - filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="ITMILL/themes/default/shadow/img/bottom-left.png", sizingMethod='crop'); - filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="../ITMILL/themes/default/shadow/img/bottom-left.png", sizingMethod='crop'); - filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="../../ITMILL/themes/default/shadow/img/bottom-left.png", sizingMethod='crop'); -} - -* html .i-shadow .bottom { - background: transparent; - filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="ITMILL/themes/default/shadow/img/bottom.png", sizingMethod='scale'); - filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="../ITMILL/themes/default/shadow/img/bottom.png", sizingMethod='scale'); - filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="../../ITMILL/themes/default/shadow/img/bottom.png", sizingMethod='scale'); - width: expression((this.parentNode.offsetWidth - this.previousSibling.offsetWidth - this.nextSibling.offsetWidth) + "px"); -} - -* html .i-shadow .bottom-right { - background: transparent; - filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="ITMILL/themes/default/shadow/img/bottom-right.png", sizingMethod='crop'); - filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="../ITMILL/themes/default/shadow/img/bottom-right.png", sizingMethod='crop'); - filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="../../ITMILL/themes/default/shadow/img/bottom-right.png", sizingMethod='crop'); -} \ No newline at end of file +* html .i-shadow { + background: #000; + filter: progid:DXImageTransform.Microsoft.Blur(pixelRadius=2) alpha(opacity=20); + margin-top: -3px; + margin-left: -4px; +} \ No newline at end of file diff --git a/WebContent/ITMILL/themes/default/styles.css b/WebContent/ITMILL/themes/default/styles.css index d7cd928e8c..7d0a8b6857 100644 --- a/WebContent/ITMILL/themes/default/styles.css +++ b/WebContent/ITMILL/themes/default/styles.css @@ -1343,71 +1343,69 @@ input.i-modified, .i-shadow { position: absolute; - overflow: auto; } .i-shadow .top-left { position: absolute; overflow: hidden; - top: 0; left: 0; + top: -3px; left: -4px; width: 8px; height: 8px; background: transparent url(shadow/img/top-left.png); } .i-shadow .top { position: absolute; overflow: hidden; - top: 0; left: 8px; - height: 8px; - right: 8px; + top: -3px; left: 4px; + height: 8px; right: 4px; background: transparent url(shadow/img/top.png); } .i-shadow .top-right { position: absolute; overflow: hidden; - top: 0; right: 0; + top: -3px; right: -4px; width: 8px; height: 8px; background: transparent url(shadow/img/top-right.png); } .i-shadow .left { position: absolute; overflow: hidden; - top: 8px; left: 0; + top: 5px; left: -4px; width: 8px; - bottom: 8px; + bottom: 3px; background: transparent url(shadow/img/left.png); } .i-shadow .center { position: absolute; overflow: hidden; - top: 8px; left: 8px; - bottom: 8px; right: 8px; + top: 5px; left: 4px; + bottom: 3px; right: 4px; background: transparent url(shadow/img/center.png); } .i-shadow .right { position: absolute; overflow: hidden; - top: 8px; right: 0; + top: 5px; right: -4px; width: 8px; - bottom: 8px; + bottom: 3px; background: transparent url(shadow/img/right.png); } .i-shadow .bottom-left { position: absolute; overflow: hidden; - bottom: 0; left: 0; + bottom: -5px; left: -4px; width: 8px; height: 8px; background: transparent url(shadow/img/bottom-left.png); } .i-shadow .bottom { position: absolute; overflow: hidden; - bottom: 0; left: 8px; - right: 8px; height: 8px; + bottom: -5px; left: 4px; + right: 4px; height: 8px; background: transparent url(shadow/img/bottom.png); } .i-shadow .bottom-right { position: absolute; overflow: hidden; - bottom: 0; right: 0; + bottom: -5px; right: -4px; width: 8px; height: 8px; background: transparent url(shadow/img/bottom-right.png); } @@ -1416,76 +1414,18 @@ input.i-modified, -/* And all the same for IE6 (transparent png's) */ - -* html .i-shadow .top-left { - background: transparent; - filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="ITMILL/themes/default/shadow/img/top-left.png", sizingMethod='crop'); - filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="../ITMILL/themes/default/shadow/img/top-left.png", sizingMethod='crop'); - filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="../../ITMILL/themes/default/shadow/img/top-left.png", sizingMethod='crop'); -} - -* html .i-shadow .top { - background: transparent; - filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="ITMILL/themes/default/shadow/img/top.png", sizingMethod='scale'); - filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="../ITMILL/themes/default/shadow/img/top.png", sizingMethod='scale'); - filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="../../ITMILL/themes/default/shadow/img/top.png", sizingMethod='scale'); - width: expression((this.parentNode.offsetWidth - this.previousSibling.offsetWidth - this.nextSibling.offsetWidth) + "px"); -} - -* html .i-shadow .top-right { - background: transparent; - filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="ITMILL/themes/default/shadow/img/top-right.png", sizingMethod='crop'); - filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="../ITMILL/themes/default/shadow/img/top-right.png", sizingMethod='crop'); - filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="../../ITMILL/themes/default/shadow/img/top-right.png", sizingMethod='crop'); -} - -* html .i-shadow .left { - background: transparent; - filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="ITMILL/themes/default/shadow/img/left.png", sizingMethod='scale'); - filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="../ITMILL/themes/default/shadow/img/left.png", sizingMethod='scale'); - filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="../../ITMILL/themes/default/shadow/img/left.png", sizingMethod='scale'); - height: expression((this.parentNode.offsetHeight - this.parentNode.firstChild.offsetHeight - this.parentNode.childNodes[6].offsetHeight) + "px"); -} - -* html .i-shadow .center { - background: transparent; - filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="ITMILL/themes/default/shadow/img/center.png", sizingMethod='scale'); - filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="../ITMILL/themes/default/shadow/img/center.png", sizingMethod='scale'); - filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="../../ITMILL/themes/default/shadow/img/center.png", sizingMethod='scale'); - height: expression(this.parentNode.offsetHeight - this.parentNode.firstChild.offsetHeight - this.parentNode.childNodes[6].offsetHeight); - width: expression((this.parentNode.offsetWidth - this.previousSibling.offsetWidth - this.nextSibling.offsetWidth) + "px"); -} - -* html .i-shadow .right { - background: transparent; - filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="ITMILL/themes/default/shadow/img/right.png", sizingMethod='scale'); - filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="../ITMILL/themes/default/shadow/img/right.png", sizingMethod='scale'); - filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="../../ITMILL/themes/default/shadow/img/right.png", sizingMethod='scale'); - height: expression((this.parentNode.offsetHeight - this.parentNode.firstChild.offsetHeight - this.parentNode.childNodes[6].offsetHeight) + "px"); -} - -* html .i-shadow .bottom-left { - background: transparent; - filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="ITMILL/themes/default/shadow/img/bottom-left.png", sizingMethod='crop'); - filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="../ITMILL/themes/default/shadow/img/bottom-left.png", sizingMethod='crop'); - filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="../../ITMILL/themes/default/shadow/img/bottom-left.png", sizingMethod='crop'); -} +/* For IE6 (no transparent png's, we use a blur filter) */ -* html .i-shadow .bottom { - background: transparent; - filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="ITMILL/themes/default/shadow/img/bottom.png", sizingMethod='scale'); - filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="../ITMILL/themes/default/shadow/img/bottom.png", sizingMethod='scale'); - filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="../../ITMILL/themes/default/shadow/img/bottom.png", sizingMethod='scale'); - width: expression((this.parentNode.offsetWidth - this.previousSibling.offsetWidth - this.nextSibling.offsetWidth) + "px"); +* html .i-shadow * { + display: none; } -* html .i-shadow .bottom-right { - background: transparent; - filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="ITMILL/themes/default/shadow/img/bottom-right.png", sizingMethod='crop'); - filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="../ITMILL/themes/default/shadow/img/bottom-right.png", sizingMethod='crop'); - filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="../../ITMILL/themes/default/shadow/img/bottom-right.png", sizingMethod='crop'); -} +* html .i-shadow { + background: #000; + filter: progid:DXImageTransform.Microsoft.Blur(pixelRadius=2) alpha(opacity=20); + margin-top: -3px; + margin-left: -4px; +} /*-------------------------- Default (horizontal) styles --------------------------*/ @@ -2255,45 +2195,39 @@ input.i-modified, color: #464f52; font-size: 13px; line-height: 18px; - background: transparent url(window/img/top-left.png) no-repeat top left; -} - -.i-window:before { - display: block; - content: ""; - background: transparent url(window/img/top-right.png) repeat-x right top; - height: 21px; - margin-left: 21px; + background: transparent url(window/img/bottom-left.png) no-repeat left bottom; } .i-window-wrap { - padding-left: 20px; - background: transparent url(window/img/left-bg.png) repeat-y; - /* somehow this won't inherit from .i-window */ + background: transparent url(window/img/top-left.png) no-repeat; + /* Somehow this won't inherit from .i-window */ font-family: "Trebuchet MS", geneva, helvetica, arial, tahoma, verdana, sans-serif; + zoom: 1; /* For IE, otherwise it won't render properly (width will be out of control) */ } .i-window-wrap2 { - padding-right: 20px; - background: transparent url(window/img/right-bg.png) repeat-y top right; + zoom: 1; /* For IE, otherwise it won't render properly (width will be out of control) */ } .i-window-outerheader { - height: 18px; - padding: 8px 34px 14px 12px; - background: #fff; + height: 22px; + margin-left: 9px; + padding: 15px 34px 11px 12px; + background: transparent url(window/img/top-right.png) no-repeat right top; + cursor: move; } .i-window-header { font-size: 18px; - line-height: 18px; + line-height: 1.2; font-weight: normal; letter-spacing: -0.03em; color: #f14c1a; white-space: nowrap; - cursor: move; - text-overflow:ellipsis; - overflow:hidden; + text-overflow: ellipsis; + overflow: hidden; + width: 100%; + text-shadow: 0 1px 0 #fff; } .i-window-header .i-icon { @@ -2302,9 +2236,9 @@ input.i-modified, .i-window-contents { background: #fff; - border: 1px solid #babfc0; - font-size: 13px; - line-height: 18px; + border: 2px solid #acb2b3; + border-top-width: 1px; + border-bottom: none; } /* Partial fix for bug #1106 */ @@ -2312,43 +2246,26 @@ input.i-modified, .i-window-contents, x:-moz-any-link { overflow: hidden; } -/* Target Firefox 3 (it doesn't need any trickery) */ +/* Target Firefox 3 (it doesn't need any trickery, so revert the previous) */ .i-window-contents, x:-moz-any-link, x:default { overflow: visible; } .i-window-footer { - height: 0; - font-size: 0px; - /* Occupy more height to prevent scrollbars in Mac FF */ - margin-bottom: 46px; -} - -.i-window-footer:before { - display: block; - content: ""; - width: 21px; - height: 46px; - background: transparent url(window/img/bottom-left.png); - margin-left: -20px; -} - -.i-window-footer:after { - display: block; - content: ""; - height: 46px; - background: transparent url(window/img/bottom-right.png) no-repeat top right; - margin: -46px -20px 0 1px; + height: 8px; + margin-left: 9px; + background: transparent url(window/img/bottom-right.png) no-repeat right top; } .i-window-resizebox { - position:absolute; - bottom: 24px; - right: 0; - width: 25px; - height: 21px; + position: absolute; + bottom: 4px; + right: 4px; + width: 10px; + height: 10px; cursor: se-resize; background: transparent url(window/img/resize.png); + overflow: hidden; } .i-window-resizebox-disabled { @@ -2357,27 +2274,27 @@ input.i-modified, } .i-window-closebox { - position:absolute; - top: 33px; - right: 36px; + position: absolute; + top: 21px; + right: 24px; width: 12px; - height: 11px; + height: 12px; background: transparent url(window/img/close.png); cursor: pointer; overflow: hidden; } .i-window-closebox:hover { - background-position: 0 -11px; + background-position: 0 -12px; } .i-window-modalitycurtain { - top:0; - left:0; - background:white; + top: 0; + left: 0; + background: white; opacity: 0.5; - position:fixed; - width:100%; - height:100%; + position: fixed; + width: 100%; + height: 100%; filter: alpha(opacity=50); } @@ -2390,51 +2307,107 @@ input.i-modified, /* IE specific styles */ * html .i-window { - width: 0; + width: 0; /* min-size for IE6 */ + overflow: hidden; + zoom: 1; } -* html .i-window-wrap { - padding: 12px; - border: 1px solid #e8e9e9; - background: #d8dee0; - /*filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="../ITMILL/widgetsets/com.itmill.toolkit.terminal.gwt.DefaultWidgetSet/default/window/img/bg-color.png", sizingMethod="scale");*/ - /*zoom: 1; to gain hasLayout, IE won't apply filter otherwise */ + + + + + + + + + + + + + + +/* Shadow for window */ + +.i-shadow-window { + position: absolute; } -*+html .i-window-wrap { - padding: 12px; - border: 1px solid #e8e9e9; - background: transparent url(window/img/bg-color.png) repeat; + +.i-shadow-window .top-left { + position: absolute; overflow: hidden; + top: -13px; left: -20px; + width: 39px; height: 39px; + background: transparent url(window/img/shadow/top-left.png); } -* html .i-window-wrap2 { - padding: 6px; - border: 1px solid #babfc0; - background: #fff; +.i-shadow-window .top { + position: absolute; overflow: hidden; + top: -13px; left: 19px; + height: 39px; + right: 19px; + background: transparent url(window/img/shadow/top.png); } -*+html .i-window-wrap2 { - padding: 6px; - border: 1px solid #babfc0; - background: #fff; + +.i-shadow-window .top-right { + position: absolute; overflow: hidden; + top: -13px; right: -20px; + width: 39px; height: 39px; + background: transparent url(window/img/shadow/top-right.png); } -* html .i-window-footer { - margin-bottom: 0; +.i-shadow-window .left { + position: absolute; overflow: hidden; + top: 26px; left: -20px; + width: 39px; + bottom: 12px; + background: transparent url(window/img/shadow/left.png); } -*+html .i-window-footer { - margin-bottom: 0; + +.i-shadow-window .center { + position: absolute; overflow: hidden; + top: 26px; left: 19px; + bottom: 12px; right: 19px; + background: transparent url(window/img/shadow/center.png); } -* html .i-window-resizebox { - bottom: 1px; - right: 1px; - width: 15px; - height: 12px; - background: url(window/img/resize.png); +.i-shadow-window .right { + position: absolute; overflow: hidden; + top: 26px; right: -20px; + width: 39px; + bottom: 12px; + background: transparent url(window/img/shadow/right.png); } -* html .i-window-resizebox-disabled { - background: transparent; + +.i-shadow-window .bottom-left { + position: absolute; overflow: hidden; + bottom: -27px; left: -20px; + width: 39px; height: 39px; + background: transparent url(window/img/shadow/bottom-left.png); } -*+html .i-window-resizebox { - bottom: 0; - background-position: 3px 3px; + +.i-shadow-window .bottom { + position: absolute; overflow: hidden; + bottom: -27px; left: 19px; + right: 19px; height: 39px; + background: transparent url(window/img/shadow/bottom.png); +} + +.i-shadow-window .bottom-right { + position: absolute; overflow: hidden; + bottom: -27px; right: -20px; + width: 39px; height: 39px; + background: transparent url(window/img/shadow/bottom-right.png); +} + + +/* For IE6 (no transparent png's, we use a blur filter) */ + +* html .i-shadow-window * { + display: none; +} + +* html .i-shadow-window { + background: #000; + filter: progid:DXImageTransform.Microsoft.Blur(pixelRadius=6) alpha(opacity=20); + margin-top: -4px; + margin-left: -6px; } diff --git a/WebContent/ITMILL/themes/default/window/img/bottom-left.png b/WebContent/ITMILL/themes/default/window/img/bottom-left.png index 14808c98ea..e7728b5172 100644 Binary files a/WebContent/ITMILL/themes/default/window/img/bottom-left.png and b/WebContent/ITMILL/themes/default/window/img/bottom-left.png differ diff --git a/WebContent/ITMILL/themes/default/window/img/bottom-right.png b/WebContent/ITMILL/themes/default/window/img/bottom-right.png index 99e118de45..56c654f41d 100644 Binary files a/WebContent/ITMILL/themes/default/window/img/bottom-right.png and b/WebContent/ITMILL/themes/default/window/img/bottom-right.png differ diff --git a/WebContent/ITMILL/themes/default/window/img/close.png b/WebContent/ITMILL/themes/default/window/img/close.png index 8f1006ac5f..55f1a686dd 100644 Binary files a/WebContent/ITMILL/themes/default/window/img/close.png and b/WebContent/ITMILL/themes/default/window/img/close.png differ diff --git a/WebContent/ITMILL/themes/default/window/img/resize.png b/WebContent/ITMILL/themes/default/window/img/resize.png index 8c4c00a11c..e04087e525 100644 Binary files a/WebContent/ITMILL/themes/default/window/img/resize.png and b/WebContent/ITMILL/themes/default/window/img/resize.png differ diff --git a/WebContent/ITMILL/themes/default/window/img/shadow/bottom-left.png b/WebContent/ITMILL/themes/default/window/img/shadow/bottom-left.png new file mode 100644 index 0000000000..1ffd763faf Binary files /dev/null and b/WebContent/ITMILL/themes/default/window/img/shadow/bottom-left.png differ diff --git a/WebContent/ITMILL/themes/default/window/img/shadow/bottom-right.png b/WebContent/ITMILL/themes/default/window/img/shadow/bottom-right.png new file mode 100644 index 0000000000..af3552a4bc Binary files /dev/null and b/WebContent/ITMILL/themes/default/window/img/shadow/bottom-right.png differ diff --git a/WebContent/ITMILL/themes/default/window/img/shadow/bottom.png b/WebContent/ITMILL/themes/default/window/img/shadow/bottom.png new file mode 100644 index 0000000000..ed24b66705 Binary files /dev/null and b/WebContent/ITMILL/themes/default/window/img/shadow/bottom.png differ diff --git a/WebContent/ITMILL/themes/default/window/img/shadow/center.png b/WebContent/ITMILL/themes/default/window/img/shadow/center.png new file mode 100644 index 0000000000..f3825db0fb Binary files /dev/null and b/WebContent/ITMILL/themes/default/window/img/shadow/center.png differ diff --git a/WebContent/ITMILL/themes/default/window/img/shadow/left.png b/WebContent/ITMILL/themes/default/window/img/shadow/left.png new file mode 100644 index 0000000000..4c0b430f22 Binary files /dev/null and b/WebContent/ITMILL/themes/default/window/img/shadow/left.png differ diff --git a/WebContent/ITMILL/themes/default/window/img/shadow/right.png b/WebContent/ITMILL/themes/default/window/img/shadow/right.png new file mode 100644 index 0000000000..f81cfa0ce4 Binary files /dev/null and b/WebContent/ITMILL/themes/default/window/img/shadow/right.png differ diff --git a/WebContent/ITMILL/themes/default/window/img/shadow/top-left.png b/WebContent/ITMILL/themes/default/window/img/shadow/top-left.png new file mode 100644 index 0000000000..7f79389398 Binary files /dev/null and b/WebContent/ITMILL/themes/default/window/img/shadow/top-left.png differ diff --git a/WebContent/ITMILL/themes/default/window/img/shadow/top-right.png b/WebContent/ITMILL/themes/default/window/img/shadow/top-right.png new file mode 100644 index 0000000000..feb490d565 Binary files /dev/null and b/WebContent/ITMILL/themes/default/window/img/shadow/top-right.png differ diff --git a/WebContent/ITMILL/themes/default/window/img/shadow/top.png b/WebContent/ITMILL/themes/default/window/img/shadow/top.png new file mode 100644 index 0000000000..10bcc450ee Binary files /dev/null and b/WebContent/ITMILL/themes/default/window/img/shadow/top.png differ diff --git a/WebContent/ITMILL/themes/default/window/img/top-left.png b/WebContent/ITMILL/themes/default/window/img/top-left.png index 0a46a98d4d..fb0744b5ea 100644 Binary files a/WebContent/ITMILL/themes/default/window/img/top-left.png and b/WebContent/ITMILL/themes/default/window/img/top-left.png differ diff --git a/WebContent/ITMILL/themes/default/window/img/top-right.png b/WebContent/ITMILL/themes/default/window/img/top-right.png index 00fdb54543..345c9016cb 100644 Binary files a/WebContent/ITMILL/themes/default/window/img/top-right.png and b/WebContent/ITMILL/themes/default/window/img/top-right.png differ diff --git a/WebContent/ITMILL/themes/default/window/window.css b/WebContent/ITMILL/themes/default/window/window.css index 266af2df7c..a7d513bca0 100644 --- a/WebContent/ITMILL/themes/default/window/window.css +++ b/WebContent/ITMILL/themes/default/window/window.css @@ -2,45 +2,39 @@ color: #464f52; font-size: 13px; line-height: 18px; - background: transparent url(img/top-left.png) no-repeat top left; -} - -.i-window:before { - display: block; - content: ""; - background: transparent url(img/top-right.png) repeat-x right top; - height: 21px; - margin-left: 21px; + background: transparent url(img/bottom-left.png) no-repeat left bottom; } .i-window-wrap { - padding-left: 20px; - background: transparent url(img/left-bg.png) repeat-y; - /* somehow this won't inherit from .i-window */ + background: transparent url(img/top-left.png) no-repeat; + /* Somehow this won't inherit from .i-window */ font-family: "Trebuchet MS", geneva, helvetica, arial, tahoma, verdana, sans-serif; + zoom: 1; /* For IE, otherwise it won't render properly (width will be out of control) */ } .i-window-wrap2 { - padding-right: 20px; - background: transparent url(img/right-bg.png) repeat-y top right; + zoom: 1; /* For IE, otherwise it won't render properly (width will be out of control) */ } .i-window-outerheader { - height: 18px; - padding: 8px 34px 14px 12px; - background: #fff; + height: 22px; + margin-left: 9px; + padding: 15px 34px 11px 12px; + background: transparent url(img/top-right.png) no-repeat right top; + cursor: move; } .i-window-header { font-size: 18px; - line-height: 18px; + line-height: 1.2; font-weight: normal; letter-spacing: -0.03em; color: #f14c1a; white-space: nowrap; - cursor: move; - text-overflow:ellipsis; - overflow:hidden; + text-overflow: ellipsis; + overflow: hidden; + width: 100%; + text-shadow: 0 1px 0 #fff; } .i-window-header .i-icon { @@ -49,9 +43,9 @@ .i-window-contents { background: #fff; - border: 1px solid #babfc0; - font-size: 13px; - line-height: 18px; + border: 2px solid #acb2b3; + border-top-width: 1px; + border-bottom: none; } /* Partial fix for bug #1106 */ @@ -59,43 +53,26 @@ .i-window-contents, x:-moz-any-link { overflow: hidden; } -/* Target Firefox 3 (it doesn't need any trickery) */ +/* Target Firefox 3 (it doesn't need any trickery, so revert the previous) */ .i-window-contents, x:-moz-any-link, x:default { overflow: visible; } .i-window-footer { - height: 0; - font-size: 0px; - /* Occupy more height to prevent scrollbars in Mac FF */ - margin-bottom: 46px; -} - -.i-window-footer:before { - display: block; - content: ""; - width: 21px; - height: 46px; - background: transparent url(img/bottom-left.png); - margin-left: -20px; -} - -.i-window-footer:after { - display: block; - content: ""; - height: 46px; - background: transparent url(img/bottom-right.png) no-repeat top right; - margin: -46px -20px 0 1px; + height: 8px; + margin-left: 9px; + background: transparent url(img/bottom-right.png) no-repeat right top; } .i-window-resizebox { - position:absolute; - bottom: 24px; - right: 0; - width: 25px; - height: 21px; + position: absolute; + bottom: 4px; + right: 4px; + width: 10px; + height: 10px; cursor: se-resize; background: transparent url(img/resize.png); + overflow: hidden; } .i-window-resizebox-disabled { @@ -104,27 +81,27 @@ } .i-window-closebox { - position:absolute; - top: 33px; - right: 36px; + position: absolute; + top: 21px; + right: 24px; width: 12px; - height: 11px; + height: 12px; background: transparent url(img/close.png); cursor: pointer; overflow: hidden; } .i-window-closebox:hover { - background-position: 0 -11px; + background-position: 0 -12px; } .i-window-modalitycurtain { - top:0; - left:0; - background:white; + top: 0; + left: 0; + background: white; opacity: 0.5; - position:fixed; - width:100%; - height:100%; + position: fixed; + width: 100%; + height: 100%; filter: alpha(opacity=50); } @@ -137,51 +114,107 @@ /* IE specific styles */ * html .i-window { - width: 0; + width: 0; /* min-size for IE6 */ + overflow: hidden; + zoom: 1; } -* html .i-window-wrap { - padding: 12px; - border: 1px solid #e8e9e9; - background: #d8dee0; - /*filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="../ITMILL/widgetsets/com.itmill.toolkit.terminal.gwt.DefaultWidgetSet/default/window/img/bg-color.png", sizingMethod="scale");*/ - /*zoom: 1; to gain hasLayout, IE won't apply filter otherwise */ + + + + + + + + + + + + + + +/* Shadow for window */ + +.i-shadow-window { + position: absolute; } -*+html .i-window-wrap { - padding: 12px; - border: 1px solid #e8e9e9; - background: transparent url(img/bg-color.png) repeat; + +.i-shadow-window .top-left { + position: absolute; overflow: hidden; + top: -13px; left: -20px; + width: 39px; height: 39px; + background: transparent url(img/shadow/top-left.png); } -* html .i-window-wrap2 { - padding: 6px; - border: 1px solid #babfc0; - background: #fff; +.i-shadow-window .top { + position: absolute; overflow: hidden; + top: -13px; left: 19px; + height: 39px; + right: 19px; + background: transparent url(img/shadow/top.png); } -*+html .i-window-wrap2 { - padding: 6px; - border: 1px solid #babfc0; - background: #fff; + +.i-shadow-window .top-right { + position: absolute; overflow: hidden; + top: -13px; right: -20px; + width: 39px; height: 39px; + background: transparent url(img/shadow/top-right.png); } -* html .i-window-footer { - margin-bottom: 0; +.i-shadow-window .left { + position: absolute; overflow: hidden; + top: 26px; left: -20px; + width: 39px; + bottom: 12px; + background: transparent url(img/shadow/left.png); } -*+html .i-window-footer { - margin-bottom: 0; + +.i-shadow-window .center { + position: absolute; overflow: hidden; + top: 26px; left: 19px; + bottom: 12px; right: 19px; + background: transparent url(img/shadow/center.png); } -* html .i-window-resizebox { - bottom: 1px; - right: 1px; - width: 15px; - height: 12px; - background: url(img/resize.png); +.i-shadow-window .right { + position: absolute; overflow: hidden; + top: 26px; right: -20px; + width: 39px; + bottom: 12px; + background: transparent url(img/shadow/right.png); } -* html .i-window-resizebox-disabled { - background: transparent; + +.i-shadow-window .bottom-left { + position: absolute; overflow: hidden; + bottom: -27px; left: -20px; + width: 39px; height: 39px; + background: transparent url(img/shadow/bottom-left.png); +} + +.i-shadow-window .bottom { + position: absolute; overflow: hidden; + bottom: -27px; left: 19px; + right: 19px; height: 39px; + background: transparent url(img/shadow/bottom.png); +} + +.i-shadow-window .bottom-right { + position: absolute; overflow: hidden; + bottom: -27px; right: -20px; + width: 39px; height: 39px; + background: transparent url(img/shadow/bottom-right.png); +} + + +/* For IE6 (no transparent png's, we use a blur filter) */ + +* html .i-shadow-window * { + display: none; } -*+html .i-window-resizebox { - bottom: 0; - background-position: 3px 3px; + +* html .i-shadow-window { + background: #000; + filter: progid:DXImageTransform.Microsoft.Blur(pixelRadius=6) alpha(opacity=20); + margin-top: -4px; + margin-left: -6px; } \ No newline at end of file diff --git a/src/com/itmill/toolkit/terminal/gwt/client/ui/IToolkitOverlay.java b/src/com/itmill/toolkit/terminal/gwt/client/ui/IToolkitOverlay.java index 0f9de239cd..6de6c9db37 100644 --- a/src/com/itmill/toolkit/terminal/gwt/client/ui/IToolkitOverlay.java +++ b/src/com/itmill/toolkit/terminal/gwt/client/ui/IToolkitOverlay.java @@ -7,7 +7,6 @@ package com.itmill.toolkit.terminal.gwt.client.ui; import com.google.gwt.animation.client.Animation; import com.google.gwt.user.client.DOM; import com.google.gwt.user.client.Element; -import com.google.gwt.user.client.ui.HTML; import com.google.gwt.user.client.ui.PopupListener; import com.google.gwt.user.client.ui.PopupPanel; import com.google.gwt.user.client.ui.RootPanel; @@ -20,9 +19,44 @@ import com.itmill.toolkit.terminal.gwt.client.BrowserInfo; */ public class IToolkitOverlay extends PopupPanel { - public static final int Z_INDEX = 20000; + /* + * The z-index value from where all overlays live. This can be overridden in + * any extending class. + */ + protected static int Z_INDEX = 20000; - private Shadow shadow; + /* + * Shadow element style. If an extending class wishes to use a different + * style of shadow, it can use setShadowStyle(String) to give the shadow + * element a new style name. + */ + public static final String CLASSNAME_SHADOW = "i-shadow"; + + /* + * The shadow element for this overlay. + */ + private Element shadow; + + /** + * The HTML snippet that is used to render the actual shadow. In consists of + * nine different DIV-elements with the following class names: + * + * 
+     *   .i-shadow[-stylename]
+     *   ----------------------------------------------
+     *   | .top-left     |   .top    |     .top-right |
+     *   |---------------|-----------|----------------|
+     *   |               |           |                |
+     *   | .left         |  .center  |         .right |
+     *   |               |           |                |
+     *   |---------------|-----------|----------------|
+     *   | .bottom-left  |  .bottom  |  .bottom-right |
+     *   ----------------------------------------------
+     *
+ * + * See default theme 'shadow.css' for implementation example. + */ + private static final String SHADOW_HTML = "
"; public IToolkitOverlay() { super(); @@ -42,20 +76,54 @@ public class IToolkitOverlay extends PopupPanel { public IToolkitOverlay(boolean autoHide, boolean modal, boolean showShadow) { super(autoHide, modal); if (showShadow) { - shadow = new Shadow(); + shadow = DOM.createDiv(); + shadow.setClassName(CLASSNAME_SHADOW); + shadow.setInnerHTML(SHADOW_HTML); + DOM.setStyleAttribute(shadow, "position", "absolute"); + + addPopupListener(new PopupListener() { + public void onPopupClosed(PopupPanel sender, boolean autoClosed) { + DOM.removeChild(RootPanel.get().getElement(), shadow); + } + }); } adjustZIndex(); } private void adjustZIndex() { - DOM.setStyleAttribute(getElement(), "zIndex", "" + Z_INDEX); + setZIndex(Z_INDEX); + } + + /** + * Set the z-index (visual stack position) for this overlay. + * + * @param zIndex + * The new z-index + */ + protected void setZIndex(int zIndex) { + DOM.setStyleAttribute(getElement(), "zIndex", "" + zIndex); + if (shadow != null) { + DOM.setStyleAttribute(shadow, "zIndex", "" + zIndex); + } + if (BrowserInfo.get().isIE6()) { + adjustIE6Frame(getElement(), zIndex - 1); + } + } + + /** + * Get the z-index (visual stack position) of this overlay. + * + * @return The z-index for this overlay. + */ + private int getZIndex() { + return Integer.parseInt(DOM.getStyleAttribute(getElement(), "zIndex")); } @Override public void setPopupPosition(int left, int top) { super.setPopupPosition(left, top); if (shadow != null) { - shadow.updateSizeAndPosition(isAnimationEnabled() ? 0 : 1); + updateShadowSizeAndPosition(isAnimationEnabled() ? 0 : 1); } } @@ -63,127 +131,142 @@ public class IToolkitOverlay extends PopupPanel { public void show() { super.show(); if (shadow != null) { - DOM.appendChild(RootPanel.get().getElement(), shadow.getElement()); + DOM + .insertBefore(RootPanel.get().getElement(), shadow, + getElement()); if (isAnimationEnabled()) { ShadowAnimation sa = new ShadowAnimation(); sa.run(200); } else { - shadow.updateSizeAndPosition(1.0); + updateShadowSizeAndPosition(1.0); } } if (BrowserInfo.get().isIE6()) { - adjustIE6Frame(getElement(), Z_INDEX - 1); + adjustIE6Frame(getElement(), getZIndex()); } } + /* + * Needed to position overlays on top of native SELECT elements in IE6. See + * bug #2004 + */ private native void adjustIE6Frame(Element popup, int zindex) /*-{ // relies on PopupImplIE6 - popup.__frame.style.zIndex = zindex; + if(popup.__frame) + popup.__frame.style.zIndex = zindex; }-*/; - public void setShadowOffset(int top, int right, int bottom, int left) { + @Override + public void setWidth(String width) { + super.setWidth(width); if (shadow != null) { - shadow.setOffset(top, right, bottom, left); + updateShadowSizeAndPosition(1.0); } } - private class Shadow extends HTML { - - private static final String CLASSNAME = "i-shadow"; - - private static final String HTML = "
"; + @Override + public void setHeight(String height) { + super.setHeight(height); + if (shadow != null) { + updateShadowSizeAndPosition(1.0); + } + } - // Amount of shadow on each side. - private int top = 2; - private int right = 5; - private int bottom = 6; - private int left = 5; + /** + * Sets the shadow style for this overlay. Will override any previous style + * for the shadow. The default style name is defined by CLASSNAME_SHADOW. + * The given style will be prefixed with CLASSNAME_SHADOW. + * + * @param style + * The new style name for the shadow element. Will be prefixed by + * CLASSNAME_SHADOW, e.g. style=='foobar' -> actual style + * name=='i-shadow-foobar'. + */ + protected void setShadowStyle(String style) { + if (shadow != null) { + shadow.setClassName(CLASSNAME_SHADOW + "-" + style); + } + } - public Shadow() { - super(HTML); - setStyleName(CLASSNAME); - DOM.setStyleAttribute(getElement(), "position", "absolute"); + /* + * Extending classes should always call this method after they change the + * size of overlay without using normal 'setWidth(String)' and + * 'setHeight(String)' methods. + */ + protected void updateShadowSizeAndPosition() { + updateShadowSizeAndPosition(1.0); + } - addPopupListener(new PopupListener() { - public void onPopupClosed(PopupPanel sender, boolean autoClosed) { - DOM.removeChild(RootPanel.get().getElement(), shadow - .getElement()); - } - }); + /** + * Recalculates proper position and dimensions for the shadow element. Can + * be used to animate the shadow, using the 'progress' parameter (used to + * animate the shadow in sync with GWT PopupPanel's default animation + * 'PopupPanel.AnimationType.CENTER'). + * + * @param progress + * A value between 0.0 and 1.0, indicating the progress of the + * animation (0=start, 1=end). + */ + private void updateShadowSizeAndPosition(double progress) { + // Don't do anything if overlay element is not attached + if (!isAttached()) { + return; } - public void updateSizeAndPosition(double phase) { - // Calculate proper z-index - String zIndex = null; - if (IToolkitOverlay.this.isAttached()) { - // Odd behaviour with Windows Hosted Mode forces us to use a - // redundant try/catch block (See dev.itmill.com #2011) - try { - zIndex = DOM.getStyleAttribute(IToolkitOverlay.this - .getElement(), "zIndex"); - } catch (Exception ignore) { - // Ignored, will cause no harm, other than a little - // eye-candy missing - } - } - if (zIndex == null) { - zIndex = "" + Z_INDEX; - } + // Calculate proper z-index + String zIndex = null; + try { + // Odd behaviour with Windows Hosted Mode forces us to use this + // redundant try/catch block (See dev.itmill.com #2011) + zIndex = DOM.getStyleAttribute(getElement(), "zIndex"); + } catch (Exception ignore) { + // Ignored, will cause no harm, other than a little eye-candy + // missing + } + if (zIndex == null) { + zIndex = "" + Z_INDEX; + } + // Calculate position and size + if (BrowserInfo.get().isIE()) { + // Shake IE + getOffsetHeight(); + getOffsetWidth(); + } - // Calculate position and size - if (BrowserInfo.get().isIE()) { - // Shake IE - IToolkitOverlay.this.getOffsetHeight(); - IToolkitOverlay.this.getOffsetWidth(); - } - int x = IToolkitOverlay.this.getAbsoluteLeft() - left; - int y = IToolkitOverlay.this.getAbsoluteTop() - top; - int width = IToolkitOverlay.this.getOffsetWidth() + left + right; - int height = IToolkitOverlay.this.getOffsetHeight() + top + bottom; - if (width < 0) { - width = 0; - } - if (height < 0) { - height = 0; - } + int x = getAbsoluteLeft(); + int y = getAbsoluteTop(); + int width = getOffsetWidth(); + int height = getOffsetHeight(); - // Animate the shadow size - x += (int) (width * (1.0 - phase) / 2.0); - y += (int) (height * (1.0 - phase) / 2.0); - width = (int) (width * phase); - height = (int) (height * phase); - - // Update correct values - DOM.setStyleAttribute(getElement(), "display", phase < 0.9 ? "none" - : ""); - DOM.setStyleAttribute(shadow.getElement(), "zIndex", "" - + (Integer.parseInt(zIndex) - 1)); - DOM.setStyleAttribute(getElement(), "width", width + "px"); - DOM.setStyleAttribute(getElement(), "height", height + "px"); - DOM.setStyleAttribute(getElement(), "top", y + "px"); - DOM.setStyleAttribute(getElement(), "left", x + "px"); - } - - public void setOffset(int top, int right, int bottom, int left) { - this.top = top; - this.right = right; - this.bottom = bottom; - this.left = left; - if (IToolkitOverlay.this.isAttached()) { - updateSizeAndPosition(1.0); - } + if (width < 0) { + width = 0; + } + if (height < 0) { + height = 0; } - } + // Animate the shadow size + x += (int) (width * (1.0 - progress) / 2.0); + y += (int) (height * (1.0 - progress) / 2.0); + width = (int) (width * progress); + height = (int) (height * progress); - class ShadowAnimation extends Animation { + // Update correct values + DOM.setStyleAttribute(shadow, "display", progress < 0.9 ? "none" : ""); + DOM.setStyleAttribute(shadow, "zIndex", zIndex); + DOM.setStyleAttribute(shadow, "width", width + "px"); + DOM.setStyleAttribute(shadow, "height", height + "px"); + DOM.setStyleAttribute(shadow, "top", y + "px"); + DOM.setStyleAttribute(shadow, "left", x + "px"); + } + protected class ShadowAnimation extends Animation { + @Override protected void onUpdate(double progress) { if (shadow != null) { - shadow.updateSizeAndPosition(progress); + updateShadowSizeAndPosition(progress); } } - } } diff --git a/src/com/itmill/toolkit/terminal/gwt/client/ui/IWindow.java b/src/com/itmill/toolkit/terminal/gwt/client/ui/IWindow.java index 5aca69c3a8..8de7a9e366 100644 --- a/src/com/itmill/toolkit/terminal/gwt/client/ui/IWindow.java +++ b/src/com/itmill/toolkit/terminal/gwt/client/ui/IWindow.java @@ -14,7 +14,6 @@ import com.google.gwt.user.client.Element; import com.google.gwt.user.client.Event; import com.google.gwt.user.client.Window; import com.google.gwt.user.client.ui.Frame; -import com.google.gwt.user.client.ui.PopupPanel; import com.google.gwt.user.client.ui.RootPanel; import com.google.gwt.user.client.ui.ScrollListener; import com.google.gwt.user.client.ui.ScrollPanel; @@ -28,17 +27,18 @@ import com.itmill.toolkit.terminal.gwt.client.Util; /** * "Sub window" component. * - * TODO update position / scrollposition / size to client + * TODO update position / scroll position / size to client * * @author IT Mill Ltd */ -public class IWindow extends PopupPanel implements Paintable, ScrollListener { +public class IWindow extends IToolkitOverlay implements Paintable, + ScrollListener { private static final int MIN_HEIGHT = 60; private static final int MIN_WIDTH = 80; - private static Vector windowOrder = new Vector(); + private static Vector windowOrder = new Vector(); public static final String CLASSNAME = "i-window"; @@ -50,7 +50,7 @@ public class IWindow extends PopupPanel implements Paintable, ScrollListener { private static final int STACKING_OFFSET_PIXELS = 15; - private static final int Z_INDEX_BASE = 10000; + public static final int Z_INDEX = 10000; private Paintable layout; @@ -106,7 +106,10 @@ public class IWindow extends PopupPanel implements Paintable, ScrollListener { private boolean readonly; public IWindow() { - super(); + super(false, false, true); // no autohide, not modal, shadow + // Different style of shadow for windows + setShadowStyle("window"); + final int order = windowOrder.size(); setWindowOrder(order); windowOrder.add(this); @@ -122,7 +125,7 @@ public class IWindow extends PopupPanel implements Paintable, ScrollListener { windowOrder.remove(this); windowOrder.add(this); for (; curIndex < windowOrder.size(); curIndex++) { - ((IWindow) windowOrder.get(curIndex)).setWindowOrder(curIndex); + windowOrder.get(curIndex).setWindowOrder(curIndex); } } } @@ -137,11 +140,15 @@ public class IWindow extends PopupPanel implements Paintable, ScrollListener { } public void setWindowOrder(int order) { - int zIndex = (order + Z_INDEX_BASE); + setZIndex(order + Z_INDEX); + } + + @Override + protected void setZIndex(int zIndex) { + super.setZIndex(zIndex); if (modal) { DOM.setStyleAttribute(modalityCurtain, "zIndex", "" + zIndex); } - DOM.setStyleAttribute(getElement(), "zIndex", "" + zIndex); } protected void constructDOM() { @@ -272,7 +279,7 @@ public class IWindow extends PopupPanel implements Paintable, ScrollListener { "offsetHeight") - DOM.getElementPropertyInt(contents, "offsetHeight")); // FIXME hardcoded contents elements border size - contentPixels -= 2; + contentPixels -= 1; setHeight(contentPixels + "px"); } else { @@ -385,6 +392,7 @@ public class IWindow extends PopupPanel implements Paintable, ScrollListener { center(); } + updateShadowSizeAndPosition(); } private void setReadOnly(boolean readonly) { @@ -488,7 +496,7 @@ public class IWindow extends PopupPanel implements Paintable, ScrollListener { DOM.setStyleAttribute(modalityCurtain, "position", "absolute"); } DOM.setStyleAttribute(modalityCurtain, "zIndex", "" - + (windowOrder.indexOf(this) + Z_INDEX_BASE)); + + (windowOrder.indexOf(this) + Z_INDEX)); DOM.appendChild(RootPanel.getBodyElement(), modalityCurtain); } @@ -573,7 +581,7 @@ public class IWindow extends PopupPanel implements Paintable, ScrollListener { @Override public void onBrowserEvent(final Event event) { - final int type = DOM.eventGetType(event); + final int type = event.getTypeInt(); if (type == Event.ONKEYDOWN && shortcutHandler != null) { shortcutHandler.handleKeyboardEvent(event); @@ -587,10 +595,10 @@ public class IWindow extends PopupPanel implements Paintable, ScrollListener { client.handleTooltipEvent(event, this); } - if (resizing || DOM.compare(resizeBox, target)) { + if (resizing || resizeBox == target) { onResizeEvent(event); DOM.eventCancelBubble(event, true); - } else if (DOM.compare(target, closeBox)) { + } else if (target == closeBox) { if (type == Event.ONCLICK) { onCloseClick(); DOM.eventCancelBubble(event, true); @@ -664,8 +672,12 @@ public class IWindow extends PopupPanel implements Paintable, ScrollListener { client.updateVariable(id, "width", w, false); client.updateVariable(id, "height", h, false); } + // Update shadow size & position + // Update child widget dimensions - client.runDescendentsLayout(this); + if (client != null) { + client.runDescendentsLayout(this); + } } @Override @@ -679,6 +691,7 @@ public class IWindow extends PopupPanel implements Paintable, ScrollListener { width.length() - 2)) + borderWidthHorizontal) + "px"); } + updateShadowSizeAndPosition(); } private void onDragEvent(Event event) { @@ -728,7 +741,7 @@ public class IWindow extends PopupPanel implements Paintable, ScrollListener { return false; } else if (modal) { // return false when modal and outside window - final Element target = DOM.eventGetTarget(event); + final Element target = event.getTarget().cast(); if (!DOM.isOrHasChild(getElement(), target)) { return false; }