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
This commit is contained in:
Costantino Perciante 2016-01-20 17:49:31 +00:00
parent a028ef42fa
commit c8019b8100
8 changed files with 253 additions and 54 deletions

View File

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

View File

@ -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 userid
* @param fullName * @param fullName
* @param thumbURL * @param thumbURL
@ -564,7 +564,9 @@ public class NewsFeedPanel extends Composite {
*/ */
public void addJustAddedFeed(ClientFeed cFeed) { public void addJustAddedFeed(ClientFeed cFeed) {
Feed feed = new Feed(cFeed.getKey(), // build up the feed
Feed feed = new Feed(
cFeed.getKey(),
FeedType.SHARE, FeedType.SHARE,
cFeed.getUserid(), cFeed.getUserid(),
cFeed.getTime(), cFeed.getTime(),
@ -580,16 +582,18 @@ public class NewsFeedPanel extends Composite {
cFeed.getLinkDescription(), cFeed.getLinkDescription(),
cFeed.getLinkHost()); cFeed.getLinkHost());
// set attachments property // set multi-attachments property
boolean multiAttachments = cFeed.getAttachments() != null; boolean multiAttachments = cFeed.getAttachments() != null;
feed.setMultiFileUpload(multiAttachments); 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<> ... // 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); toAdd.setAttachments(attachments);
// build up the post template
final TweetTemplate tt = new TweetTemplate(myUserInfo, toAdd, eventBus, true); final TweetTemplate tt = new TweetTemplate(myUserInfo, toAdd, eventBus, true);
if (isFirstTweet) { if (isFirstTweet) {
newsPanel.clear(); newsPanel.clear();
@ -607,10 +611,11 @@ public class NewsFeedPanel extends Composite {
} }
}; };
// show after half a second
t.schedule(500); t.schedule(500);
//insert it also in the model so that the user who created it do not get notified about this new update //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);
} }
/** /**

View File

@ -3,18 +3,21 @@ package org.gcube.portlets.user.newsfeed.client.ui;
import org.gcube.portal.databook.shared.Attachment; import org.gcube.portal.databook.shared.Attachment;
import com.google.gwt.core.client.GWT; 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.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler; import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.uibinder.client.UiBinder; import com.google.gwt.uibinder.client.UiBinder;
import com.google.gwt.uibinder.client.UiField; import com.google.gwt.uibinder.client.UiField;
import com.google.gwt.user.client.Window; 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.Composite;
import com.google.gwt.user.client.ui.HTMLPanel;
import com.google.gwt.user.client.ui.Image; import com.google.gwt.user.client.ui.Image;
import com.google.gwt.user.client.ui.Label; import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.Widget; import com.google.gwt.user.client.ui.Widget;
/** /**
* Shows an attachment * Class to show an attached file.
* @author Costantino Perciante at ISTI-CNR * @author Costantino Perciante at ISTI-CNR
* *
*/ */
@ -32,41 +35,70 @@ public class AttachmentPreviewer extends Composite{
} }
@UiField @UiField
Image attachmentPreviewImage; HTMLPanel attachmentContainer;
@UiField @UiField
Label attachmentFileName; Image imagePreview;
// save the attachment @UiField
Label fileNameLabel;
@UiField
Anchor downloadLabel;
@UiField
Anchor showPreviewLabel;
// save attachment
private Attachment attachment; private Attachment attachment;
public AttachmentPreviewer(final Attachment attachment) { public AttachmentPreviewer(Attachment a) {
initWidget(uiBinder.createAndBindUi(this)); 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 @Override
public void onClick(ClickEvent event) { 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);
}-*/;
} }

View File

@ -1,9 +1,61 @@
<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent"> <!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder" <ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
xmlns:g="urn:import:com.google.gwt.user.client.ui"> 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> </ui:UiBinder>

View File

@ -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);
}
}
}

View File

