Support for multi-attachment finished

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

src/main/java/org/gcube/portlets/user/newsfeed/client/NewsFeed.java

@@ -46,8 +46,6 @@ public class NewsFeed implements EntryPoint {
 	
 		RootPanel.get(UNIQUE_DIV).add(mainPanel);
 		
-		
-
 		ClientFeed notification = new ClientFeed();
 		//Subscribe to message and associate subsequent receptions with custom subscriber data
 		try	{

src/main/java/org/gcube/portlets/user/newsfeed/client/panels/NewsFeedPanel.java

@@ -556,7 +556,7 @@ public class NewsFeedPanel extends Composite {
 	}
 
 	/**
-	 * used when addin directly a feed from the UI (IPC)
+	 * used when adding directly a feed from the UI (IPC)
 	 * @param userid
 	 * @param fullName
 	 * @param thumbURL
@@ -564,7 +564,9 @@ public class NewsFeedPanel extends Composite {
 	 */
 	public void addJustAddedFeed(ClientFeed cFeed) {
 
-		Feed feed = new Feed(cFeed.getKey(), 
+		// build up the feed
+		Feed feed = new Feed(
+				cFeed.getKey(), 
 				FeedType.SHARE, 
 				cFeed.getUserid(), 
 				cFeed.getTime(), 
@@ -580,16 +582,18 @@ public class NewsFeedPanel extends Composite {
 				cFeed.getLinkDescription(), 
 				cFeed.getLinkHost());
 
-		// set attachments property
+		// set multi-attachments property
 		boolean multiAttachments = cFeed.getAttachments() != null;
 		feed.setMultiFileUpload(multiAttachments);
 
-		EnhancedFeed toAdd = new EnhancedFeed(feed, false, true); //false cuz he could not have liked this yet and true because is the current user's 
+		//false because he could not have liked this yet and true because is the current user's 
+		EnhancedFeed toAdd = new EnhancedFeed(feed, false, true); 
 
 		// be careful when converting from List<> to ArrayList<> ...
-		ArrayList<Attachment> attachments = cFeed.getAttachments() == null ? null : new ArrayList<Attachment>(cFeed.getAttachments());
+		ArrayList<Attachment> attachments = multiAttachments ?  new ArrayList<Attachment>(cFeed.getAttachments()) : null;
 		toAdd.setAttachments(attachments); 
 
+		// build up the post template
 		final TweetTemplate tt = new TweetTemplate(myUserInfo, toAdd, eventBus, true);
 		if (isFirstTweet) {
 			newsPanel.clear();
@@ -607,10 +611,11 @@ public class NewsFeedPanel extends Composite {
 			}
 		};
 
+		// show after half a second
 		t.schedule(500);	
 
 		//insert it also in the model so that the user who created it do not get notified about this new update
-		allUpdates.add(0, toAdd); //insert in the model		 
+		allUpdates.add(0, toAdd);	 
 	}
 
 	/**

src/main/java/org/gcube/portlets/user/newsfeed/client/ui/AttachmentPreviewer.java

@@ -3,18 +3,21 @@ package org.gcube.portlets.user.newsfeed.client.ui;
 import org.gcube.portal.databook.shared.Attachment;
 
 import com.google.gwt.core.client.GWT;
+import com.google.gwt.dom.client.Style.Unit;
 import com.google.gwt.event.dom.client.ClickEvent;
 import com.google.gwt.event.dom.client.ClickHandler;
 import com.google.gwt.uibinder.client.UiBinder;
 import com.google.gwt.uibinder.client.UiField;
 import com.google.gwt.user.client.Window;
+import com.google.gwt.user.client.ui.Anchor;
 import com.google.gwt.user.client.ui.Composite;
+import com.google.gwt.user.client.ui.HTMLPanel;
 import com.google.gwt.user.client.ui.Image;
 import com.google.gwt.user.client.ui.Label;
 import com.google.gwt.user.client.ui.Widget;
 
 /**
- * Shows an attachment
+ * Class to show an attached file.
  * @author Costantino Perciante at ISTI-CNR
  *
  */
@@ -32,41 +35,70 @@ public class AttachmentPreviewer extends Composite{
 	}
 
 	@UiField
-	Image attachmentPreviewImage;
+	HTMLPanel attachmentContainer;
 
 	@UiField
-	Label attachmentFileName;
+	Image imagePreview;
 
-	// save the attachment
+	@UiField
+	Label fileNameLabel;
+
+	@UiField
+	Anchor downloadLabel;
+
+	@UiField
+	Anchor showPreviewLabel;
+
+	// save attachment
 	private Attachment attachment;
 
-	public AttachmentPreviewer(final Attachment attachment) {
+	public AttachmentPreviewer(Attachment a) {
+
 		initWidget(uiBinder.createAndBindUi(this));
 
-		// print attachment
+		// save the attachment
-		printJSLOG(attachment.toString());
+		attachment = a;
 
-		// save it
+		// set image preview
-		this.attachment = attachment;
+		imagePreview.setUrl(a.getThumbnailURL());
 
-		// set label
+		// set file name 
-		attachmentFileName.setText(attachment.getName());
+		String shownName = a.getName().length() > 21 ? a.getName().substring(0, 15) + "..." : a.getName();
+		fileNameLabel.setText(shownName);
+		fileNameLabel.setTitle(a.getName());
 
-		// set thumbnail
+		// download label
-		if(attachment.getThumbnailURL() != null)
+		downloadLabel.setText("Download");
-			attachmentPreviewImage.setUrl(attachment.getThumbnailURL());
+		downloadLabel.setHref(attachment.getUri());
+		downloadLabel.setTarget("_blank");
 
-		attachmentPreviewImage.addClickHandler(new ClickHandler() {
+		// preview
+		showPreviewLabel.setText("Show");
+		showPreviewLabel.addClickHandler(new ClickHandler() {
 
 			@Override
 			public void onClick(ClickEvent event) {
-				Window.open(attachment.getUri(), "_parent", "");
+
+				Window.alert("Image preview widget will be made soon...");
 
 			}
 		});
+		
+		// style links
+		downloadLabel.addStyleName("link");
+		showPreviewLabel.addStyleName("link");
+
+	}
+
+	/**
+	 * Change the width of this container.
+	 * @param newWidth
+	 * @param unit
+	 */
+	public void changeAttachmentWidth(int newWidth, Unit unit){
+
+		attachmentContainer.getElement().getStyle().setWidth(newWidth, unit);
+
 	}
 
-	private static native void printJSLOG(String msg)/*-{
-		console.log(msg);
-	}-*/;
 }

src/main/java/org/gcube/portlets/user/newsfeed/client/ui/AttachmentPreviewer.ui.xml

@@ -1,9 +1,61 @@
 <!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">
-	<g:AbsolutePanel>
+	<ui:style>
-	<g:Label ui:field="attachmentFileName"></g:Label>
+	.image-preview {
-		<g:Image ui:field="attachmentPreviewImage">
+		align: left;
-		</g:Image>
+		margin: 5px;
-	</g:AbsolutePanel>
+		display: inline;
+		height: 40px;
+		width: 40px;
+		overflow: hidden;
+		float: left;
+		border: 1px solid #DDD;
+		border-radius: 4px;
+	}
+	
+	.container-style {
+		padding: 5px;
+		font-family: 'lucida grande', tahoma, verdana, arial, sans-serif;
+		background-clip: border-box;
+		background-color: #FBFBFB;
+		background-image: none;
+		border: 1px solid #DDD;
+		border-radius: 4px;
+		margin: 5px;
+		display: inline-block;
+	}
+	
+	.label-filename-style {
+		overflow-x: hidden;
+		width: 100%;
+		margin-left: 5px;
+	}
+	
+	.label-show {
+		font-weight: bold;
+		margin-left: 5px;
+	}
+	
+	.label-download {
+		font-weight: bold;
+		margin-left: 5px;
+		margin-right: 5px;
+	}
+	
+	.display-inline-style {
+		display: inline-block;
+	}
+	</ui:style>
+	<g:HTMLPanel styleName="{style.container-style}" ui:field="attachmentContainer">
+		<g:Image styleName="{style.image-preview}" ui:field="imagePreview"></g:Image>
+		<g:VerticalPanel styleName="{style.display-inline-style}">
+			<g:Label ui:field="fileNameLabel" styleName="{style.label-filename-style}"></g:Label>
+			<g:HorizontalPanel>
+				<g:Anchor ui:field="downloadLabel" styleName="{style.label-download}"></g:Anchor>
+				<g:Label>-</g:Label>
+				<g:Anchor ui:field="showPreviewLabel" styleName="{style.label-show}"></g:Anchor>
+			</g:HorizontalPanel>
+		</g:VerticalPanel>
+	</g:HTMLPanel>
 </ui:UiBinder> 

src/main/java/org/gcube/portlets/user/newsfeed/client/ui/Placeholder.java

@@ -0,0 +1,90 @@
+package org.gcube.portlets.user.newsfeed.client.ui;
+import com.google.gwt.core.shared.GWT;
+import com.google.gwt.dom.client.Style.Unit;
+import com.google.gwt.event.dom.client.ClickEvent;
+import com.google.gwt.event.dom.client.ClickHandler;
+import com.google.gwt.user.client.ui.Anchor;
+import com.google.gwt.user.client.ui.FlowPanel;
+import com.google.gwt.user.client.ui.SimplePanel;
+import com.google.gwt.user.client.ui.Widget;
+import com.google.gwt.user.client.ui.WidgetCollection;
+/**
+ * This panel will contain the attachments/previews
+ * @author Massimiliano Assante at ISTI CNR
+ * @author Costantino Perciante at ISTI CNR
+ *
+ */
+public class Placeholder extends FlowPanel {
+
+	// check if we need to show more attachments
+	private boolean appendShowMoreLabel = false;
+
+	/**
+	 * Modified version of the add method.
+	 */
+	public void add(AttachmentPreviewer atPrev){
+
+		WidgetCollection listOfChildren = this.getChildren();
+
+		// check the size 
+		int size = listOfChildren.size();
+
+
+		if(size % 2 == 0){
+			// in this case the next attachment we are going to add remains with the same width
+			add((Widget)atPrev);
+			GWT.log("added without changing size");
+		}
+		else{
+			// we need to change the length of the last element added and of this new one
+			((AttachmentPreviewer) listOfChildren.get(size -1)).changeAttachmentWidth(45, Unit.PCT);
+			atPrev.changeAttachmentWidth(45, Unit.PCT);
+
+			// add it finally
+			add((Widget)atPrev);
+		}
+
+		if(size >= 4){
+			// ok, we are going to add the 5th attachment and so forth but we hide them..
+			atPrev.setVisible(false);
+
+			appendShowMoreLabel = true;
+		}
+	}
+
+	/**
+	 * Append show more label
+	 */
+	public void appendShowMoreLabel(){
+
+		final WidgetCollection listOfChildren = this.getChildren();
+
+		if(appendShowMoreLabel){
+
+			final SimplePanel sp = new SimplePanel();
+			sp.setStyleName("centered");
+			
+			final Anchor showMoreAttachments = new Anchor("Show other attachments");
+			showMoreAttachments.setStyleName("link");
+			sp.add(showMoreAttachments);
+			
+			showMoreAttachments.addClickHandler(new ClickHandler() {
+
+				@Override
+				public void onClick(ClickEvent event) {
+
+					// retrieve the list of attachmentPreviewers
+					for(Widget w: listOfChildren){
+						w.setVisible(true);
+					}
+
+					sp.setVisible(false);
+
+				}
+			});
+
+			// show it
+			this.add(sp);
+		}
+	}
+}

src/main/java/org/gcube/portlets/user/newsfeed/client/ui/TweetTemplate.java

@@ -36,7 +36,6 @@ import com.google.gwt.uibinder.client.UiHandler;
 import com.google.gwt.user.client.Timer;
 import com.google.gwt.user.client.Window;
 import com.google.gwt.user.client.ui.Composite;
-import com.google.gwt.user.client.ui.FlowPanel;
 import com.google.gwt.user.client.ui.HTML;
 import com.google.gwt.user.client.ui.HTMLPanel;
 import com.google.gwt.user.client.ui.Image;
@@ -113,7 +112,7 @@ public class TweetTemplate extends Composite {
 	@UiField 
 	VerticalPanel previewPanel;
 	@UiField 
-	FlowPanel attachmentPreviewPanel;
+	Placeholder attachmentPreviewPanel;
 	@UiField
 	Label messageSeparator;
 	/**
@@ -133,10 +132,12 @@ public class TweetTemplate extends Composite {
 		isAppFeed = myFeed.getFeed().isApplicationFeed();
 		Feed feed = myFeed.getFeed();
 
-		// if there is one attachment, maintain retro compatibility
+		GWT.log("Is feed multiupload? "  + feed.isMultiFileUpload());
+		// if there is one attachment, maintain backward compatibility
 		if (feed.getUri() != null && feed.getUri().compareTo("") != 0 && feed.getLinkTitle() != null && feed.getLinkTitle().compareTo("") != 0  && !feed.isMultiFileUpload()) {
 			previewPanel.add(new LinkPreviewer(feed.getLinkTitle(), feed.getLinkDescription(), feed.getLinkHost(), feed.getUriThumbnail(), feed.getUri()));
 		}
+
 		this.eventBus = eventBus;
 		this.isUsers = myFeed.isUsers();
 		myComments = new ArrayList<SingleComment>();
@@ -149,7 +150,8 @@ public class TweetTemplate extends Composite {
 		}
 
 		// in case there are attachments, we have to fill attachmentPreviewPanel instead of the previewPanel
-		if(myFeed.getAttachments() != null){
+		if(feed.isMultiFileUpload()){
+
 
 			// remember that one attachment is stored in the fields: uri, uriThumbnail, linkTitle,  linkDescription, linkHost
 			// build up an attachment
@@ -164,11 +166,19 @@ public class TweetTemplate extends Composite {
 			// add it to the panel
 			attachmentPreviewPanel.add(new AttachmentPreviewer(firstAttachment));
 
-			for (Attachment a : myFeed.getAttachments()) {
 
-				attachmentPreviewPanel.add(new AttachmentPreviewer(a));
+			for (Attachment otherAttachment : myFeed.getAttachments()) {
+
+				// try to build the attachment viewer
+				attachmentPreviewPanel.add(new AttachmentPreviewer(otherAttachment));
 
 			}
+			
+			// invoke append label
+			attachmentPreviewPanel.appendShowMoreLabel();
+
+			// set style to the attachment container
+			attachmentPreviewPanel.setStyleName("attachment-preview-container");
 		}
 
 		openImage.setStyleName("openImage");

src/main/java/org/gcube/portlets/user/newsfeed/client/ui/TweetTemplate.ui.xml

@@ -16,7 +16,7 @@
 						<g:HTML styleName="" ui:field="seeMore" />
 					</div>
 					<g:VerticalPanel ui:field="previewPanel"></g:VerticalPanel>
-					<g:FlowPanel ui:field="attachmentPreviewPanel"></g:FlowPanel>
+					<m:Placeholder ui:field="attachmentPreviewPanel"></m:Placeholder>
 					<div class="tweet-actions">
 						<table cellspacing="0" cellpadding="0">
 							<tbody>

src/main/webapp/NewsFeed.css

@@ -38,27 +38,24 @@ table {
 	font-size: 11px;
 	letter-spacing: normal;
 	line-height: normal;
-	
 	border: 1px solid transparent;
 	margin-left: 5px;
 	width: 430px;
 	min-height: 30px;
-	
+	word-wrap: break-word;
-	word-wrap: break-word; /* this is very important when usere paste long links*/
+	/* this is very important when usere paste long links*/
 }
 
 .post-comment {
 	padding: 4px 2px;
 	color: #999;
 	background-color: transparent;
-	
 	margin-top: 0px;
 	font-family: 'Lucida Grande', Verdana, 'Bitstream Vera Sans', Arial,
 		sans-serif;
 	font-size: 11px;
 	letter-spacing: normal;
 	line-height: normal;
-
 	border: 1px solid #C3CDE7;
 	margin-left: 5px;
 	width: 430px;
@@ -70,7 +67,6 @@ table {
 }
 
 /* DIV trick ends here */
-
 .framed {
 	margin: 0 0 10px;
 	padding: 10px;
@@ -187,13 +183,30 @@ table {
 	background-image: url("images/arrow-right.png");
 }
 
-
 .filter-selected a {
 	color: #336699 !important;
 	font-weight: bold;
 }
 
 /* Other */
+.attachment-preview-container {
+	padding: 5px;
+	font-family: 'lucida grande', tahoma, verdana, arial, sans-serif;
+	background-clip: border-box;
+	background-color: #FBFBFB;
+	background-image: none;
+	border: 1px solid #DDD;
+	border-radius: 4px;
+	width: 485px;
+	margin-top: 5px;
+	margin-left: 5px;
+}
+
+.centered {
+	width: 100%;
+	text-align: center;
+}
+
 .linkpreview-image {
 	margin: 3px;
 	width: 80px;
@@ -247,7 +260,6 @@ table {
 	padding-left: 5px;
 }
 
-
 .comment-hidden {
 	opacity: 0;
 }