From: Marc Englund Date: Tue, 3 Jun 2008 10:33:29 +0000 (+0000) Subject: Adds tab-scrolling feature to TabSheet (clientside). Fixes #959 X-Git-Tag: 6.7.0.beta1~4673 X-Git-Url: https://source.dussan.org/?a=commitdiff_plain;h=6401173b7f1becd1898368bbcf7bcdcb55813e07;p=vaadin-framework.git Adds tab-scrolling feature to TabSheet (clientside). Fixes #959 svn changeset:4733/svn branch:trunk --- diff --git a/WebContent/ITMILL/themes/default/tabsheet/img/next.png b/WebContent/ITMILL/themes/default/tabsheet/img/next.png new file mode 100644 index 0000000000..99418be185 Binary files /dev/null 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 new file mode 100644 index 0000000000..2916761d65 Binary files /dev/null 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 b7faac6171..7f7e96c22f 100644 --- a/WebContent/ITMILL/themes/default/tabsheet/tabsheet.css +++ b/WebContent/ITMILL/themes/default/tabsheet/tabsheet.css @@ -15,6 +15,58 @@ overflow:hidden; } +.i-tabsheet-scroller { + white-space: nowrap; + text-align: right; + overflow: hidden; + height: 48px; +} +.i-tabsheet-hidetabs .i-tabsheet-scroller { + display: none; +} +.i-tabsheet-scrollerPrev, +.i-tabsheet-scrollerNext { + border: none; + width: 12px; + height: 27px; + position: relative; + margin-top: -10px; + top: -23px; +} +.i-tabsheet-scrollerPrev-disabled, +.i-tabsheet-scrollerNext-disabled { + border: none; + width: 12px; + height: 27px; + position: relative; + margin-top: -10px; + top: -23px; +} + +.i-tabsheet-scrollerNext, +.i-tabsheet-scrollerNext-disabled { + background: transparent url(img/next.png) no-repeat bottom left; + margin-right: 0px; +} +.i-tabsheet-scrollerPrev, +.i-tabsheet-scrollerPrev-disabled { + background: transparent url(img/prev.png) no-repeat bottom left; + margin-right: 1px; +} +.i-tabsheet-scrollerPrev:hover, +.i-tabsheet-scrollerNext:hover { + background-position: bottom right; +} +.i-tabsheet-scrollerPrev-disabled, +.i-tabsheet-scrollerNext-disabled { + opacity: 0.5; +} +.i-tabsheet-scrollerPrev-disabled:hover, +.i-tabsheet-scrollerNext-disabled:hover { + background-position: bottom left; + opacity: 0.5; +} + .i-tabsheet-tabs .i-caption { white-space: nowrap; } 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 8336352671..94fab77fe6 100644 --- a/src/com/itmill/toolkit/terminal/gwt/client/ui/ITabsheet.java +++ b/src/com/itmill/toolkit/terminal/gwt/client/ui/ITabsheet.java @@ -10,6 +10,7 @@ import com.google.gwt.user.client.Command; import com.google.gwt.user.client.DOM; import com.google.gwt.user.client.DeferredCommand; import com.google.gwt.user.client.Element; +import com.google.gwt.user.client.Event; import com.google.gwt.user.client.ui.Label; import com.google.gwt.user.client.ui.SourcesTabEvents; import com.google.gwt.user.client.ui.TabBar; @@ -27,6 +28,12 @@ public class ITabsheet extends ITabsheetBase implements public static final String CLASSNAME = "i-tabsheet"; + 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 int scrollerIndex = 0; + private final TabBar tb; private final ITabsheetPanel tp; private final Element contentNode, deco; @@ -82,10 +89,26 @@ public class ITabsheet extends ITabsheetBase implements public ITabsheet() { super(CLASSNAME); + // Tab scrolling + DOM.setStyleAttribute(getElement(), "overflow", "hidden"); + scroller = DOM.createDiv(); + DOM.setElementProperty(scroller, "className", SCROLLER_CLASSNAME); + scrollerPrev = DOM.createButton(); + DOM.setElementProperty(scrollerPrev, "className", SCROLLER_CLASSNAME + + "Prev"); + DOM.sinkEvents(scrollerPrev, Event.ONCLICK); + scrollerNext = DOM.createButton(); + DOM.setElementProperty(scrollerNext, "className", SCROLLER_CLASSNAME + + "Next"); + DOM.sinkEvents(scrollerNext, Event.ONCLICK); + DOM.appendChild(getElement(), scroller); + + // Tabs tb = new TabBar(); tp = new ITabsheetPanel(); tp.setStyleName(CLASSNAME + "-tabsheetpanel"); contentNode = DOM.createDiv(); + deco = DOM.createDiv(); addStyleDependentName("loading"); // Indicate initial progress @@ -95,7 +118,10 @@ public class ITabsheet extends ITabsheetBase implements + "-content"); DOM.setElementProperty(deco, "className", CLASSNAME + "-deco"); - add(tb, getElement()); + add(tb, scroller); + DOM.appendChild(scroller, scrollerPrev); + DOM.appendChild(scroller, scrollerNext); + DOM.appendChild(getElement(), contentNode); add(tp, contentNode); DOM.appendChild(getElement(), deco); @@ -108,6 +134,33 @@ public class ITabsheet extends ITabsheetBase implements } + public void onBrowserEvent(Event event) { + + // Tab scrolling + if (isScrolledTabs() + && DOM.compare(DOM.eventGetTarget(event), scrollerPrev)) { + if (scrollerIndex > 0) { + DOM.setStyleAttribute(DOM.getChild(DOM.getFirstChild(DOM + .getFirstChild(tb.getElement())), scrollerIndex), + "display", ""); + scrollerIndex--; + updateTabScroller(); + } + } else if (isClippedTabs() + && DOM.compare(DOM.eventGetTarget(event), scrollerNext)) { + int tabs = tb.getTabCount(); + if (scrollerIndex + 1 <= tabs) { + scrollerIndex++; + DOM.setStyleAttribute(DOM.getChild(DOM.getFirstChild(DOM + .getFirstChild(tb.getElement())), scrollerIndex), + "display", "none"); + updateTabScroller(); + } + } else { + super.onBrowserEvent(event); + } + } + public void updateFromUIDL(UIDL uidl, ApplicationConnection client) { super.updateFromUIDL(uidl, client); @@ -140,6 +193,7 @@ public class ITabsheet extends ITabsheetBase implements tb.setVisible(true); removeStyleName(CLASSNAME + "-hidetabs"); } + updateTabScroller(); waitingForResponse = false; } @@ -244,6 +298,41 @@ public class ITabsheet extends ITabsheetBase implements DOM.setStyleAttribute(contentNode, "overflow", ""); } Util.runDescendentsLayout(this); + + updateTabScroller(); + } + + /** + * Layouts the tab-scroller elements, and applies styles. + */ + private void updateTabScroller() { + DOM.setStyleAttribute(scroller, "width", tp.getOffsetWidth() + "px"); + + if (scrollerIndex > tb.getTabCount()) { + scrollerIndex = 0; + } + boolean scrolled = isScrolledTabs(); + boolean clipped = isClippedTabs(); + if (tb.isVisible() && (scrolled || clipped)) { + DOM.setStyleAttribute(scrollerNext, "display", ""); + DOM.setStyleAttribute(scrollerPrev, "display", ""); + DOM.setElementProperty(scrollerPrev, "className", + SCROLLER_CLASSNAME + (scrolled ? "Prev" : "Prev-disabled")); + DOM.setElementProperty(scrollerNext, "className", + SCROLLER_CLASSNAME + (clipped ? "Next" : "Next-disabled")); + } else { + DOM.setStyleAttribute(scrollerNext, "display", "none"); + DOM.setStyleAttribute(scrollerPrev, "display", "none"); + } + + } + + private boolean isScrolledTabs() { + return scrollerIndex > 0; + } + + private boolean isClippedTabs() { + return tb.getOffsetWidth() > getOffsetWidth(); } protected void clearPaintables() {