@ -36,7 +36,6 @@ import com.google.gwt.uibinder.client.UiHandler;
import com.google.gwt.user.client.Timer; import com.google.gwt.user.client.Timer;
import com.google.gwt.user.client.Window; import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.ui.Composite; 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.HTML;
import com.google.gwt.user.client.ui.HTMLPanel; import com.google.gwt.user.client.ui.HTMLPanel;
import com.google.gwt.user.client.ui.Image; import com.google.gwt.user.client.ui.Image;
@ -113,7 +112,7 @@ public class TweetTemplate extends Composite {
@UiField @UiField
VerticalPanel previewPanel; VerticalPanel previewPanel;
@UiField @UiField
FlowPanel attachmentPreviewPanel; Placeholder attachmentPreviewPanel;
@UiField @UiField
Label messageSeparator; Label messageSeparator;
/** /**
@ -133,10 +132,12 @@ public class TweetTemplate extends Composite {
isAppFeed = myFeed.getFeed().isApplicationFeed(); isAppFeed = myFeed.getFeed().isApplicationFeed();
Feed feed = myFeed.getFeed(); 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()) { 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())); previewPanel.add(new LinkPreviewer(feed.getLinkTitle(), feed.getLinkDescription(), feed.getLinkHost(), feed.getUriThumbnail(), feed.getUri()));
} }
this.eventBus = eventBus; this.eventBus = eventBus;
this.isUsers = myFeed.isUsers(); this.isUsers = myFeed.isUsers();
myComments = new ArrayList<SingleComment>(); 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 // 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 // remember that one attachment is stored in the fields: uri, uriThumbnail, linkTitle, linkDescription, linkHost
// build up an attachment // build up an attachment
@ -164,11 +166,19 @@ public class TweetTemplate extends Composite {
// add it to the panel // add it to the panel
attachmentPreviewPanel.add(new AttachmentPreviewer(firstAttachment)); 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"); openImage.setStyleName("openImage");

View File

@ -16,7 +16,7 @@
<g:HTML styleName="" ui:field="seeMore" /> <g:HTML styleName="" ui:field="seeMore" />
</div> </div>
<g:VerticalPanel ui:field="previewPanel"></g:VerticalPanel> <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"> <div class="tweet-actions">
<table cellspacing="0" cellpadding="0"> <table cellspacing="0" cellpadding="0">
<tbody> <tbody>

View File

@ -38,27 +38,24 @@ table {
font-size: 11px; font-size: 11px;
letter-spacing: normal; letter-spacing: normal;
line-height: normal; line-height: normal;
border: 1px solid transparent; border: 1px solid transparent;
margin-left: 5px; margin-left: 5px;
width: 430px; width: 430px;
min-height: 30px; 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 { .post-comment {
padding: 4px 2px; padding: 4px 2px;
color: #999; color: #999;
background-color: transparent; background-color: transparent;
margin-top: 0px; margin-top: 0px;
font-family: 'Lucida Grande', Verdana, 'Bitstream Vera Sans', Arial, font-family: 'Lucida Grande', Verdana, 'Bitstream Vera Sans', Arial,
sans-serif; sans-serif;
font-size: 11px; font-size: 11px;
letter-spacing: normal; letter-spacing: normal;
line-height: normal; line-height: normal;
border: 1px solid #C3CDE7; border: 1px solid #C3CDE7;
margin-left: 5px; margin-left: 5px;
width: 430px; width: 430px;
@ -70,7 +67,6 @@ table {
} }
/* DIV trick ends here */ /* DIV trick ends here */
.framed { .framed {
margin: 0 0 10px; margin: 0 0 10px;
padding: 10px; padding: 10px;
@ -187,13 +183,30 @@ table {
background-image: url("images/arrow-right.png"); background-image: url("images/arrow-right.png");
} }
.filter-selected a { .filter-selected a {
color: #336699 !important; color: #336699 !important;
font-weight: bold; font-weight: bold;
} }
/* Other */ /* 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 { .linkpreview-image {
margin: 3px; margin: 3px;
width: 80px; width: 80px;
@ -247,7 +260,6 @@ table {
padding-left: 5px; padding-left: 5px;
} }
.comment-hidden { .comment-hidden {
opacity: 0; opacity: 0;
} }