From c359e1301816aa9fbb065ee1b9ff1986b267f528 Mon Sep 17 00:00:00 2001 From: Jouni Koivuviita Date: Mon, 18 Jun 2007 11:26:35 +0000 Subject: [PATCH] Tabsheet styled, panel styles tweaked for IE6. svn changeset:1760/svn branch:trunk --- .../terminal/gwt/client/ui/ITabsheet.java | 15 ++- .../public/component-themes/collection.css | 3 +- .../component-themes/common/css/common.css | 4 +- .../component-themes/panel/css/panel.css | 27 +++-- .../component-themes/select/css/select.css | 8 +- .../tabsheet/css/tabsheet.css | 92 ++++++++++++++++++ .../component-themes/tabsheet/img/tab-bg.png | Bin 0 -> 225 bytes .../tabsheet/img/tab-hover-bg.png | Bin 0 -> 242 bytes .../tabsheet/img/tab-hover-left.png | Bin 0 -> 147 bytes .../tabsheet/img/tab-hover-right.png | Bin 0 -> 147 bytes .../tabsheet/img/tab-left.png | Bin 0 -> 147 bytes .../tabsheet/img/tab-right.png | Bin 0 -> 147 bytes .../tabsheet/img/tab-selected-bg.png | Bin 0 -> 162 bytes .../tabsheet/img/tab-selected-left.png | Bin 0 -> 175 bytes .../tabsheet/img/tab-selected-right.png | Bin 0 -> 175 bytes 15 files changed, 134 insertions(+), 15 deletions(-) create mode 100644 src/com/itmill/toolkit/terminal/gwt/public/component-themes/tabsheet/css/tabsheet.css create mode 100644 src/com/itmill/toolkit/terminal/gwt/public/component-themes/tabsheet/img/tab-bg.png create mode 100644 src/com/itmill/toolkit/terminal/gwt/public/component-themes/tabsheet/img/tab-hover-bg.png create mode 100644 src/com/itmill/toolkit/terminal/gwt/public/component-themes/tabsheet/img/tab-hover-left.png create mode 100644 src/com/itmill/toolkit/terminal/gwt/public/component-themes/tabsheet/img/tab-hover-right.png create mode 100644 src/com/itmill/toolkit/terminal/gwt/public/component-themes/tabsheet/img/tab-left.png create mode 100644 src/com/itmill/toolkit/terminal/gwt/public/component-themes/tabsheet/img/tab-right.png create mode 100644 src/com/itmill/toolkit/terminal/gwt/public/component-themes/tabsheet/img/tab-selected-bg.png create mode 100644 src/com/itmill/toolkit/terminal/gwt/public/component-themes/tabsheet/img/tab-selected-left.png create mode 100644 src/com/itmill/toolkit/terminal/gwt/public/component-themes/tabsheet/img/tab-selected-right.png 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 0000000000000000000000000000000000000000..dc89d4119e167f26417e0a51765a90e71ea9862f GIT binary patch literal 225 zcmeAS@N?(olHy`uVBq!ia0vp^j6f{O!3-pi`)%ra@ocD)2imbgZg z1m~xflqVLYGB~E>C#5QQ<|d}62BjvZR2H60wE-%!4DbnY{r>a!k6(ZO|NsB-%a70B ze*XUR_sjR6yN_Hrd*$BGUw__z{{HFfk1yYUefaYI>yKZbzW)6B{nxYCAHMzgrOsRD z3^YW~)5S5Q;+D!mcD@D$0fr4+8iyNy{XbsSxmG2z)cem~z3qpW9m$;jIJ3g!t8fAX YUpK?H-ZytkfjSvHUHx3vIVCg!0CSsa!2kdN literal 0 HcmV?d00001 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 0000000000000000000000000000000000000000..a192e32dfe41cf3aa61f3810777a733efa2c7ef0 GIT binary patch literal 242 zcmeAS@N?(olHy`uVBq!ia0vp^j6f{O!3-pi`)%ra@ocD)2imbgZg z1m~xflqVLYGB~E>C#5QQ<|d}62BjvZR2H60wE-&f2=EDUwMw4tnzt;lYE$dFXO>B` z95NUBl&^f~!8Kd_%GWz( zFAlBS=9a(wVr{%U&`bkQ7srr_TOtQJg&Y(Z7!E955p(kA|M^n8o17=Em0SMGC~MO7 lH)c0<%_hfRd1=qc#vtFpD5`k6(EzBI!PC{xWt~$(69C7#R;vI2 literal 0 HcmV?d00001 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 0000000000000000000000000000000000000000..0ee9612f8f7895dcd849d68143a83bac6a182861 GIT binary patch literal 147 zcmeAS@N?(olHy`uVBq!ia0vp^Od!m`3?yAM{)z!9mUKs7M+S!VC(K#9UIO`&C9V-A z!TD(=<%vb942~)JNvR5+xryniL8*x;m4zo$ZGeh61AIbUHG{ewvldQYbLwl9k_%8! oz|+Msq~camLQ+CP0t<%$1A`y~%cZK&6rdb~r>mdKI;Vst03a|Y1poj5 literal 0 HcmV?d00001 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 0000000000000000000000000000000000000000..e05b830e05fa2ddb60c1383e5955e7ed9d523054 GIT binary patch literal 147 zcmeAS@N?(olHy`uVBq!ia0vp^Od!m`3?yAM{)z!9mUKs7M+S!VC(K#9UIO`&C9V-A z!TD(=<%vb942~)JNvR5+xryniL8*x;m4zo$ZGeh61AIbUHG{ewvldQYbLwl9k_%8! nz|+Msq~camLPAnP3Im4$P=tYHpQrn8pd5pztDnm{r-UW|BIhSa literal 0 HcmV?d00001 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 0000000000000000000000000000000000000000..b0ceef078eed3482374d68a8da1c2de5d2274372 GIT binary patch literal 147 zcmeAS@N?(olHy`uVBq!ia0vp^Od!m`3?yAM{)z!9mUKs7M+S!VC(K#9UIO`&C9V-A z!TD(=<%vb942~)JNvR5+xryniL8*x;m4zo$ZGeh61AIbU6Ph;cJ$ZZcp&PF^@0$q} p6!3I$45_%4l#rB=kif!Wz`!8Lz;dZ7GzBQf;OXk;vd$@?2>`MxDklH{ literal 0 HcmV?d00001 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 0000000000000000000000000000000000000000..1461c8f6320099dc5959c245f3b85519e4eba9da GIT binary patch literal 147 zcmeAS@N?(olHy`uVBq!ia0vp^Od!m`3?yAM{)z!9mUKs7M+S!VC(K#9UIO`&C9V-A z!TD(=<%vb942~)JNvR5+xryniL8*x;m4zo$ZGeh61AIbU6Ph;cJ$ZZcp&PF^@0$q} o6!3I$45_%4l#q~=kix)W02EFVdQ&MBb@0JPyMY5)KL literal 0 HcmV?d00001 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 0000000000000000000000000000000000000000..bdfca2710738db514a19e0cb146f64a325e703fb GIT binary patch literal 162 zcmeAS@N?(olHy`uVBq!ia0vp^j6lrB!3-o#&#{0gmUKs7M+S!VC(K#9UIO`&C9V-A z!TD(=<%vb942~)JNvR5+xryniL8*x;m4zo$ZGeh|0(?ST11dL0H17QW|G!iAV$Y&g zwaf0c>mQ#4loj)IaSW-rm6VX0kdly)keHB`z{Fv|z>v)#uw#k+YoH1SPgg&ebxsLQ E08XbcPXGV_ literal 0 HcmV?d00001 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 0000000000000000000000000000000000000000..114655614b6ffedb00315f3fae5a428276f318bd GIT binary patch literal 175 zcmeAS@N?(olHy`uVBq!ia0vp^OhC-e!3-otm*y-5QY`6?zK#qG>ra@ocD)4hB}-f* zN`mv#O3D+9QW+dm@{>{(JaZG%Q-e|yQz{EjrrH1%Nd)+WxM~J<1ypWy%3hq;vu*Q% z%Mpz`J&RV^XUyN1e?kwaM%L5CF{I)a%RyE~1_llWg*X5ES$mT?rY(tMU}R%p3}uk@ TIe%#@P$7e-tDnm{r-UW|^oBFX literal 0 HcmV?d00001 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 0000000000000000000000000000000000000000..9f47da4d812259d27fb11f7d8a50aa2a2cf44a70 GIT binary patch literal 175 zcmeAS@N?(olHy`uVBq!ia0vp^OhC-e!3-otm*y-5QY`6?zK#qG>ra@ocD)4hB}-f* zN`mv#O3D+9QW+dm@{>{(JaZG%Q-e|yQz{EjrrH1%Nd)+WxM~J<1ypWy%3hq;vu*Q% z%Mpz`J&RV^XUyN1e?kwaM%L5CF{I)a%RyE~1_llWg*X5ES#KG#cn8HXFtRZ)W-`c5 Tv$Z@5RLJ1z>gTe~DWM4f-8C|V literal 0 HcmV?d00001 -- 2.39.5