Improve style of uploaded images
Make it look similar to how the staged images are presented.
Change-Id: Ied0b3a672a3fba274138cf8f0ba836d47b627bdf
Signed-off-by: Edwin Kempin <edwin.kempin@sap.com>
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 68273c9..0a91809 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
@@ -18,15 +18,14 @@
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.ui.HorizontalPanel;
+import com.google.gwt.user.client.ui.FlowPanel;
import com.google.gwt.user.client.ui.Image;
import com.google.gwt.user.client.ui.Label;
-import com.google.gwt.user.client.ui.Panel;
import com.google.gwt.user.client.ui.PopupPanel;
import com.google.gwt.user.client.ui.VerticalPanel;
import com.google.gwtexpui.clippy.client.CopyableLabel;
-public class UploadedImagesPanel extends VerticalPanel {
+public class UploadedImagesPanel extends FlowPanel {
private Label uploadedImagesLabel;
private PopupPanel popup;
@@ -45,35 +44,47 @@
void add(final String url) {
uploadedImagesLabel.setVisible(true);
+ insert(new ImagePreview(url), 1);
+ }
- Panel p = new HorizontalPanel();
- insert(p, 1);
+ private class ImagePreview extends VerticalPanel {
+ ImagePreview(final String url) {
+ setStyleName("imagare-uploaded-image-preview-panel");
- Image img = new Image(url);
- img.setStyleName("imagare-image-preview");
- p.add(img);
+ String fileName = url.substring(url.indexOf('/', url.indexOf("/rev/") + 5) + 1);
+ fileName = fileName.replaceAll("\\+", " ");
+ Label fileNameLabel = new Label(fileName);
+ fileNameLabel.setStyleName("imagare-uploaded-image-title");
+ add(fileNameLabel);
- img.addMouseOverHandler(new MouseOverHandler() {
- @Override
- public void onMouseOver(MouseOverEvent event) {
- if (!popup.isVisible()) {
- Image img = new Image(url);
- img.setStyleName("imagare-image-popup");
- popup.add(img);
+ Image img = new Image(url);
+ img.setStyleName("imagare-uploaded-image-preview");
+ add(img);
- popup.center();
- popup.setVisible(true);
+ img.addMouseOverHandler(new MouseOverHandler() {
+ @Override
+ public void onMouseOver(MouseOverEvent event) {
+ if (!popup.isVisible()) {
+ Image previewImg = new Image(url);
+ previewImg.setStyleName("imagare-image-popup");
+ popup.add(previewImg);
+
+ popup.center();
+ popup.setVisible(true);
+ }
}
- }
- });
- img.addMouseOutHandler(new MouseOutHandler() {
- @Override
- public void onMouseOut(MouseOutEvent event) {
- popup.setVisible(false);
- popup.clear();
- }
- });
+ });
+ img.addMouseOutHandler(new MouseOutHandler() {
+ @Override
+ public void onMouseOut(MouseOutEvent event) {
+ popup.setVisible(false);
+ popup.clear();
+ }
+ });
- p.add(new CopyableLabel(url));
+ CopyableLabel copyLabel = new CopyableLabel(url);
+ copyLabel.setStyleName("imagare-uploaded-copy-label");
+ add(copyLabel);
+ }
}
}
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 b7b5141..c84dfb9 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
@@ -4,6 +4,10 @@
border-spacing: 0px 5px;
}
+.imagare-uploaded-images-panel {
+ width: 1000px;
+}
+
.imagare-label-panel {
margin-bottom: 10px;
}
@@ -62,13 +66,18 @@
border: 1px solid #B3B2B2;
}
-.imagare-stage-image-title {
+.imagare-stage-image-title,
+.imagare-uploaded-image-title {
margin-top: 10px;
max-width: 150px;
font-size: 12px;
font-weight: bold;
}
+.imagare-uploaded-image-title {
+ max-width: 150px;
+}
+
.imagare-stage-edit-panel td {
vertical-align: middle !important;
}
@@ -78,24 +87,36 @@
font-size: 12px;
}
-.imagare-stage-image-preview {
+.imagare-stage-image-preview,
+.imagare-uploaded-image-preview {
max-width: 150px;
max-height: 100px;
border: 1px solid #B3B2B2;
}
+.imagare-uploaded-copy-label span {
+ max-width: 150px;
+ width: 500px;
+ white-space: nowrap;
+ display: inline-block;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
.imagare-image-popup {
max-width: 500px;
max-height: 500px;
}
-.imagare-stage-image-preview-panel {
+.imagare-stage-image-preview-panel,
+.imagare-uploaded-image-preview-panel {
display: inline;
margin-left: 10px;
margin-right: 10px;
}
-.imagare-stage-image-preview-panel td {
+.imagare-stage-image-preview-panel td,
+.imagare-uploaded-image-preview-panel td {
text-align: center;
}
