diff options
4 files changed, 152 insertions, 1 deletions
diff --git a/WebContent/VAADIN/themes/valo/components/_valo-menu.scss b/WebContent/VAADIN/themes/valo/components/_valo-menu.scss index 5ed125b909..2d37b27773 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 { + .v-ui.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/server/src/com/vaadin/ui/themes/ValoTheme.java b/server/src/com/vaadin/ui/themes/ValoTheme.java index da80375114..1285bf7f67 100644 --- a/server/src/com/vaadin/ui/themes/ValoTheme.java +++ b/server/src/com/vaadin/ui/themes/ValoTheme.java @@ -882,6 +882,31 @@ public class ValoTheme { /** * <p> + * When you use the Valo menu and wish to enable responsive features of the + * menu, you need to add this style name to the UI containing the menu. + * </p> + * + * <p> + * You only need to add this style name to the UI containing a Valo menu, if + * you're using the Responsive extension with the UI. + * </p> + * + * <h4>Example</h4> + * + * <p> + * To enable responsivity in the Valo menu, the following example code + * should be executed in your UI containing the menu. + * </p> + * + * <pre> + * Responsive.makeResponsive(this); + * addStyleName(ValoTheme.UI_WITH_MENU); + * </pre> + */ + public static final String UI_WITH_MENU = "valo-menu-responsive"; + + /** + * <p> * Set the <em><b>primary</b></em> style name of a CssLayout to this, and * add any number of layouts with the {@link #MENU_PART} style inside it. * </p> diff --git a/uitest/src/com/vaadin/tests/components/ui/UnnecessaryPaddingInResponsiveUI.java b/uitest/src/com/vaadin/tests/components/ui/UnnecessaryPaddingInResponsiveUI.java new file mode 100644 index 0000000000..e80686f6f3 --- /dev/null +++ b/uitest/src/com/vaadin/tests/components/ui/UnnecessaryPaddingInResponsiveUI.java @@ -0,0 +1,79 @@ +/* + * 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.components.ui; + +import com.vaadin.annotations.Theme; +import com.vaadin.server.Responsive; +import com.vaadin.server.VaadinRequest; +import com.vaadin.ui.Button; +import com.vaadin.ui.CssLayout; +import com.vaadin.ui.HorizontalLayout; +import com.vaadin.ui.Label; +import com.vaadin.ui.UI; +import com.vaadin.ui.VerticalLayout; +import com.vaadin.ui.themes.ValoTheme; + +/** + * + * @since + * @author Vaadin Ltd + */ +@Theme("valo") +public class UnnecessaryPaddingInResponsiveUI extends UI { + + @Override + protected void init(VaadinRequest request) { + Responsive.makeResponsive(this); + + HorizontalLayout root = new HorizontalLayout(); + root.setSpacing(true); + + MenuLayout menu = new MenuLayout(); + + root.addComponent(menu); + + setContent(root); + + setWidth(799, Unit.PIXELS); + setId("UI"); + + // Uncomment this to enable responsive features in Valo Menu and + // introduce a padding-top to the UI. When this is commented the + // padding-top should be 0 and the related test should pass. + + // addStyleName(ValoTheme.UI_WITH_MENU); + } + + class MenuLayout extends VerticalLayout { + public MenuLayout() { + setSizeFull(); + setPrimaryStyleName(ValoTheme.MENU_ROOT); + + CssLayout titleLo = new CssLayout(); + titleLo.addStyleName(ValoTheme.MENU_TITLE); + titleLo.addComponent(new Label("menu-title")); + + addComponent(titleLo); + + for (int i = 1; i <= 5; i++) { + Button button = new Button("Menu Item " + i); + button.setPrimaryStyleName(ValoTheme.MENU_ITEM); + addComponent(button); + } + } + + } +}
\ No newline at end of file diff --git a/uitest/src/com/vaadin/tests/components/ui/UnnecessaryPaddingInResponsiveUITest.java b/uitest/src/com/vaadin/tests/components/ui/UnnecessaryPaddingInResponsiveUITest.java new file mode 100644 index 0000000000..661db179e7 --- /dev/null +++ b/uitest/src/com/vaadin/tests/components/ui/UnnecessaryPaddingInResponsiveUITest.java @@ -0,0 +1,47 @@ +/* + * 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.components.ui; + +import static org.hamcrest.Matchers.equalTo; +import static org.junit.Assert.assertThat; + +import org.junit.Test; +import org.openqa.selenium.WebElement; + +import com.vaadin.tests.tb3.SingleBrowserTest; + +/** + * + * @since + * @author Vaadin Ltd + */ +public class UnnecessaryPaddingInResponsiveUITest extends SingleBrowserTest { + + @Test + public void testUIShouldHaveNoPaddingTop() { + openTestURL(); + + WebElement ui = vaadinElementById("UI"); + + String paddingTop = ui.getCssValue("padding-top"); + + Integer paddingHeight = Integer.parseInt(paddingTop.substring(0, + paddingTop.length() - 2)); + + assertThat(paddingHeight, equalTo(0)); + + } +} |