From: Marc Englund Date: Wed, 4 Jun 2008 10:06:02 +0000 (+0000) Subject: Even more for #959 (tab scrolling) (IE6 still broken) X-Git-Tag: 6.7.0.beta1~4669 X-Git-Url: https://source.dussan.org/?a=commitdiff_plain;h=ed5556caac47978ced3b1571ded63a0a04560f9e;p=vaadin-framework.git Even more for #959 (tab scrolling) (IE6 still broken) svn changeset:4739/svn branch:trunk --- 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 0d07f3ffa9..f43dd1abf0 100644 Binary files a/WebContent/ITMILL/themes/default/tabsheet/img/next.png and b/WebContent/ITMILL/themes/default/tabsheet/img/next.png differ diff --git a/WebContent/ITMILL/themes/default/tabsheet/img/prev.png b/WebContent/ITMILL/themes/default/tabsheet/img/prev.png index 783acf54c8..5e111b4aa0 100644 Binary files a/WebContent/ITMILL/themes/default/tabsheet/img/prev.png and b/WebContent/ITMILL/themes/default/tabsheet/img/prev.png differ 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;