Allow to edit filename of staged images By double-click on the filename it turns into an edit box that allows to change the filename. This is e.g. useful if an image is pasted and a filename should be assigned. Change-Id: Iceb76d439945e26d9185bb2654626c30b79b7beb Signed-off-by: Edwin Kempin <edwin.kempin@sap.com>

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 30ac8b0..62cb40c 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

@@ -14,8 +14,17 @@
 
 package com.googlesource.gerrit.plugins.imagare.client;
 
+import static com.google.gwt.event.dom.client.KeyCodes.KEY_ENTER;
+import static com.google.gwt.event.dom.client.KeyCodes.KEY_ESCAPE;
+
+import com.google.gwt.event.dom.client.BlurEvent;
+import com.google.gwt.event.dom.client.BlurHandler;
 import com.google.gwt.event.dom.client.ClickEvent;
 import com.google.gwt.event.dom.client.ClickHandler;
+import com.google.gwt.event.dom.client.DoubleClickEvent;
+import com.google.gwt.event.dom.client.DoubleClickHandler;
+import com.google.gwt.event.dom.client.KeyDownEvent;
+import com.google.gwt.event.dom.client.KeyDownHandler;
 import com.google.gwt.event.dom.client.MouseOutEvent;
 import com.google.gwt.event.dom.client.MouseOutHandler;
 import com.google.gwt.event.dom.client.MouseOverEvent;
@@ -27,6 +36,7 @@
 import com.google.gwt.user.client.ui.Image;
 import com.google.gwt.user.client.ui.Label;
 import com.google.gwt.user.client.ui.PopupPanel;
+import com.google.gwt.user.client.ui.TextBox;
 import com.google.gwt.user.client.ui.VerticalPanel;
 
 public class UploadStagePanel extends VerticalPanel {
@@ -106,7 +116,7 @@
   private class ImagePreview extends VerticalPanel {
     final String project;
     final String dataUrl;
-    final String fileName;
+    String fileName;
 
     private final Image img;
     private final Image deleteIcon;
@@ -119,9 +129,7 @@
 
       setStyleName("imagare-stage-image-preview-panel");
 
-      Label fileNameLabel = new Label(fileName != null ? fileName : "img.png");
-      fileNameLabel.setStyleName("imagare-stage-image-title");
-      add(fileNameLabel);
+      addFileName();
 
       img = new Image(dataUrl);
       img.setStyleName("imagare-stage-image-preview");
@@ -207,5 +215,84 @@
         deleteIconHideTimer = null;
       }
     }
+
+    private void addFileName() {
+      final Label fileNameLabel = new Label(fileName != null ? fileName : "img.png");
+      fileNameLabel.setStyleName("imagare-stage-image-title");
+      add(fileNameLabel);
+
+      fileNameLabel.addDoubleClickHandler(new DoubleClickHandler() {
+        @Override
+        public void onDoubleClick(DoubleClickEvent event) {
+          fileNameLabel.setVisible(false);
+          FileNameEditPanel fileNameEditPanel = new FileNameEditPanel(ImagePreview.this, fileNameLabel);
+          insert(fileNameEditPanel, getWidgetIndex(fileNameLabel));
+          fileNameEditPanel.focusAndSelectAll();
+        }
+      });
+    }
+
+    private class FileNameEditPanel extends HorizontalPanel {
+      private final ImagePreview imagePreview;
+      private final Label fileNameLabel;
+      private final TextBox fileNameBox;
+      private final String name;
+      private final String extension;
+
+      FileNameEditPanel(ImagePreview imagePreview, Label fileNameLabel) {
+        this.imagePreview = imagePreview;
+        this.fileNameLabel = fileNameLabel;
+        int pos = imagePreview.fileName.lastIndexOf('.');
+        if (pos != -1) {
+          this.name = imagePreview.fileName.substring(0, pos);
+          this.extension = imagePreview.fileName.substring(pos);
+        } else {
+          this.name = imagePreview.fileName;
+          this.extension = "";
+        }
+
+        setStyleName("imagare-stage-edit-panel");
+        fileNameBox = new TextBox();
+        fileNameBox.setStyleName("imagare-stage-input");
+        fileNameBox.setValue(name);
+        add(fileNameBox);
+        add(new Label(extension));
+
+        fileNameBox.addBlurHandler(new BlurHandler() {
+          @Override
+          public void onBlur(BlurEvent event) {
+            saveChanges();
+          }
+        });
+
+        fileNameBox.addKeyDownHandler(new KeyDownHandler() {
+          @Override
+          public void onKeyDown(KeyDownEvent event) {
+            if (event.getNativeKeyCode() == KEY_ESCAPE) {
+              discardChanges();
+            } else if (event.getNativeKeyCode() == KEY_ENTER) {
+              saveChanges();
+            }
+          }
+        });
+      }
+
+      private void saveChanges() {
+        imagePreview.fileName = fileNameBox.getValue() + extension;
+        fileNameLabel.setText(fileNameBox.getValue() + extension);
+        fileNameLabel.setVisible(true);
+        removeFromParent();
+      }
+
+      private void discardChanges() {
+        fileNameLabel.setVisible(true);
+        removeFromParent();
+      }
+
+      void focusAndSelectAll() {
+        fileNameBox.setFocus(true);
+        fileNameBox.selectAll();
+      }
+    }
   }
 }

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 e015e5b..b7b5141 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

@@ -69,6 +69,15 @@
   font-weight: bold;
 }
 
+.imagare-stage-edit-panel td {
+  vertical-align: middle !important;
+}
+
+.imagare-stage-input {
+  margin-top: 10px;
+  font-size: 12px;
+}
+
 .imagare-stage-image-preview {
   max-width: 150px;
   max-height: 100px;