-Some method names converted to comply GWT 1.4 naming.
-TahSheet now supports Sizeable interface.
svn changeset:2124/svn branch:trunk
package com.itmill.toolkit.terminal.gwt.client.ui;
+import com.google.gwt.user.client.DOM;
+import com.google.gwt.user.client.Element;
import com.google.gwt.user.client.ui.FlowPanel;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.SimplePanel;
// TODO optimize: if only the caption has changed, don't re-render whole content
clear();
+ // Remove shadow
+ Element deco = DOM.getChild(getElement(), 0);
+ if(deco != null)
+ DOM.removeChild(getElement(), deco);
if(uidl.hasAttribute("style"))
setStyleName(CLASSNAME + " " + CLASSNAME+"-"+uidl.getStringAttribute("style"));
// Handle caption displaying
if(uidl.hasAttribute("caption") && !uidl.getStringAttribute("caption").equals("")) {
caption.setText(uidl.getStringAttribute("caption"));
+ caption.setStyleName(CLASSNAME+"-caption");
+ add(caption);
+ } else {
+ // Theme needs this to work around different paddings
+ caption.setStyleName(CLASSNAME+"-nocaption");
+ caption.setText("");
add(caption);
- } else if(uidl.hasAttribute("style")) {
- // Theme needs this to work around different paddings
- addStyleName(CLASSNAME+"-nocaption");
}
// Size panel
setWidth(w>=0?w+widthUnit:"auto");
content.setHeight(h>=0?h+heightUnit:"auto");
+ // Render content
UIDL layoutUidl = uidl.getChildUIDL(0);
Widget layout = client.getWidget(layoutUidl);
((Paintable)layout).updateFromUIDL(layoutUidl, client);
add(content);
+ // Add a decoration element for shadow
+ deco = DOM.createDiv();
+ DOM.setElementProperty(deco, "className", CLASSNAME+"-deco");
+ DOM.appendChild(getElement(), deco);
+
}
}
bigger = DOM.createDiv();\r
\r
setStyleName(CLASSNAME);\r
- DOM.setAttribute(base, "className", CLASSNAME+"-base");\r
- DOM.setAttribute(handle, "className", CLASSNAME+"-handle");\r
- DOM.setAttribute(smaller, "className", CLASSNAME+"-smaller");\r
- DOM.setAttribute(bigger, "className", CLASSNAME+"-bigger");\r
+ DOM.setElementProperty(base, "className", CLASSNAME+"-base");\r
+ DOM.setElementProperty(handle, "className", CLASSNAME+"-handle");\r
+ DOM.setElementProperty(smaller, "className", CLASSNAME+"-smaller");\r
+ DOM.setElementProperty(bigger, "className", CLASSNAME+"-bigger");\r
\r
DOM.appendChild(getElement(), bigger);\r
DOM.appendChild(getElement(), smaller);\r
DOM.setStyleAttribute(smaller, "display", "block");\r
DOM.setStyleAttribute(bigger, "display", "block");\r
if(vertical) {\r
- int arrowSize = Integer.parseInt(DOM.getAttribute(smaller, "offsetWidth"));\r
+ int arrowSize = Integer.parseInt(DOM.getElementProperty(smaller, "offsetWidth"));\r
DOM.setStyleAttribute(bigger, "marginLeft", arrowSize+"px");\r
DOM.setStyleAttribute(bigger, "marginRight", arrowSize+"px");\r
}\r
DOM.setStyleAttribute(getElement(), "width", size + "px");\r
else {\r
Element p = DOM.getParent(getElement());\r
- if(Integer.parseInt(DOM.getAttribute(p, "offsetWidth")) > 50)\r
+ if(Integer.parseInt(DOM.getElementProperty(p, "offsetWidth")) > 50)\r
DOM.setStyleAttribute(getElement(), "width", "auto");\r
else {\r
// Set minimum of 50px width and adjust after all \r
Timer adjust = new Timer() {\r
public void run() {\r
Element p = DOM.getParent(getElement());\r
- if(Integer.parseInt(DOM.getAttribute(p, "offsetWidth")) > 50)\r
+ if(Integer.parseInt(DOM.getElementProperty(p, "offsetWidth")) > 50)\r
DOM.setStyleAttribute(getElement(), "width", "auto");\r
}\r
};\r
if(vertical) {\r
// TODO\r
} else {\r
- int t = Integer.parseInt(DOM.getAttribute(base, "offsetHeight")) - Integer.parseInt(DOM.getAttribute(handle, "offsetHeight"));\r
+ int t = Integer.parseInt(DOM.getElementProperty(base, "offsetHeight")) - Integer.parseInt(DOM.getElementProperty(handle, "offsetHeight"));\r
DOM.setStyleAttribute(handle, "top", (t/2)+"px");\r
DOM.setStyleAttribute(handle, "left", "0px");\r
- int w = (int) (Double.parseDouble(DOM.getAttribute(base, "offsetWidth")) / 100 * handleSize);\r
+ int w = (int) (Double.parseDouble(DOM.getElementProperty(base, "offsetWidth")) / 100 * handleSize);\r
if(handleSize == -1) {\r
- int baseW = Integer.parseInt(DOM.getAttribute(base, "offsetWidth"));\r
+ int baseW = Integer.parseInt(DOM.getElementProperty(base, "offsetWidth"));\r
double range = (max - min) * (resolution+1) * 3;\r
w = (int) (baseW - range);\r
}\r
if(vertical) {\r
// TODO\r
} else {\r
- int handleWidth = Integer.parseInt(DOM.getAttribute(handle, "offsetWidth"));\r
- int baseWidth = Integer.parseInt(DOM.getAttribute(base, "offsetWidth"));\r
+ int handleWidth = Integer.parseInt(DOM.getElementProperty(handle, "offsetWidth"));\r
+ int baseWidth = Integer.parseInt(DOM.getElementProperty(base, "offsetWidth"));\r
int range = baseWidth - handleWidth;\r
double v = value.doubleValue();\r
double valueRange = max - min;\r
if(vertical) {\r
// TODO\r
} else {\r
- double handleW = Integer.parseInt(DOM.getAttribute(handle, "offsetWidth"));\r
+ double handleW = Integer.parseInt(DOM.getElementProperty(handle, "offsetWidth"));\r
double baseX = DOM.getAbsoluteLeft(base) + handleW/2;\r
- double baseW = Integer.parseInt(DOM.getAttribute(base, "offsetWidth"));\r
+ double baseW = Integer.parseInt(DOM.getElementProperty(base, "offsetWidth"));\r
v = ((x-baseX)/(baseW-handleW)) * (max-min) + min;\r
}\r
\r
import java.util.ArrayList;
import java.util.Iterator;
+import com.google.gwt.user.client.DOM;
+import com.google.gwt.user.client.Element;
import com.google.gwt.user.client.ui.DeckPanel;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.SourcesTabEvents;
ArrayList captions = new ArrayList();
int activeTabIndex = 0;
+
+ private Element deco;
TabListener tl = new TabListener() {
}
});
-
+
}
public void updateFromUIDL(UIDL uidl, ApplicationConnection client) {
TabBar tb = getTabBar();
tb.setStyleName(CLASSNAME+"-tabs");
+ // Add a decoration element for shadow
+ // TODO refactor tabsheet with plain DIV-implementation
+ /*if(!DOM.compare(deco, null)) {
+ DOM.removeChild(DOM.getParent(getElement()), deco);
+ deco = null;
+ }
+ deco = DOM.createDiv();
+ DOM.setElementProperty(deco, "className", CLASSNAME+"-deco");
+ DOM.appendChild(DOM.getParent(getElement()), deco);
+ */
+ // Adjust width and height
+ String h = uidl.hasAttribute("height")? uidl.getStringAttribute("height") : "";
+ String w = uidl.hasAttribute("width")? uidl.getStringAttribute("width") : "";
+ setWidth(w!=""?w:"auto");
+ //DOM.setStyleAttribute(deco, "width", w!=""?w:"auto");
+ dp.setHeight(h!=""?h:"auto");
+
UIDL tabs = uidl.getChildUIDL(0);
boolean keepCurrentTabs = tabKeys.size() == tabs.getNumberOfChildren();
for (int i = 0; keepCurrentTabs && i < tabKeys.size(); i++)
body {\r
- background: #fafafc url(../img/window-bottom-bg.gif) no-repeat right bottom fixed;\r
+ background: #f5f6f7 url(../img/window-bottom-bg.gif) no-repeat right bottom fixed;\r
font-family: helvetica, arial, tahoma, verdana, sans-serif;\r
- color: #222;\r
- font-size: 68.75%;\r
- line-height: 1.4em;\r
+ color: #454a51;\r
+ font-size: 13px;\r
+ line-height: 19px;\r
padding: 8px;\r
margin: 0;\r
}\r
.i-panel {\r
- border: 1px solid #29528a;\r
- padding: 5px 3px 2px 2px;\r
- margin: 5px;\r
+ margin: 8px 0 1px 0;\r
+}\r
+\r
+.i-panel-caption {\r
+ font-size: 12px;\r
+ line-height: 12px;\r
+ font-weight: normal;\r
+ color: #2c3c49;\r
+ white-space: nowrap;\r
+ height: 27px;\r
+ padding: 0 5px 0 5px;\r
+ border: 1px solid #c1c6cc;\r
+ border-bottom: none;\r
background: #fff url(../img/top-bg.png) repeat-x top left;\r
}\r
\r
-.i-panel:before {\r
+.i-panel-caption:before {\r
display: block;\r
- height: 7px;\r
+ height: 28px;\r
overflow: hidden;\r
background: transparent url(../img/top-right.png) no-repeat right top;\r
content: url(../img/top-left.png);\r
- margin: -6px -4px 3px -3px;\r
+ margin: -1px -6px -20px -6px;\r
+}\r
+\r
+.i-panel-content {\r
+ border: 1px solid #c1c6cc;\r
+ border-top: none;\r
+ background-color: #fff;\r
+ overflow: auto;\r
+ padding: 8px;\r
}\r
\r
-.i-panel:after {\r
+.i-panel-deco {\r
+ height: 9px;\r
+ background: transparent url(../../common/img/shadow.png) repeat-x left bottom;\r
+ margin-top: -2px;\r
+ position: relative;\r
+}\r
+\r
+.i-panel-deco:before {\r
display: block;\r
height: 2px;\r
overflow: hidden;\r
background: transparent url(../img/bottom-right.png) no-repeat right top;\r
content: url(../img/bottom-left.png);\r
- margin: 2px -4px -3px -3px;\r
}\r
\r
-.i-panel-caption {\r
- font-size: 1.1em;\r
- font-weight: bold;\r
- color: #1c3e6e;\r
- margin: 0 0 7px 4px;\r
- overflow: hidden;\r
+.i-panel-nocaption {\r
+ border-top: 1px solid #c1c6cc;\r
+ background-color: #fff;\r
}\r
\r
-.i-panel-content {\r
- overflow: auto;\r
- padding: 3px;\r
+.i-panel-nocaption:before {\r
+ display: block;\r
+ height: 2px;\r
+ overflow: hidden;\r
+ background: transparent url(../img/top-right-small.png) no-repeat right top;\r
+ content: url(../img/top-left-small.png);\r
+ margin-top: -1px;\r
}\r
\r
\r
\r
/* Strong style */\r
-.i-panel-strong {\r
+\r
+.i-panel-strong .i-panel-caption {\r
background-image: url(../img/top-bg-strong.png);\r
+ border-color: #6c9ad8;\r
+ color: #fff;\r
+ font-weight: bold;\r
}\r
\r
-.i-panel-strong:before {\r
- height: 28px;\r
+.i-panel-strong .i-panel-caption:before {\r
background-image: url(../img/top-right-strong.png);\r
content: url(../img/top-left-strong.png);\r
}\r
\r
-.i-panel-strong .i-panel-caption {\r
- color: #fff;\r
- margin: -25px 0 12px 4px;\r
- white-space: nowrap;\r
+\r
+\r
+/* Light style */\r
+\r
+.i-panel-light .i-panel-caption {\r
+ background: transparent;\r
+ font-weight: bold;\r
+ border: none;\r
+ padding: 3px 0 0 2px;\r
+ height: 16px;\r
+ margin-bottom: 1px;\r
+ border-bottom: 1px solid #e7e7e8;\r
}\r
\r
-/* Strong style without caption */\r
-.i-panel-strong.i-panel-nocaption {\r
- background-image: url(../img/top-bg.png);\r
+.i-panel-light .i-panel-caption:before {\r
+ display: none;\r
}\r
-.i-panel-strong.i-panel-nocaption:before {\r
- height: 7px;\r
- background-image: url(../img/top-right.png);\r
- content: url(../img/top-left.png);\r
+\r
+.i-panel-light .i-panel-caption:after {\r
+ display: block;\r
+ height: 2px;\r
+ overflow: hidden;\r
+ background: transparent url(../img/top-right-light.png) no-repeat top right;\r
+ content: url(../img/top-left-light.png);\r
+ margin: 4px 0 0 -2px;\r
}\r
\r
+.i-panel-light .i-panel-content {\r
+ border: 1px solid #e7e7e8;\r
+ border-top: none;\r
+ background: #fff url(../img/bg-light.png) repeat-x 0 1px;\r
+}\r
\r
-/* Light style */\r
-.i-panel-light {\r
- background-image: url(../img/top-bg-light.png);\r
- border-color: #b3c2d6;\r
- border-top-color: #2667a2;\r
- margin-top: 20px;\r
+.i-panel-light .i-panel-deco {\r
+ background: transparent;\r
+ height: 2px;\r
+}\r
+\r
+.i-panel-light .i-panel-deco:before {\r
+ background: transparent url(../img/bottom-right-light.png) no-repeat top right;\r
+ content: url(../img/bottom-left-light.png);\r
}\r
\r
-.i-panel-light:before {\r
- height: 6px;\r
+/* Light style without caption */\r
+.i-panel-light .i-panel-nocaption {\r
+ border-color: #e7e7e8;\r
+}\r
+\r
+.i-panel-light .i-panel-nocaption:before {\r
background-image: url(../img/top-right-light.png);\r
content: url(../img/top-left-light.png);\r
}\r
\r
-.i-panel-light:after {\r
- background-image: url(../img/bottom-right-light.png);\r
- content: url(../img/bottom-left-light.png);\r
+\r
+\r
+/* Highlight style */\r
+\r
+.i-panel-highlight .i-panel-caption {\r
+ background-image: url(../img/top-bg-highlight.png);\r
+ background-color: #fffdec;\r
+ border-color: #c0baae;\r
+ color: #4e4640;\r
}\r
\r
-.i-panel-light .i-panel-caption {\r
- margin: -26px -2px 10px -2px;\r
- font-size: 1em;\r
- white-space: nowrap;\r
+.i-panel-highlight .i-panel-caption:before {\r
+ background-image: url(../img/top-right-highlight.png);\r
+ content: url(../img/top-left-highlight.png);\r
}\r
\r
-/* Light style without caption */\r
-.i-panel-light.i-panel-nocaption {\r
- margin-top: 7px;\r
+.i-panel-highlight .i-panel-content {\r
+ background-color: #fffdec;\r
+ border-color: #c0baae;\r
+ color: #605b52;\r
+}\r
+\r
+/* Highlight style without caption */\r
+.i-panel-highlight .i-panel-nocaption {\r
+ border-color: #c0baae;\r
+ background-color: #fffdec;\r
+}\r
+\r
+\r
+\r
+/* Emphasized style */\r
+\r
+.i-panel-emphasize .i-panel-caption {\r
+ background: #6899d9 url(../img/top-bg-em.gif) repeat-x;\r
+ border-color: #78a2db;\r
+ color: #fff;\r
+ font-weight: bold;\r
+ height: 22px;\r
}\r
\r
+.i-panel-emphasize .i-panel-caption:before {\r
+ background-image: url(../img/top-right-em.gif);\r
+ content: url(../img/top-left-em.gif);\r
+}\r
+\r
+.i-panel-emphasize .i-panel-content {\r
+ background: #3a6bab url(../img/bg-em.gif) repeat-x;\r
+ color: #dee6f2;\r
+ border-color: #78a2db;\r
+}\r
+\r
+.i-panel-emphasize .i-panel-deco {\r
+ margin-top: -4px;\r
+ height: 11px;\r
+ background-image: url(../../common/img/shadow-em.png);\r
+}\r
+\r
+.i-panel-emphasize .i-panel-deco:before {\r
+ background-image: url(../img/bottom-right-em.gif);\r
+ content: url(../img/bottom-left-em.gif);\r
+ height: 4px;\r
+}\r
+\r
+/* Emphasized style without caption */\r
+.i-panel-emphasize .i-panel-nocaption {\r
+ background: #6899d9 url(../img/top-bg-em.gif) repeat-x;\r
+ border: 1px solid #78a2db;\r
+ border-bottom: none;\r
+ height: 3px;\r
+}\r
+\r
+.i-panel-emphasize .i-panel-nocaption:before {\r
+ background-image: url(../img/top-right-em.gif);\r
+ content: url(../img/top-left-em.gif);\r
+ margin: -1px;\r
+}\r
+\r
+\r
+\r
\r
\r
\r
* These selectors must be separate because IE6 won't \r
* apply them if they are grouped together.\r
*/\r
-* html .i-panel {\r
- zoom: 1;\r
+* html .i-panel-caption {\r
+ padding-top: 7px;\r
+ height: 19px;\r
}\r
-*+html .i-panel {\r
- zoom: 1;\r
+*+html .i-panel-caption {\r
+ padding-top: 7px;\r
+ height: 19px;\r
}\r
-* html .i-panel .i-panel-caption {\r
- margin-top: 3px;\r
+\r
+* html .i-panel-deco {\r
+ position: static;\r
+ background: transparent;\r
+ margin: 0;\r
+ font-size: 1;\r
+ height: 7px;\r
+ overflow: hidden;\r
+ /* TODO change url when packaging is complete */\r
+ filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="../com.itmill.toolkit.terminal.gwt.Client/component-themes/common/img/shadow.png", sizingMethod="scale");\r
}\r
-*+html .i-panel .i-panel-caption {\r
- margin-top: 3px;\r
+\r
+/* Without caption */\r
+* html .i-panel-nocaption {\r
+ height: 1px;\r
+ overflow: hidden;\r
+ background: #c1c6cc;\r
+ border: none;\r
}\r
\r
\r
-* html .i-panel-strong .i-panel-caption {\r
- margin: 0 0 10px 4px;\r
+/* Light style */\r
+\r
+* html .i-panel-light .i-panel-caption {\r
+ background: transparent;\r
+ font-weight: bold;\r
+ border: none;\r
+ padding: 3px 0 0 2px;\r
+ height: 16px;\r
}\r
-*+html .i-panel-strong .i-panel-caption {\r
- margin: 1px 0 10px 4px;\r
+*+html .i-panel-light .i-panel-caption {\r
+ background: transparent;\r
+ font-weight: bold;\r
+ border: none;\r
+ padding: 3px 0 0 2px;\r
+ height: 16px;\r
}\r
\r
-* html .i-panel-light {\r
- margin-top: 5px;\r
+* html .i-panel-light .i-panel-content {\r
+ border: 1px solid #e7e7e8;\r
+ background-position: 0 2px;\r
}\r
-*+html .i-panel-light {\r
- margin-top: 23px;\r
+*+html .i-panel-light .i-panel-content {\r
+ border: 1px solid #e7e7e8;\r
+ background-position: 0 2px;\r
}\r
-* html .i-panel-light .i-panel-caption {\r
- margin-left: 4px;\r
- margin-bottom: 5px;\r
- padding-bottom: 0;\r
+\r
+* html .i-panel-light .i-panel-deco {\r
+ display: none;\r
}\r
-*+html .i-panel-light .i-panel-caption {\r
- /*margin-left: 4px;\r
- margin-bottom: 5px;\r
- padding-bottom: 0;*/\r
- margin-top: -23px;\r
+\r
+/* Without caption */\r
+* html .i-panel-light .i-panel-nocaption {\r
+ display: none;\r
+}\r
+*+html .i-panel-light .i-panel-nocaption {\r
+ display: none;\r
+}\r
+\r
+\r
+/* Emphasized style */\r
+* html .i-panel-emphasize .i-panel-caption {\r
+ height: 15px;\r
+}\r
+*+html .i-panel-emphasize .i-panel-caption {\r
+ height: 15px;\r
+}\r
+\r
+* html .i-panel-emphasize .i-panel-content {\r
+ background-attachment: fixed;\r
+}\r
+\r
+* html .i-panel-emphasize .i-panel-deco {\r
+ height: 7px;\r
+ margin-top: 0;\r
+ background: transparent;\r
+ /* TODO change url when packaging is complete */\r
+ filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="../com.itmill.toolkit.terminal.gwt.Client/component-themes/common/img/shadow-em.png", sizingMethod="scale");\r
}
\ No newline at end of file
.i-slider-base {\r
background: #c3d0dd url(../img/bg.png) repeat-x;\r
height: 14px;\r
- margin: 0 1px;\r
overflow: hidden;\r
}\r
.i-slider-handle {\r
background: #fff url(../img/handle-bg.png) repeat-x;\r
border: 1px solid #29528a;\r
height: 10px;\r
- overflow: hidden;\r
+ font-size: 1px;\r
+}\r
+.i-slider-handle:before {\r
+ display: block;\r
+ height: 12px;\r
+ background: transparent url(../img/handle-right.png) no-repeat right top;\r
+ margin: -1px -1px 0 -1px;\r
+ content: url(../img/handle-left.png);\r
}\r
.i-slider-bigger {\r
background: #dde4ef url(../img/arrow-right.png);\r
.i-tabsheet {\r
- margin: 5px;\r
+ \r
}\r
\r
.i-tabsheet-tabs {\r
}\r
\r
.i-tabsheet-tabs .gwt-TabBarRest {\r
- border-bottom: solid 1px #29528a;\r
+ border-bottom: solid 1px #c1c6cc;\r
}\r
\r
.i-tabsheet-tabs .gwt-TabBarItem {\r
- border: solid 1px #6082b0;\r
- border-bottom-color: #29528a;\r
- height: 17px;\r
- padding: 4px 8px;\r
- color: #1c3e6e;\r
- background: #e6ebf0 url(../img/tab-bg.png) repeat-x;\r
+ border: solid 1px #9cacb9;\r
+ border-bottom-color: #c1c6cc;\r
+ height: 18px;\r
+ padding: 4px 25px;\r
+ color: #2c3c49;\r
+ font-size: 12px;\r
+ background: #ecf0f4 url(../img/tab-bg.png) repeat-x;\r
margin-right: 1px;\r
cursor: pointer;\r
}\r
\r
.i-tabsheet-tabs .gwt-TabBarItem-selected {\r
- border-color: #29528a;\r
+ border-color: #c1c6cc;\r
border-bottom-color: #fff;\r
background: #fff url(../img/tab-selected-bg.png) repeat-x;\r
padding-top: 7px;\r
padding-bottom: 5px;\r
margin-bottom: -1px;\r
- font-weight: bold;\r
cursor: default;\r
}\r
\r
.i-tabsheet-tabs .gwt-TabBarItem:hover {\r
- border-color: #29528a;\r
- background: #3a639b url(../img/tab-hover-bg.png) repeat-x;\r
- color: #fff;\r
+ color: #62788a;\r
}\r
\r
.i-tabsheet-tabs .gwt-TabBarItem-selected:hover {\r
- background: #fff url(../img/tab-selected-bg.png) repeat-x;\r
- color: #1c3e6e;\r
+ color: #2c3c49;\r
}\r
\r
-/* Rounded corners effects */\r
.i-tabsheet-tabs .gwt-TabBarItem:before {\r
display: block;\r
height: 2px;\r
overflow: hidden;\r
background: transparent url(../img/tab-right.png) no-repeat right top;\r
content: url(../img/tab-left.png);\r
- margin: -5px -9px 3px -9px;\r
+ margin: -5px -26px 3px -26px;\r
}\r
\r
.i-tabsheet-tabs .gwt-TabBarItem-selected:before {\r
- height: 7px;\r
+ height: 27px;\r
background-image: url(../img/tab-selected-right.png);\r
content: url(../img/tab-selected-left.png);\r
- margin: -8px -9px 0 -9px;\r
+ margin: -8px -26px -20px -26px;\r
}\r
\r
-.i-tabsheet-tabs .gwt-TabBarItem:hover:before {\r
- background-image: url(../img/tab-hover-right.png);\r
- content: url(../img/tab-hover-left.png);\r
+.i-tabsheet-content {\r
+ background-color: #fff;\r
+ border: solid 1px #c1c6cc;\r
+ border-top: none;\r
+ padding: 8px;\r
}\r
\r
-.i-tabsheet-content:after {\r
+.i-tabsheet-deco {\r
+ height: 9px;\r
+ background: transparent url(../../common/img/shadow.png) repeat-x left bottom;\r
+ margin: -2px 0 0 1px;\r
+ position: relative;\r
+}\r
+\r
+.i-tabsheet-deco:before {\r
display: block;\r
height: 2px;\r
overflow: hidden;\r
background: transparent url(../../panel/img/bottom-right.png) no-repeat right top;\r
content: url(../../panel/img/bottom-left.png);\r
- margin: 5px -6px -6px -6px;\r
-}\r
-\r
-\r
-\r
-.i-tabsheet-content {\r
- background-color: #fff;\r
- border: solid 1px #29528a;\r
- border-top: none;\r
- padding: 5px;\r
}\r
\r
/* Fix Safari bug (one pixel table offset) */\r
width: 1px;\r
height: 1px;\r
overflow: hidden;\r
+}\r
+\r
+\r
+\r
+\r
+/* IE specific styles */\r
+* html .i-tabsheet-deco {\r
+ position: static;\r
+ background: transparent;\r
+ margin-top: 0;\r
+ font-size: 1;\r
+ height: 7px;\r
+ overflow: hidden;\r
+ /* TODO change url when packaging is complete */\r
+ filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="../com.itmill.toolkit.terminal.gwt.Client/component-themes/common/img/shadow.png", sizingMethod="scale");\r
}
\ No newline at end of file
* @VERSION@
* @since 3.0
*/
-public class TabSheet extends AbstractComponentContainer {
+public class TabSheet extends AbstractComponentContainer implements Sizeable {
/**
* Linked list of component tabs.
* Holds the value of property tabsHIdden.
*/
private boolean tabsHidden;
+
+ private int height;
+
+ private int heightUnit;
+
+ private int width;
+
+ private int widthUnit;
+
/**
* Constructs a new Tabsheet. Tabsheet is immediate by default.
if (areTabsHidden())
target.addAttribute("hidetabs", true);
+
+ if(width > 0) {
+ target.addAttribute("width", width + UNIT_SYMBOLS[widthUnit]);
+ } else {
+ target.addAttribute("width", "100%");
+ }
+ if(height > 0) {
+ target.addAttribute("height", height + UNIT_SYMBOLS[widthUnit]);
+ }
target.startTag("tabs");
protected void fireSelectedTabChange() {
fireEvent(new SelectedTabChangeEvent(this));
}
+
+ public int getHeight() {
+ return height;
+ }
+
+ public int getHeightUnits() {
+ return heightUnit;
+ }
+
+ public int getWidth() {
+ return width;
+ }
+
+ public int getWidthUnits() {
+ return widthUnit;
+ }
+
+ public void setHeight(int height) {
+ this.height = height;
+ }
+
+ public void setHeightUnits(int units) {
+ this.heightUnit = units;
+ }
+
+ public void setWidth(int width) {
+ this.width = width;
+ }
+
+ public void setWidthUnits(int units) {
+ this.widthUnit = units;
+ }
}