From: Jouni Koivuviita Date: Fri, 24 Aug 2007 13:08:17 +0000 (+0000) Subject: -New style for Panel, now supports "highlight" and "emphasize" styles also. X-Git-Tag: 6.7.0.beta1~6072 X-Git-Url: https://source.dussan.org/?a=commitdiff_plain;h=ba94b807d6ad1d6f236562fb83abd1f5e91ad5c3;p=vaadin-framework.git -New style for Panel, now supports "highlight" and "emphasize" styles also. -Some method names converted to comply GWT 1.4 naming. -TahSheet now supports Sizeable interface. svn changeset:2124/svn branch:trunk --- diff --git a/src/com/itmill/toolkit/terminal/gwt/client/ui/IPanel.java b/src/com/itmill/toolkit/terminal/gwt/client/ui/IPanel.java index 9118563107..3be27b2306 100644 --- a/src/com/itmill/toolkit/terminal/gwt/client/ui/IPanel.java +++ b/src/com/itmill/toolkit/terminal/gwt/client/ui/IPanel.java @@ -1,5 +1,7 @@ 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; @@ -39,6 +41,10 @@ public class IPanel extends FlowPanel implements Paintable { // 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")); @@ -48,10 +54,13 @@ public class IPanel extends FlowPanel implements Paintable { // 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 @@ -67,6 +76,7 @@ public class IPanel extends FlowPanel implements Paintable { 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); @@ -74,6 +84,11 @@ public class IPanel extends FlowPanel implements Paintable { add(content); + // Add a decoration element for shadow + deco = DOM.createDiv(); + DOM.setElementProperty(deco, "className", CLASSNAME+"-deco"); + DOM.appendChild(getElement(), deco); + } } diff --git a/src/com/itmill/toolkit/terminal/gwt/client/ui/ISlider.java b/src/com/itmill/toolkit/terminal/gwt/client/ui/ISlider.java index 458c65e6b7..78754e68c6 100644 --- a/src/com/itmill/toolkit/terminal/gwt/client/ui/ISlider.java +++ b/src/com/itmill/toolkit/terminal/gwt/client/ui/ISlider.java @@ -56,10 +56,10 @@ public class ISlider extends Widget implements Paintable { bigger = DOM.createDiv(); setStyleName(CLASSNAME); - DOM.setAttribute(base, "className", CLASSNAME+"-base"); - DOM.setAttribute(handle, "className", CLASSNAME+"-handle"); - DOM.setAttribute(smaller, "className", CLASSNAME+"-smaller"); - DOM.setAttribute(bigger, "className", CLASSNAME+"-bigger"); + DOM.setElementProperty(base, "className", CLASSNAME+"-base"); + DOM.setElementProperty(handle, "className", CLASSNAME+"-handle"); + DOM.setElementProperty(smaller, "className", CLASSNAME+"-smaller"); + DOM.setElementProperty(bigger, "className", CLASSNAME+"-bigger"); DOM.appendChild(getElement(), bigger); DOM.appendChild(getElement(), smaller); @@ -97,7 +97,7 @@ public class ISlider extends Widget implements Paintable { DOM.setStyleAttribute(smaller, "display", "block"); DOM.setStyleAttribute(bigger, "display", "block"); if(vertical) { - int arrowSize = Integer.parseInt(DOM.getAttribute(smaller, "offsetWidth")); + int arrowSize = Integer.parseInt(DOM.getElementProperty(smaller, "offsetWidth")); DOM.setStyleAttribute(bigger, "marginLeft", arrowSize+"px"); DOM.setStyleAttribute(bigger, "marginRight", arrowSize+"px"); } @@ -143,7 +143,7 @@ public class ISlider extends Widget implements Paintable { DOM.setStyleAttribute(getElement(), "width", size + "px"); else { Element p = DOM.getParent(getElement()); - if(Integer.parseInt(DOM.getAttribute(p, "offsetWidth")) > 50) + if(Integer.parseInt(DOM.getElementProperty(p, "offsetWidth")) > 50) DOM.setStyleAttribute(getElement(), "width", "auto"); else { // Set minimum of 50px width and adjust after all @@ -152,7 +152,7 @@ public class ISlider extends Widget implements Paintable { Timer adjust = new Timer() { public void run() { Element p = DOM.getParent(getElement()); - if(Integer.parseInt(DOM.getAttribute(p, "offsetWidth")) > 50) + if(Integer.parseInt(DOM.getElementProperty(p, "offsetWidth")) > 50) DOM.setStyleAttribute(getElement(), "width", "auto"); } }; @@ -173,12 +173,12 @@ public class ISlider extends Widget implements Paintable { if(vertical) { // TODO } else { - int t = Integer.parseInt(DOM.getAttribute(base, "offsetHeight")) - Integer.parseInt(DOM.getAttribute(handle, "offsetHeight")); + int t = Integer.parseInt(DOM.getElementProperty(base, "offsetHeight")) - Integer.parseInt(DOM.getElementProperty(handle, "offsetHeight")); DOM.setStyleAttribute(handle, "top", (t/2)+"px"); DOM.setStyleAttribute(handle, "left", "0px"); - int w = (int) (Double.parseDouble(DOM.getAttribute(base, "offsetWidth")) / 100 * handleSize); + int w = (int) (Double.parseDouble(DOM.getElementProperty(base, "offsetWidth")) / 100 * handleSize); if(handleSize == -1) { - int baseW = Integer.parseInt(DOM.getAttribute(base, "offsetWidth")); + int baseW = Integer.parseInt(DOM.getElementProperty(base, "offsetWidth")); double range = (max - min) * (resolution+1) * 3; w = (int) (baseW - range); } @@ -195,8 +195,8 @@ public class ISlider extends Widget implements Paintable { if(vertical) { // TODO } else { - int handleWidth = Integer.parseInt(DOM.getAttribute(handle, "offsetWidth")); - int baseWidth = Integer.parseInt(DOM.getAttribute(base, "offsetWidth")); + int handleWidth = Integer.parseInt(DOM.getElementProperty(handle, "offsetWidth")); + int baseWidth = Integer.parseInt(DOM.getElementProperty(base, "offsetWidth")); int range = baseWidth - handleWidth; double v = value.doubleValue(); double valueRange = max - min; @@ -341,9 +341,9 @@ public class ISlider extends Widget implements Paintable { if(vertical) { // TODO } else { - double handleW = Integer.parseInt(DOM.getAttribute(handle, "offsetWidth")); + double handleW = Integer.parseInt(DOM.getElementProperty(handle, "offsetWidth")); double baseX = DOM.getAbsoluteLeft(base) + handleW/2; - double baseW = Integer.parseInt(DOM.getAttribute(base, "offsetWidth")); + double baseW = Integer.parseInt(DOM.getElementProperty(base, "offsetWidth")); v = ((x-baseX)/(baseW-handleW)) * (max-min) + min; } diff --git a/src/com/itmill/toolkit/terminal/gwt/client/ui/ITabsheet.java b/src/com/itmill/toolkit/terminal/gwt/client/ui/ITabsheet.java index a62a140fb2..1ecddffc39 100644 --- a/src/com/itmill/toolkit/terminal/gwt/client/ui/ITabsheet.java +++ b/src/com/itmill/toolkit/terminal/gwt/client/ui/ITabsheet.java @@ -3,6 +3,8 @@ package com.itmill.toolkit.terminal.gwt.client.ui; 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; @@ -27,6 +29,8 @@ public class ITabsheet extends TabPanel implements Paintable { ArrayList captions = new ArrayList(); int activeTabIndex = 0; + + private Element deco; TabListener tl = new TabListener() { @@ -58,7 +62,7 @@ public class ITabsheet extends TabPanel implements Paintable { } }); - + } public void updateFromUIDL(UIDL uidl, ApplicationConnection client) { @@ -71,6 +75,23 @@ public class ITabsheet extends TabPanel implements Paintable { 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++) diff --git a/src/com/itmill/toolkit/terminal/gwt/public/component-themes/common/css/common.css b/src/com/itmill/toolkit/terminal/gwt/public/component-themes/common/css/common.css index f2769090a0..64c9177eb0 100644 --- a/src/com/itmill/toolkit/terminal/gwt/public/component-themes/common/css/common.css +++ b/src/com/itmill/toolkit/terminal/gwt/public/component-themes/common/css/common.css @@ -1,9 +1,9 @@ body { - background: #fafafc url(../img/window-bottom-bg.gif) no-repeat right bottom fixed; + background: #f5f6f7 url(../img/window-bottom-bg.gif) no-repeat right bottom fixed; font-family: helvetica, arial, tahoma, verdana, sans-serif; - color: #222; - font-size: 68.75%; - line-height: 1.4em; + color: #454a51; + font-size: 13px; + line-height: 19px; padding: 8px; margin: 0; } diff --git a/src/com/itmill/toolkit/terminal/gwt/public/component-themes/common/img/shadow-em.png b/src/com/itmill/toolkit/terminal/gwt/public/component-themes/common/img/shadow-em.png new file mode 100644 index 0000000000..a35c6b6b84 Binary files /dev/null and b/src/com/itmill/toolkit/terminal/gwt/public/component-themes/common/img/shadow-em.png differ diff --git a/src/com/itmill/toolkit/terminal/gwt/public/component-themes/common/img/shadow.png b/src/com/itmill/toolkit/terminal/gwt/public/component-themes/common/img/shadow.png new file mode 100644 index 0000000000..fa3d1d058b Binary files /dev/null and b/src/com/itmill/toolkit/terminal/gwt/public/component-themes/common/img/shadow.png differ diff --git a/src/com/itmill/toolkit/terminal/gwt/public/component-themes/common/img/window-bottom-bg.gif b/src/com/itmill/toolkit/terminal/gwt/public/component-themes/common/img/window-bottom-bg.gif index 150e849d19..e8068d9a8b 100644 Binary files a/src/com/itmill/toolkit/terminal/gwt/public/component-themes/common/img/window-bottom-bg.gif and b/src/com/itmill/toolkit/terminal/gwt/public/component-themes/common/img/window-bottom-bg.gif differ diff --git a/src/com/itmill/toolkit/terminal/gwt/public/component-themes/panel/css/panel.css b/src/com/itmill/toolkit/terminal/gwt/public/component-themes/panel/css/panel.css index 41d230bdf1..1815c43ff0 100644 --- a/src/com/itmill/toolkit/terminal/gwt/public/component-themes/panel/css/panel.css +++ b/src/com/itmill/toolkit/terminal/gwt/public/component-themes/panel/css/panel.css @@ -1,101 +1,214 @@ .i-panel { - border: 1px solid #29528a; - padding: 5px 3px 2px 2px; - margin: 5px; + margin: 8px 0 1px 0; +} + +.i-panel-caption { + font-size: 12px; + line-height: 12px; + font-weight: normal; + color: #2c3c49; + white-space: nowrap; + height: 27px; + padding: 0 5px 0 5px; + border: 1px solid #c1c6cc; + border-bottom: none; background: #fff url(../img/top-bg.png) repeat-x top left; } -.i-panel:before { +.i-panel-caption:before { display: block; - height: 7px; + height: 28px; overflow: hidden; background: transparent url(../img/top-right.png) no-repeat right top; content: url(../img/top-left.png); - margin: -6px -4px 3px -3px; + margin: -1px -6px -20px -6px; +} + +.i-panel-content { + border: 1px solid #c1c6cc; + border-top: none; + background-color: #fff; + overflow: auto; + padding: 8px; } -.i-panel:after { +.i-panel-deco { + height: 9px; + background: transparent url(../../common/img/shadow.png) repeat-x left bottom; + margin-top: -2px; + position: relative; +} + +.i-panel-deco:before { display: block; height: 2px; overflow: hidden; background: transparent url(../img/bottom-right.png) no-repeat right top; content: url(../img/bottom-left.png); - margin: 2px -4px -3px -3px; } -.i-panel-caption { - font-size: 1.1em; - font-weight: bold; - color: #1c3e6e; - margin: 0 0 7px 4px; - overflow: hidden; +.i-panel-nocaption { + border-top: 1px solid #c1c6cc; + background-color: #fff; } -.i-panel-content { - overflow: auto; - padding: 3px; +.i-panel-nocaption:before { + display: block; + height: 2px; + overflow: hidden; + background: transparent url(../img/top-right-small.png) no-repeat right top; + content: url(../img/top-left-small.png); + margin-top: -1px; } /* Strong style */ -.i-panel-strong { + +.i-panel-strong .i-panel-caption { background-image: url(../img/top-bg-strong.png); + border-color: #6c9ad8; + color: #fff; + font-weight: bold; } -.i-panel-strong:before { - height: 28px; +.i-panel-strong .i-panel-caption:before { background-image: url(../img/top-right-strong.png); content: url(../img/top-left-strong.png); } -.i-panel-strong .i-panel-caption { - color: #fff; - margin: -25px 0 12px 4px; - white-space: nowrap; + + +/* Light style */ + +.i-panel-light .i-panel-caption { + background: transparent; + font-weight: bold; + border: none; + padding: 3px 0 0 2px; + height: 16px; + margin-bottom: 1px; + border-bottom: 1px solid #e7e7e8; } -/* Strong style without caption */ -.i-panel-strong.i-panel-nocaption { - background-image: url(../img/top-bg.png); +.i-panel-light .i-panel-caption:before { + display: none; } -.i-panel-strong.i-panel-nocaption:before { - height: 7px; - background-image: url(../img/top-right.png); - content: url(../img/top-left.png); + +.i-panel-light .i-panel-caption:after { + display: block; + height: 2px; + overflow: hidden; + background: transparent url(../img/top-right-light.png) no-repeat top right; + content: url(../img/top-left-light.png); + margin: 4px 0 0 -2px; } +.i-panel-light .i-panel-content { + border: 1px solid #e7e7e8; + border-top: none; + background: #fff url(../img/bg-light.png) repeat-x 0 1px; +} -/* Light style */ -.i-panel-light { - background-image: url(../img/top-bg-light.png); - border-color: #b3c2d6; - border-top-color: #2667a2; - margin-top: 20px; +.i-panel-light .i-panel-deco { + background: transparent; + height: 2px; +} + +.i-panel-light .i-panel-deco:before { + background: transparent url(../img/bottom-right-light.png) no-repeat top right; + content: url(../img/bottom-left-light.png); } -.i-panel-light:before { - height: 6px; +/* Light style without caption */ +.i-panel-light .i-panel-nocaption { + border-color: #e7e7e8; +} + +.i-panel-light .i-panel-nocaption:before { background-image: url(../img/top-right-light.png); content: url(../img/top-left-light.png); } -.i-panel-light:after { - background-image: url(../img/bottom-right-light.png); - content: url(../img/bottom-left-light.png); + + +/* Highlight style */ + +.i-panel-highlight .i-panel-caption { + background-image: url(../img/top-bg-highlight.png); + background-color: #fffdec; + border-color: #c0baae; + color: #4e4640; } -.i-panel-light .i-panel-caption { - margin: -26px -2px 10px -2px; - font-size: 1em; - white-space: nowrap; +.i-panel-highlight .i-panel-caption:before { + background-image: url(../img/top-right-highlight.png); + content: url(../img/top-left-highlight.png); } -/* Light style without caption */ -.i-panel-light.i-panel-nocaption { - margin-top: 7px; +.i-panel-highlight .i-panel-content { + background-color: #fffdec; + border-color: #c0baae; + color: #605b52; +} + +/* Highlight style without caption */ +.i-panel-highlight .i-panel-nocaption { + border-color: #c0baae; + background-color: #fffdec; +} + + + +/* Emphasized style */ + +.i-panel-emphasize .i-panel-caption { + background: #6899d9 url(../img/top-bg-em.gif) repeat-x; + border-color: #78a2db; + color: #fff; + font-weight: bold; + height: 22px; } +.i-panel-emphasize .i-panel-caption:before { + background-image: url(../img/top-right-em.gif); + content: url(../img/top-left-em.gif); +} + +.i-panel-emphasize .i-panel-content { + background: #3a6bab url(../img/bg-em.gif) repeat-x; + color: #dee6f2; + border-color: #78a2db; +} + +.i-panel-emphasize .i-panel-deco { + margin-top: -4px; + height: 11px; + background-image: url(../../common/img/shadow-em.png); +} + +.i-panel-emphasize .i-panel-deco:before { + background-image: url(../img/bottom-right-em.gif); + content: url(../img/bottom-left-em.gif); + height: 4px; +} + +/* Emphasized style without caption */ +.i-panel-emphasize .i-panel-nocaption { + background: #6899d9 url(../img/top-bg-em.gif) repeat-x; + border: 1px solid #78a2db; + border-bottom: none; + height: 3px; +} + +.i-panel-emphasize .i-panel-nocaption:before { + background-image: url(../img/top-right-em.gif); + content: url(../img/top-left-em.gif); + margin: -1px; +} + + + @@ -104,41 +217,90 @@ * These selectors must be separate because IE6 won't * apply them if they are grouped together. */ -* html .i-panel { - zoom: 1; +* html .i-panel-caption { + padding-top: 7px; + height: 19px; } -*+html .i-panel { - zoom: 1; +*+html .i-panel-caption { + padding-top: 7px; + height: 19px; } -* html .i-panel .i-panel-caption { - margin-top: 3px; + +* html .i-panel-deco { + position: static; + background: transparent; + margin: 0; + font-size: 1; + height: 7px; + overflow: hidden; + /* TODO change url when packaging is complete */ + filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="../com.itmill.toolkit.terminal.gwt.Client/component-themes/common/img/shadow.png", sizingMethod="scale"); } -*+html .i-panel .i-panel-caption { - margin-top: 3px; + +/* Without caption */ +* html .i-panel-nocaption { + height: 1px; + overflow: hidden; + background: #c1c6cc; + border: none; } -* html .i-panel-strong .i-panel-caption { - margin: 0 0 10px 4px; +/* Light style */ + +* html .i-panel-light .i-panel-caption { + background: transparent; + font-weight: bold; + border: none; + padding: 3px 0 0 2px; + height: 16px; } -*+html .i-panel-strong .i-panel-caption { - margin: 1px 0 10px 4px; +*+html .i-panel-light .i-panel-caption { + background: transparent; + font-weight: bold; + border: none; + padding: 3px 0 0 2px; + height: 16px; } -* html .i-panel-light { - margin-top: 5px; +* html .i-panel-light .i-panel-content { + border: 1px solid #e7e7e8; + background-position: 0 2px; } -*+html .i-panel-light { - margin-top: 23px; +*+html .i-panel-light .i-panel-content { + border: 1px solid #e7e7e8; + background-position: 0 2px; } -* html .i-panel-light .i-panel-caption { - margin-left: 4px; - margin-bottom: 5px; - padding-bottom: 0; + +* html .i-panel-light .i-panel-deco { + display: none; } -*+html .i-panel-light .i-panel-caption { - /*margin-left: 4px; - margin-bottom: 5px; - padding-bottom: 0;*/ - margin-top: -23px; + +/* Without caption */ +* html .i-panel-light .i-panel-nocaption { + display: none; +} +*+html .i-panel-light .i-panel-nocaption { + display: none; +} + + +/* Emphasized style */ +* html .i-panel-emphasize .i-panel-caption { + height: 15px; +} +*+html .i-panel-emphasize .i-panel-caption { + height: 15px; +} + +* html .i-panel-emphasize .i-panel-content { + background-attachment: fixed; +} + +* html .i-panel-emphasize .i-panel-deco { + height: 7px; + margin-top: 0; + background: transparent; + /* TODO change url when packaging is complete */ + filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="../com.itmill.toolkit.terminal.gwt.Client/component-themes/common/img/shadow-em.png", sizingMethod="scale"); } \ No newline at end of file diff --git a/src/com/itmill/toolkit/terminal/gwt/public/component-themes/panel/img/bg-em.gif b/src/com/itmill/toolkit/terminal/gwt/public/component-themes/panel/img/bg-em.gif new file mode 100644 index 0000000000..1c817bfa54 Binary files /dev/null and b/src/com/itmill/toolkit/terminal/gwt/public/component-themes/panel/img/bg-em.gif differ diff --git a/src/com/itmill/toolkit/terminal/gwt/public/component-themes/panel/img/bg-light.png b/src/com/itmill/toolkit/terminal/gwt/public/component-themes/panel/img/bg-light.png new file mode 100644 index 0000000000..1ad2068121 Binary files /dev/null and b/src/com/itmill/toolkit/terminal/gwt/public/component-themes/panel/img/bg-light.png differ diff --git a/src/com/itmill/toolkit/terminal/gwt/public/component-themes/panel/img/bottom-left-em.gif b/src/com/itmill/toolkit/terminal/gwt/public/component-themes/panel/img/bottom-left-em.gif new file mode 100644 index 0000000000..909ddc97ee Binary files /dev/null and b/src/com/itmill/toolkit/terminal/gwt/public/component-themes/panel/img/bottom-left-em.gif differ diff --git a/src/com/itmill/toolkit/terminal/gwt/public/component-themes/panel/img/bottom-left-light.png b/src/com/itmill/toolkit/terminal/gwt/public/component-themes/panel/img/bottom-left-light.png index 9312e5bc03..91e395dd4a 100644 Binary files a/src/com/itmill/toolkit/terminal/gwt/public/component-themes/panel/img/bottom-left-light.png and b/src/com/itmill/toolkit/terminal/gwt/public/component-themes/panel/img/bottom-left-light.png differ diff --git a/src/com/itmill/toolkit/terminal/gwt/public/component-themes/panel/img/bottom-left.png b/src/com/itmill/toolkit/terminal/gwt/public/component-themes/panel/img/bottom-left.png index 3fda5f3c51..9ce9c8efe9 100644 Binary files a/src/com/itmill/toolkit/terminal/gwt/public/component-themes/panel/img/bottom-left.png and b/src/com/itmill/toolkit/terminal/gwt/public/component-themes/panel/img/bottom-left.png differ diff --git a/src/com/itmill/toolkit/terminal/gwt/public/component-themes/panel/img/bottom-right-em.gif b/src/com/itmill/toolkit/terminal/gwt/public/component-themes/panel/img/bottom-right-em.gif new file mode 100644 index 0000000000..1ffd8658cb Binary files /dev/null and b/src/com/itmill/toolkit/terminal/gwt/public/component-themes/panel/img/bottom-right-em.gif differ diff --git a/src/com/itmill/toolkit/terminal/gwt/public/component-themes/panel/img/bottom-right-light.png b/src/com/itmill/toolkit/terminal/gwt/public/component-themes/panel/img/bottom-right-light.png index c542a42629..31e6252f90 100644 Binary files a/src/com/itmill/toolkit/terminal/gwt/public/component-themes/panel/img/bottom-right-light.png and b/src/com/itmill/toolkit/terminal/gwt/public/component-themes/panel/img/bottom-right-light.png differ diff --git a/src/com/itmill/toolkit/terminal/gwt/public/component-themes/panel/img/bottom-right.png b/src/com/itmill/toolkit/terminal/gwt/public/component-themes/panel/img/bottom-right.png index 5f8ff7a3b1..001f63cad5 100644 Binary files a/src/com/itmill/toolkit/terminal/gwt/public/component-themes/panel/img/bottom-right.png and b/src/com/itmill/toolkit/terminal/gwt/public/component-themes/panel/img/bottom-right.png differ diff --git a/src/com/itmill/toolkit/terminal/gwt/public/component-themes/panel/img/top-bg-em.gif b/src/com/itmill/toolkit/terminal/gwt/public/component-themes/panel/img/top-bg-em.gif new file mode 100644 index 0000000000..57a3d6a4cf Binary files /dev/null and b/src/com/itmill/toolkit/terminal/gwt/public/component-themes/panel/img/top-bg-em.gif differ diff --git a/src/com/itmill/toolkit/terminal/gwt/public/component-themes/panel/img/top-bg-highlight.png b/src/com/itmill/toolkit/terminal/gwt/public/component-themes/panel/img/top-bg-highlight.png new file mode 100644 index 0000000000..9e68c95174 Binary files /dev/null and b/src/com/itmill/toolkit/terminal/gwt/public/component-themes/panel/img/top-bg-highlight.png differ diff --git a/src/com/itmill/toolkit/terminal/gwt/public/component-themes/panel/img/top-bg-strong.png b/src/com/itmill/toolkit/terminal/gwt/public/component-themes/panel/img/top-bg-strong.png index 5b89dd68c2..8385dced7d 100644 Binary files a/src/com/itmill/toolkit/terminal/gwt/public/component-themes/panel/img/top-bg-strong.png and b/src/com/itmill/toolkit/terminal/gwt/public/component-themes/panel/img/top-bg-strong.png differ diff --git a/src/com/itmill/toolkit/terminal/gwt/public/component-themes/panel/img/top-bg.png b/src/com/itmill/toolkit/terminal/gwt/public/component-themes/panel/img/top-bg.png index bdfca27107..8a29146257 100644 Binary files a/src/com/itmill/toolkit/terminal/gwt/public/component-themes/panel/img/top-bg.png and b/src/com/itmill/toolkit/terminal/gwt/public/component-themes/panel/img/top-bg.png differ diff --git a/src/com/itmill/toolkit/terminal/gwt/public/component-themes/panel/img/top-left-em.gif b/src/com/itmill/toolkit/terminal/gwt/public/component-themes/panel/img/top-left-em.gif new file mode 100644 index 0000000000..94d4e9aae2 Binary files /dev/null and b/src/com/itmill/toolkit/terminal/gwt/public/component-themes/panel/img/top-left-em.gif differ diff --git a/src/com/itmill/toolkit/terminal/gwt/public/component-themes/panel/img/top-left-highlight.png b/src/com/itmill/toolkit/terminal/gwt/public/component-themes/panel/img/top-left-highlight.png new file mode 100644 index 0000000000..26f6a7fd00 Binary files /dev/null and b/src/com/itmill/toolkit/terminal/gwt/public/component-themes/panel/img/top-left-highlight.png differ diff --git a/src/com/itmill/toolkit/terminal/gwt/public/component-themes/panel/img/top-left-light.png b/src/com/itmill/toolkit/terminal/gwt/public/component-themes/panel/img/top-left-light.png index c46f8add3b..c732482b0d 100644 Binary files a/src/com/itmill/toolkit/terminal/gwt/public/component-themes/panel/img/top-left-light.png and b/src/com/itmill/toolkit/terminal/gwt/public/component-themes/panel/img/top-left-light.png differ diff --git a/src/com/itmill/toolkit/terminal/gwt/public/component-themes/panel/img/top-left-small.png b/src/com/itmill/toolkit/terminal/gwt/public/component-themes/panel/img/top-left-small.png index 64c0c5c91c..047d62d054 100644 Binary files a/src/com/itmill/toolkit/terminal/gwt/public/component-themes/panel/img/top-left-small.png and b/src/com/itmill/toolkit/terminal/gwt/public/component-themes/panel/img/top-left-small.png differ diff --git a/src/com/itmill/toolkit/terminal/gwt/public/component-themes/panel/img/top-left-strong.png b/src/com/itmill/toolkit/terminal/gwt/public/component-themes/panel/img/top-left-strong.png index 4eddbe5b5d..0ecac10257 100644 Binary files a/src/com/itmill/toolkit/terminal/gwt/public/component-themes/panel/img/top-left-strong.png and b/src/com/itmill/toolkit/terminal/gwt/public/component-themes/panel/img/top-left-strong.png differ diff --git a/src/com/itmill/toolkit/terminal/gwt/public/component-themes/panel/img/top-left.png b/src/com/itmill/toolkit/terminal/gwt/public/component-themes/panel/img/top-left.png index d16ced131e..9c4505986b 100644 Binary files a/src/com/itmill/toolkit/terminal/gwt/public/component-themes/panel/img/top-left.png and b/src/com/itmill/toolkit/terminal/gwt/public/component-themes/panel/img/top-left.png differ diff --git a/src/com/itmill/toolkit/terminal/gwt/public/component-themes/panel/img/top-right-em.gif b/src/com/itmill/toolkit/terminal/gwt/public/component-themes/panel/img/top-right-em.gif new file mode 100644 index 0000000000..35069a1af9 Binary files /dev/null and b/src/com/itmill/toolkit/terminal/gwt/public/component-themes/panel/img/top-right-em.gif differ diff --git a/src/com/itmill/toolkit/terminal/gwt/public/component-themes/panel/img/top-right-highlight.png b/src/com/itmill/toolkit/terminal/gwt/public/component-themes/panel/img/top-right-highlight.png new file mode 100644 index 0000000000..58f0127cc9 Binary files /dev/null and b/src/com/itmill/toolkit/terminal/gwt/public/component-themes/panel/img/top-right-highlight.png differ diff --git a/src/com/itmill/toolkit/terminal/gwt/public/component-themes/panel/img/top-right-light.png b/src/com/itmill/toolkit/terminal/gwt/public/component-themes/panel/img/top-right-light.png index d2bcd46c55..feabbb1ca4 100644 Binary files a/src/com/itmill/toolkit/terminal/gwt/public/component-themes/panel/img/top-right-light.png and b/src/com/itmill/toolkit/terminal/gwt/public/component-themes/panel/img/top-right-light.png differ diff --git a/src/com/itmill/toolkit/terminal/gwt/public/component-themes/panel/img/top-right-small.png b/src/com/itmill/toolkit/terminal/gwt/public/component-themes/panel/img/top-right-small.png index 8ba960b210..a19338806f 100644 Binary files a/src/com/itmill/toolkit/terminal/gwt/public/component-themes/panel/img/top-right-small.png and b/src/com/itmill/toolkit/terminal/gwt/public/component-themes/panel/img/top-right-small.png differ diff --git a/src/com/itmill/toolkit/terminal/gwt/public/component-themes/panel/img/top-right-strong.png b/src/com/itmill/toolkit/terminal/gwt/public/component-themes/panel/img/top-right-strong.png index b1d3858f1b..75ea5f536b 100644 Binary files a/src/com/itmill/toolkit/terminal/gwt/public/component-themes/panel/img/top-right-strong.png and b/src/com/itmill/toolkit/terminal/gwt/public/component-themes/panel/img/top-right-strong.png differ diff --git a/src/com/itmill/toolkit/terminal/gwt/public/component-themes/panel/img/top-right.png b/src/com/itmill/toolkit/terminal/gwt/public/component-themes/panel/img/top-right.png index dcf9c5c0dc..a9261fea22 100644 Binary files a/src/com/itmill/toolkit/terminal/gwt/public/component-themes/panel/img/top-right.png and b/src/com/itmill/toolkit/terminal/gwt/public/component-themes/panel/img/top-right.png differ diff --git a/src/com/itmill/toolkit/terminal/gwt/public/component-themes/slider/css/slider.css b/src/com/itmill/toolkit/terminal/gwt/public/component-themes/slider/css/slider.css index a11ec6e3f4..c7c4f665bd 100644 --- a/src/com/itmill/toolkit/terminal/gwt/public/component-themes/slider/css/slider.css +++ b/src/com/itmill/toolkit/terminal/gwt/public/component-themes/slider/css/slider.css @@ -28,14 +28,20 @@ .i-slider-base { background: #c3d0dd url(../img/bg.png) repeat-x; height: 14px; - margin: 0 1px; overflow: hidden; } .i-slider-handle { background: #fff url(../img/handle-bg.png) repeat-x; border: 1px solid #29528a; height: 10px; - overflow: hidden; + font-size: 1px; +} +.i-slider-handle:before { + display: block; + height: 12px; + background: transparent url(../img/handle-right.png) no-repeat right top; + margin: -1px -1px 0 -1px; + content: url(../img/handle-left.png); } .i-slider-bigger { background: #dde4ef url(../img/arrow-right.png); diff --git a/src/com/itmill/toolkit/terminal/gwt/public/component-themes/tabsheet/css/tabsheet.css b/src/com/itmill/toolkit/terminal/gwt/public/component-themes/tabsheet/css/tabsheet.css index fb8750b028..682817d4f6 100644 --- a/src/com/itmill/toolkit/terminal/gwt/public/component-themes/tabsheet/css/tabsheet.css +++ b/src/com/itmill/toolkit/terminal/gwt/public/component-themes/tabsheet/css/tabsheet.css @@ -1,5 +1,5 @@ .i-tabsheet { - margin: 5px; + } .i-tabsheet-tabs { @@ -12,80 +12,75 @@ } .i-tabsheet-tabs .gwt-TabBarRest { - border-bottom: solid 1px #29528a; + border-bottom: solid 1px #c1c6cc; } .i-tabsheet-tabs .gwt-TabBarItem { - border: solid 1px #6082b0; - border-bottom-color: #29528a; - height: 17px; - padding: 4px 8px; - color: #1c3e6e; - background: #e6ebf0 url(../img/tab-bg.png) repeat-x; + border: solid 1px #9cacb9; + border-bottom-color: #c1c6cc; + height: 18px; + padding: 4px 25px; + color: #2c3c49; + font-size: 12px; + background: #ecf0f4 url(../img/tab-bg.png) repeat-x; margin-right: 1px; cursor: pointer; } .i-tabsheet-tabs .gwt-TabBarItem-selected { - border-color: #29528a; + border-color: #c1c6cc; border-bottom-color: #fff; background: #fff url(../img/tab-selected-bg.png) repeat-x; padding-top: 7px; padding-bottom: 5px; margin-bottom: -1px; - font-weight: bold; cursor: default; } .i-tabsheet-tabs .gwt-TabBarItem:hover { - border-color: #29528a; - background: #3a639b url(../img/tab-hover-bg.png) repeat-x; - color: #fff; + color: #62788a; } .i-tabsheet-tabs .gwt-TabBarItem-selected:hover { - background: #fff url(../img/tab-selected-bg.png) repeat-x; - color: #1c3e6e; + color: #2c3c49; } -/* Rounded corners effects */ .i-tabsheet-tabs .gwt-TabBarItem:before { display: block; height: 2px; overflow: hidden; background: transparent url(../img/tab-right.png) no-repeat right top; content: url(../img/tab-left.png); - margin: -5px -9px 3px -9px; + margin: -5px -26px 3px -26px; } .i-tabsheet-tabs .gwt-TabBarItem-selected:before { - height: 7px; + height: 27px; background-image: url(../img/tab-selected-right.png); content: url(../img/tab-selected-left.png); - margin: -8px -9px 0 -9px; + margin: -8px -26px -20px -26px; } -.i-tabsheet-tabs .gwt-TabBarItem:hover:before { - background-image: url(../img/tab-hover-right.png); - content: url(../img/tab-hover-left.png); +.i-tabsheet-content { + background-color: #fff; + border: solid 1px #c1c6cc; + border-top: none; + padding: 8px; } -.i-tabsheet-content:after { +.i-tabsheet-deco { + height: 9px; + background: transparent url(../../common/img/shadow.png) repeat-x left bottom; + margin: -2px 0 0 1px; + position: relative; +} + +.i-tabsheet-deco:before { display: block; height: 2px; overflow: hidden; background: transparent url(../../panel/img/bottom-right.png) no-repeat right top; content: url(../../panel/img/bottom-left.png); - margin: 5px -6px -6px -6px; -} - - - -.i-tabsheet-content { - background-color: #fff; - border: solid 1px #29528a; - border-top: none; - padding: 5px; } /* Fix Safari bug (one pixel table offset) */ @@ -97,4 +92,19 @@ width: 1px; height: 1px; overflow: hidden; +} + + + + +/* IE specific styles */ +* html .i-tabsheet-deco { + position: static; + background: transparent; + margin-top: 0; + font-size: 1; + height: 7px; + overflow: hidden; + /* TODO change url when packaging is complete */ + filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="../com.itmill.toolkit.terminal.gwt.Client/component-themes/common/img/shadow.png", sizingMethod="scale"); } \ No newline at end of file diff --git a/src/com/itmill/toolkit/terminal/gwt/public/component-themes/tabsheet/img/tab-bg.png b/src/com/itmill/toolkit/terminal/gwt/public/component-themes/tabsheet/img/tab-bg.png index dc89d4119e..aef042a41e 100644 Binary files a/src/com/itmill/toolkit/terminal/gwt/public/component-themes/tabsheet/img/tab-bg.png and b/src/com/itmill/toolkit/terminal/gwt/public/component-themes/tabsheet/img/tab-bg.png differ diff --git a/src/com/itmill/toolkit/terminal/gwt/public/component-themes/tabsheet/img/tab-hover-bg.png b/src/com/itmill/toolkit/terminal/gwt/public/component-themes/tabsheet/img/tab-hover-bg.png deleted file mode 100644 index a192e32dfe..0000000000 Binary files a/src/com/itmill/toolkit/terminal/gwt/public/component-themes/tabsheet/img/tab-hover-bg.png and /dev/null differ diff --git a/src/com/itmill/toolkit/terminal/gwt/public/component-themes/tabsheet/img/tab-hover-left.png b/src/com/itmill/toolkit/terminal/gwt/public/component-themes/tabsheet/img/tab-hover-left.png deleted file mode 100644 index 0ee9612f8f..0000000000 Binary files a/src/com/itmill/toolkit/terminal/gwt/public/component-themes/tabsheet/img/tab-hover-left.png and /dev/null differ diff --git a/src/com/itmill/toolkit/terminal/gwt/public/component-themes/tabsheet/img/tab-hover-right.png b/src/com/itmill/toolkit/terminal/gwt/public/component-themes/tabsheet/img/tab-hover-right.png deleted file mode 100644 index e05b830e05..0000000000 Binary files a/src/com/itmill/toolkit/terminal/gwt/public/component-themes/tabsheet/img/tab-hover-right.png and /dev/null differ diff --git a/src/com/itmill/toolkit/terminal/gwt/public/component-themes/tabsheet/img/tab-left.png b/src/com/itmill/toolkit/terminal/gwt/public/component-themes/tabsheet/img/tab-left.png index b0ceef078e..a3f43bc7e5 100644 Binary files a/src/com/itmill/toolkit/terminal/gwt/public/component-themes/tabsheet/img/tab-left.png and b/src/com/itmill/toolkit/terminal/gwt/public/component-themes/tabsheet/img/tab-left.png differ diff --git a/src/com/itmill/toolkit/terminal/gwt/public/component-themes/tabsheet/img/tab-right.png b/src/com/itmill/toolkit/terminal/gwt/public/component-themes/tabsheet/img/tab-right.png index 1461c8f632..59c7162305 100644 Binary files a/src/com/itmill/toolkit/terminal/gwt/public/component-themes/tabsheet/img/tab-right.png and b/src/com/itmill/toolkit/terminal/gwt/public/component-themes/tabsheet/img/tab-right.png differ diff --git a/src/com/itmill/toolkit/terminal/gwt/public/component-themes/tabsheet/img/tab-selected-bg.png b/src/com/itmill/toolkit/terminal/gwt/public/component-themes/tabsheet/img/tab-selected-bg.png index bdfca27107..4c04dee4aa 100644 Binary files a/src/com/itmill/toolkit/terminal/gwt/public/component-themes/tabsheet/img/tab-selected-bg.png and b/src/com/itmill/toolkit/terminal/gwt/public/component-themes/tabsheet/img/tab-selected-bg.png differ diff --git a/src/com/itmill/toolkit/terminal/gwt/public/component-themes/tabsheet/img/tab-selected-left.png b/src/com/itmill/toolkit/terminal/gwt/public/component-themes/tabsheet/img/tab-selected-left.png index 114655614b..12bdc0ab03 100644 Binary files a/src/com/itmill/toolkit/terminal/gwt/public/component-themes/tabsheet/img/tab-selected-left.png and b/src/com/itmill/toolkit/terminal/gwt/public/component-themes/tabsheet/img/tab-selected-left.png differ diff --git a/src/com/itmill/toolkit/terminal/gwt/public/component-themes/tabsheet/img/tab-selected-right.png b/src/com/itmill/toolkit/terminal/gwt/public/component-themes/tabsheet/img/tab-selected-right.png index 9f47da4d81..828f62b8e5 100644 Binary files a/src/com/itmill/toolkit/terminal/gwt/public/component-themes/tabsheet/img/tab-selected-right.png and b/src/com/itmill/toolkit/terminal/gwt/public/component-themes/tabsheet/img/tab-selected-right.png differ diff --git a/src/com/itmill/toolkit/ui/TabSheet.java b/src/com/itmill/toolkit/ui/TabSheet.java index c1edd1b65c..fac5ea5d4b 100644 --- a/src/com/itmill/toolkit/ui/TabSheet.java +++ b/src/com/itmill/toolkit/ui/TabSheet.java @@ -44,7 +44,7 @@ import com.itmill.toolkit.terminal.*; * @VERSION@ * @since 3.0 */ -public class TabSheet extends AbstractComponentContainer { +public class TabSheet extends AbstractComponentContainer implements Sizeable { /** * Linked list of component tabs. @@ -72,6 +72,15 @@ public class TabSheet extends AbstractComponentContainer { * 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. @@ -194,6 +203,15 @@ public class TabSheet extends AbstractComponentContainer { 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"); @@ -483,4 +501,36 @@ public class TabSheet extends AbstractComponentContainer { 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; + } }