started making responsive the widget

git-svn-id: http://svn.research-infrastructures.eu/public/d4science/gcube/trunk/portlets/widgets/image-previewer-widget@126948 82a268e6-3cf1-43bd-a215-b396298e98cf
2016-04-08 17:16:29 +00:00 · 2016-04-08 17:16:29 +00:00 · e0ded15b43
parent 081ae35712
commit e0ded15b43
6 changed files with 136 additions and 138 deletions
--- a/.settings/org.eclipse.core.resources.prefs
+++ b/.settings/org.eclipse.core.resources.prefs
@ -3,5 +3,4 @@ encoding//src/main/java=UTF-8
 encoding//src/main/resources=UTF-8
 encoding//src/test/java=UTF-8
 encoding//src/test/resources=UTF-8
-encoding//target/generated-sources/gwt=UTF-8
 encoding/<project>=UTF-8
--- 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,7 +21,7 @@ public class ImagePreviewer implements EntryPoint {
 	public void onModuleLoad() {

 		// decomment for testing purpose
-		// test();
+		test();

 	}

@ -53,6 +53,8 @@ public class ImagePreviewer implements EntryPoint {
 			}
 		});
 		b.setText("Show preview");
+		
+		c.show();

 		RootPanel.get("image-previewer-div").add(b);
 	}
--- 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
@ -13,7 +13,6 @@ import com.github.gwtbootstrap.client.ui.constants.IconType;
 import com.google.gwt.core.client.GWT;
 import com.google.gwt.dom.client.Element;
 import com.google.gwt.dom.client.NodeList;
-import com.google.gwt.dom.client.Style.Cursor;
 import com.google.gwt.event.dom.client.ClickEvent;
 import com.google.gwt.event.dom.client.ClickHandler;
 import com.google.gwt.event.dom.client.LoadEvent;
@ -23,8 +22,6 @@ 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;

 /**
@ -62,9 +59,6 @@ public class Carousel extends Composite{
 	@UiField
 	Image loadingImage;

-	@UiField
-	HorizontalPanel horizontaFooterPanel;
-
 	// list of enhanced images to show
 	private List<EnhancedImage> listOfAttachmentsToShow;

@ -81,23 +75,11 @@ public class Carousel extends Composite{
 	public Carousel() {

 		initWidget(uiBinder.createAndBindUi(this));
-
-		// set alignment of the horizontal panel's children
-		horizontaFooterPanel.setCellHorizontalAlignment(closeButton, HorizontalPanel.ALIGN_CENTER);
-		horizontaFooterPanel.setCellHorizontalAlignment(downloadButton, HorizontalPanel.ALIGN_CENTER);
-		horizontaFooterPanel.setCellHorizontalAlignment(prevButton, HorizontalPanel.ALIGN_LEFT);
-		horizontaFooterPanel.setCellHorizontalAlignment(nextButton, HorizontalPanel.ALIGN_RIGHT);
-
-		// set central buttons' cell widths to be equal as well as their widths
-		horizontaFooterPanel.setCellWidth(downloadButton, "200px");
-		horizontaFooterPanel.setCellWidth(closeButton, "200px");
-		downloadButton.setWidth("140px");
-		closeButton.setWidth("140px");
 		
-		// set vertical alignment
-		horizontaFooterPanel.setCellVerticalAlignment(nextButton, VerticalPanel.ALIGN_MIDDLE);
-		horizontaFooterPanel.setCellVerticalAlignment(prevButton,  VerticalPanel.ALIGN_MIDDLE);
-
+		// set buttons width
+		closeButton.setWidth("100px");
+		downloadButton.setWidth("100px");
+		
 		// set icons
 		downloadButton.setIcon(IconType.DOWNLOAD);
 		closeButton.setIcon(IconType.COLLAPSE);
@ -107,7 +89,7 @@ public class Carousel extends Composite{
 		// set icons'size
 		prevButton.setIconSize(IconSize.LARGE);
 		nextButton.setIconSize(IconSize.LARGE);
-
+		
 		//on user click on the image, go on
 		shownImage.addClickHandler(new ClickHandler() {

@ -122,9 +104,6 @@ public class Carousel extends Composite{

 		// set url of the loading image
 		loadingImage.setResource(resources.loadingImage());
-		
-		// set shownImage mouse icon to pointer
-		shownImage.getElement().getStyle().setCursor(Cursor.POINTER); 
 	}

 	@UiHandler("closeButton")
--- 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
@ -1,110 +1,35 @@
 <!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
 <ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
 	xmlns:g="urn:import:com.google.gwt.user.client.ui" xmlns:b="urn:import:com.github.gwtbootstrap.client.ui">
-	<ui:style>
-	.image {
-		margin: 0;
-		position: relative;
-		top: 50%;
-		left: 50%;
-		margin-right: -50%;
-		transform: translate(-50%, -50%);
-		-ms-transform: translate(-50%, -50%); /* IE 9 */
-		-webkit-transform: translate(-50%, -50%); /* Safari */
-		max-height: 100%;
-		max-width: 100%;
-		width: auto;
-	}
-	
-	.image-loading {
-		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%;
-		min-width: 450px;
-		min-height: 400px;
-		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: 5%;
-		color: #3B5998 !important;
-	}
-	
-	.modal-header>h3 {
-		font-size: 15px;
-	}
-	
-	@external .modal-body;
-	.modal-body {
-		position: relative;
-		height: 90%;
-		max-height: 100%;
-		max-width: 100%;
-		padding: 0;
-		overflow: hidden;
-	}
-	
-	@external .modal-footer;
-	.modal-footer {
-		padding: 10px 10px 10px;
-		margin-bottom: 0px;
-		height: 5%;
-		background-color: #F5F5F5;
-		border-top: 1px solid #DDD;
-		border-radius: 0px 0px 6px 6px;
-		box-shadow: 0px 1px 0px #FFF inset;
-		vertical-align: middle;
-	}
-	
-	.style-horizontal-panel {
-		width: 100%;
-	}
-	</ui:style>
 	<g:HTMLPanel>
 		<b:Modal ui:field="mainModalPanel" backdrop="NORMAL" keyboard="true"
 			closeVisible="true" animation="true" dynamicSafe="true">
