diff options
6 files changed, 113 insertions, 20 deletions
diff --git a/server/src/main/java/com/vaadin/ui/themes/ValoTheme.java b/server/src/main/java/com/vaadin/ui/themes/ValoTheme.java index a808996206..df9621bf27 100644 --- a/server/src/main/java/com/vaadin/ui/themes/ValoTheme.java +++ b/server/src/main/java/com/vaadin/ui/themes/ValoTheme.java @@ -1032,15 +1032,13 @@ public class ValoTheme { * Set the <em><b>primary</b></em> style name of a Label or a Button to this * style name to create an application logo. The logo is designed to be * placed inside a {@link #MENU_PART} layout. - * </p> * * <p> * The text content of the logo should be very short, since the logo area * only shows approximately three letters. Using one of the * {@link FontAwesome} icons is a good way to quickly create a logo for your * application. - * </p> - * </p> + * <p> * * <h4>Example</h4> * @@ -1052,4 +1050,26 @@ public class ValoTheme { */ public static final String MENU_LOGO = "valo-menu-logo"; + /** + * Add this style name to your {@link #UI_WITH_MENU responsive} + * {@link #MENU_ROOT valo menu} element to make it appear automatically on + * hover - without adding any code. + * <p> + * The menu will appear on mouse over on desktop, or when tapping on touch + * devices. + * <p> + * <h4>Example</h4> + * + * <pre> + * HorizontalLayout menu = new HorizontalLayout(); + * Responsive.makeResponsive(menu); + * menu.addStyleName(ValoTheme.UI_WITH_MENU); + * + * CssLayout menuArea = new CssLayout(); + * menuArea.setPrimaryStyleName(ValoTheme.MENU_ROOT); + * menuArea.addStyleName(ValoTheme.MENU_APPEAR_ON_HOVER); + * menu.addComponent(menuArea); + * </pre> + */ + public static final String MENU_APPEAR_ON_HOVER = "valo-menu-hover"; } diff --git a/themes/src/main/themes/VAADIN/themes/valo/components/_valo-menu.scss b/themes/src/main/themes/VAADIN/themes/valo/components/_valo-menu.scss index 48ba22174b..084f97cac6 100644 --- a/themes/src/main/themes/VAADIN/themes/valo/components/_valo-menu.scss +++ b/themes/src/main/themes/VAADIN/themes/valo/components/_valo-menu.scss @@ -237,7 +237,8 @@ $valo-menu-background-color: scale-color($v-app-background-color, $lightness: if @include transition(all 300ms); } - .valo-menu-visible .valo-menuitems { + .valo-menu-visible .valo-menuitems, + .valo-menu-hover:hover .valo-menuitems { @include transform(translatex(0%)); } } diff --git a/uitest/src/main/java/com/vaadin/tests/themes/valo/ResponsiveStyles.java b/uitest/src/main/java/com/vaadin/tests/themes/valo/ResponsiveStyles.java index 9e65b6a6bb..9d4196ad9b 100644 --- a/uitest/src/main/java/com/vaadin/tests/themes/valo/ResponsiveStyles.java +++ b/uitest/src/main/java/com/vaadin/tests/themes/valo/ResponsiveStyles.java @@ -22,7 +22,14 @@ public class ResponsiveStyles extends UI { @Override protected void init(VaadinRequest request) { - setContent(new ResponsiveStylesDesign()); + ResponsiveStylesDesign design = new ResponsiveStylesDesign(); + setContent(design); + + boolean collapsed = request.getParameter("collapsed") != null; + + design.collapsed.setVisible(collapsed); + design.narrow.setVisible(!collapsed); + design.wide.setVisible(!collapsed); } } diff --git a/uitest/src/main/java/com/vaadin/tests/themes/valo/ResponsiveStylesDesign.java b/uitest/src/main/java/com/vaadin/tests/themes/valo/ResponsiveStylesDesign.java index c18c22e57f..880b13d9c5 100644 --- a/uitest/src/main/java/com/vaadin/tests/themes/valo/ResponsiveStylesDesign.java +++ b/uitest/src/main/java/com/vaadin/tests/themes/valo/ResponsiveStylesDesign.java @@ -16,6 +16,7 @@ package com.vaadin.tests.themes.valo; import com.vaadin.annotations.DesignRoot; +import com.vaadin.ui.Component; import com.vaadin.ui.VerticalLayout; import com.vaadin.ui.declarative.Design; @@ -23,6 +24,10 @@ import com.vaadin.ui.declarative.Design; @SuppressWarnings("serial") public class ResponsiveStylesDesign extends VerticalLayout { + protected Component collapsed; + protected Component narrow; + protected Component wide; + public ResponsiveStylesDesign() { Design.read(this); } diff --git a/uitest/src/main/resources/com/vaadin/tests/themes/valo/ResponsiveStylesDesign.html b/uitest/src/main/resources/com/vaadin/tests/themes/valo/ResponsiveStylesDesign.html index 60da28d843..330bad00d3 100644 --- a/uitest/src/main/resources/com/vaadin/tests/themes/valo/ResponsiveStylesDesign.html +++ b/uitest/src/main/resources/com/vaadin/tests/themes/valo/ResponsiveStylesDesign.html @@ -1,56 +1,84 @@ <!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-vertical-layout size-auto="true"> + <v-vertical-layout spacing="true" size-auto="true" margin="true"> + + <v-css-layout _id="narrow" 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=""> + <v-horizontal-layout style-name="valo-menu-title" width-full="true" > + <v-label size-auto="true" :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"> + <v-button icon="fonticon://FontAwesome/f03a" style-name="primary small valo-menu-toggle" plain-text="" > 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"> + <v-css-layout style-name="valo-menuitems" > + <v-button icon="fonticon://FontAwesome/f01c" primary-style-name="valo-menu-item" > 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-vertical-layout spacing="true" margin="true" :expand=""></v-vertical-layout> </v-horizontal-layout> </v-css-layout> - <v-css-layout caption="Over 1100px = wide menu" width="1101px" height="200px"> + <v-css-layout _id="wide" 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=""> + <v-horizontal-layout style-name="valo-menu-title" width-full="true" > + <v-label size-auto="true" :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"> + <v-button icon="fonticon://FontAwesome/f03a" style-name="primary small valo-menu-toggle" plain-text="" > 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"> + <v-css-layout style-name="valo-menuitems" > + <v-button icon="fonticon://FontAwesome/f01c" primary-style-name="valo-menu-item" > 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-vertical-layout spacing="true" margin="true" :expand=""></v-vertical-layout> </v-horizontal-layout> </v-css-layout> + </v-vertical-layout> + <v-css-layout _id="collapsed" caption="Collapsed menu w/ hover" width="500px" height="200px"> + <v-horizontal-layout style-name="valo-menu-responsive" responsive="true" size-full="true"> + <v-css-layout style-name="valo-menu valo-menu-hover"> + <v-css-layout style-name="valo-menu-part"> + <v-horizontal-layout style-name="valo-menu-title" width-full="true"> + <v-label size-auto="true" :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=""> + Menu + </v-button> + <v-css-layout style-name="valo-menuitems"> + <v-button icon="fonticon://FontAwesome/f01c" primary-style-name="valo-menu-item" > + 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" :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/test/java/com/vaadin/tests/themes/valo/ResponsiveStylesTest.java b/uitest/src/test/java/com/vaadin/tests/themes/valo/ResponsiveStylesTest.java index 39cd509e72..cbed52e864 100644 --- a/uitest/src/test/java/com/vaadin/tests/themes/valo/ResponsiveStylesTest.java +++ b/uitest/src/test/java/com/vaadin/tests/themes/valo/ResponsiveStylesTest.java @@ -22,6 +22,7 @@ import java.util.List; import org.junit.Test; import org.openqa.selenium.WebElement; +import org.openqa.selenium.interactions.Actions; import com.vaadin.tests.tb3.MultiBrowserTest; @@ -30,12 +31,19 @@ import com.vaadin.tests.tb3.MultiBrowserTest; */ public class ResponsiveStylesTest extends MultiBrowserTest { + /** + * Use this parameter to test the collapsed menu state. + */ + public static final String COLLAPSED_MENU_TEST_PARAM = "collapsed"; + 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; + private static final String TOGGLE_STYLENAME = "valo-menu-toggle"; + /** * Tests that valo-menu-responsive can be used in any element on the page, * not just as top-level component. @@ -59,4 +67,28 @@ public class ResponsiveStylesTest extends MultiBrowserTest { compareScreen("defaultMenuWidths"); } + + /** + * Tests that the valo-menu-hover style makes the menu appear on mouseover. + * + * @throws Exception + */ + @Test + public void testValoMenuResponsiveHover() throws Exception { + openTestURL(COLLAPSED_MENU_TEST_PARAM); + + compareScreen("collapsedMenu"); + + List<WebElement> toggles = findElements( + com.vaadin.testbench.By.className(TOGGLE_STYLENAME)); + + // Only one menu in the collapsed example + WebElement toggle = toggles.get(0); + + Actions actions = new Actions(getDriver()); + actions.moveToElement(toggle); + actions.perform(); + + compareScreen("expandedMenu"); + } } |