commit ceb53ac5ecab8e0ad7529ba5a03bab8b1f611858
author Edwin Kempin <edwin.kempin@sap.com> Mon Feb 03 13:03:36 2014 +0100
committer Edwin Kempin <edwin.kempin@sap.com> Mon Feb 03 14:41:27 2014 +0100
tree 73543ccb226af3de548e817d13b6d19f5f985552
parent 2d3dd0918d1910bcd5b5f4dbd3f8ad0ccec7e506

Improve styling of staged images

* move file name above the image
* use bold font for file name
* horizontally center the texts
* increase preview image size

Change-Id: I73ff3e5e730d41848007bdc35b8def136beac20a
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 4b27f74..30ac8b0 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
@@ -119,6 +119,10 @@
 
       setStyleName("imagare-stage-image-preview-panel");
 
+      Label fileNameLabel = new Label(fileName != null ? fileName : "img.png");
+      fileNameLabel.setStyleName("imagare-stage-image-title");
+      add(fileNameLabel);
+
       img = new Image(dataUrl);
       img.setStyleName("imagare-stage-image-preview");
       add(img);
@@ -144,7 +148,8 @@
           cancelHideDeleteIcon();
           deleteIcon.getElement().setAttribute("style",
               deleteIcon.getElement().getAttribute("style")
-                  + "position: absolute; top: " + img.getAbsoluteTop() + "px;");
+                  + "position: absolute; top: " + img.getAbsoluteTop() + "px; "
+                  + "left: " + img.getAbsoluteLeft() + "px;");
           deleteIcon.setVisible(true);
         }
       });
@@ -181,12 +186,7 @@
         }
       });
 
-      if (fileName != null) {
-        Label fileNameLabel = new Label(fileName);
-        fileNameLabel.setStyleName("imagare-stage-label");
-        add(fileNameLabel);
-      }
-      Label projectLabel = new Label("Project:" + project);
+      Label projectLabel = new Label("Project: " + project);
       projectLabel.setStyleName("imagare-stage-label");
       add(projectLabel);
     }

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 86d52d8..e015e5b 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
@@ -56,16 +56,22 @@
 }
 
 .imagare-image-preview {
-  max-width: 75px;
-  max-height: 75px;
+  max-width: 150px;
+  max-height: 100px;
   margin: 5px;
   border: 1px solid #B3B2B2;
 }
 
-.imagare-stage-image-preview {
-  max-width: 75px;
-  max-height: 75px;
+.imagare-stage-image-title {
   margin-top: 10px;
+  max-width: 150px;
+  font-size: 12px;
+  font-weight: bold;
+}
+
+.imagare-stage-image-preview {
+  max-width: 150px;
+  max-height: 100px;
   border: 1px solid #B3B2B2;
 }
 
@@ -76,15 +82,20 @@
 
 .imagare-stage-image-preview-panel {
   display: inline;
-  margin-left: 5px;
-  margin-right: 5px;
+  margin-left: 10px;
+  margin-right: 10px;
+}
+
+.imagare-stage-image-preview-panel td {
+  text-align: center;
 }
 
 .imagare-staged-images-panel {
-  width: 600px;
+  width: 1000px;
 }
 
 .imagare-stage-label {
+  font-size: 12px;
   max-width: 150px;
 }