Notification position should be controllable with CSS (#13990)

Change-Id: Ic04f97d00745c2b7d1b4c143b2a458ab47188fd2

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: