From: Jouni Koivuviita Date: Mon, 18 Jun 2007 11:26:35 +0000 (+0000) Subject: Tabsheet styled, panel styles tweaked for IE6. X-Git-Tag: 6.7.0.beta1~6228 X-Git-Url: https://source.dussan.org/?a=commitdiff_plain;h=c359e1301816aa9fbb065ee1b9ff1986b267f528;p=vaadin-framework.git Tabsheet styled, panel styles tweaked for IE6. svn changeset:1760/svn branch:trunk --- 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 5131d5411f..7a941a943d 100644 --- a/src/com/itmill/toolkit/terminal/gwt/client/ui/ITabsheet.java +++ b/src/com/itmill/toolkit/terminal/gwt/client/ui/ITabsheet.java @@ -1,10 +1,10 @@ package com.itmill.toolkit.terminal.gwt.client.ui; import java.util.ArrayList; -import java.util.HashMap; import java.util.Iterator; import com.google.gwt.user.client.ui.DeckPanel; +import com.google.gwt.user.client.ui.HorizontalPanel; import com.google.gwt.user.client.ui.Label; import com.google.gwt.user.client.ui.SourcesTabEvents; import com.google.gwt.user.client.ui.TabBar; @@ -16,6 +16,8 @@ import com.itmill.toolkit.terminal.gwt.client.Paintable; import com.itmill.toolkit.terminal.gwt.client.UIDL; public class ITabsheet extends TabPanel implements Paintable { + + private static final String CLASSNAME = "i-tabsheet"; String id; @@ -41,6 +43,8 @@ public class ITabsheet extends TabPanel implements Paintable { }; public ITabsheet() { + setStyleName(CLASSNAME); + addTabListener(new TabListener() { public void onTabSelected(SourcesTabEvents sender, int tabIndex) { @@ -61,6 +65,12 @@ public class ITabsheet extends TabPanel implements Paintable { public void updateFromUIDL(UIDL uidl, Client client) { this.client = client; id = uidl.getId(); + + DeckPanel dp = getDeckPanel(); + dp.setStyleName(CLASSNAME+"-content"); + + TabBar tb = getTabBar(); + tb.setStyleName(CLASSNAME+"-tabs"); UIDL tabs = uidl.getChildUIDL(0); boolean keepCurrentTabs = tabKeys.size() == tabs.getNumberOfChildren(); @@ -77,8 +87,7 @@ public class ITabsheet extends TabPanel implements Paintable { activeTabIndex = index; Widget content = client.getWidget(tab .getChildUIDL(0)); - getTabBar().selectTab(index); - DeckPanel dp = getDeckPanel(); + tb.selectTab(index); dp.remove(index); dp.insert(content, index); ((Paintable)content).updateFromUIDL(tab diff --git a/src/com/itmill/toolkit/terminal/gwt/public/component-themes/collection.css b/src/com/itmill/toolkit/terminal/gwt/public/component-themes/collection.css index 1a9687e481..7268334ddc 100644 --- a/src/com/itmill/toolkit/terminal/gwt/public/component-themes/collection.css +++ b/src/com/itmill/toolkit/terminal/gwt/public/component-themes/collection.css @@ -1,4 +1,5 @@ @import "common/css/common.css"; @import "textfield/css/textfield.css"; @import "select/css/select.css"; -@import "panel/css/panel.css"; \ No newline at end of file +@import "panel/css/panel.css"; +@import "tabsheet/css/tabsheet.css"; \ No newline at end of file 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 f5bb1096ec..7cd3202b4d 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,13 +1,13 @@ body { background: #fafafc url(../img/window-bg.png) repeat-x; - font-family: helvetica, verdana, tahoma, arial, sans-serif; + font-family: helvetica, arial, tahoma, verdana, sans-serif; color: #222; font-size: 68.75%; line-height: 1.4em; } input, select, textarea, button { - font-family: helvetica, verdana, tahoma, arial, sans-serif; + font-family: helvetica, arial, tahoma, verdana, sans-serif; font-size: 1em; } 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 b42af09d32..33d59b70c8 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 @@ -94,25 +94,40 @@ -/* IE specific rules (different selectors for IE6 and IE7 */ -* html .i-panel, +/* IE specific rules (different selectors for IE6 and IE7. + * These selectors must be separate because IE6 won't + * apply them if they are grouped together. + */ + +* html .i-panel { + background-position: 0 1px; +} *+html .i-panel { background-position: 0 1px; } -* html .i-panel .i-panel-caption, +* html .i-panel .i-panel-caption { + margin-top: 3px; +} *+html .i-panel .i-panel-caption { margin-top: 3px; } -* html .i-panel-strong .i-panel-caption, + +* html .i-panel-strong .i-panel-caption { + margin: 1px 0 10px 0; +} *+html .i-panel-strong .i-panel-caption { margin: 1px 0 10px 0; } -* html .i-panel-light .i-panel-caption, -*+html .i-panel-light .i-panel-caption { +* html .i-panel-light .i-panel-caption { margin-top: -23px; margin-bottom: 0; padding-bottom: 23px; /* Must specify enough space because of wierd clipping bug */ +} +*+html .i-panel-light .i-panel-caption { + margin-top: -23px; + margin-bottom: 0; + padding-bottom: 23px; } \ No newline at end of file diff --git a/src/com/itmill/toolkit/terminal/gwt/public/component-themes/select/css/select.css b/src/com/itmill/toolkit/terminal/gwt/public/component-themes/select/css/select.css index c53569dcf2..6d8dac8f34 100644 --- a/src/com/itmill/toolkit/terminal/gwt/public/component-themes/select/css/select.css +++ b/src/com/itmill/toolkit/terminal/gwt/public/component-themes/select/css/select.css @@ -15,10 +15,12 @@ } .i-select-select { + /* border: 1px solid #b6b6b6; - border-top-color: #9d9d9d; - border-bottom-color: #d6d6d6; - border-right-color: #d6d6d6; + border-bottom-color: #9d9d9d; + border-top-color: #d6d6d6; + border-left-color: #d6d6d6; + */ display: block; } 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 new file mode 100644 index 0000000000..582039d79c --- /dev/null +++ b/src/com/itmill/toolkit/terminal/gwt/public/component-themes/tabsheet/css/tabsheet.css @@ -0,0 +1,92 @@ +.i-tabsheet { + margin: 5px; +} + +.i-tabsheet-tabs { + empty-cells: hide; + border-collapse: collapse; +} + +.i-tabsheet-tabs .gwt-TabBarFirst { + display: none; +} + +.i-tabsheet-tabs .gwt-TabBarRest { + border-bottom: solid 1px #29528a; +} + +.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; + margin-right: 1px; + cursor: pointer; +} + +.i-tabsheet-tabs .gwt-TabBarItem-selected { + border-color: #29528a; + 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; +} + +.i-tabsheet-tabs .gwt-TabBarItem-selected:hover { + background: #fff url(../img/tab-selected-bg.png) repeat-x; + color: #1c3e6e; +} + +/* 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; +} + +.i-tabsheet-tabs .gwt-TabBarItem-selected:before { + height: 7px; + background-image: url(../img/tab-selected-right.png); + content: url(../img/tab-selected-left.png); + margin: -8px -9px 0 -9px; +} + +.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:after { + 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; +} \ 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 new file mode 100644 index 0000000000..dc89d4119e Binary files /dev/null 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 new file mode 100644 index 0000000000..a192e32dfe Binary files /dev/null and b/src/com/itmill/toolkit/terminal/gwt/public/component-themes/tabsheet/img/tab-hover-bg.png 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 new file mode 100644 index 0000000000..0ee9612f8f Binary files /dev/null and b/src/com/itmill/toolkit/terminal/gwt/public/component-themes/tabsheet/img/tab-hover-left.png 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 new file mode 100644 index 0000000000..e05b830e05 Binary files /dev/null and b/src/com/itmill/toolkit/terminal/gwt/public/component-themes/tabsheet/img/tab-hover-right.png 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 new file mode 100644 index 0000000000..b0ceef078e Binary files /dev/null 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 new file mode 100644 index 0000000000..1461c8f632 Binary files /dev/null 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 new file mode 100644 index 0000000000..bdfca27107 Binary files /dev/null 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 new file mode 100644 index 0000000000..114655614b Binary files /dev/null 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 new file mode 100644 index 0000000000..9f47da4d81 Binary files /dev/null and b/src/com/itmill/toolkit/terminal/gwt/public/component-themes/tabsheet/img/tab-selected-right.png differ