Adding the optional "valo-menu-hover" style to the "valo-menu" element will make the menu appear on hover - i.e when mousing over on desktop, when tapping on touch devices (which also triggers hover). Change-Id: I4ee83cdd0e4198e02782cfcda945193305c41152tags/8.0.0.alpha5
@@ -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"; | |||
} |
@@ -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%)); | |||
} | |||
} |
@@ -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); | |||
} | |||
} |
@@ -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); | |||
} |
@@ -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> |
@@ -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"); | |||
} | |||
} |