From c8019b81000d5e5482d2dcee236538a223ef0345 Mon Sep 17 00:00:00 2001 From: Costantino Perciante Date: Wed, 20 Jan 2016 17:49:31 +0000 Subject: [PATCH] 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 --- .../user/newsfeed/client/NewsFeed.java | 2 - .../newsfeed/client/panels/NewsFeedPanel.java | 17 ++-- .../client/ui/AttachmentPreviewer.java | 72 ++++++++++----- .../client/ui/AttachmentPreviewer.ui.xml | 62 +++++++++++-- .../user/newsfeed/client/ui/Placeholder.java | 90 +++++++++++++++++++ .../newsfeed/client/ui/TweetTemplate.java | 22 +++-- .../newsfeed/client/ui/TweetTemplate.ui.xml | 2 +- src/main/webapp/NewsFeed.css | 40 ++++++--- 8 files changed, 253 insertions(+), 54 deletions(-) create mode 100644 src/main/java/org/gcube/portlets/user/newsfeed/client/ui/Placeholder.java diff --git a/src/main/java/org/gcube/portlets/user/newsfeed/client/NewsFeed.java b/src/main/java/org/gcube/portlets/user/newsfeed/client/NewsFeed.java index 411eda8..a2fd034 100644 --- a/src/main/java/org/gcube/portlets/user/newsfeed/client/NewsFeed.java +++ b/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 { diff --git a/src/main/java/org/gcube/portlets/user/newsfeed/client/panels/NewsFeedPanel.java b/src/main/java/org/gcube/portlets/user/newsfeed/client/panels/NewsFeedPanel.java index 4125846..0508034 100644 --- a/src/main/java/org/gcube/portlets/user/newsfeed/client/panels/NewsFeedPanel.java +++ b/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 attachments = cFeed.getAttachments() == null ? null : new ArrayList(cFeed.getAttachments()); + ArrayList attachments = multiAttachments ? new ArrayList(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); } /** diff --git a/src/main/java/org/gcube/portlets/user/newsfeed/client/ui/AttachmentPreviewer.java b/src/main/java/org/gcube/portlets/user/newsfeed/client/ui/AttachmentPreviewer.java index fd7c800..c99e0da 100644 --- a/src/main/java/org/gcube/portlets/user/newsfeed/client/ui/AttachmentPreviewer.java +++ b/src/main/java/org/gcube/portlets/user/newsfeed/client/ui/AttachmentPreviewer.java @@ -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); - }-*/; } diff --git a/src/main/java/org/gcube/portlets/user/newsfeed/client/ui/AttachmentPreviewer.ui.xml b/src/main/java/org/gcube/portlets/user/newsfeed/client/ui/AttachmentPreviewer.ui.xml index e9c5bd5..584d315 100644 --- a/src/main/java/org/gcube/portlets/user/newsfeed/client/ui/AttachmentPreviewer.ui.xml +++ b/src/main/java/org/gcube/portlets/user/newsfeed/client/ui/AttachmentPreviewer.ui.xml @@ -1,9 +1,61 @@ - - - - - + + .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; + } + + + + + + + + - + + + + \ No newline at end of file diff --git a/src/main/java/org/gcube/portlets/user/newsfeed/client/ui/Placeholder.java b/src/main/java/org/gcube/portlets/user/newsfeed/client/ui/Placeholder.java new file mode 100644 index 0000000..ce3a8c4 --- /dev/null +++ b/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); + } + } +} diff --git a/src/main/java/org/gcube/portlets/user/newsfeed/client/ui/TweetTemplate.java b/src/main/java/org/gcube/portlets/user/newsfeed/client/ui/TweetTemplate.java index 803521c..c94e5fc 100644 --- a/src/main/java/org/gcube/portlets/user/newsfeed/client/ui/TweetTemplate.java +++ b/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(); @@ -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"); diff --git a/src/main/java/org/gcube/portlets/user/newsfeed/client/ui/TweetTemplate.ui.xml b/src/main/java/org/gcube/portlets/user/newsfeed/client/ui/TweetTemplate.ui.xml index 015445a..c5faaf9 100644 --- a/src/main/java/org/gcube/portlets/user/newsfeed/client/ui/TweetTemplate.ui.xml +++ b/src/main/java/org/gcube/portlets/user/newsfeed/client/ui/TweetTemplate.ui.xml @@ -16,7 +16,7 @@ - +
diff --git a/src/main/webapp/NewsFeed.css b/src/main/webapp/NewsFeed.css index da453d0..2f2a0c7 100644 --- a/src/main/webapp/NewsFeed.css +++ b/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; /* 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;