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 39a349672b3ed129ed27cad7843e504459296347..86b17c829f2eae2ce98a2e00853d093f342dcac6 100644 (file)
--- 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 (file)
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 783acf54c857dc56ce032d4d4d1c186b07448f58..5e111b4aa013a0bb161490c932abfeec98922bfb 100644 (file)
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 faf79fe0fe0ae629a653512ffb1a90cdcd67fa6c..9834616cfce28a77b0e2caee514e28e5d419cbc5 100644 (file)
--- 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 1a46196b99dba92dea7ace34c6b3dad95662c2b3..ea94a176a8722f29a094bb76b462fae07b59c9a8 100644 (file)
--- 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;