Css is added to the standard bootstrap-modal's style in order to let different modals (with their own styles) to be present in the same page

git-svn-id: http://svn.research-infrastructures.eu/public/d4science/gcube/trunk/portlets/widgets/image-previewer-widget@126993 82a268e6-3cf1-43bd-a215-b396298e98cf

src/main/java/org/gcube/portlets/widgets/imagepreviewerwidget/client/ImagePreviewer.java

@@ -53,7 +53,7 @@ public class ImagePreviewer implements EntryPoint {
 			}
 		});
 		b.setText("Show preview");
-		
+
 		c.show();
 
 		RootPanel.get("image-previewer-div").add(b);

src/main/java/org/gcube/portlets/widgets/imagepreviewerwidget/client/ui/Carousel.java

@@ -55,7 +55,7 @@ public class Carousel extends Composite{
 
 	@UiField
 	Button closeButton;
-	
+
 	@UiField
 	Button downloadButtonSmart;
 
@@ -67,7 +67,7 @@ public class Carousel extends Composite{
 
 	@UiField
 	Image loadingImage;
-	
+
 	@UiField
 	HorizontalPanel commands;
 
@@ -87,11 +87,15 @@ public class Carousel extends Composite{
 	public Carousel() {
 
 		initWidget(uiBinder.createAndBindUi(this));
-		
+
+		// add custom styles to gwt-bootstrap-modal (just once)
+		mainModalPanel.addStyleName("modal-custom");
+		((Element)mainModalPanel.getElement().getChildNodes().getItem(1)).addClassName("modal-body-custom");
+
 		// 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);
@@ -99,13 +103,13 @@ public class Carousel extends Composite{
 		commands.setCellHorizontalAlignment(downloadButtonSmart, HorizontalPanel.ALIGN_CENTER);
 		commands.setCellHorizontalAlignment(prevButton, HorizontalPanel.ALIGN_LEFT);
 		commands.setCellHorizontalAlignment(nextButton, HorizontalPanel.ALIGN_RIGHT);
-		
+
 		// set sizes
 		downloadButton.setWidth("90px");
 		closeButton.setWidth("90px");
 		downloadButtonSmart.setWidth("15px");
 		closeButtonSmart.setWidth("15px");
-		
+
 		// set icons
 		downloadButton.setIcon(IconType.DOWNLOAD_ALT);
 		closeButton.setIcon(IconType.COLLAPSE);
@@ -117,7 +121,7 @@ public class Carousel extends Composite{
 		// set icons'size
 		prevButton.setIconSize(IconSize.LARGE);
 		nextButton.setIconSize(IconSize.LARGE);
-		
+
 		// choose devices
 		closeButtonSmart.setShowOn(Device.PHONE);
 		downloadButtonSmart.setShowOn(Device.PHONE);
@@ -125,7 +129,13 @@ public class Carousel extends Composite{
 		closeButton.setShowOn(Device.DESKTOP);
 		downloadButton.setHideOn(Device.PHONE);
 		closeButton.setHideOn(Device.PHONE);
-		
+
+		// add some other css style
+		downloadButton.addStyleName("buttons-style");
+		closeButton.addStyleName("buttons-style");
+		downloadButtonSmart.addStyleName("buttons-style");
+		closeButtonSmart.addStyleName("buttons-style");
+
 		//on user click on the image, go on
 		shownImage.addClickHandler(new ClickHandler() {
 
@@ -145,6 +155,22 @@ public class Carousel extends Composite{
 	@UiHandler("closeButton")
 	public void hideOnClick(ClickEvent e){
 
+		closeButtonClickHanderBody();
+
+	}
+
+	@UiHandler("closeButtonSmart")
+	public void hideOnClickSmart(ClickEvent e){
+
+		closeButtonClickHanderBody();
+
+	}
+
+	/**
+	 * Close button click handler body
+	 */
+	private void closeButtonClickHanderBody(){
+
 		mainModalPanel.hide();
 
 	}
@@ -156,8 +182,28 @@ public class Carousel extends Composite{
 	 */
 	public void downloadOnClick(ClickEvent e){
 
+		downloadButtonClickHanderBody();
+
+	}
+
+	@UiHandler("downloadButtonSmart")
+	/**
+	 * When the user pushes this button, try to download the file.
+	 * @param e
+	 */
+	public void downloadOnClickSmart(ClickEvent e){
+
+		downloadButtonClickHanderBody();
+
+	}
+
+	/**
+	 * Download button click handler body
+	 */
+	public void downloadButtonClickHanderBody(){
+
 		String downloadUrl = listOfAttachmentsToShow.get(currentPreviewPosition).getDownloadUrl();
-		
+
 		if(downloadUrl != null){
 			Window.open(downloadUrl, "_blank", "");
 		}
@@ -175,8 +221,8 @@ public class Carousel extends Composite{
 		currentPreviewPosition = 
 				currentPreviewPosition == 0 ? listOfAttachmentsToShow.size() - 1 : currentPreviewPosition - 1;
 
-		// show the image
-		showImage(currentPreviewPosition);
+				// show the image
+				showImage(currentPreviewPosition);
 
 	}
 
@@ -190,7 +236,7 @@ public class Carousel extends Composite{
 		// evaluate next index
 		currentPreviewPosition = 
 				currentPreviewPosition == listOfAttachmentsToShow.size() -1 ? 
-				0 : currentPreviewPosition + 1;
+						0 : currentPreviewPosition + 1;
 
 		// show the image
 		showImage(currentPreviewPosition);
@@ -304,11 +350,13 @@ public class Carousel extends Composite{
 				listOfAttachmentsToShow.get(currentPreviewPosition).getTitleToShow().substring(0, 50) + "..." :
 					listOfAttachmentsToShow.get(currentPreviewPosition).getTitleToShow();
 		mainModalPanel.setTitle(shownTitle);
-		
+
 		// to set the tooltip we have to lookup the title in the header (it's a <h3> element)
 		NodeList<Element> list = mainModalPanel.getElement().getElementsByTagName("h3");
 		list.getItem(0).setTitle(listOfAttachmentsToShow.get(currentPreviewPosition).getTitleToShow());
-		
+
+		// change header style
+		((Element)mainModalPanel.getElement().getChildNodes().getItem(0)).addClassName("modal-header-custom");
 	}
 
 }

src/main/java/org/gcube/portlets/widgets/imagepreviewerwidget/public/ImagePreviewer.css

@@ -1,27 +1,48 @@
 @media screen and (min-width: 1024px) {
-	.modal {
+	.modal-custom {
 		width: 950px !important;
 		margin-left: -480px !important;
 	}
-	.modal-body {
+	.modal-body-custom {
 		height: 400px !important;
 	}
 }
 
 @media screen and (min-width: 800px) and (max-width: 1024px) {
-	.modal-body {
+	.modal-body-custom {
 		height: 350px !important;
 	}
 }
 
 @media screen and (min-width: 300px) and (max-width: 800px) {
-	.modal-body {
+	.modal-body-custom {
 		height: 280px !important;
 	}
 }
 
-.modal {
-	min-width: 300px;
+.modal-custom {
+	min-width: 300px !important;
+}
+
+.modal-body-custom {
+	background: black;
+	overflow-y: hidden !important;
+}
+
+.modal-header-custom {
+	background: black;
+	border-bottom: black !important;
+	padding: 5px 5px 5px 5px !important;
+}
+
+.modal-header-custom>.close {
+	color: white !important;
+}
+
+.modal-header-custom>h3 {
+	font-size: 15px;
+	color: white;
+	word-wrap: break-word;
 }
 
 .body-container {
@@ -69,35 +90,19 @@
 	width: auto;
 }
 
-.arrow-left{
-	color: gray!important;
+.arrow-left {
+	color: gray !important;
 }
 
-.arrow-left:hover{
-	color: white!important;
-}
-
-.arrow-right{
-	color: white!important;
-}
-
-.modal-body {
-	background: black;
-	overflow-y: hidden !important;
-}
-
-.modal-header {
-	background: black;
-	border-bottom: black !important;
-	padding: 5px 5px 5px 5px !important;
-}
-
-.modal-header>.close {
+.arrow-left:hover {
 	color: white !important;
 }
 
-.modal-header>h3 {
-	font-size: 15px;
-	color: white;
-	word-wrap: break-word;
+.arrow-right {
+	color: white !important;
+}
+
+.buttons-style {
+	padding: 4px 12px 4px 12px !important;
+	font-size: 14px !important;
 }

src/main/resources/org/gcube/portlets/widgets/imagepreviewerwidget/ImagePreviewer.gwt.xml

@@ -15,5 +15,8 @@
 	<!-- Specify the paths for translatable code -->
 	<source path='client' />
 	<source path='shared' />
+	
+	<!-- Specify the application specific style sheet. -->
+	<stylesheet src='ImagePreviewer.css' />
 
 </module>