diff options
4 files changed, 143 insertions, 4 deletions
diff --git a/WebContent/VAADIN/themes/tests-responsive/styles.css b/WebContent/VAADIN/themes/tests-responsive/styles.css index db92a2a2fc..a06c920fe9 100644 --- a/WebContent/VAADIN/themes/tests-responsive/styles.css +++ b/WebContent/VAADIN/themes/tests-responsive/styles.css @@ -98,4 +98,19 @@ } .v-csslayout-width-and-height[height-range~="500px-"][width-range~="600px-"] { background: red; -}
\ No newline at end of file +} + +/* Styles for ResponsiveLayoutUpdate test */ +.layout-update .change-width { + white-space: normal; + background: #ddd; +} +.layout-update[width-range="0-599px"] .change-width { + width: 200px; + height: 200px; +} + +.layout-update[width-range="600px-"] .change-width { + width: 300px; + height: 300px; +} diff --git a/client/src/com/vaadin/client/extensions/ResponsiveConnector.java b/client/src/com/vaadin/client/extensions/ResponsiveConnector.java index 62913400db..8e349bac7b 100644 --- a/client/src/com/vaadin/client/extensions/ResponsiveConnector.java +++ b/client/src/com/vaadin/client/extensions/ResponsiveConnector.java @@ -302,11 +302,11 @@ public class ResponsiveConnector extends AbstractExtensionConnector implements }-*/; - private String currentWidthRanges; - private String currentHeightRanges; + private String currentWidthRanges = ""; + private String currentHeightRanges = ""; @Override - public void onElementResize(ElementResizeEvent event) { + public void onElementResize(final ElementResizeEvent event) { int width = event.getLayoutManager().getOuterWidth(event.getElement()); int height = event.getLayoutManager() .getOuterHeight(event.getElement()); @@ -315,6 +315,9 @@ public class ResponsiveConnector extends AbstractExtensionConnector implements .getElement(); boolean forceRedraw = false; + String oldWidthRanges = currentWidthRanges; + String oldHeightRanges = currentHeightRanges; + // Loop through breakpoints and see which one applies to this width currentWidthRanges = resolveBreakpoint("width", width, event.getElement()); @@ -342,6 +345,14 @@ public class ResponsiveConnector extends AbstractExtensionConnector implements if (forceRedraw) { forceRedrawIfIE8(element); } + + // If a new breakpoint is triggered, ensure all sizes are updated in + // case some new styles are applied + if (!currentWidthRanges.equals(oldWidthRanges) + || !currentHeightRanges.equals(oldHeightRanges)) { + event.getLayoutManager().setNeedsMeasureRecursively( + ResponsiveConnector.this.target); + } } /** diff --git a/uitest/src/com/vaadin/tests/extensions/ResponsiveLayoutUpdate.java b/uitest/src/com/vaadin/tests/extensions/ResponsiveLayoutUpdate.java new file mode 100644 index 0000000000..4634ebff15 --- /dev/null +++ b/uitest/src/com/vaadin/tests/extensions/ResponsiveLayoutUpdate.java @@ -0,0 +1,61 @@ +/* + * Copyright 2000-2014 Vaadin Ltd. + * + * Licensed under the Apache License, Version 2.0 (the "License"); you may not + * use this file except in compliance with the License. You may obtain a copy of + * the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT + * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the + * License for the specific language governing permissions and limitations under + * the License. + */ + +package com.vaadin.tests.extensions; + +import com.vaadin.annotations.Theme; +import com.vaadin.server.Responsive; +import com.vaadin.server.VaadinRequest; +import com.vaadin.tests.components.AbstractTestUI; +import com.vaadin.ui.HorizontalLayout; +import com.vaadin.ui.Label; +import com.vaadin.ui.Panel; + +@Theme("tests-responsive") +public class ResponsiveLayoutUpdate extends AbstractTestUI { + + @Override + protected void setup(VaadinRequest request) { + HorizontalLayout layout = new HorizontalLayout(); + layout.addStyleName("layout-update"); + layout.setWidth("100%"); + setContent(layout); + Responsive.makeResponsive(layout); + + Label label = new Label( + "This label changes its size between the breakpoints, allowing more space for the adjacent component."); + label.addStyleName("change-width"); + label.setSizeUndefined(); + layout.addComponent(label); + + Panel panel = new Panel("Panel"); + panel.setContent(new Label( + "This Panel should be maximized in both breakpoints.")); + panel.setSizeFull(); + layout.addComponent(panel); + layout.setExpandRatio(panel, 1); + } + + @Override + protected String getTestDescription() { + return "A new layout phase should be requested after a new breakpoint is triggered, ensuring any style changes affecting component sizes are taken into account."; + } + + @Override + protected Integer getTicketNumber() { + return 14354; + } +} diff --git a/uitest/src/com/vaadin/tests/extensions/ResponsiveLayoutUpdateTest.java b/uitest/src/com/vaadin/tests/extensions/ResponsiveLayoutUpdateTest.java new file mode 100644 index 0000000000..cd0a92d339 --- /dev/null +++ b/uitest/src/com/vaadin/tests/extensions/ResponsiveLayoutUpdateTest.java @@ -0,0 +1,52 @@ +/* + * Copyright 2000-2014 Vaadin Ltd. + * + * Licensed under the Apache License, Version 2.0 (the "License"); you may not + * use this file except in compliance with the License. You may obtain a copy of + * the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT + * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the + * License for the specific language governing permissions and limitations under + * the License. + */ + +package com.vaadin.tests.extensions; + +import org.junit.Test; +import org.openqa.selenium.WebDriver; +import org.openqa.selenium.support.ui.ExpectedCondition; + +import com.vaadin.testbench.By; +import com.vaadin.testbench.elements.PanelElement; +import com.vaadin.tests.tb3.MultiBrowserTest; + +public class ResponsiveLayoutUpdateTest extends MultiBrowserTest { + + @Test + public void testWidthAndHeightRanges() throws Exception { + openTestURL(); + + final PanelElement panelElement = $(PanelElement.class).first(); + // I currently have no idea why PhantomJS wants a click here to work + // properly + panelElement.click(); + waitForElementVisible(By.cssSelector(".layout-update")); + + compareScreen("large"); + + // Resize below 600px width breakpoint + testBench().resizeViewPortTo(400, 768); + + waitUntil(new ExpectedCondition<Boolean>() { + @Override + public Boolean apply(WebDriver input) { + return panelElement.getSize().getWidth() < 500; + } + }); + compareScreen("small"); + } +} |