fixes for tickets #1853 (fix css styles for headers in the report) #1851 ( Add line breaks in Instructions and Comments) #1852 make string text autoresizable

git-svn-id: http://svn.research-infrastructures.eu/public/d4science/gcube/trunk/portlets/user/reports@79219 82a268e6-3cf1-43bd-a215-b396298e98cf

.classpath

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <classpath>
-	<classpathentry kind="src" output="target/reports-4.3.0-SNAPSHOT/WEB-INF/classes" path="src/main/java">
+	<classpathentry kind="src" output="target/reports-4.4.0-SNAPSHOT/WEB-INF/classes" path="src/main/java">
 		<attributes>
 			<attribute name="optional" value="true"/>
 			<attribute name="maven.pomderived" value="true"/>
@@ -30,5 +30,5 @@
 			<attribute name="org.eclipse.jst.component.dependency" value="/WEB-INF/lib"/>
 		</attributes>
 	</classpathentry>
-	<classpathentry kind="output" path="target/reports-4.3.0-SNAPSHOT/WEB-INF/classes"/>
+	<classpathentry kind="output" path="target/reports-4.4.0-SNAPSHOT/WEB-INF/classes"/>
 </classpath>

.settings/com.google.gdt.eclipse.core.prefs

@@ -1,8 +1,8 @@
-#Fri May 31 18:12:53 CEST 2013
+#Tue Jul 16 14:28:26 CEST 2013
 =\=\=\=\=\=\=
 <<<<<<<=.mine
 >>>>>>>=.r71295
 eclipse.preferences.version=1
-lastWarOutDir=/Users/massi/Documents/workspace/reports/target/reports-4.3.0-SNAPSHOT
+lastWarOutDir=/Users/massi/Documents/workspace/reports/target/reports-4.4.0-SNAPSHOT
 warSrcDir=src/main/webapp
 warSrcDirIsOutput=false

HowTOBuildOffiline

@@ -0,0 +1 @@
+To Be Completed

pom.xml

@@ -12,7 +12,7 @@
 	<groupId>org.gcube.portlets.user</groupId>
 	<artifactId>reports</artifactId>
 	<packaging>war</packaging>
-	<version>4.3.0-SNAPSHOT</version>
+	<version>4.4.0-SNAPSHOT</version>
 	<name>gCube Reports Portlet</name>
 	<description>
 		gCube Reports Portlet.

src/main/java/org/gcube/portlets/user/reportgenerator/client/Presenter/Presenter.java

@@ -944,8 +944,8 @@ public class Presenter {
 					}
 					else {
 						BasicTextArea textArea = (BasicTextArea) component.getContent();
-						textArea.getMyInstance().setTop(uiY);
+//						textArea.getMyInstance().setTop(uiY);
-						textArea.getMyInstance().setLeft(uiX);
+//						textArea.getMyInstance().setLeft(uiX);
 						wp.addComponentToLayout(textArea, component.isDoubleColLayout());
 					}
 

src/main/java/org/gcube/portlets/user/reportgenerator/client/model/TemplateComponent.java

