From 182545150a8ff4eb555576f8a484777ae3541627 Mon Sep 17 00:00:00 2001
From: Costantino Perciante <costantino.perciante@isti.cnr.it>
Date: Fri, 8 Apr 2016 21:32:09 +0000
Subject: [PATCH] moving to responsive portlet almost finished

git-svn-id: http://svn.research-infrastructures.eu/public/d4science/gcube/trunk/portlets/widgets/image-previewer-widget@126950 82a268e6-3cf1-43bd-a215-b396298e98cf
---
 .../client/ui/Carousel.java                   | 28 ++++++++++++++----
 .../client/ui/Carousel.ui.xml                 | 29 ++++++-------------
 2 files changed, 32 insertions(+), 25 deletions(-)

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 3de8a45..088792f 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
@@ -22,6 +22,8 @@ import com.google.gwt.uibinder.client.UiField;
 import com.google.gwt.uibinder.client.UiHandler;
 import com.google.gwt.user.client.Window;
 import com.google.gwt.user.client.ui.Composite;
+import com.google.gwt.user.client.ui.HorizontalPanel;
+import com.google.gwt.user.client.ui.VerticalPanel;
 import com.google.gwt.user.client.ui.Widget;
 
 /**
@@ -58,6 +60,9 @@ public class Carousel extends Composite{
 
 	@UiField
 	Image loadingImage;
+	
+	@UiField
+	HorizontalPanel commands;
 
 	// list of enhanced images to show
 	private List<EnhancedImage> listOfAttachmentsToShow;
@@ -76,9 +81,22 @@ public class Carousel extends Composite{
 
 		initWidget(uiBinder.createAndBindUi(this));
 		
-		// set buttons width
-		closeButton.setWidth("100px");
-		downloadButton.setWidth("100px");
+		// set vertical alignment
+		commands.setCellVerticalAlignment(nextButton, VerticalPanel.ALIGN_MIDDLE);
+		commands.setCellVerticalAlignment(prevButton,  VerticalPanel.ALIGN_MIDDLE);
+		
+		// set alignment of the horizontal panel's children
+		commands.setCellHorizontalAlignment(closeButton, HorizontalPanel.ALIGN_CENTER);
+		commands.setCellHorizontalAlignment(downloadButton, HorizontalPanel.ALIGN_CENTER);
+		commands.setCellHorizontalAlignment(prevButton, HorizontalPanel.ALIGN_LEFT);
+		commands.setCellHorizontalAlignment(nextButton, HorizontalPanel.ALIGN_RIGHT);
+		
+		// set central buttons' cell widths to be equal as well as their widths
+		commands.setCellWidth(downloadButton, "20%");
+		commands.setCellWidth(closeButton, "20%");
+		
+		downloadButton.setWidth("80px");
+		closeButton.setWidth("80px");
 		
 		// set icons
 		downloadButton.setIcon(IconType.DOWNLOAD);
@@ -264,8 +282,8 @@ public class Carousel extends Composite{
 		shownImage.setTitle(listOfAttachmentsToShow.get(currentPreviewPosition).getToolTipToShow());
 
 		// change the title to the modal
-		String shownTitle = listOfAttachmentsToShow.get(currentPreviewPosition).getTitleToShow().length() > 50 ?
-				listOfAttachmentsToShow.get(currentPreviewPosition).getTitleToShow().substring(0, 50) + "..." :
+		String shownTitle = listOfAttachmentsToShow.get(currentPreviewPosition).getTitleToShow().length() > 40 ?
+				listOfAttachmentsToShow.get(currentPreviewPosition).getTitleToShow().substring(0, 40) + "..." :
 					listOfAttachmentsToShow.get(currentPreviewPosition).getTitleToShow();
 		mainModalPanel.setTitle(shownTitle);
 		
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 50d7973..2d091a6 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
@@ -4,31 +4,20 @@
 	<g:HTMLPanel>
 		<b:Modal ui:field="mainModalPanel" backdrop="NORMAL" keyboard="true"
 			closeVisible="true" animation="true" dynamicSafe="true">
-			
+
 			<g:HTMLPanel styleName="body-container">
-			
 				<g:HTMLPanel styleName="image-container">
 					<b:Image styleName="image-loading" ui:field="loadingImage"></b:Image>
 					<b:Image styleName="shown-image" ui:field="shownImage"></b:Image>
 				</g:HTMLPanel>
-				
-				<g:HTMLPanel styleName="command-container">
-					<b:Row>
-						<b:Column size="1">
-							<b:Button title="Previous" ui:field="prevButton"
-								styleName="arrow"></b:Button>
-						</b:Column>
-						<b:Column offset="2" size="1">
-							<b:Button title="Download" ui:field="downloadButton">Download</b:Button>
-						</b:Column>
-						<b:Column offset="1" size="1">
-							<b:Button title="Close" ui:field="closeButton">Close</b:Button>
-						</b:Column>
-						<b:Column offset="2" size="1">
-							<b:Button title="Next" ui:field="nextButton" styleName="arrow"></b:Button>
-						</b:Column>
-					</b:Row>
-				</g:HTMLPanel>
+
+				<g:HorizontalPanel ui:field="commands" styleName="command-container">
+					<b:Button title="Previous" ui:field="prevButton"
+						styleName="arrow"></b:Button>
+					<b:Button title="Download" ui:field="downloadButton">Download</b:Button>
+					<b:Button title="Close" ui:field="closeButton">Close</b:Button>
+					<b:Button title="Next" ui:field="nextButton" styleName="arrow"></b:Button>
+				</g:HorizontalPanel>
 			</g:HTMLPanel>
 		</b:Modal>
 	</g:HTMLPanel>