IWindow now extends IToolkitOverlay.
svn changeset:5591/svn branch:trunk
.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);
}
-/* 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
.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);
}
-/* 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
--------------------------*/
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 {
.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 */
.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 {
}
.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);
}
/* 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;
}
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 {
.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 */
.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 {
}
.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);
}
/* 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
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;
*/
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:
+ *
+ * <pre>
+ * .i-shadow[-stylename]
+ * ----------------------------------------------
+ * | .top-left | .top | .top-right |
+ * |---------------|-----------|----------------|
+ * | | | |
+ * | .left | .center | .right |
+ * | | | |
+ * |---------------|-----------|----------------|
+ * | .bottom-left | .bottom | .bottom-right |
+ * ----------------------------------------------
+ * </pre>
+ *
+ * See default theme 'shadow.css' for implementation example.
+ */
+ private static final String SHADOW_HTML = "<div class=\"top-left\"></div><div class=\"top\"></div><div class=\"top-right\"></div><div class=\"left\"></div><div class=\"center\"></div><div class=\"right\"></div><div class=\"bottom-left\"></div><div class=\"bottom\"></div><div class=\"bottom-right\"></div>";
public IToolkitOverlay() {
super();
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);
}
}
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 = "<div class=\"top-left\"></div><div class=\"top\"></div><div class=\"top-right\"></div><div class=\"left\"></div><div class=\"center\"></div><div class=\"right\"></div><div class=\"bottom-left\"></div><div class=\"bottom\"></div><div class=\"bottom-right\"></div>";
+ @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);
}
}
-
}
}
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;
/**
* "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<IWindow> windowOrder = new Vector<IWindow>();
public static final String CLASSNAME = "i-window";
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;
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);
windowOrder.remove(this);
windowOrder.add(this);
for (; curIndex < windowOrder.size(); curIndex++) {
- ((IWindow) windowOrder.get(curIndex)).setWindowOrder(curIndex);
+ windowOrder.get(curIndex).setWindowOrder(curIndex);
}
}
}
}
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() {
"offsetHeight") - DOM.getElementPropertyInt(contents,
"offsetHeight"));
// FIXME hardcoded contents elements border size
- contentPixels -= 2;
+ contentPixels -= 1;
setHeight(contentPixels + "px");
} else {
center();
}
+ updateShadowSizeAndPosition();
}
private void setReadOnly(boolean readonly) {
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);
}
@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);
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);
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
width.length() - 2)) + borderWidthHorizontal)
+ "px");
}
+ updateShadowSizeAndPosition();
}
private void onDragEvent(Event event) {
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;
}
projects / vaadin-framework.git / commitdiff
