Allow deletion of single images from staging area
The delete icon is taken from the Tango Icon Library [1].
[1] http://tango.freedesktop.org/Tango_Icon_Library
Change-Id: I114e5e48ef80452ca1b20ca08a9325f32c1cee28
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 da2ac9a..1a627db 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
@@ -21,4 +21,7 @@
@Source("info.png")
public ImageResource info();
+
+ @Source("delete.png")
+ public ImageResource delete();
}
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 e58dfd3..4b27f74 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
@@ -20,6 +20,7 @@
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.ui.Button;
import com.google.gwt.user.client.ui.FlowPanel;
import com.google.gwt.user.client.ui.HorizontalPanel;
@@ -107,6 +108,10 @@
final String dataUrl;
final String fileName;
+ private final Image img;
+ private final Image deleteIcon;
+ private Timer deleteIconHideTimer;
+
ImagePreview(String project, final String dataUrl, String fileName) {
this.project = project;
this.dataUrl = dataUrl;
@@ -114,21 +119,33 @@
setStyleName("imagare-stage-image-preview-panel");
- Image img = new Image(dataUrl);
+ img = new Image(dataUrl);
img.setStyleName("imagare-stage-image-preview");
add(img);
+ deleteIcon = new Image(ImagarePlugin.RESOURCES.delete());
+ deleteIcon.setStyleName("imagare-delete-icon");
+ deleteIcon.setTitle("Delete Image");
+ deleteIcon.setVisible(false);
+ add(deleteIcon);
+
img.addMouseOverHandler(new MouseOverHandler() {
@Override
public void onMouseOver(MouseOverEvent event) {
if (!popup.isVisible()) {
- Image img = new Image(dataUrl);
- img.setStyleName("imagare-image-popup");
- popup.add(img);
+ Image previewImg = new Image(dataUrl);
+ previewImg.setStyleName("imagare-image-popup");
+ popup.add(previewImg);
popup.center();
popup.setVisible(true);
}
+
+ cancelHideDeleteIcon();
+ deleteIcon.getElement().setAttribute("style",
+ deleteIcon.getElement().getAttribute("style")
+ + "position: absolute; top: " + img.getAbsoluteTop() + "px;");
+ deleteIcon.setVisible(true);
}
});
img.addMouseOutHandler(new MouseOutHandler() {
@@ -136,6 +153,31 @@
public void onMouseOut(MouseOutEvent event) {
popup.setVisible(false);
popup.clear();
+ hideDeleteIcon();
+ }
+ });
+
+ deleteIcon.addMouseOverHandler(new MouseOverHandler() {
+ @Override
+ public void onMouseOver(MouseOverEvent event) {
+ cancelHideDeleteIcon();
+ }
+ });
+
+ deleteIcon.addMouseOutHandler(new MouseOutHandler() {
+ @Override
+ public void onMouseOut(MouseOutEvent event) {
+ hideDeleteIcon();
+ }
+ });
+
+ deleteIcon.addClickHandler(new ClickHandler() {
+ @Override
+ public void onClick(ClickEvent event) {
+ stagedImagesPanel.remove(ImagePreview.this);
+ UploadStagePanel.this.setVisible(stagedImagesPanel.getWidgetCount() != 0);
+ popup.setVisible(false);
+ popup.clear();
}
});
@@ -148,5 +190,22 @@
projectLabel.setStyleName("imagare-stage-label");
add(projectLabel);
}
+
+ private void hideDeleteIcon() {
+ deleteIconHideTimer = new Timer() {
+ @Override
+ public void run() {
+ deleteIcon.setVisible(false);
+ }
+ };
+ deleteIconHideTimer.schedule(20);
+ }
+
+ private void cancelHideDeleteIcon() {
+ if (deleteIconHideTimer != null) {
+ deleteIconHideTimer.cancel();
+ deleteIconHideTimer = null;
+ }
+ }
}
}
diff --git a/src/main/java/com/googlesource/gerrit/plugins/imagare/client/delete.png b/src/main/java/com/googlesource/gerrit/plugins/imagare/client/delete.png
new file mode 100644
index 0000000..ea03150
--- /dev/null
+++ b/src/main/java/com/googlesource/gerrit/plugins/imagare/client/delete.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 a57d5f2..64ac11a 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
@@ -84,3 +84,11 @@
margin-top: 10px;
margin-bottom: 10px;
}
+
+.imagare-delete-icon {
+ z-index: 100;
+ width: 16px;
+ height: 16px;
+ background-color: #FFF !important;
+ border: 1px solid #B3B2B2;
+}
