From 96523d5efbe516198c6203197206962cc1498a99 Mon Sep 17 00:00:00 2001
From: Costantino Perciante <costantino.perciante@isti.cnr.it>
Date: Tue, 26 Jan 2016 13:56:24 +0000
Subject: [PATCH] The widget size has been enlarged to be the 80% (for both
 width and height) of the browser's window. Moreover, when the user clicks on
 the download button, the widget is not closed anymore. Finally, the close
 button has been added.

git-svn-id: http://svn.research-infrastructures.eu/public/d4science/gcube/trunk/portlets/widgets/image-previewer-widget@122522 82a268e6-3cf1-43bd-a215-b396298e98cf
---
 .../client/ImagePreviewer.java                |  3 +-
 .../client/ui/Carousel.java                   |  8 +---
 .../client/ui/Carousel.ui.xml                 | 41 +++++++++++++++----
 3 files changed, 37 insertions(+), 15 deletions(-)

diff --git a/src/main/java/org/gcube/portlets/widgets/imagepreviewerwidget/client/ImagePreviewer.java b/src/main/java/org/gcube/portlets/widgets/imagepreviewerwidget/client/ImagePreviewer.java
index 277f7c5..a4ea206 100644
--- a/src/main/java/org/gcube/portlets/widgets/imagepreviewerwidget/client/ImagePreviewer.java
+++ b/src/main/java/org/gcube/portlets/widgets/imagepreviewerwidget/client/ImagePreviewer.java
@@ -21,10 +21,11 @@ public class ImagePreviewer implements EntryPoint {
 	public void onModuleLoad() {
 
 		// decomment for testing purpose
-		//test();
+		// test();
 
 	}
 
+	@SuppressWarnings("unused")
 	private void test(){
 
 		// random images for test
diff --git a/src/main/java/org/gcube/portlets/widgets/imagepreviewerwidget/client/ui/Carousel.java b/src/main/java/org/gcube/portlets/widgets/imagepreviewerwidget/client/ui/Carousel.java
index 79d21cb..7a58404 100644
--- a/src/main/java/org/gcube/portlets/widgets/imagepreviewerwidget/client/ui/Carousel.java
+++ b/src/main/java/org/gcube/portlets/widgets/imagepreviewerwidget/client/ui/Carousel.java
@@ -87,8 +87,8 @@ public class Carousel extends Composite{
 		horizontaFooterPanel.setCellHorizontalAlignment(nextButton, HorizontalPanel.ALIGN_RIGHT);
 
 		// set central buttons' cell widths to be equal TODO
-		//horizontaFooterPanel.setCellWidth(downloadButton, "200px");
-		//horizontaFooterPanel.setCellWidth(closeButton, "200px");
+		horizontaFooterPanel.setCellWidth(downloadButton, "200px");
+		horizontaFooterPanel.setCellWidth(closeButton, "200px");
 
 		// set vertical alignment
 		horizontaFooterPanel.setCellVerticalAlignment(nextButton, VerticalPanel.ALIGN_MIDDLE);
@@ -104,9 +104,6 @@ public class Carousel extends Composite{
 		prevButton.setIconSize(IconSize.LARGE);
 		nextButton.setIconSize(IconSize.LARGE);
 
-		// TODO hide close button (for now)
-		closeButton.setVisible(false);
-
 		//on user click on the image, go on
 		shownImage.addClickHandler(new ClickHandler() {
 
@@ -143,7 +140,6 @@ public class Carousel extends Composite{
 		String downloadUrl = listOfAttachmentsToShow.get(currentPreviewPosition).getDownloadUrl();
 		
 		if(downloadUrl != null){
-			mainModalPanel.hide();
 			Window.open(downloadUrl, "_blank", "");
 		}
 
diff --git a/src/main/java/org/gcube/portlets/widgets/imagepreviewerwidget/client/ui/Carousel.ui.xml b/src/main/java/org/gcube/portlets/widgets/imagepreviewerwidget/client/ui/Carousel.ui.xml
index 3d068ab..8ef7ca0 100644
--- a/src/main/java/org/gcube/portlets/widgets/imagepreviewerwidget/client/ui/Carousel.ui.xml
+++ b/src/main/java/org/gcube/portlets/widgets/imagepreviewerwidget/client/ui/Carousel.ui.xml
@@ -9,26 +9,49 @@
 		left: 50%;
 		margin-right: -50%;
 		transform: translate(-50%, -50%);
-		max-height: 400px;
+		max-height: 95%;
 		width: auto;
 	}
 	
 	.image-loading {
-		display: block;
-		margin-left: auto;
-		margin-right: auto;
-		margin-top: 35%;
-		margin-bottom: 35%;
+		position: relative;
+		top: 50%;
+		left: 50%;
+		margin-right: -50%;
+		transform: translate(-50%, -50%);
 	}
 	
 	.arrow {
 		color: #3B5998;
 	}
 	
+	@external .modal;
+	.modal {
+		position: fixed;
+		top: 10%;
+		left: 15%;
+		margin-left: -5%;
+		width: 80%;
+		height: 80%;
+		background-color: #fff;
+		border: 1px solid #999;
+		border: 1px solid rgba(0, 0, 0, 0.3);
+		-webkit-border-radius: 6px;
+		-moz-border-radius: 6px;
+		border-radius: 6px;
+		outline: 0;
+		-webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
+		-moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
+		box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
+		-webkit-background-clip: padding-box;
+		-moz-background-clip: padding-box;
+		background-clip: padding-box;
+	}
+	
 	@external .modal-header;
 	.modal-header {
 		font-family: "Helvetica Neue", Arial, sans-serif;
-		height: 20px;
+		height: 5%;
 		color: #3B5998 !important;
 	}
 	
@@ -39,7 +62,8 @@
 	@external .modal-body;
 	.modal-body {
 		position: relative;
-		height: 400px;
+		height: 90%;
+		max-height: 100%;
 		padding: 0;
 		overflow: hidden;
 	}
@@ -48,6 +72,7 @@
 	.modal-footer {
 		padding: 10px 10px 10px;
 		margin-bottom: 0px;
+		height: 5%;
 		text-align: right;
 		background-color: #F5F5F5;
 		border-top: 1px solid #DDD;