From 6401173b7f1becd1898368bbcf7bcdcb55813e07 Mon Sep 17 00:00:00 2001 From: Marc Englund Date: Tue, 3 Jun 2008 10:33:29 +0000 Subject: [PATCH] Adds tab-scrolling feature to TabSheet (clientside). Fixes #959 svn changeset:4733/svn branch:trunk --- .../themes/default/tabsheet/img/next.png | Bin 0 -> 442 bytes .../themes/default/tabsheet/img/prev.png | Bin 0 -> 446 bytes .../themes/default/tabsheet/tabsheet.css | 52 ++++++++++ .../terminal/gwt/client/ui/ITabsheet.java | 91 +++++++++++++++++- 4 files changed, 142 insertions(+), 1 deletion(-) create mode 100644 WebContent/ITMILL/themes/default/tabsheet/img/next.png create mode 100644 WebContent/ITMILL/themes/default/tabsheet/img/prev.png 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 0000000000000000000000000000000000000000..99418be185cea73d4bd38d34188d6683841ded31 GIT binary patch literal 442 zcmV;r0Y(0aP)Px#icm~cMfUgi^!E0_#>Tk3z1!a2+TGpn@$tpU%Erpe{r&yr=;+GM&(+x2#K_6Q z#>ds#-0tu1+}_{V+}-Z*@XgcI)7aU$zQ676?#9f`z{kkP%+1f!)7swN$k5UJ{QTYI z=HBJ!$j{N_=jYDW*y{51@%Q=F+uiv6{@mf>;^yZ5|NpkTyyofY|NsAq`d4cJ000Sa zNLh0L01FcU01FcV0GgZ_00007bV*G`2iOJ!1|KmuMI5>S006d0L_t(2&$ZIo4uUWc z1<>gNlttXDRZ(%*q5uDTLYms)fy5X3bd!^Gn$86PCKI725d-MwnCCLPEOtEZaxqJf z%XODoxo_I@er-8p<=nRC^PF-9GH)C_Oe72I;J%7L9XwQt+ITo8ATkeE6sdPx#icm~cMfUgi^!E0_#>Tk3z1!a2+TGpn@$tpU%Erpe{r&yr=;+GM&(+x2#K_6Q z#>ds#-0tu1+}_{V+}-Z*@XgcI)7aU$zQ676?#9f`z{kkP%+1f!)7swN$k5UJ{QTYI z=HBJ!$j{N_=jYDW*y{51@%Q=F+uiv6{@mf>;^yZ5|NpkTyyofY|NsAq`d4cJ000Sa zNLh0L01FcU01FcV0GgZ_00007bV*G`2iOJ!1|cLHUE?eO006p4L_t(2&$ZIo4#FT1 z1<;|;mM+#EMXg$Q9r*v>vkjq)4^4bfo^EmyhA+&&N7qteV>Pyzb+OfhdfFn~p_k9b6YN$eo8el`9X&6nO68j6CyjK|m7# z?O&m>0U8@XsQ_*60a5qRWe-RIzXGGkRf>YqWVj~7jj73VYy0Cb8Qe$MU?al@4{~_t ogDr8r%1N&>*DKdPPMYZQ8%>W?%RS=HaR2}S07*qoM6N<$f}%(29smFU literal 0 HcmV?d00001 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() { -- 2.39.5