From ed5556caac47978ced3b1571ded63a0a04560f9e Mon Sep 17 00:00:00 2001 From: Marc Englund Date: Wed, 4 Jun 2008 10:06:02 +0000 Subject: [PATCH] Even more for #959 (tab scrolling) (IE6 still broken) svn changeset:4739/svn branch:trunk --- WebContent/ITMILL/themes/default/styles.css | 50 +++++++++++++++++- .../themes/default/tabsheet/img/next.png | Bin 444 -> 1035 bytes .../themes/default/tabsheet/img/prev.png | Bin 447 -> 1034 bytes .../themes/default/tabsheet/tabsheet.css | 39 +++++++------- .../terminal/gwt/client/ui/ITabsheet.java | 25 +++++---- 5 files changed, 82 insertions(+), 32 deletions(-) diff --git a/WebContent/ITMILL/themes/default/styles.css b/WebContent/ITMILL/themes/default/styles.css index 39a349672b..86b17c829f 100644 --- a/WebContent/ITMILL/themes/default/styles.css +++ b/WebContent/ITMILL/themes/default/styles.css @@ -1381,12 +1381,60 @@ input.i-modified, .i-tabsheet-tabs { empty-cells: hide; border-collapse: collapse; - height: 48px; + height: 38px; background: transparent url(tabsheet/img/tabs-bg.png) repeat-x bottom left; width: 100%; overflow:hidden; } +.i-tabsheet-hidetabs .i-tabsheet-tabcontainer { + display: none; +} + +.i-tabsheet-scroller { + white-space: nowrap; + text-align: right; + height: 1px; +} + +.i-tabsheet-scrollerPrev, +.i-tabsheet-scrollerNext { + border: none; + width: 12px; + height: 37px; + margin-top: 11px; + opacity: 0.9999; +} +.i-tabsheet-scrollerPrev-disabled, +.i-tabsheet-scrollerNext-disabled { + border: none; + width: 12px; + height: 37px; + margin-top: 11px; + opacity: 0.9999; +} + +.i-tabsheet-scrollerNext, +.i-tabsheet-scrollerNext-disabled { + background: transparent url(tabsheet/img/next.png) no-repeat; +} +.i-tabsheet-scrollerPrev, +.i-tabsheet-scrollerPrev-disabled { + background: transparent url(tabsheet/img/prev.png) no-repeat; +} +.i-tabsheet-scrollerPrev:hover, +.i-tabsheet-scrollerNext:hover { + background-position: -24px 0px; +} +.i-tabsheet-scrollerPrev-disabled, +.i-tabsheet-scrollerNext-disabled { + background-position: -12px 0px; +} +.i-tabsheet-scrollerPrev-disabled:hover, +.i-tabsheet-scrollerNext-disabled:hover { + background-position: -12px 0px; +} + .i-tabsheet-tabs .i-caption { white-space: nowrap; } diff --git a/WebContent/ITMILL/themes/default/tabsheet/img/next.png b/WebContent/ITMILL/themes/default/tabsheet/img/next.png index 0d07f3ffa907a2ec29f55d804570632c1afa970f..f43dd1abf03c20a112f0aac624d8841a93b4f759 100644 GIT binary patch delta 1019 zcmV1PM7X6&KKq000AvNkl0{ktS&xx1A9K5(|pTNGygO3s~@vK?np}HmG#y>?#m_IL)i^BZ=cUxh$rM z(srhCHfWG?me#rFe)sx1j*l3P$4t_c)3Y=7n@!p7bcvz}p(vD1lg4fx|K>&mfBjb2TGD#3Zpldp|Z4rc_IPkoscawY(k4F4{@&^(rjgrAm#lYcyC$2!UxD6f})?r^7Uz$ZOvh71srj zrBVsUvRD~_rfXQLMHI)(vP=eHD1tBqkOxhVPhNb)sw%FFX*-;st8}|1H`0N>$?Epxn)9q2IxU5sjFz9rDd&I*b zhGDGr7c`wX9@6RdXg;yng?6enI^7;h7>1NhbL{|KFA{_yNs_!hGwXl~1;$B27>3;4 z<|k#@HbEGo%%w!U-QHZ167suYE+vYhW;0GsU+0>jplQtKlFMs9 zmw%D}{ZBt{eun?+-M8O7J^~Lf zOvYnO%i`0IUy#jaYlE}t6uqd^sMVNBxz@kP|N5&}yvzLv$gNg+zQIa=OJ