@@ -294,13 +294,21 @@ public class TemplateComponent {
 		case COMMENT:
 			HTML comment = new HTML(); 
 			comment.setStyleName("commentArea");
-			comment.setHTML((String) sc.getPossibleContent());
+			String contentC = (String) sc.getPossibleContent();
+			// replace all the line braks by <br/>, and all the double spaces by the html version &nbsp;
+			String htmlPreservedLineBreaks2 = contentC.replaceAll("(\r\n|\n)","<br />");
+			htmlPreservedLineBreaks2 = htmlPreservedLineBreaks2.replaceAll("\\s\\s","&nbsp;&nbsp;");
+			comment.setHTML(htmlPreservedLineBreaks2);
 			this.content = comment;
 			break;
 		case INSTRUCTION:
+			String content = (String) sc.getPossibleContent();
+			// replace all the line braks by <br/>, and all the double spaces by the html version &nbsp;
+			String htmlPreservedLineBreaks = content.replaceAll("(\r\n|\n)","<br />");
+			htmlPreservedLineBreaks = htmlPreservedLineBreaks.replaceAll("\\s\\s","&nbsp;&nbsp;");
 			HTML instr = new HTML(); 
 			instr.setStyleName("instructionArea");
-			instr.setHTML((String) sc.getPossibleContent());
+			instr.setHTML(htmlPreservedLineBreaks);
 			this.content = instr;
 			break;
 		case TIME_SERIES:

src/main/java/org/gcube/portlets/user/reportgenerator/client/targets/BasicTextArea.java

@@ -1,9 +1,11 @@
 package org.gcube.portlets.user.reportgenerator.client.targets;
 
+import java.util.Date;
+
 import org.gcube.portlets.d4sreporting.common.shared.ComponentType;
-import org.gcube.portlets.user.reportgenerator.client.ReportGenerator;
 import org.gcube.portlets.user.reportgenerator.client.Presenter.Presenter;
 
+import com.google.gwt.core.client.GWT;
 import com.google.gwt.dom.client.Style.Unit;
 import com.google.gwt.event.dom.client.KeyUpEvent;
 import com.google.gwt.event.dom.client.KeyUpHandler;
@@ -11,119 +13,104 @@ import com.google.gwt.event.dom.client.MouseDownEvent;
 import com.google.gwt.event.dom.client.MouseDownHandler;
 import com.google.gwt.event.dom.client.MouseOutEvent;
 import com.google.gwt.event.dom.client.MouseOutHandler;
-import com.google.gwt.user.client.ui.HTML;
-import com.google.gwt.user.client.ui.HasVerticalAlignment;
 import com.google.gwt.user.client.ui.RichTextArea;
-import com.google.gwt.user.client.ui.VerticalPanel;
+import com.google.gwt.user.client.ui.TextArea;
 import com.google.gwt.user.client.ui.Widget;
 /**
- * <code> BasicTextArea </code> 
+ * <code> BasicTextArea </code> is a resizable textArea
  *
  * @author Massimiliano Assante, ISTI-CNR - massimiliano.assante@isti.cnr.it
- * @version July 2011 (3.0) 
+ * @version July 2013 
  */
-public class BasicTextArea extends ReportTextArea {
+public class BasicTextArea extends TextArea {
-	private RichTextArea textArea = new RichTextArea();
+	private String myId;
-	//private TextArea textArea = new TextArea();
-
-	private VerticalPanel myPanel;
-
-	int currHeight = 0;
-
-
-
 
 	public BasicTextArea(ComponentType type, final Presenter presenter, int left, int top, final int width,  final int height, boolean hasComments, boolean showClose) {
-		super(type, presenter, left, top, width, height, hasComments, showClose);
-		currHeight = height;
-		myPanel = getResizablePanel();
 
-		textArea.setPixelSize(width, height);
+		myId = Long.toString(new Date().getTime()); 
-		textArea.getElement().getStyle().setMarginTop(-4, Unit.PX); //this is needed because the richtextarea has margin 8px and a not able to modify it via css
+		this.setPixelSize(width, height);
 
-		textArea.addMouseOutHandler(new MouseOutHandler() {
+		this.addMouseOutHandler(new MouseOutHandler() {
 
 			public void onMouseOut(MouseOutEvent event) {
 				presenter.storeChangeInSession((Widget) event.getSource());				
 			}
 		});
-		textArea.setStyleName("report-ui-component");
-		
 
+		this.setStyleName("report-ui-component");
+		this.addStyleName("d4sFrame");
+		this.getElement().setId(myId);
+		
 		switch (type) {
 
 		case BODY_NOT_FORMATTED:
-			textArea.addStyleName("simpleText");
+			this.addStyleName("simpleText");
-			myPanel.setTitle("Simple text");
 			break;
 		default:
 			break;
 		}		
-		myPanel.add(textArea);
-		myPanel.setVerticalAlignment(HasVerticalAlignment.ALIGN_BOTTOM);
-		myPanel.setPixelSize(width, height);
-
-		textArea.addMouseOutHandler(new MouseOutHandler() {
 
+		this.addMouseOutHandler(new MouseOutHandler() {
 			public void onMouseOut(MouseOutEvent event) {
 				presenter.storeChangeInSession((Widget) event.getSource());
-
 			}
 		});
 
-		textArea.addKeyUpHandler(new KeyUpHandler() {
+		this.addKeyUpHandler(new KeyUpHandler() {
 			public void onKeyUp(KeyUpEvent event) {
-				HTML div = ReportGenerator.get().getDivHidden();
+				//presenter.resizeTemplateComponentInModel(myInstance, width, newHeight);
-				div.setHTML(textArea.getHTML());	
-				int newHeight = div.getOffsetHeight();
-
-				resizePanel(width, newHeight);
-				presenter.resizeTemplateComponentInModel(myInstance, width, newHeight);
-				currHeight = newHeight;					
-
 			}			
 		});
 
-		textArea.addMouseDownHandler(new MouseDownHandler() {
+		this.addMouseDownHandler(new MouseDownHandler() {
 			public void onMouseDown(MouseDownEvent event) {
-				HTML div = ReportGenerator.get().getDivHidden();
+				autoSizeIt(myId, height);
-				div.setHTML(textArea.getHTML());
-				int newHeight = div.getOffsetHeight();
-
-				resizePanel(width, newHeight);
-				presenter.resizeTemplateComponentInModel(myInstance, width, newHeight);
-				currHeight = newHeight;
-
 			}
 		});
 
 	}
-	public String getText() {
-		return textArea.getText();
-	}
 
-	public void setText(String text) {
-		textArea.setText(text);
-
-	}
 
 	public RichTextArea getRichTextArea() {
 		return null;
 	}
 
 	/**
-	 * used to resize the panel
+	 * This method actually makes resizable the textArea
-	 * @param width w
+	 * @param id
-	 * @param height h
 	 */
-	@Override
+	public static native void autoSizeIt(String id, int height) /*-{
-	public void resizePanel(int width, int height) {
+	    var text = $doc.getElementById(id);
-		if (height > 25) {
+     	var observe;
-			mainPanel.setPixelSize(width, height);			
+		if (window.attachEvent) {
-			resizablePanel.setPixelSize(width, height);			
+	    	observe = function (element, event, handler) {
-			textArea.setPixelSize(width-4, height);
+	        	element.attachEvent('on'+event, handler);
-			currHeight = height;
+	    	};
 		}
-	}
+		else {
+	    	observe = function (element, event, handler) {
+	        	element.addEventListener(event, handler, false);
+	    	};
+		}
+
+	    function resize () {
+	        text.style.height = height+'px';
+	        text.style.height = text.scrollHeight+'px';
+	    }
+
+	    function delayedResize () {
+	        window.setTimeout(resize, 0);
+	    }
+
+	    observe(text, 'change',  resize);
+	    observe(text, 'cut',     delayedResize);
+	    observe(text, 'paste',   delayedResize);
+	    observe(text, 'drop',    delayedResize);
+	    observe(text, 'keydown', delayedResize);
+
+	    text.focus();
+	    text.select();
+	    resize();
+	}-*/;
 
 }

src/main/webapp/ReportGenerator.css

@@ -1,8 +1,5 @@
 @import url('reports/old-dialog.css');
 
-
-
-
 .openOptionsPanel {
 	margin: 25px 5px 0px -45px;
 	border: 1px solid #e3e8f3;
@@ -38,7 +35,6 @@
 	background: url('images/uploadReport.png') 55% 25px no-repeat;
 }
 
-
 .exportPanel {
 	margin: 5px 5px 5px 20px;
 	border: 1px solid #e3e8f3;
@@ -49,19 +45,15 @@
 	border-radius: 5px;
 	height: 0px;
 	opacity: 0;
-	
 	transition-property: opacity, height;
 	transition-duration: .55s;
 	transition-timing-function: ease-out;
-	
 	-moz-transition-property: opacity, height;
 	-moz-transition-duration: .55s;
 	-moz-transition-timing-function: ease-out;
-	
 	-webkit-transition-property: opacity, height;
 	-webkit-transition-duration: .55s;
 	-webkit-transition-timing-function: ease-out;
-	
 	-ms-transition-property: opacity, height;
 	-ms-transition-duration: .55s;
 	-ms-transition-timing-function: ease-out;
@@ -457,7 +449,7 @@ tableBorder td {
 }
 
 .d4sFrame {
-	border: 1px solid #CCC;
+	border: 1px solid #CCC !important;
 	-webkit-border-radius: 5px;
 	-moz-border-radius: 5px;
 	border-radius: 5px;
@@ -510,9 +502,8 @@ tableBorder td {
 }
 
 .heading2-label {
-	font-size: 13pt;
+	font-size: 15pt;
-	padding-left: 0px;
+	padding-left: 0px
-	font-weight: bold;
 }
 
 .heading3 {
@@ -521,9 +512,8 @@ tableBorder td {
 }
 
 .heading3-label {
-	font-size: 10pt;
+	font-size: 13pt;
 	padding-left: 2px;
-	font-weight: bold;
 }
 
 .heading4 {
@@ -532,8 +522,8 @@ tableBorder td {
 }
 
 .heading4-label {
-	font-size: 9pt;
+	font-size: 12pt;
-	padding-left: 15px;
+	padding-left: 10px;
 }
 
 .heading5 {
@@ -543,12 +533,12 @@ tableBorder td {
 
 .heading5-label {
 	font-size: 8pt;
-	padding-left: 4px;
+	padding-left: 25px;
 }
 
 .simpleText {
 	padding-left: 4px;
-	font-size: 12px;
+	font-size: 13px;
 	color: black;
 }
 
@@ -820,5 +810,4 @@ gwt-MenuBar {
 .cw-RichText {
 	border: 1px solid #BBBBBB;
 	border-spacing: 0px;
-}
+}
-

src/main/webapp/ReportGenerator.html

@@ -20,6 +20,9 @@
     <!-- be added before this line.                -->
     <!--                                           -->
     <script type="text/javascript" language="javascript" src="reports/reports.nocache.js"></script>
+    <script
+	src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js'></script>
+<script src='js/jquery.autosize.js'></script>
   </head>