From: Artur Signell Date: Mon, 3 Nov 2008 14:52:38 +0000 (+0000) Subject: Fixes #2061 for Tabsheets - Changing tab should no longer flicker in FF X-Git-Tag: 6.7.0.beta1~3882 X-Git-Url: https://source.dussan.org/?a=commitdiff_plain;h=ad15749aedb2f07f98b86c32ce558a08ae15a289;p=vaadin-framework.git 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 192f4a8bac..a38b105504 100644 --- 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 3435cce921..90dcbbbbb5 100644 --- 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 6c5343cdd0..7dcc659ec6 100644 --- 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 a88f2eeb8d..6f0955b370 100644 --- 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 { private Element createContainerElement() { Element el = DOM.createDiv(); + DOM.setStyleAttribute(el, "position", "absolute"); + DOM.setStyleAttribute(el, "overflow", "auto"); + DOM.setStyleAttribute(el, "width", "100%"); + DOM.setStyleAttribute(el, "height", "100%"); hide(el); return el; } @@ -84,7 +88,6 @@ public class ITabsheetPanel extends ComplexPanel { } Element child = DOM.getChild(getElement(), index); DOM.removeChild(getElement(), child); - unHide(child); } return removed; } @@ -109,25 +112,21 @@ public class ITabsheetPanel extends ComplexPanel { } private void hide(Element e) { - DOM.setStyleAttribute(e, "width", "0px"); - DOM.setStyleAttribute(e, "height", "0px"); - DOM.setStyleAttribute(e, "overflow", "hidden"); DOM.setStyleAttribute(e, "visibility", "hidden"); - DOM.setStyleAttribute(e, "position", "absolute"); - DOM.setStyleAttribute(e, "top", "-100000px"); // Fixes FF2 caret bug - DOM.setStyleAttribute(e, "left", "0px"); + DOM.setStyleAttribute(e, "top", "-100000px"); + DOM.setStyleAttribute(e, "left", "-100000px"); } private void unHide(Element e) { - DOM.setStyleAttribute(e, "marginLeft", "0px"); - DOM.setStyleAttribute(e, "marginTop", "0px"); - DOM.setStyleAttribute(e, "position", ""); DOM.setStyleAttribute(e, "top", ""); DOM.setStyleAttribute(e, "left", ""); DOM.setStyleAttribute(e, "visibility", ""); - DOM.setStyleAttribute(e, "width", ""); - DOM.setStyleAttribute(e, "height", ""); - DOM.setStyleAttribute(e, "overflow", ""); + + } + + public void setVisibleWidgetHeight(int widgetHeight) { + DOM.setStyleAttribute(DOM.getParent(visibleWidget.getElement()), + "height", widgetHeight + "px"); } diff --git a/src/com/itmill/toolkit/tests/tickets/Ticket2061b.java b/src/com/itmill/toolkit/tests/tickets/Ticket2061b.java new file mode 100644 index 0000000000..09d8b6ab51 --- /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 index 0000000000..421d434c54 --- /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); + + } + +}