W9Rm} z)he&PIL>#={C0aIm@tYqf&rd{*}giqKwF?K&<6pe2!YJ;lfTj_AUByn2u6c3jT+VRnmcu?uxZ_t3rBwaRW z2c9P$RC@OsG=LzAmJQk>UySaye=a3{tF`O^0W8a+v0G=~^MrCT*N_xcl|>U3gyFJd p1Ssl7Y}>+hoMoS~_)nEL|6g^7#Lb3S2E+gW002ovPDHLkV1n53>JI<_ delta 423 zcmV;Y0a*Tv2)qM-iBL{Q4GJ0x0000DNk~Le0000O0000c2m=5B0O{GQ7XSbN0drDE zLIAGL9O(c60E$pdR7Ljp_w@Gm!N$h8yuI7r-rC*W@A2`)$;!sc%l-ZR<>=_j&d=4@ z*u==m!p6td+T8B%@7&(s*xcRj@bJyk)YI76xxT;c?(W7#%+0{Z$j8jh&(qV|-rmU2 z(fs`U-Q?!p<>$!H(d6gn&equK^7Qfd`PJLq`2GIe;o{=v=KlZxw!6IM>FNLf|B3on zYmq=8e*+9V2LyoaQvd(}xJg7oR4C8o)7cJ!Fc1aM=>n8R+^bblao3^$|9e83+Tnr3 zXYJEXPSR=8xd6aqBJ?O?0R0^ETxO@)hR0nlCh2~@>@q92O?#e?HD|1x+V;HeW6nV4 zjf0zsWMLg#7ZIqPhbmDk561*V=HZMY^>9JJStbD5-vnC|s3~Y2Kx+a9@dIt{0TRG( zK$EL98E(jMLxxx6xz*o%)ZmJSrLI+2>Vq1t!C-M*)iP4G)K$$DQjl`G{09Ebf9Z2^ RQoR5G002ovPDHLkV1gc+?y>*? diff --git a/WebContent/ITMILL/themes/default/tabsheet/img/prev.png b/WebContent/ITMILL/themes/default/tabsheet/img/prev.png index 783acf54c857dc56ce032d4d4d1c186b07448f58..5e111b4aa013a0bb161490c932abfeec98922bfb 100644 GIT binary patch delta 1018 zcmV1PMAA3y&+c000AuNkl!@(~~be*iXy z=^+UUX#(cdt;9S3=FOY&h+&=>jmN}E!pZ3=je1>PbbACrfKU_)mc`y~l~$)C4i650 z$m=?)s*;b_F~$A2J^(lktVN<}Qo zLP|*(jkp>NNRk*pd~tMyrmDPewvb4vsT!tfpzAtPN|I#CcswSZr2yhdqro&y7yi|9 z8Lw8O=(yBc>e4ucU3ADu^gAPvmCwNg>1H3LII>< z7)xR9t5_@{g#sV}sjBKynENse6NFgsmGaKN!rax9{e5i51&~U&*QZn}vQCD7Y0~ZW ziJ}pvX{_Z{RU?Wby1hR26^p&qPPsz2*GKVvpMqtr9iZ!ZhQ7}vo}lacT0W<$j3+U^ z?^7zSU$E^s41FJEE+yi6doxK&Hqu;56h+C*D|}$u2HFPN2Kr9}H9K9Nf4raB%nu_f z*LPhe{dRmpURnMPR3C%ioc_6g(aPGL&PM#tzxSft z6aVtn>qq^Shr(>4W~;ps|MJ!A|M{UlI($Jcm&@aiZ^_RIOFAHHAd|KJY2IQR_9 zwu#5%Oq0}WHT1krI-O?XfBf#-NBtlDWS@TWjAFT*dF9n|8N;+P^WS`b{ndm1E6-44 zZXK@ujN;YnVltV~Sutoh93bSJhUW>_aYUM?gkiWcJW}F1 zj_~Sr(Z9Un?61Ec<=>s369zsF&lBQKrMJ|e0R&;RXwVK14#d4mZ>d28h~s3@pn0{L zxL4^dHE00CAXqeLxBg;u^PglcC9QUQ(E$S3w$0vdm4@dD<>oXotEzg_f=K)zSagg4 oc|DJ97jPX%+%_s{nr`I(55>*8&AO`-_W%F@07*qoM6N<$f)PyYVE_OC delta 426 zcmV;b0agBr2)_e=iBL{Q4GJ0x0000DNk~Le0000O0000c2m=5B0O{GQ7XSbN0drDE zLIAGL9O(c60E$pdR7Ljp_w@Gm!N$h8yuI7r-rC*W@A2`)$;!sc%l-ZR<>=_j&d=4@ z*u==m!p6td+T8B%@7&(s*xcRj@bJyk)YI76xxT;c?(W7#%+0{Z$j8jh&(qV|-rmU2 z(fs`U-Q?!p<>$!H(d6gn&equK^7Qfd`PJLq`2GIe;o{=v=KlZxw!6IM>FNLf|B3on zYmq=8e*+9VCP?Z14FCWDyGcYrR4C8o)7cKfAP@!6q0p8t)*VHyT6Z1z|KGC>p^Ohr zd{&-rauSAwxd6aK%GD@l0G~OD3Xz{?n<(jWIm!0(WtUmCHSKvm))8aX)VAk!A4d#C zVI16aEK2L(x`;vUJk+UNc{rxPa}Q_anTHDkT$%uAe-|1Xps@jz3ee^r5Ooh-_J9QN zD=>;&r6?FphHEn1n3_Ddwtw+agDV=Ax{+b24|2E$gT--G%SqKTS2b5iPRi->8`v&@ UT{zCfbpQYW07*qoM6N<$f{kkFpa1{> diff --git a/WebContent/ITMILL/themes/default/tabsheet/tabsheet.css b/WebContent/ITMILL/themes/default/tabsheet/tabsheet.css index faf79fe0fe..9834616cfc 100644 --- a/WebContent/ITMILL/themes/default/tabsheet/tabsheet.css +++ b/WebContent/ITMILL/themes/default/tabsheet/tabsheet.css @@ -9,61 +9,58 @@ .i-tabsheet-tabs { empty-cells: hide; border-collapse: collapse; - height: 48px; + height: 38px; background: transparent url(img/tabs-bg.png) repeat-x bottom left; width: 100%; overflow:hidden; } +.i-tabsheet-hidetabs .i-tabsheet-tabcontainer { + display: none; +} + .i-tabsheet-scroller { white-space: nowrap; text-align: right; - height: 48px; -} -.i-tabsheet-hidetabs .i-tabsheet-scroller { - display: none; + height: 1px; } + .i-tabsheet-scrollerPrev, .i-tabsheet-scrollerNext { border: none; width: 12px; - height: 38px; - position: relative; - margin-top: -10px; - top: -29px; + height: 37px; + margin-top: 11px; + opacity: 0.9999; } .i-tabsheet-scrollerPrev-disabled, .i-tabsheet-scrollerNext-disabled { border: none; width: 12px; - height: 38px; - position: relative; - margin-top: -10px; - top: -29px; + height: 37px; + margin-top: 11px; + opacity: 0.9999; } .i-tabsheet-scrollerNext, .i-tabsheet-scrollerNext-disabled { - background: transparent url(img/next.png) no-repeat bottom left; - margin-right: 0px; + background: transparent url(img/next.png) no-repeat; } .i-tabsheet-scrollerPrev, .i-tabsheet-scrollerPrev-disabled { - background: transparent url(img/prev.png) no-repeat bottom left; - margin-right: 0px; + background: transparent url(img/prev.png) no-repeat; } .i-tabsheet-scrollerPrev:hover, .i-tabsheet-scrollerNext:hover { - background-position: bottom right; + background-position: -24px 0px; } .i-tabsheet-scrollerPrev-disabled, .i-tabsheet-scrollerNext-disabled { - opacity: 0.5; + background-position: -12px 0px; } .i-tabsheet-scrollerPrev-disabled:hover, .i-tabsheet-scrollerNext-disabled:hover { - background-position: bottom left; - opacity: 0.5; + background-position: -12px 0px; } .i-tabsheet-tabs .i-caption { 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 1a46196b99..ea94a176a8 100644 --- a/src/com/itmill/toolkit/terminal/gwt/client/ui/ITabsheet.java +++ b/src/com/itmill/toolkit/terminal/gwt/client/ui/ITabsheet.java @@ -28,10 +28,12 @@ public class ITabsheet extends ITabsheetBase implements public static final String CLASSNAME = "i-tabsheet"; + public static final String TABS_CLASSNAME = "i-tabsheet-tabcontainer"; public static final String SCROLLER_CLASSNAME = "i-tabsheet-scroller"; - private final Element scroller; // the tab-scroller element - private final Element scrollerNext; // the tab-scroller next button element - private final Element scrollerPrev; // the tab-scroller prev button element + private final Element tabs; // tabbar and 'scroller' container + private final Element scroller; // tab-scroller element + private final Element scrollerNext; // tab-scroller next button element + private final Element scrollerPrev; // tab-scroller prev button element private int scrollerIndex = 0; private final TabBar tb; @@ -91,7 +93,10 @@ public class ITabsheet extends ITabsheetBase implements // Tab scrolling DOM.setStyleAttribute(getElement(), "overflow", "hidden"); + tabs = DOM.createDiv(); + DOM.setElementProperty(tabs, "className", TABS_CLASSNAME); scroller = DOM.createDiv(); + DOM.appendChild(tabs, scroller); DOM.setElementProperty(scroller, "className", SCROLLER_CLASSNAME); scrollerPrev = DOM.createButton(); DOM.setElementProperty(scrollerPrev, "className", SCROLLER_CLASSNAME @@ -101,7 +106,7 @@ public class ITabsheet extends ITabsheetBase implements DOM.setElementProperty(scrollerNext, "className", SCROLLER_CLASSNAME + "Next"); DOM.sinkEvents(scrollerNext, Event.ONCLICK); - DOM.appendChild(getElement(), scroller); + DOM.appendChild(getElement(), tabs); // Tabs tb = new TabBar(); @@ -118,7 +123,7 @@ public class ITabsheet extends ITabsheetBase implements + "-content"); DOM.setElementProperty(deco, "className", CLASSNAME + "-deco"); - add(tb, scroller); + add(tb, tabs); DOM.appendChild(scroller, scrollerPrev); DOM.appendChild(scroller, scrollerNext); @@ -197,11 +202,11 @@ public class ITabsheet extends ITabsheetBase implements // tabs; push or not if (uidl.hasAttribute("width")) { // update width later, in updateTabScroller(); - DOM.setStyleAttribute(scroller, "width", "1px"); - DOM.setStyleAttribute(scroller, "overflow", "hidden"); + DOM.setStyleAttribute(tabs, "width", "1px"); + DOM.setStyleAttribute(tabs, "overflow", "hidden"); } else { - DOM.setStyleAttribute(scroller, "width", ""); - DOM.setStyleAttribute(scroller, "overflow", "visible"); + DOM.setStyleAttribute(tabs, "width", ""); + DOM.setStyleAttribute(tabs, "overflow", "visible"); } updateTabScroller(); @@ -318,7 +323,7 @@ public class ITabsheet extends ITabsheetBase implements */ private void updateTabScroller() { - DOM.setStyleAttribute(scroller, "width", getOffsetWidth() + "px"); + DOM.setStyleAttribute(tabs, "width", getOffsetWidth() + "px"); if (scrollerIndex > tb.getTabCount()) { scrollerIndex = 0; -- 2.39.5