From d7dfc7477fbfc07893a2ca3271d0d898ad197b53 Mon Sep 17 00:00:00 2001 From: Marc Englund Date: Tue, 22 Sep 2015 09:37:36 +0300 Subject: [PATCH] Removes .v-ui wrapping from valo-menu-responsive for (#18961) Removing .v-ui wrapping makes valo-menu-responsive usable anywhere on the page (not just top-level). Change-Id: I5551cb29677ae53be453fc29d0295ebb2dcbf241 --- .../themes/valo/components/_valo-menu.scss | 2 +- .../tests/themes/valo/ResponsiveStyles.java | 30 +++++++++ .../themes/valo/ResponsiveStylesDesign.html | 56 +++++++++++++++++ .../themes/valo/ResponsiveStylesDesign.java | 29 +++++++++ .../themes/valo/ResponsiveStylesTest.java | 62 +++++++++++++++++++ 5 files changed, 178 insertions(+), 1 deletion(-) create mode 100644 uitest/src/com/vaadin/tests/themes/valo/ResponsiveStyles.java create mode 100644 uitest/src/com/vaadin/tests/themes/valo/ResponsiveStylesDesign.html create mode 100644 uitest/src/com/vaadin/tests/themes/valo/ResponsiveStylesDesign.java create mode 100644 uitest/src/com/vaadin/tests/themes/valo/ResponsiveStylesTest.java diff --git a/WebContent/VAADIN/themes/valo/components/_valo-menu.scss b/WebContent/VAADIN/themes/valo/components/_valo-menu.scss index 2d37b27773..6022cf7334 100644 --- a/WebContent/VAADIN/themes/valo/components/_valo-menu.scss +++ b/WebContent/VAADIN/themes/valo/components/_valo-menu.scss @@ -152,7 +152,7 @@ $valo-menu-background-color: scale-color($v-app-background-color, $lightness: if * @group valo-menu */ @mixin valo-menu-responsive { - .v-ui.valo-menu-responsive { + .valo-menu-responsive { @include width-range($min: 801px, $max: 1100px) { .valo-menu-part { @include valo-menu-large-icons-style($valo-menu-background-color); diff --git a/uitest/src/com/vaadin/tests/themes/valo/ResponsiveStyles.java b/uitest/src/com/vaadin/tests/themes/valo/ResponsiveStyles.java new file mode 100644 index 0000000000..b1a4b2e30b --- /dev/null +++ b/uitest/src/com/vaadin/tests/themes/valo/ResponsiveStyles.java @@ -0,0 +1,30 @@ +/* + * 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.themes.valo; + +import com.vaadin.annotations.Theme; +import com.vaadin.server.VaadinRequest; +import com.vaadin.ui.UI; + +@Theme("valo") +public class ResponsiveStyles extends UI { + + @Override + protected void init(VaadinRequest request) { + setContent(new ResponsiveStylesDesign()); + } + +} diff --git a/uitest/src/com/vaadin/tests/themes/valo/ResponsiveStylesDesign.html b/uitest/src/com/vaadin/tests/themes/valo/ResponsiveStylesDesign.html new file mode 100644 index 0000000000..60da28d843 --- /dev/null +++ b/uitest/src/com/vaadin/tests/themes/valo/ResponsiveStylesDesign.html @@ -0,0 +1,56 @@ + + + + + + + + + + + The + Application + + + + Menu + + + + Inbox + + + + + + + + + + + + + + + + The + Application + + + + Menu + + + + Inbox + + + + + + + + + + + \ No newline at end of file diff --git a/uitest/src/com/vaadin/tests/themes/valo/ResponsiveStylesDesign.java b/uitest/src/com/vaadin/tests/themes/valo/ResponsiveStylesDesign.java new file mode 100644 index 0000000000..a975c76e1c --- /dev/null +++ b/uitest/src/com/vaadin/tests/themes/valo/ResponsiveStylesDesign.java @@ -0,0 +1,29 @@ +/* + * 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.themes.valo; + +import com.vaadin.annotations.DesignRoot; +import com.vaadin.ui.VerticalLayout; +import com.vaadin.ui.declarative.Design; + +@DesignRoot +@SuppressWarnings("serial") +public class ResponsiveStylesDesign extends VerticalLayout { + + public ResponsiveStylesDesign() { + Design.read(this); + } +} diff --git a/uitest/src/com/vaadin/tests/themes/valo/ResponsiveStylesTest.java b/uitest/src/com/vaadin/tests/themes/valo/ResponsiveStylesTest.java new file mode 100644 index 0000000000..8f01de350e --- /dev/null +++ b/uitest/src/com/vaadin/tests/themes/valo/ResponsiveStylesTest.java @@ -0,0 +1,62 @@ +/* + * 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.themes.valo; + +import static org.hamcrest.MatcherAssert.assertThat; +import static org.hamcrest.Matchers.equalTo; + +import java.util.List; + +import org.junit.Test; +import org.openqa.selenium.WebElement; + +import com.vaadin.tests.tb3.MultiBrowserTest; + +/** + * Test for the built-in reponsive ("RWD") styles in Valo. + */ +public class ResponsiveStylesTest extends MultiBrowserTest { + + private static final String MENU_STYLENAME = "valo-menu"; + private static final int NARROW_ELEMENT_INDEX = 0; + private static final int NARROW_WIDTH = 112; + private static final int WIDE_ELEMENT_INDEX = 1; + private static final int WIDE_WIDTH = 146; + + /** + * Tests that valo-menu-responsive can be used in any element on the page, + * not just as top-level component. + * + * @throws Exception + */ + @Test + public void testValoMenuResponsiveParentSize() throws Exception { + openTestURL(); + + List menus = findElements(com.vaadin.testbench.By + .className(MENU_STYLENAME)); + + WebElement narrowMenu = menus.get(NARROW_ELEMENT_INDEX); + int narrowWidth = narrowMenu.getSize().width; + assertThat(narrowWidth, equalTo(NARROW_WIDTH)); + + WebElement wideMenu = menus.get(WIDE_ELEMENT_INDEX); + int wideWidth = wideMenu.getSize().width; + assertThat(wideWidth, equalTo(WIDE_WIDTH)); + + compareScreen("defaultMenuWidths"); + } +} -- 2.39.5