-			<b:Image styleName="{style.image-loading}" ui:field="loadingImage"></b:Image>
-			<b:Image styleName="{style.image}" ui:field="shownImage"></b:Image>
-			<b:ModalFooter>
-				<g:HorizontalPanel styleName="{style.style-horizontal-panel}"
-					ui:field="horizontaFooterPanel">
-					<b:Button title="Previous" ui:field="prevButton"
-						styleName="{style.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="{style.arrow}"></b:Button>
-				</g:HorizontalPanel>
-			</b:ModalFooter>
+			
+			<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:HTMLPanel>
 		</b:Modal>
 	</g:HTMLPanel>
 </ui:UiBinder> 
--- a/src/main/resources/org/gcube/portlets/widgets/imagepreviewerwidget/ImagePreviewer.gwt.xml
+++ b/src/main/resources/org/gcube/portlets/widgets/imagepreviewerwidget/ImagePreviewer.gwt.xml
@ -1,15 +1,19 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <module rename-to='ImagePreviewer'>
-  <!-- Inherit the core Web Toolkit stuff.                        -->
-  <inherits name='com.google.gwt.user.User' />
-  <!-- Other module inherits                                      -->
-  <inherits name="com.github.gwtbootstrap.Bootstrap" />
+	<!-- Inherit the core Web Toolkit stuff. -->
+	<inherits name='com.google.gwt.user.User' />
+	<!-- Other module inherits -->
+	<inherits name="com.github.gwtbootstrap.Bootstrap" />

-  <!-- Specify the app entry point class.                         -->
-  <entry-point class='org.gcube.portlets.widgets.imagepreviewerwidget.client.ImagePreviewer' />
+	<!-- Specify the app entry point class. -->
+	<entry-point
+		class='org.gcube.portlets.widgets.imagepreviewerwidget.client.ImagePreviewer' />

-  <!-- Specify the paths for translatable code                    -->
-  <source path='client' />
-  <source path='shared' />
+	<!-- Responsive design -->
+	<set-property name="bootstrap.responsiveDesign" value="true" />
+
+	<!-- Specify the paths for translatable code -->
+	<source path='client' />
+	<source path='shared' />

 </module>
--- a/src/main/webapp/ImagePreviewer.css
+++ b/src/main/webapp/ImagePreviewer.css
@ -0,0 +1,89 @@
+@media screen and (min-width: 1024px) {
+	.modal {
+		width: 950px !important;
+		margin-left: -480px !important;
+	}
+	.modal-body {
+		height: 400px !important;
+	}
+}
+
+@media screen and (min-width: 800px) and (max-width: 1024px) {
+	.modal-body {
+		height: 350px !important;
+	}
+}
+
+@media screen and (min-width: 200px) and (max-width: 800px) {
+	.modal-body {
+		height: 280px !important;
+	}
+}
+
+.body-container {
+	height: 100% !important;
+	width: 100% !important;
+}
+
+.image-container {
+	height: 90%;
+	width: 100%;
+	margin-bottom: 10px;
+}
+
+.command-container {
+	height: 5%;
+	width: 100%;
+	vertical-align: baseline;
+}
+
+.shown-image {
+	margin: 0;
+	position: relative;
+	top: 50%;
+	left: 50%;
+	margin-right: -50%;
+	transform: translate(-50%, -50%);
+	-ms-transform: translate(-50%, -50%); /* IE 9 */
+	-webkit-transform: translate(-50%, -50%); /* Safari */
+	max-height: 100%;
+	max-width: 100%;
+	width: auto;
+}
+
+.image-loading {
+	margin: 0;
+	position: relative;
+	top: 50%;
+	left: 50%;
+	margin-right: -50%;
+	transform: translate(-50%, -50%);
+	-ms-transform: translate(-50%, -50%); /* IE 9 */
+	-webkit-transform: translate(-50%, -50%); /* Safari */
+	max-height: 100%;
+	max-width: 100%;
+	width: auto;
+}
+
+.arrow {
+	color: white;
+}
+
+.modal-body {
+	background: black;
+	overflow-y: hidden !important;
+}
+
+.modal-header {
+	background: black;
+	border-bottom: black !important;
+}
+
+.modal-header>.close {
+	color: white !important;
+}
+
+.modal-header>h3 {
+	font-size: 15px;
+	color: white;
+}