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
parent
a028ef42fa
commit
c8019b8100
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -3,22 +3,25 @@ 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
|
||||
*
|
||||
*/
|
||||
public class AttachmentPreviewer extends Composite{
|
||||
public class AttachmentPreviewer extends Composite {
|
||||
|
||||
private static AttachmentPreviewerUiBinder uiBinder = GWT
|
||||
.create(AttachmentPreviewerUiBinder.class);
|
||||
|
|
@ -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
|
||||
printJSLOG(attachment.toString());
|
||||
// save the attachment
|
||||
attachment = a;
|
||||
|
||||
// save it
|
||||
this.attachment = attachment;
|
||||
// set image preview
|
||||
imagePreview.setUrl(a.getThumbnailURL());
|
||||
|
||||
// set label
|
||||
attachmentFileName.setText(attachment.getName());
|
||||
// set file name
|
||||
String shownName = a.getName().length() > 21 ? a.getName().substring(0, 15) + "..." : a.getName();
|
||||
fileNameLabel.setText(shownName);
|
||||
fileNameLabel.setTitle(a.getName());
|
||||
|
||||
// set thumbnail
|
||||
if(attachment.getThumbnailURL() != null)
|
||||
attachmentPreviewImage.setUrl(attachment.getThumbnailURL());
|
||||
// download label
|
||||
downloadLabel.setText("Download");
|
||||
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);
|
||||
}-*/;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
<g:Label ui:field="attachmentFileName"></g:Label>
|
||||
<g:Image ui:field="attachmentPreviewImage">
|
||||
</g:Image>
|
||||
</g:AbsolutePanel>
|
||||
<ui:style>
|
||||
.image-preview {
|
||||
align: left;
|
||||
margin: 5px;
|
||||
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>
|
||||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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");
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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; /* this is very important when usere paste long links*/
|
||||
word-wrap: break-word;
|
||||
/* 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;
|
||||
}
|
||||
|
|
@ -259,7 +271,7 @@ table {
|
|||
-moz-transition: opacity .45s ease-in-out;
|
||||
-webkit-transition: opacity .45s ease-in-out;
|
||||
-ms-transition: opacity .45s ease-in-out;
|
||||
width:494px;
|
||||
width: 494px;
|
||||
}
|
||||
|
||||
.commentsPanel {
|
||||
|
|
@ -376,7 +388,7 @@ table {
|
|||
white-space: nowrap;
|
||||
}
|
||||
|
||||
a.seemore,a.seemore:visited {
|
||||
a.seemore, a.seemore:visited {
|
||||
font-family: 'Lucida Grande', Verdana, 'Bitstream Vera Sans', Arial,
|
||||
sans-serif;
|
||||
cursor: pointer;
|
||||
|
|
@ -398,7 +410,7 @@ a.person-link {
|
|||
color: #3B5998;
|
||||
}
|
||||
|
||||
a.person-link,a.person-link:visited {
|
||||
a.person-link, a.person-link:visited {
|
||||
cursor: pointer;
|
||||
cursor: hand;
|
||||
font-size: 16x;
|
||||
|
|
@ -456,13 +468,13 @@ a.person-link:hover {
|
|||
background: url("images/star_blue.png") no-repeat left;
|
||||
}
|
||||
|
||||
.tweet-actions .likes-number:hover,.show-comments-number:hover {
|
||||
.tweet-actions .likes-number:hover, .show-comments-number:hover {
|
||||
opacity: 0.8;
|
||||
cursor: pointer;
|
||||
cursor: hand;
|
||||
}
|
||||
|
||||
.tweet-actions .comments-number,.show-comments-number {
|
||||
.tweet-actions .comments-number, .show-comments-number {
|
||||
color: #3B5998;
|
||||
width: 20px;
|
||||
padding-left: 25px;
|
||||
|
|
@ -484,7 +496,7 @@ a.person-link:hover {
|
|||
text-decoration: underline;
|
||||
}
|
||||
|
||||
a.link,a.link:active,a.link:visited {
|
||||
a.link, a.link:active, a.link:visited {
|
||||
font-family: 'Lucida Grande', Verdana, 'Bitstream Vera Sans', Arial,
|
||||
sans-serif;
|
||||
font-size: 12px;
|
||||
|
|
|
|||
Loading…
Reference in New Issue