Display popup with image just below the preview image

Before we were centering the popup which doesn't work if the image for
which the popup should be shown is right below it.

Change-Id: Ie661ab772dea8916d5bb3b77195f5542f1ce9595
Signed-off-by: Edwin Kempin <edwin.kempin@sap.com>

src/main/java/com/googlesource/gerrit/plugins/imagare/client/UploadStagePanel.java

diff --git a/src/main/java/com/googlesource/gerrit/plugins/imagare/client/UploadStagePanel.java b/src/main/java/com/googlesource/gerrit/plugins/imagare/client/UploadStagePanel.java
index 62cb40c..179631a 100644
--- a/src/main/java/com/googlesource/gerrit/plugins/imagare/client/UploadStagePanel.java
+++ b/src/main/java/com/googlesource/gerrit/plugins/imagare/client/UploadStagePanel.java
@@ -147,9 +147,13 @@
           if (!popup.isVisible()) {
             Image previewImg = new Image(dataUrl);
             previewImg.setStyleName("imagare-image-popup");
+            previewImg.getElement().setAttribute("style",
+                previewImg.getElement().getAttribute("style")
+                    + "position: absolute; top: " + (img.getAbsoluteTop() + img.getHeight() + 20) + "px; "
+                    + "left: " + img.getAbsoluteLeft() + "px;");
             popup.add(previewImg);
 
-            popup.center();
+            popup.show();
             popup.setVisible(true);
           }
 

src/main/java/com/googlesource/gerrit/plugins/imagare/client/UploadedImagesPanel.java

diff --git a/src/main/java/com/googlesource/gerrit/plugins/imagare/client/UploadedImagesPanel.java b/src/main/java/com/googlesource/gerrit/plugins/imagare/client/UploadedImagesPanel.java
index 0a91809..fb7192a 100644
--- a/src/main/java/com/googlesource/gerrit/plugins/imagare/client/UploadedImagesPanel.java
+++ b/src/main/java/com/googlesource/gerrit/plugins/imagare/client/UploadedImagesPanel.java
@@ -57,7 +57,7 @@
       fileNameLabel.setStyleName("imagare-uploaded-image-title");
       add(fileNameLabel);
 
-      Image img = new Image(url);
+      final Image img = new Image(url);
       img.setStyleName("imagare-uploaded-image-preview");
       add(img);
 
@@ -67,9 +67,13 @@
           if (!popup.isVisible()) {
             Image previewImg = new Image(url);
             previewImg.setStyleName("imagare-image-popup");
+            previewImg.getElement().setAttribute("style",
+                previewImg.getElement().getAttribute("style")
+                    + "position: absolute; top: " + (img.getAbsoluteTop() + img.getHeight() + 20) + "px; "
+                    + "left: " + img.getAbsoluteLeft() + "px;");
             popup.add(previewImg);
 
-            popup.center();
+            popup.show();
             popup.setVisible(true);
           }
         }

src/main/java/com/googlesource/gerrit/plugins/imagare/public/imagare.css

diff --git a/src/main/java/com/googlesource/gerrit/plugins/imagare/public/imagare.css b/src/main/java/com/googlesource/gerrit/plugins/imagare/public/imagare.css
index c84dfb9..f6b3343 100644
--- a/src/main/java/com/googlesource/gerrit/plugins/imagare/public/imagare.css
+++ b/src/main/java/com/googlesource/gerrit/plugins/imagare/public/imagare.css
@@ -104,6 +104,7 @@
 }
 
 .imagare-image-popup {
+  border: 1px solid #B3B2B2;
   max-width: 500px;
   max-height: 500px;
 }