diff options
4 files changed, 97 insertions, 44 deletions
diff --git a/WebContent/VAADIN/themes/base/notification/notification.scss b/WebContent/VAADIN/themes/base/notification/notification.scss index aa70a167dc..6eafcda6bc 100644 --- a/WebContent/VAADIN/themes/base/notification/notification.scss +++ b/WebContent/VAADIN/themes/base/notification/notification.scss @@ -44,6 +44,25 @@ @include animation(animate-out 400ms 1s); } +.#{$primaryStyleName} { + &.v-position-top { + top: 0; + } + &.v-position-right { + right: 0; + } + &.v-position-bottom { + bottom: 0; + } + &.v-position-left { + left: 0; + } + &.v-position-assistive { + top: -9999px; + left: -9999px; + } +} + } @include keyframes(animate-out) { diff --git a/WebContent/VAADIN/themes/tests-valo/styles.css b/WebContent/VAADIN/themes/tests-valo/styles.css index 2e0c1b6143..3fb0b502e8 100644 --- a/WebContent/VAADIN/themes/tests-valo/styles.css +++ b/WebContent/VAADIN/themes/tests-valo/styles.css @@ -4428,14 +4428,17 @@ h4, text-align: left; white-space: normal; line-height: 1.55; } -.tests-valo .v-Notification[style*=" top: 0"] { - margin-top: 12px !important; } -.tests-valo .v-Notification[style*="right: 0"] { - margin-right: 12px; } -.tests-valo .v-Notification[style*="bottom: 0"] { - margin-bottom: 12px; } -.tests-valo .v-Notification[style*=" left: 0"] { - margin-left: 12px !important; } +.tests-valo .v-Notification.v-position-top { + top: 12px; } +.tests-valo .v-Notification.v-position-right { + right: 12px; } +.tests-valo .v-Notification.v-position-bottom { + bottom: 12px; } +.tests-valo .v-Notification.v-position-left { + left: 12px; } +.tests-valo .v-Notification.v-position-assistive { + top: -9999px; + top: -9999px; } .tests-valo .v-Notification[style*=" top: 0"] { -webkit-animation: valo-anim-slide-down 600ms; -moz-animation: valo-anim-slide-down 600ms; diff --git a/WebContent/VAADIN/themes/valo/shared/_notification.scss b/WebContent/VAADIN/themes/valo/shared/_notification.scss index ff470b8144..e4e863d1c8 100644 --- a/WebContent/VAADIN/themes/valo/shared/_notification.scss +++ b/WebContent/VAADIN/themes/valo/shared/_notification.scss @@ -8,22 +8,27 @@ $v-notification-title-color: $v-focus-color !default; // Positional offsets - // Can't match to "top: 0", since that would target "margin-top: 0" also, which all GWT PopupPanels have always - .v-Notification[style*=" top: 0"] { - margin-top: $v-layout-spacing-vertical !important; - } + .v-Notification { + &.v-position-top { + top: $v-layout-spacing-vertical; + } - .v-Notification[style*="right: 0"] { - margin-right: $v-layout-spacing-horizontal; - } + &.v-position-right { + right: $v-layout-spacing-horizontal; + } - .v-Notification[style*="bottom: 0"] { - margin-bottom: $v-layout-spacing-vertical; - } + &.v-position-bottom { + bottom: $v-layout-spacing-vertical; + } - // Can't match to "left: 0", since that would target "margin-left: 0" also, which all GWT PopupPanels have always - .v-Notification[style*=" left: 0"] { - margin-left: $v-layout-spacing-horizontal !important; + &.v-position-left { + left: $v-layout-spacing-horizontal; + } + + &.v-position-assistive { + top: -9999px; + left: -9999px; + } } diff --git a/client/src/com/vaadin/client/ui/VNotification.java b/client/src/com/vaadin/client/ui/VNotification.java index 48a3ba6df4..855da517f9 100644 --- a/client/src/com/vaadin/client/ui/VNotification.java +++ b/client/src/com/vaadin/client/ui/VNotification.java @@ -22,8 +22,7 @@ import java.util.Iterator; import com.google.gwt.aria.client.Roles; import com.google.gwt.core.client.GWT; -import com.google.gwt.dom.client.Style; -import com.google.gwt.dom.client.Style.Unit; +import com.google.gwt.dom.client.Element; import com.google.gwt.event.dom.client.KeyCodes; import com.google.gwt.user.client.DOM; import com.google.gwt.user.client.Event; @@ -53,6 +52,14 @@ public class VNotification extends VOverlay { public static final Position BOTTOM_LEFT = Position.BOTTOM_LEFT; public static final Position BOTTOM_RIGHT = Position.BOTTOM_RIGHT; + private static final String STYLENAME_POSITION_TOP = "v-position-top"; + private static final String STYLENAME_POSITION_RIGHT = "v-position-right"; + private static final String STYLENAME_POSITION_BOTTOM = "v-position-bottom"; + private static final String STYLENAME_POSITION_LEFT = "v-position-left"; + private static final String STYLENAME_POSITION_MIDDLE = "v-position-middle"; + private static final String STYLENAME_POSITION_CENTER = "v-position-center"; + private static final String STYLENAME_POSITION_ASSISTIVE = "v-position-assistive"; + /** * Position that is only accessible for assistive devices, invisible for * visual users. @@ -263,49 +270,68 @@ public class VNotification extends VOverlay { } public void setPosition(com.vaadin.shared.Position position) { - final Style style = getElement().getStyle(); - style.clearTop(); - style.clearRight(); - style.clearBottom(); - style.clearLeft(); + final Element el = getElement(); + + // Remove all offsets (GWT PopupPanel defaults) + el.getStyle().clearTop(); + el.getStyle().clearLeft(); + + // Remove any previous positions + el.removeClassName(STYLENAME_POSITION_TOP); + el.removeClassName(STYLENAME_POSITION_RIGHT); + el.removeClassName(STYLENAME_POSITION_BOTTOM); + el.removeClassName(STYLENAME_POSITION_LEFT); + el.removeClassName(STYLENAME_POSITION_MIDDLE); + el.removeClassName(STYLENAME_POSITION_CENTER); + el.removeClassName(STYLENAME_POSITION_ASSISTIVE); + switch (position) { case TOP_LEFT: - style.setTop(0, Unit.PX); - style.setLeft(0, Unit.PX); + el.addClassName(STYLENAME_POSITION_TOP); + el.addClassName(STYLENAME_POSITION_LEFT); break; case TOP_RIGHT: - style.setTop(0, Unit.PX); - style.setRight(0, Unit.PX); + el.addClassName(STYLENAME_POSITION_TOP); + el.addClassName(STYLENAME_POSITION_RIGHT); break; case MIDDLE_LEFT: center(); - style.setLeft(0, Unit.PX); + // Centering sets the left offset + el.getStyle().clearLeft(); + el.addClassName(STYLENAME_POSITION_MIDDLE); + el.addClassName(STYLENAME_POSITION_LEFT); break; case MIDDLE_RIGHT: center(); - style.clearLeft(); - style.setRight(0, Unit.PX); + // Centering sets the left offset + el.getStyle().clearLeft(); + el.addClassName(STYLENAME_POSITION_MIDDLE); + el.addClassName(STYLENAME_POSITION_RIGHT); break; case BOTTOM_RIGHT: - style.setBottom(0, Unit.PX); - style.setRight(0, Unit.PX); + el.addClassName(STYLENAME_POSITION_BOTTOM); + el.addClassName(STYLENAME_POSITION_RIGHT); break; case BOTTOM_LEFT: - style.setBottom(0, Unit.PX); - style.setLeft(0, Unit.PX); + el.addClassName(STYLENAME_POSITION_BOTTOM); + el.addClassName(STYLENAME_POSITION_LEFT); break; case TOP_CENTER: center(); - style.setTop(0, Unit.PX); + // Centering sets the top offset + el.getStyle().clearTop(); + el.addClassName(STYLENAME_POSITION_TOP); + el.addClassName(STYLENAME_POSITION_CENTER); break; case BOTTOM_CENTER: center(); - style.clearTop(); - style.setBottom(0, Unit.PX); + // Centering sets the top offset + el.getStyle().clearTop(); + el.addClassName(STYLENAME_POSITION_BOTTOM); + el.addClassName(STYLENAME_POSITION_CENTER); break; case ASSISTIVE: - style.setTop(-2000, Unit.PX); - style.setLeft(-2000, Unit.PX); + el.addClassName(STYLENAME_POSITION_ASSISTIVE); break; default: case MIDDLE_CENTER: |