Allow to open uploaded image in full screen mode
On mouse over an uploaded image an icon appears that allows to open
this image in full screen mode.
The fullscreen icon is taken from the Tango Icon Library [1].
[1] http://tango.freedesktop.org/Tango_Icon_Library
Change-Id: Ide14224e9a60725d4db94d09bb9564b356afec8d
Signed-off-by: Edwin Kempin <edwin.kempin@sap.com>
diff --git a/src/main/java/com/googlesource/gerrit/plugins/imagare/client/Resources.java b/src/main/java/com/googlesource/gerrit/plugins/imagare/client/Resources.java
index 4b202d8..345a2b7 100644
--- a/src/main/java/com/googlesource/gerrit/plugins/imagare/client/Resources.java
+++ b/src/main/java/com/googlesource/gerrit/plugins/imagare/client/Resources.java
@@ -22,6 +22,9 @@
@Source("delete.png")
public ImageResource delete();
+ @Source("fullscreen.png")
+ public ImageResource fullScreen();
+
@Source("image.png")
public ImageResource image();
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 fb7192a..4e2f861 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
@@ -14,10 +14,14 @@
package com.googlesource.gerrit.plugins.imagare.client;
+import com.google.gwt.event.dom.client.ClickEvent;
+import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.event.dom.client.MouseOutEvent;
import com.google.gwt.event.dom.client.MouseOutHandler;
import com.google.gwt.event.dom.client.MouseOverEvent;
import com.google.gwt.event.dom.client.MouseOverHandler;
+import com.google.gwt.user.client.Timer;
+import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.ui.FlowPanel;
import com.google.gwt.user.client.ui.Image;
import com.google.gwt.user.client.ui.Label;
@@ -48,6 +52,10 @@
}
private class ImagePreview extends VerticalPanel {
+ private final Image img;
+ private final Image fullScreenIcon;
+ private Timer fullScreenIconHideTimer;
+
ImagePreview(final String url) {
setStyleName("imagare-uploaded-image-preview-panel");
@@ -57,10 +65,16 @@
fileNameLabel.setStyleName("imagare-uploaded-image-title");
add(fileNameLabel);
- final Image img = new Image(url);
+ img = new Image(url);
img.setStyleName("imagare-uploaded-image-preview");
add(img);
+ fullScreenIcon = new Image(ImagarePlugin.RESOURCES.fullScreen());
+ fullScreenIcon.setStyleName("imagare-fullscreen-icon");
+ fullScreenIcon.setTitle("Full Screen");
+ fullScreenIcon.setVisible(false);
+ add(fullScreenIcon);
+
img.addMouseOverHandler(new MouseOverHandler() {
@Override
public void onMouseOver(MouseOverEvent event) {
@@ -76,6 +90,13 @@
popup.show();
popup.setVisible(true);
}
+
+ cancelHideFullScreenIcon();
+ fullScreenIcon.getElement().setAttribute("style",
+ fullScreenIcon.getElement().getAttribute("style")
+ + "position: absolute; top: " + img.getAbsoluteTop() + "px; "
+ + "left: " + img.getAbsoluteLeft() + "px;");
+ fullScreenIcon.setVisible(true);
}
});
img.addMouseOutHandler(new MouseOutHandler() {
@@ -83,6 +104,30 @@
public void onMouseOut(MouseOutEvent event) {
popup.setVisible(false);
popup.clear();
+ hideFullScreenIcon();
+ }
+ });
+
+ fullScreenIcon.addMouseOverHandler(new MouseOverHandler() {
+ @Override
+ public void onMouseOver(MouseOverEvent event) {
+ cancelHideFullScreenIcon();
+ }
+ });
+
+ fullScreenIcon.addMouseOutHandler(new MouseOutHandler() {
+ @Override
+ public void onMouseOut(MouseOutEvent event) {
+ hideFullScreenIcon();
+ }
+ });
+
+ fullScreenIcon.addClickHandler(new ClickHandler() {
+ @Override
+ public void onClick(ClickEvent event) {
+ Window.open(url, "_blank", "");
+ popup.setVisible(false);
+ popup.clear();
}
});
@@ -90,5 +135,22 @@
copyLabel.setStyleName("imagare-uploaded-copy-label");
add(copyLabel);
}
+
+ private void hideFullScreenIcon() {
+ fullScreenIconHideTimer = new Timer() {
+ @Override
+ public void run() {
+ fullScreenIcon.setVisible(false);
+ }
+ };
+ fullScreenIconHideTimer.schedule(20);
+ }
+
+ private void cancelHideFullScreenIcon() {
+ if (fullScreenIconHideTimer != null) {
+ fullScreenIconHideTimer.cancel();
+ fullScreenIconHideTimer = null;
+ }
+ }
}
}
diff --git a/src/main/java/com/googlesource/gerrit/plugins/imagare/client/fullscreen.png b/src/main/java/com/googlesource/gerrit/plugins/imagare/client/fullscreen.png
new file mode 100644
index 0000000..ffdabd4
--- /dev/null
+++ b/src/main/java/com/googlesource/gerrit/plugins/imagare/client/fullscreen.png
Binary files differ
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 f6b3343..6816271 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
@@ -140,7 +140,8 @@
margin-bottom: 10px;
}
-.imagare-delete-icon {
+.imagare-delete-icon,
+.imagare-fullscreen-icon {
z-index: 100;
width: 16px;
height: 16px;
