Fixes #2061 for Tabsheets - Changing tab should no longer flicker in FF

svn changeset:5801/svn branch:trunk

diff --git a/WebContent/ITMILL/themes/default/styles.css b/WebContent/ITMILL/themes/default/styles.css
index 192f4a8bac81952420934156c6d5e2e54efae344..a38b1055047aa2849961d23e75a7c662872ea9e7 100644 (file)
--- a/WebContent/ITMILL/themes/default/styles.css
+++ b/WebContent/ITMILL/themes/default/styles.css
@@ -1997,22 +1997,14 @@ input.i-modified,
 
 /* Progress indication */
 
-.i-tabsheet-loading .i-tabsheet-tabs .i-tabsheet-tabitem-selected span {
+.i-tabsheet-loading .i-tabsheet-tabs .i-tabsheet-tabitem-selected .i-caption .i-captiontext {
        background: transparent url(common/img/ajax-loader.gif) no-repeat;
-       display: block;
        margin-left: -10px;
        padding-left: 10px;
        margin-top: -12px;
        padding-top: 12px;
 }
 
-.i-tabsheet-loading .i-tabsheet-content * {
-       visibility: hidden;
-       overflow: hidden;
-}
-
-
-
 
 /* IE specific styles */
 

diff --git a/WebContent/ITMILL/themes/default/tabsheet/tabsheet.css b/WebContent/ITMILL/themes/default/tabsheet/tabsheet.css
index 3435cce9212b4370f70984784082d59b445ceb91..90dcbbbbb50746cd9dae4b8c2c7d1afcabb8bc29 100644 (file)
--- a/WebContent/ITMILL/themes/default/tabsheet/tabsheet.css
+++ b/WebContent/ITMILL/themes/default/tabsheet/tabsheet.css
@@ -163,22 +163,14 @@
 
 /* Progress indication */
 
-.i-tabsheet-loading .i-tabsheet-tabs .i-tabsheet-tabitem-selected span {
+.i-tabsheet-loading .i-tabsheet-tabs .i-tabsheet-tabitem-selected .i-caption .i-captiontext {
        background: transparent url(../common/img/ajax-loader.gif) no-repeat;
-       display: block;
        margin-left: -10px;
        padding-left: 10px;
        margin-top: -12px;
        padding-top: 12px;
 }
 
-.i-tabsheet-loading .i-tabsheet-content * {
-       visibility: hidden;
-       overflow: hidden;
-}
-
-
-
 
 /* IE specific styles */
 

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 6c5343cdd082010c686ba281943b63d59867f337..7dcc659ec63400a803453f328f7522145ab31b46 100644 (file)
--- a/src/com/itmill/toolkit/terminal/gwt/client/ui/ITabsheet.java
+++ b/src/com/itmill/toolkit/terminal/gwt/client/ui/ITabsheet.java
@@ -19,6 +19,7 @@ import com.google.gwt.user.client.ui.ComplexPanel;
 import com.google.gwt.user.client.ui.Label;
 import com.google.gwt.user.client.ui.Widget;
 import com.itmill.toolkit.terminal.gwt.client.ApplicationConnection;
+import com.itmill.toolkit.terminal.gwt.client.BrowserInfo;
 import com.itmill.toolkit.terminal.gwt.client.ContainerResizedListener;
 import com.itmill.toolkit.terminal.gwt.client.ICaption;
 import com.itmill.toolkit.terminal.gwt.client.Paintable;
@@ -154,8 +155,8 @@ public class ITabsheet extends ITabsheetBase implements
             DeferredCommand.addCommand(new Command() {
                 public void execute() {
                     previousVisibleWidget = tp.getWidget(tp.getVisibleWidget());
-                    DOM.setStyleAttribute(previousVisibleWidget.getElement(),
-                            "visibility", "hidden");
+                    DOM.setStyleAttribute(DOM.getParent(previousVisibleWidget
+                            .getElement()), "visibility", "hidden");
                     client.updateVariable(id, "selected", tabKeys.get(tabIndex)
                             .toString(), true);
                 }
@@ -168,6 +169,10 @@ public class ITabsheet extends ITabsheetBase implements
         return width == null || width.equals("");
     }
 
+    private boolean isDynamicHeight() {
+        return height == null || height.equals("");
+    }
+
     public ITabsheet() {
         super(CLASSNAME);
 
@@ -277,6 +282,8 @@ public class ITabsheet extends ITabsheetBase implements
 
         // tabs; push or not
         if (!isDynamicWidth()) {
+            // FIXME: This makes tab sheet tabs go to 1px width on every update
+            // and then back to original width
             // update width later, in updateTabScroller();
             DOM.setStyleAttribute(tabs, "width", "1px");
             DOM.setStyleAttribute(tabs, "overflow", "hidden");
@@ -412,11 +419,9 @@ public class ITabsheet extends ITabsheetBase implements
             // Set proper values for content element
             DOM.setStyleAttribute(contentNode, "height", contentHeight + "px");
             renderSpace.setHeight(contentHeight);
-            DOM.setStyleAttribute(contentNode, "overflow", "auto");
             contentNode.getStyle().setProperty("position", "relative");
         } else {
             DOM.setStyleAttribute(contentNode, "height", "");
-            DOM.setStyleAttribute(contentNode, "overflow", "");
             renderSpace.setHeight(0);
         }
         iLayout();
@@ -443,6 +448,21 @@ public class ITabsheet extends ITabsheetBase implements
     }
 
     public void iLayout() {
+        if (isDynamicHeight()) {
+            if (tp.getVisibleWidget() >= 0) {
+                Widget widget = tp.getWidget(tp.getVisibleWidget());
+                int widgetHeight = widget.getOffsetHeight();
+                DOM.setStyleAttribute(tp.getElement(), "height", widgetHeight
+                        + "px");
+                if (BrowserInfo.get().isIE6()) {
+                    // 100% height is not good enough for IE6...
+                    tp.setVisibleWidgetHeight(widgetHeight);
+                }
+            }
+        } else {
+            DOM.setStyleAttribute(tp.getElement(), "height", "");
+        }
+
         renderInformation.updateSize(getElement());
 
         if (client != null) {
@@ -451,8 +471,10 @@ public class ITabsheet extends ITabsheetBase implements
 
         updateTabScroller();
 
-        Util.runWebkitOverflowAutoFix(contentNode);
-
+        if (tp.getVisibleWidget() >= 0) {
+            Util.runWebkitOverflowAutoFix(DOM.getParent(tp.getWidget(
+                    tp.getVisibleWidget()).getElement()));
+        }
     }
 
     /**

diff --git a/src/com/itmill/toolkit/terminal/gwt/client/ui/ITabsheetPanel.java b/src/com/itmill/toolkit/terminal/gwt/client/ui/ITabsheetPanel.java
index a88f2eeb8d24dcaea184238874a6249c7316de75..6f0955b370f93da375f5b1c639211c2b55a9c964 100644 (file)
--- a/src/com/itmill/toolkit/terminal/gwt/client/ui/ITabsheetPanel.java
+++ b/src/com/itmill/toolkit/terminal/gwt/client/ui/ITabsheetPanel.java
@@ -45,6 +45,10 @@ public class ITabsheetPanel extends ComplexPanel {
 \r
     private Element createContainerElement() {\r
         Element el = DOM.createDiv();\r
+        DOM.setStyleAttribute(el, "position", "absolute");\r
+        DOM.setStyleAttribute(el, "overflow", "auto");\r
+        DOM.setStyleAttribute(el, "width", "100%");\r
+        DOM.setStyleAttribute(el, "height", "100%");\r
         hide(el);\r
         return el;\r
     }\r
@@ -84,7 +88,6 @@ public class ITabsheetPanel extends ComplexPanel {
             }\r
             Element child = DOM.getChild(getElement(), index);\r
             DOM.removeChild(getElement(), child);\r
-            unHide(child);\r
         }\r
         return removed;\r
     }\r
@@ -109,25 +112,21 @@ public class ITabsheetPanel extends ComplexPanel {
     }\r
 \r
     private void hide(Element e) {\r
-        DOM.setStyleAttribute(e, "width", "0px");\r
-        DOM.setStyleAttribute(e, "height", "0px");\r
-        DOM.setStyleAttribute(e, "overflow", "hidden");\r
         DOM.setStyleAttribute(e, "visibility", "hidden");\r
-        DOM.setStyleAttribute(e, "position", "absolute");\r
-        DOM.setStyleAttribute(e, "top", "-100000px"); // Fixes FF2 caret bug\r
-        DOM.setStyleAttribute(e, "left", "0px");\r
+        DOM.setStyleAttribute(e, "top", "-100000px");\r
+        DOM.setStyleAttribute(e, "left", "-100000px");\r
     }\r
 \r
     private void unHide(Element e) {\r
-        DOM.setStyleAttribute(e, "marginLeft", "0px");\r
-        DOM.setStyleAttribute(e, "marginTop", "0px");\r
-        DOM.setStyleAttribute(e, "position", "");\r
         DOM.setStyleAttribute(e, "top", "");\r
         DOM.setStyleAttribute(e, "left", "");\r
         DOM.setStyleAttribute(e, "visibility", "");\r
-        DOM.setStyleAttribute(e, "width", "");\r
-        DOM.setStyleAttribute(e, "height", "");\r
-        DOM.setStyleAttribute(e, "overflow", "");\r
+\r
+    }\r
+\r
+    public void setVisibleWidgetHeight(int widgetHeight) {\r
+        DOM.setStyleAttribute(DOM.getParent(visibleWidget.getElement()),\r
+                "height", widgetHeight + "px");\r
 \r
     }\r
 \r

diff --git a/src/com/itmill/toolkit/tests/tickets/Ticket2061b.java b/src/com/itmill/toolkit/tests/tickets/Ticket2061b.java
new file mode 100644 (file)
index 0000000..09d8b6a
--- /dev/null
+++ b/src/com/itmill/toolkit/tests/tickets/Ticket2061b.java
@@ -0,0 +1,185 @@
+package com.itmill.toolkit.tests.tickets;
+
+import com.itmill.toolkit.Application;
+import com.itmill.toolkit.data.Item;
+import com.itmill.toolkit.data.Property.ValueChangeEvent;
+import com.itmill.toolkit.data.Property.ValueChangeListener;
+import com.itmill.toolkit.data.util.HierarchicalContainer;
+import com.itmill.toolkit.ui.Accordion;
+import com.itmill.toolkit.ui.Component;
+import com.itmill.toolkit.ui.CustomComponent;
+import com.itmill.toolkit.ui.ExpandLayout;
+import com.itmill.toolkit.ui.Label;
+import com.itmill.toolkit.ui.OrderedLayout;
+import com.itmill.toolkit.ui.Panel;
+import com.itmill.toolkit.ui.SplitPanel;
+import com.itmill.toolkit.ui.TabSheet;
+import com.itmill.toolkit.ui.Table;
+import com.itmill.toolkit.ui.TextField;
+import com.itmill.toolkit.ui.Window;
+import com.itmill.toolkit.ui.TabSheet.SelectedTabChangeEvent;
+import com.itmill.toolkit.ui.TabSheet.SelectedTabChangeListener;
+
+public class Ticket2061b extends Application implements
+        SelectedTabChangeListener {
+
+    private Window mainWindow;
+    private Panel p;
+
+    @Override
+    public void init() {
+        mainWindow = new Window("Ticket 2061b");
+        mainWindow.setSizeFull();
+        OrderedLayout mainLayout = (OrderedLayout) mainWindow.getLayout();
+        mainLayout.setSizeFull();
+        mainLayout.setMargin(false);
+        setMainWindow(mainWindow);
+
+        SplitPanel sp = new SplitPanel();
+        sp.setSizeFull();
+        sp.setSplitPosition(20, SplitPanel.UNITS_PIXELS);
+
+        p = new Panel("This is a panel");
+        p.setSizeFull();
+        Label label1 = new Label("This is a table!");
+        label1.setHeight("1500px");
+        label1.setWidth("1500px");
+        p.addComponent(label1);
+        p.setScrollTop(50);
+        // MyTable table1 = new MyTable(24, "table1");
+        // table1.loadTable(1000);
+
+        // MyTable table2 = new MyTable(24, "table2");
+        // table2.loadTable(1000);
+
+        // MyTable table3 = new MyTable(24, "table3");
+        // table3.loadTable(1000);
+
+        // MyAccordion accordion = new MyAccordion(new Component[] { table1,
+        // table2 }, "Test");
+
+        Label a = new Label("abc123");
+        TextField tf = new TextField("A large textfield");
+        tf.setHeight("2500px");
+        tf.setWidth("2500px");
+
+        Tabs tab = new Tabs(new Component[] { p, a, tf });
+        tab.addListener(this);
+
+        mainLayout.addComponent(sp);
+        sp.addComponent(new Label("C 1"));
+        // sp.addComponent(new Label("C 2"));
+        // sp.setHeight("100px");
+
+        sp.addComponent(tab);
+        // mainLayout.addComponent(new Label("Filler"));
+        // mainLayout.addComponent(tab);
+        // mainLayout.setExpandRatio(tab, 1.0f);
+        // sp.addComponent(new Label("Filler"));
+        // sp.addComponent(tab);
+
+        p = new Panel("This is a panel");
+        p.setWidth("2000px");
+        p.setHeight("2000px");
+        Panel p2 = new Panel("This is another panel");
+        p2.setWidth("2500px");
+        p2.setHeight("2500px");
+        label1 = new Label("This is a table!");
+        label1.setHeight("1500px");
+        label1.setWidth("1500px");
+        p2.addComponent(label1);
+        p.addComponent(p2);
+
+        tab.addTab(p, "Panel with panel", null);
+    }
+
+    public class MyTable extends CustomComponent implements ValueChangeListener {
+
+        private Table table = new Table();
+        private String[] columns;
+        private ExpandLayout layout = new ExpandLayout();
+
+        public MyTable(int columnNumber, String id) {
+            setDebugId(id);
+            setCompositionRoot(layout);
+            setSizeFull();
+            columns = initializeColumns(columnNumber);
+            table.setWidth("100%");
+            table.setHeight("100%");
+            table.setColumnReorderingAllowed(true);
+            table.setColumnCollapsingAllowed(true);
+            table.setSelectable(true);
+            table.setMultiSelect(false);
+            table.setNullSelectionAllowed(false);
+            // table.setRowHeaderMode(Table.ROW_HEADER_MODE_ID);
+            table.addListener(this);
+            table.setContainerDataSource(createContainer());
+            layout.addComponent(table);
+        }
+
+        public void loadTable(int itemNumber) {
+            table.removeAllItems();
+            for (int j = 0; j < itemNumber; j++) {
+                Item rowItem = table.addItem(j);
+                if (rowItem != null) {
+                    for (int i = 0; i < columns.length; i++) {
+                        rowItem.getItemProperty(columns[i]).setValue(
+                                "Value" + j);
+                    }
+                }
+            }
+        }
+
+        private HierarchicalContainer createContainer() {
+            final HierarchicalContainer c = new HierarchicalContainer();
+            for (int i = 0; i < columns.length; i++) {
+                c.addContainerProperty(columns[i], String.class, null);
+            }
+            return c;
+        }
+
+        private String[] initializeColumns(int number) {
+            String[] columns = new String[number];
+            for (int i = 0; i < number; i++) {
+                columns[i] = "Column" + i;
+            }
+            return columns;
+        }
+
+        public void valueChange(ValueChangeEvent event) {
+
+        }
+
+    }
+
+    public class Tabs extends TabSheet {
+
+        public Tabs(Component[] components) {
+            this.setWidth("100%");
+            this.setHeight("100%");
+            for (int i = 0; i < components.length; i++) {
+                this.addTab(components[i], components[i].getDebugId(), null);
+            }
+
+        }
+
+    }
+
+    public class MyAccordion extends Accordion {
+
+        public MyAccordion(Component[] components, String id) {
+            this.setWidth("100%");
+            this.setHeight("100%");
+            setDebugId(id);
+            for (int i = 0; i < components.length; i++) {
+                this.addTab(components[i], components[i].getDebugId(), null);
+            }
+        }
+    }
+
+    public void selectedTabChange(SelectedTabChangeEvent event) {
+        p.setScrollTop(10);
+
+    }
+
+}

diff --git a/src/com/itmill/toolkit/tests/tickets/Ticket2061c.java b/src/com/itmill/toolkit/tests/tickets/Ticket2061c.java
new file mode 100644 (file)
index 0000000..421d434
--- /dev/null
+++ b/src/com/itmill/toolkit/tests/tickets/Ticket2061c.java
@@ -0,0 +1,149 @@
+package com.itmill.toolkit.tests.tickets;
+
+import com.itmill.toolkit.Application;
+import com.itmill.toolkit.data.Item;
+import com.itmill.toolkit.data.Property.ValueChangeEvent;
+import com.itmill.toolkit.data.Property.ValueChangeListener;
+import com.itmill.toolkit.data.util.HierarchicalContainer;
+import com.itmill.toolkit.ui.Accordion;
+import com.itmill.toolkit.ui.Component;
+import com.itmill.toolkit.ui.CustomComponent;
+import com.itmill.toolkit.ui.ExpandLayout;
+import com.itmill.toolkit.ui.Label;
+import com.itmill.toolkit.ui.OrderedLayout;
+import com.itmill.toolkit.ui.Panel;
+import com.itmill.toolkit.ui.TabSheet;
+import com.itmill.toolkit.ui.Table;
+import com.itmill.toolkit.ui.Window;
+import com.itmill.toolkit.ui.TabSheet.SelectedTabChangeEvent;
+import com.itmill.toolkit.ui.TabSheet.SelectedTabChangeListener;
+
+public class Ticket2061c extends Application implements
+        SelectedTabChangeListener {
+
+    private Window mainWindow;
+    private Panel p;
+
+    @Override
+    public void init() {
+        mainWindow = new Window("It Mill");
+        mainWindow.setSizeFull();
+        mainWindow.getLayout().setSizeFull();
+        setMainWindow(mainWindow);
+
+        OrderedLayout ol = new OrderedLayout();
+        ol.setWidth("200px");
+        ol.setHeight("200px");
+
+        OrderedLayout ol2 = new OrderedLayout();
+        ol2.setSizeFull();
+
+        p = new Panel("This is a panel");
+        p.setSizeFull();
+
+        Label label1 = new Label("This is a table!");
+        label1.setHeight("1500px");
+        label1.setWidth("1500px");
+        p.setScrollTop(50);
+
+        p.addComponent(label1);
+        ol2.addComponent(p);
+        ol.addComponent(ol2);
+
+        Label a = new Label("abc123");
+        a.setCaption("Label a");
+        ol.setCaption("OL");
+        Tabs tab = new Tabs(new Component[] { a, ol });
+        tab.addListener(this);
+        mainWindow.addComponent(tab);
+
+    }
+
+    public class MyTable extends CustomComponent implements ValueChangeListener {
+
+        private Table table = new Table();
+        private String[] columns;
+        private ExpandLayout layout = new ExpandLayout();
+
+        public MyTable(int columnNumber, String id) {
+            setDebugId(id);
+            setCompositionRoot(layout);
+            setSizeFull();
+            columns = initializeColumns(columnNumber);
+            table.setWidth("100%");
+            table.setHeight("100%");
+            table.setColumnReorderingAllowed(true);
+            table.setColumnCollapsingAllowed(true);
+            table.setSelectable(true);
+            table.setMultiSelect(false);
+            table.setNullSelectionAllowed(false);
+            // table.setRowHeaderMode(Table.ROW_HEADER_MODE_ID);
+            table.addListener(this);
+            table.setContainerDataSource(createContainer());
+            layout.addComponent(table);
+        }
+
+        public void loadTable(int itemNumber) {
+            table.removeAllItems();
+            for (int j = 0; j < itemNumber; j++) {
+                Item rowItem = table.addItem(j);
+                if (rowItem != null) {
+                    for (int i = 0; i < columns.length; i++) {
+                        rowItem.getItemProperty(columns[i]).setValue(
+                                "Value" + j);
+                    }
+                }
+            }
+        }
+
+        private HierarchicalContainer createContainer() {
+            final HierarchicalContainer c = new HierarchicalContainer();
+            for (int i = 0; i < columns.length; i++) {
+                c.addContainerProperty(columns[i], String.class, null);
+            }
+            return c;
+        }
+
+        private String[] initializeColumns(int number) {
+            String[] columns = new String[number];
+            for (int i = 0; i < number; i++) {
+                columns[i] = "Column" + i;
+            }
+            return columns;
+        }
+
+        public void valueChange(ValueChangeEvent event) {
+
+        }
+
+    }
+
+    public class Tabs extends TabSheet {
+
+        public Tabs(Component[] components) {
+            this.setWidth("100%");
+            // this.setHeight("100%");
+            for (int i = 0; i < components.length; i++) {
+                this.addTab(components[i], components[i].getDebugId(), null);
+            }
+        }
+    }
+
+    public class MyAccordion extends Accordion {
+
+        public MyAccordion(Component[] components, String id) {
+            this.setWidth("100%");
+            this.setHeight("100%");
+            setDebugId(id);
+            for (int i = 0; i < components.length; i++) {
+                this.addTab(components[i], components[i].getDebugId(), null);
+            }
+        }
+    }
+
+    public void selectedTabChange(SelectedTabChangeEvent event) {
+        p.setScrollTop(10);
+
+    }
+
+}