diff options
5 files changed, 178 insertions, 1 deletions
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 @@ +<!DOCTYPE html> +<html> + <body> + <v-vertical-layout primary-style-name="v-verticallayout" spacing="true" size-auto="true" margin="true"> + <v-css-layout caption="801-1100px = narrow menu" width="801px" height="200px"> + <v-horizontal-layout style-name="valo-menu-responsive" responsive="true" size-full="true"> + <v-css-layout style-name="valo-menu"> + <v-css-layout style-name="valo-menu-part"> + <v-horizontal-layout style-name="valo-menu-title" width-full="true" _id="menuTitle2"> + <v-label size-auto="true" _id="menuTitleLabel2" :middle="" :expand=""> + The + <strong>Application</strong> + </v-label> + </v-horizontal-layout> + <v-button icon="fonticon://FontAwesome/f03a" style-name="primary small valo-menu-toggle" plain-text="" _id="menuToggle2"> + Menu + </v-button> + <v-css-layout style-name="valo-menuitems" _id="menuItems2"> + <v-button icon="fonticon://FontAwesome/f01c" primary-style-name="valo-menu-item" _id="inboxButton2"> + Inbox + <span class="valo-menu-badge">7</span> + </v-button> + </v-css-layout> + </v-css-layout> + </v-css-layout> + <v-vertical-layout spacing="true" margin="true" _id="content2" :expand=""></v-vertical-layout> + </v-horizontal-layout> + </v-css-layout> + + <v-css-layout caption="Over 1100px = wide menu" width="1101px" height="200px"> + <v-horizontal-layout style-name="valo-menu-responsive" responsive="true" size-full="true"> + <v-css-layout style-name="valo-menu"> + <v-css-layout style-name="valo-menu-part"> + <v-horizontal-layout style-name="valo-menu-title" width-full="true" _id="menuTitle3"> + <v-label size-auto="true" _id="menuTitleLabel3" :middle="" :expand=""> + The + <strong>Application</strong> + </v-label> + </v-horizontal-layout> + <v-button icon="fonticon://FontAwesome/f03a" style-name="primary small valo-menu-toggle" plain-text="" _id="menuToggle3"> + Menu + </v-button> + <v-css-layout style-name="valo-menuitems" _id="menuItems3"> + <v-button icon="fonticon://FontAwesome/f01c" primary-style-name="valo-menu-item" _id="inboxButton3"> + Inbox + <span class="valo-menu-badge">7</span> + </v-button> + </v-css-layout> + </v-css-layout> + </v-css-layout> + <v-vertical-layout spacing="true" margin="true" _id="content3" :expand=""></v-vertical-layout> + </v-horizontal-layout> + </v-css-layout> + </v-vertical-layout> + </body> +</html>
\ 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<WebElement> 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"); + } +} |