diff options
9 files changed, 220 insertions, 67 deletions
diff --git a/WebContent/VAADIN/themes/base/notification/notification.scss b/WebContent/VAADIN/themes/base/notification/notification.scss index a91e26947d..7f7262b1b4 100644 --- a/WebContent/VAADIN/themes/base/notification/notification.scss +++ b/WebContent/VAADIN/themes/base/notification/notification.scss @@ -10,12 +10,12 @@ opacity: .9; filter: alpha(opacity=90); } -.#{$primaryStyleName} h1, -.#{$primaryStyleName} p, -.#{$primaryStyleName}-error h1, -.#{$primaryStyleName}-error p, -.#{$primaryStyleName}-warning h1, -.#{$primaryStyleName}-warning p { +.#{$primaryStyleName} .#{$primaryStyleName}-caption, +.#{$primaryStyleName} .#{$primaryStyleName}-description, +.#{$primaryStyleName}-error .#{$primaryStyleName}-caption, +.#{$primaryStyleName}-error .#{$primaryStyleName}-description, +.#{$primaryStyleName}-warning .#{$primaryStyleName}-caption, +.#{$primaryStyleName}-warning .#{$primaryStyleName}-description { display: inline; margin: 0 0.5em 0 0; } @@ -25,16 +25,16 @@ .#{$primaryStyleName}-error { background: red; } -.#{$primaryStyleName}-tray h1 { +.#{$primaryStyleName}-tray .#{$primaryStyleName}-caption { display: block; } -.#{$primaryStyleName}-tray p { +.#{$primaryStyleName}-tray .#{$primaryStyleName}-description { display: block; } .#{$primaryStyleName}-system { background-color: red; } -.#{$primaryStyleName}-system h1 { +.#{$primaryStyleName}-system .#{$primaryStyleName}-caption { display: block; margin: 0; } diff --git a/WebContent/VAADIN/themes/chameleon/components/notification/notification.scss b/WebContent/VAADIN/themes/chameleon/components/notification/notification.scss index c1a8d119c7..a1454ccfad 100644 --- a/WebContent/VAADIN/themes/chameleon/components/notification/notification.scss +++ b/WebContent/VAADIN/themes/chameleon/components/notification/notification.scss @@ -13,7 +13,7 @@ div.#{$primaryStyleName} { background:rgba(255,255,255,.90) url(../../img/grad-light-top.png) repeat-x; } -.#{$primaryStyleName} p { +.#{$primaryStyleName}-description { line-height: 1.3; } @@ -23,7 +23,7 @@ div.#{$primaryStyleName}-warning { border: 2px solid #fee3af; } -div.#{$primaryStyleName}-warning h1 { +div.#{$primaryStyleName}-warning .#{$primaryStyleName}-caption { padding-left: 44px; background: transparent url(../../img/label-warning-icon-big.png) no-repeat 0 50%; } @@ -35,7 +35,7 @@ div.#{$primaryStyleName}-error { border: 2px solid #ca3030; } -div.#{$primaryStyleName}-error h1 { +div.#{$primaryStyleName}-error .#{$primaryStyleName}-caption { padding-left: 44px; background: transparent url(../../img/label-error-icon-big.png) no-repeat 0 50%; } @@ -52,12 +52,12 @@ div.#{$primaryStyleName}-tray { text-shadow: 0 1px 1px rgba(0,0,0,.5); } -.#{$primaryStyleName}-tray h1 { +.#{$primaryStyleName}-tray .#{$primaryStyleName}-caption { font-size: 14px; line-height: 18px; } -.#{$primaryStyleName}-tray p { +.#{$primaryStyleName}-tray .#{$primaryStyleName}-description { font-size: 12px; font-weight: normal; } @@ -68,4 +68,4 @@ div.#{$primaryStyleName}-system { background-color: #b40000; } -}
\ No newline at end of file +} diff --git a/WebContent/VAADIN/themes/liferay/notification/notification.scss b/WebContent/VAADIN/themes/liferay/notification/notification.scss index 2312768287..75b5e6a0a9 100644 --- a/WebContent/VAADIN/themes/liferay/notification/notification.scss +++ b/WebContent/VAADIN/themes/liferay/notification/notification.scss @@ -11,12 +11,8 @@ border: 1px solid #a7cedf; } -.v-Notification h1, -.v-Notification p, -.v-Notification-error h1, -.v-Notification-error p, -.v-Notification-warning h1, -.v-Notification-warning p { +.v-Notification-caption, +.v-Notification-description { display: inline; margin: 0 0.5em 0 0; } @@ -34,19 +30,19 @@ background-color: #e5e5e5; border-color: #b5b5b5; } -.v-Notification-tray h1 { +.v-Notification-tray .v-Notification-caption { display: block; } -.v-Notification-tray p { +.v-Notification-tray .v-Notification-description { display: block; } .v-Notification-system { background-color: #ffdddd; border-color: #ff0000; } -.v-Notification-system h1 { +.v-Notification-system .v-Notification-caption { display: block; margin: 0; } -}
\ No newline at end of file +} diff --git a/WebContent/VAADIN/themes/reindeer/notification/notification.scss b/WebContent/VAADIN/themes/reindeer/notification/notification.scss index ec0d15df2f..85eab598fe 100644 --- a/WebContent/VAADIN/themes/reindeer/notification/notification.scss +++ b/WebContent/VAADIN/themes/reindeer/notification/notification.scss @@ -11,13 +11,12 @@ } .v-ie9 &, .v-ie10 & { - .#{$primaryStyleName} H1 { - /* Fix for #6793 */ - font-weight: bold; + .#{$primaryStyleName}-caption { + /* Fix for #6793 */ + font-weight: bold; } } - -.#{$primaryStyleName} p { +.#{$primaryStyleName}-description { line-height: 1.3; } .#{$primaryStyleName}-warning { @@ -35,11 +34,11 @@ border: 2px solid #585b5c; padding: 0.8em 0.9em; } -.#{$primaryStyleName}-tray h1 { +.#{$primaryStyleName}-tray .#{$primaryStyleName}-caption { font-size: 14px; line-height: 18px; } -.#{$primaryStyleName}-tray p { +.#{$primaryStyleName}-tray .#{$primaryStyleName}-description { font-size: 12px; font-weight: normal; } @@ -47,4 +46,4 @@ background-color: #b40000; } -}
\ No newline at end of file +} diff --git a/WebContent/VAADIN/themes/runo/notification/notification.scss b/WebContent/VAADIN/themes/runo/notification/notification.scss index b8ffecf243..f3b850924e 100644 --- a/WebContent/VAADIN/themes/runo/notification/notification.scss +++ b/WebContent/VAADIN/themes/runo/notification/notification.scss @@ -15,12 +15,12 @@ -moz-box-shadow: 0 3px 10px rgba(0,0,0,.3); margin: 10px; } -.#{$primaryStyleName} h1, -.#{$primaryStyleName} p, -.#{$primaryStyleName}-error h1, -.#{$primaryStyleName}-error p, -.#{$primaryStyleName}-warning h1, -.#{$primaryStyleName}-warning p { +.#{$primaryStyleName} .#{$primaryStyleName}-caption, +.#{$primaryStyleName} .#{$primaryStyleName}-description, +.#{$primaryStyleName}-error .#{$primaryStyleName}-caption, +.#{$primaryStyleName}-error .#{$primaryStyleName}-description, +.#{$primaryStyleName}-warning .#{$primaryStyleName}-caption, +.#{$primaryStyleName}-warning .#{$primaryStyleName}-description { display: inline; font-weight: normal; line-height: normal; @@ -43,7 +43,7 @@ -moz-box-shadow: 0 3px 6px rgba(0,0,0,.5); max-width: 17em; } -.#{$primaryStyleName}-tray h1 { +.#{$primaryStyleName}-tray .#{$primaryStyleName}-caption { display: block; font-weight: bold; font-size: 11.7px; @@ -55,7 +55,7 @@ -webkit-border-radius: 2px; border-radius: 2px; } -.#{$primaryStyleName}-tray p { +.#{$primaryStyleName}-tray .#{$primaryStyleName}-description { display: block; font-size: 10.4px; line-height: 1.2; @@ -68,4 +68,4 @@ padding: 14px 32px; } -}
\ No newline at end of file +} diff --git a/WebContent/VAADIN/themes/valo/components/_notification.scss b/WebContent/VAADIN/themes/valo/components/_notification.scss index 9261af0c52..fead990038 100644 --- a/WebContent/VAADIN/themes/valo/components/_notification.scss +++ b/WebContent/VAADIN/themes/valo/components/_notification.scss @@ -78,7 +78,7 @@ $v-notification-title-color: $v-focus-color !default; -ms-backface-visibility: hidden; backface-visibility: hidden; - h1 { + .#{$primary-stylename}-caption { margin: 0; display: inline-block; text-align: left; @@ -88,7 +88,7 @@ $v-notification-title-color: $v-focus-color !default; letter-spacing: 0; } - p { + .#{$primary-stylename}-description { margin: 0; display: inline-block; vertical-align: middle; @@ -98,11 +98,11 @@ $v-notification-title-color: $v-focus-color !default; overflow: auto; } - h1 ~ p { + .#{$primary-stylename}-caption ~ .#{$primary-stylename}-description { margin-left: round($v-font-size * 1.5); } - .v-icon + h1 { + .v-icon + .#{$primary-stylename}-caption { margin-left: round($v-font-size); } @@ -117,11 +117,11 @@ $v-notification-title-color: $v-focus-color !default; .#{$primary-stylename}.tray { text-align: left; - h1 { + .#{$primary-stylename}-caption { //display: block; } - h1 + p { + .#{$primary-stylename}-caption + .#{$primary-stylename}-description { display: block; margin: .5em 0 0; } @@ -179,7 +179,7 @@ $v-notification-title-color: $v-focus-color !default; color: #555; border: 2px solid $v-friendly-color; - h1 { + .#{$primary-stylename}-caption { color: $v-friendly-color; font-weight: $v-font-weight + 100; @@ -198,7 +198,7 @@ $v-notification-title-color: $v-focus-color !default; .#{$primary-stylename}.failure { border-color: $v-error-indicator-color; - h1 { + .#{$primary-stylename}-caption { color: $v-error-indicator-color; &:before { @@ -273,12 +273,12 @@ $v-notification-title-color: $v-focus-color !default; @include box-shadow(0px 5px 15px 0px rgba(0,0,0,0.15)); padding: round($v-unit-size/2) round($v-unit-size/1.7); - h1 { + .#{$primary-stylename}-caption { color: $v-notification-title-color; font-size: round($v-font-size * 1.2); line-height: 1; } - p { + .#{$primary-stylename}-description { line-height: 1.4; } } @@ -298,7 +298,7 @@ $v-notification-title-color: $v-focus-color !default; @include box-shadow(0 0 20px 0 rgba(0,0,0,0.25)); padding: round($v-unit-size/3) round($v-unit-size/2.5); - p { + .#{$primary-stylename}-description { max-width: 50em; } @@ -343,12 +343,12 @@ $v-notification-title-color: $v-focus-color !default; font-weight: $v-font-weight + 100; line-height: round($v-font-size * 1.4); - h1 { + .#{$primary-stylename}-caption { color: #fff; vertical-align: middle; } - p { + .#{$primary-stylename}-description { color: #e6e6e6; } } @@ -385,11 +385,11 @@ $v-notification-title-color: $v-focus-color !default; @mixin valo-notification-warning-style { background: #FFF3D2; - h1 { + .#{$primary-stylename}-caption { color: #AC7C00; } - p { + .#{$primary-stylename}-description { color: #9D874D; } } @@ -405,11 +405,11 @@ $v-notification-title-color: $v-focus-color !default; font-weight: $v-font-weight + 100; @include box-shadow(0px 5px 15px 0px rgba(0,0,0,0.25)); - h1 { + .#{$primary-stylename}-caption { color: valo-font-color($v-error-indicator-color, 1); } - p { + .#{$primary-stylename}-description { color: valo-font-color($v-error-indicator-color, .8); } } @@ -423,10 +423,10 @@ $v-notification-title-color: $v-focus-color !default; @mixin valo-notification-small-style { padding: round($v-unit-size/3.3) round($v-unit-size/2.8); - h1 { + .#{$primary-stylename}-caption { font-size: $v-font-size; } - p { + .#{$primary-stylename}-description { font-size: round($v-font-size * 0.85); } } diff --git a/client/src/com/vaadin/client/ui/VNotification.java b/client/src/com/vaadin/client/ui/VNotification.java index eee0f459a6..2892d4e3ac 100644 --- a/client/src/com/vaadin/client/ui/VNotification.java +++ b/client/src/com/vaadin/client/ui/VNotification.java @@ -63,6 +63,9 @@ public class VNotification extends VOverlay { private static final String STYLENAME_POSITION_CENTER = "v-position-center"; private static final String STYLENAME_POSITION_ASSISTIVE = "v-position-assistive"; + private static final String CAPTION = "caption"; + private static final String DESCRIPTION = "description"; + /** * Position that is only accessible for assistive devices, invisible for * visual users. @@ -256,11 +259,9 @@ public class VNotification extends VOverlay { positionOrSizeUpdated(); /** * Android 4 fails to render notifications correctly without a little - * nudge (#8551) - * Chrome 41 now requires this too (#17252) + * nudge (#8551) Chrome 41 now requires this too (#17252) */ - if (BrowserInfo.get().isAndroid() - || isChrome41OrHigher()) { + if (BrowserInfo.get().isAndroid() || isChrome41OrHigher()) { WidgetUtil.setStyleTemporarily(getElement(), "display", "none"); } } @@ -501,7 +502,8 @@ public class VNotification extends VOverlay { caption = WidgetUtil.escapeHTML(caption); caption = caption.replaceAll("\\n", "<br />"); } - html += "<h1>" + caption + "</h1>"; + html += "<h1 class='" + getDependentStyle(client, CAPTION) + "'>" + + caption + "</h1>"; } if (notification .hasAttribute(UIConstants.ATTRIBUTE_NOTIFICATION_MESSAGE)) { @@ -511,7 +513,8 @@ public class VNotification extends VOverlay { message = WidgetUtil.escapeHTML(message); message = message.replaceAll("\\n", "<br />"); } - html += "<p>" + message + "</p>"; + html += "<p class='" + getDependentStyle(client, DESCRIPTION) + + "'>" + message + "</p>"; } final String style = notification @@ -529,6 +532,16 @@ public class VNotification extends VOverlay { html, position, style); } + private static String getDependentStyle(ApplicationConnection client, + String style) { + VNotification notification = createNotification(-1, client + .getUIConnector().getWidget()); + String styleName = notification.getStyleName(); + notification.addStyleDependentName(style); + String extendedStyle = notification.getStyleName(); + return extendedStyle.substring(styleName.length()).trim(); + } + public static VNotification createNotification(int delayMsec, Widget owner) { final VNotification notification = GWT.create(VNotification.class); notification.setWaiAriaRole(null); diff --git a/uitest/src/com/vaadin/tests/themes/valo/NotificationStyle.java b/uitest/src/com/vaadin/tests/themes/valo/NotificationStyle.java new file mode 100644 index 0000000000..c7abcf9303 --- /dev/null +++ b/uitest/src/com/vaadin/tests/themes/valo/NotificationStyle.java @@ -0,0 +1,61 @@ +/* + * 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.tests.components.AbstractTestUI; +import com.vaadin.ui.Button; +import com.vaadin.ui.Button.ClickEvent; +import com.vaadin.ui.Notification; + +/** + * Test UI for H1 and P elements styles. + * + * @author Vaadin Ltd + */ +@Theme("valo") +public class NotificationStyle extends AbstractTestUI { + + @Override + protected void setup(VaadinRequest request) { + Button button = new Button("Show notification", + new Button.ClickListener() { + + @Override + public void buttonClick(ClickEvent event) { + Notification notification = new Notification( + "<p>Caption</p>", + "<div style='display:inline-block;'><h1>Description</h1></div>"); + notification.setHtmlContentAllowed(true); + notification.setDelayMsec(50000); + notification.show(getPage()); + } + }); + addComponent(button); + } + + @Override + protected Integer getTicketNumber() { + return 14872; + } + + @Override + protected String getTestDescription() { + return "Notification styles should be scoped more eagerly."; + } + +} diff --git a/uitest/src/com/vaadin/tests/themes/valo/NotificationStyleTest.java b/uitest/src/com/vaadin/tests/themes/valo/NotificationStyleTest.java new file mode 100644 index 0000000000..829ad27a94 --- /dev/null +++ b/uitest/src/com/vaadin/tests/themes/valo/NotificationStyleTest.java @@ -0,0 +1,84 @@ +/* + * 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 java.util.List; + +import org.junit.Assert; +import org.junit.Test; +import org.openqa.selenium.By; +import org.openqa.selenium.WebDriver; +import org.openqa.selenium.WebElement; +import org.openqa.selenium.interactions.Actions; +import org.openqa.selenium.support.ui.ExpectedCondition; + +import com.vaadin.testbench.elements.ButtonElement; +import com.vaadin.tests.tb3.MultiBrowserTest; + +/** + * Test for H1 and P elements styles in Notifications. + * + * @author Vaadin Ltd + */ +public class NotificationStyleTest extends MultiBrowserTest { + + @Test + public void testNotificationH1Style() { + openTestURL(); + + $(ButtonElement.class).first().click(); + + new Actions(getDriver()).moveByOffset(10, 10).perform(); + waitUntil(notificationPresentCondition(), 2); + + WebElement notification = findElement(By.className("v-Notification")); + List<WebElement> headers = notification.findElements(By.tagName("h1")); + String textAlign = headers.get(0).getCssValue("text-align"); + String textAlignInnerHeader = headers.get(1).getCssValue("text-align"); + Assert.assertNotEquals("Styles for notification defined h1 tag " + + "and custom HTML tag are the same", textAlign, + textAlignInnerHeader); + } + + @Test + public void testNotificationPStyle() { + openTestURL(); + + $(ButtonElement.class).first().click(); + + new Actions(getDriver()).moveByOffset(10, 10).perform(); + waitUntil(notificationPresentCondition(), 2); + + WebElement notification = findElement(By.className("v-Notification")); + List<WebElement> headers = notification.findElements(By.tagName("p")); + String lineHeight = headers.get(0).getCssValue("line-height"); + String lineHeightInnerHeader = headers.get(1) + .getCssValue("line-height"); + Assert.assertNotEquals("Styles for notification defined 'p' tag " + + "and custom HTML tag are the same", lineHeight, + lineHeightInnerHeader); + } + + private ExpectedCondition<Boolean> notificationPresentCondition() { + return new ExpectedCondition<Boolean>() { + + @Override + public Boolean apply(WebDriver input) { + return isElementPresent(By.className("v-Notification")); + } + }; + } +} |