From e2bec3c086ba214f19c0ae631dcbd00b21363688 Mon Sep 17 00:00:00 2001 From: Massimiliano Assante Date: Mon, 8 Apr 2019 16:30:59 +0000 Subject: [PATCH] Feature #16452, Revise posts look and feel git-svn-id: http://svn.research-infrastructures.eu/public/d4science/gcube/trunk/portlets/user/news-feed@178920 82a268e6-3cf1-43bd-a215-b396298e98cf --- .settings/org.eclipse.wst.common.component | 2 +- distro/changelog.xml | 1 + .../client/ui/AvatarReplacement.ui.xml | 38 +++-- .../ui/AvatarReplacement4Comments.ui.xml | 2 + .../newsfeed/client/ui/SingleComment.ui.xml | 3 +- .../newsfeed/client/ui/TweetTemplate.java | 138 ++++++++---------- .../newsfeed/client/ui/TweetTemplate.ui.xml | 68 +++++---- src/main/webapp/NewsFeed.css | 66 ++++++--- 8 files changed, 179 insertions(+), 139 deletions(-) diff --git a/.settings/org.eclipse.wst.common.component b/.settings/org.eclipse.wst.common.component index d0b0f2e..37ef0e0 100644 --- a/.settings/org.eclipse.wst.common.component +++ b/.settings/org.eclipse.wst.common.component @@ -8,7 +8,7 @@ uses - + uses diff --git a/distro/changelog.xml b/distro/changelog.xml index 1e41165..d12481b 100644 --- a/distro/changelog.xml +++ b/distro/changelog.xml @@ -4,6 +4,7 @@ Feature #16205: News Feed avoid refresh page when user is commenting Minor CSS fix for anchors links font size Bug fix #16225 mentions and replies http links not working in some email notifications + Feature #16452, Revise posts look and feel diff --git a/src/main/java/org/gcube/portlets/user/newsfeed/client/ui/AvatarReplacement.ui.xml b/src/main/java/org/gcube/portlets/user/newsfeed/client/ui/AvatarReplacement.ui.xml index 7cc4c7e..8bb8fcd 100644 --- a/src/main/java/org/gcube/portlets/user/newsfeed/client/ui/AvatarReplacement.ui.xml +++ b/src/main/java/org/gcube/portlets/user/newsfeed/client/ui/AvatarReplacement.ui.xml @@ -2,22 +2,28 @@ - .avatar-frame { - border: 1px solid #E6E6E6; - padding: 2px; - } - .avatar-replacement { - display: table-cell; - text-align: center; - vertical-align: middle; - font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; - font-weight: 300; - font-size: 22px; - padding: 0; - color: #FFF; - } + .avatar-frame { + border-radius: 2em; + border: 1px solid #E6E6E6; + padding: 2px; + } + + .avatar-replacement { + border-radius: 2em; + display: table-cell; + text-align: center; + vertical-align: middle; + font-family: "HelveticaNeue-Light", "Helvetica Neue Light", + "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; + font-weight: 300; + font-size: 22px; + padding: 0; + color: #FFF; + } - - + + \ No newline at end of file diff --git a/src/main/java/org/gcube/portlets/user/newsfeed/client/ui/AvatarReplacement4Comments.ui.xml b/src/main/java/org/gcube/portlets/user/newsfeed/client/ui/AvatarReplacement4Comments.ui.xml index f469201..c492de3 100644 --- a/src/main/java/org/gcube/portlets/user/newsfeed/client/ui/AvatarReplacement4Comments.ui.xml +++ b/src/main/java/org/gcube/portlets/user/newsfeed/client/ui/AvatarReplacement4Comments.ui.xml @@ -3,11 +3,13 @@ xmlns:g="urn:import:com.google.gwt.user.client.ui"> .avatar-frame { + border-radius: 2em; border: 1px solid #E6E6E6; padding: 2px; } .avatar-replacement { display: table-cell; + border-radius: 2em; text-align: center; vertical-align: middle; font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; diff --git a/src/main/java/org/gcube/portlets/user/newsfeed/client/ui/SingleComment.ui.xml b/src/main/java/org/gcube/portlets/user/newsfeed/client/ui/SingleComment.ui.xml index 062b0b2..82d0fe8 100644 --- a/src/main/java/org/gcube/portlets/user/newsfeed/client/ui/SingleComment.ui.xml +++ b/src/main/java/org/gcube/portlets/user/newsfeed/client/ui/SingleComment.ui.xml @@ -10,9 +10,8 @@ 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 a3e2fd7..472bb11 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 @@ -6,7 +6,6 @@ package org.gcube.portlets.user.newsfeed.client.ui; import java.util.ArrayList; import java.util.Date; import java.util.Iterator; -import java.util.List; import org.gcube.common.portal.GCubePortalConstants; import org.gcube.portal.databook.client.GCubeSocialNetworking; @@ -28,7 +27,6 @@ import org.gcube.portlets.widgets.imagepreviewerwidget.client.ui.Carousel; import com.github.gwtbootstrap.client.ui.Button; import com.google.gwt.core.client.GWT; -import com.google.gwt.core.client.RunAsyncCallback; import com.google.gwt.dom.client.Style.Unit; import com.google.gwt.event.dom.client.ClickEvent; import com.google.gwt.event.dom.client.ClickHandler; @@ -40,12 +38,12 @@ import com.google.gwt.uibinder.client.UiBinder; import com.google.gwt.uibinder.client.UiField; 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.Window.Location; import com.google.gwt.user.client.ui.Composite; import com.google.gwt.user.client.ui.HTML; import com.google.gwt.user.client.ui.HTMLPanel; import com.google.gwt.user.client.ui.Image; +import com.google.gwt.user.client.ui.InlineLabel; import com.google.gwt.user.client.ui.Label; import com.google.gwt.user.client.ui.VerticalPanel; import com.google.gwt.user.client.ui.Widget; @@ -66,9 +64,9 @@ public class TweetTemplate extends Composite { public static final String loading = GWT.getModuleBaseURL() + "../images/loading-comments.gif"; - private static final int MAX_SHOWTEXT_LENGTH = 256; + private static final int MAX_SHOWTEXT_LENGTH = 512; - private EnhancedFeed myFeed; + private EnhancedFeed myPost; private UserInfo myUserInfo; private HandlerManager eventBus; @@ -77,7 +75,7 @@ public class TweetTemplate extends Composite { private boolean commentsFetched = false; private int totalComments = 0; private HTML showAllComments = new HTML(); - private boolean isAppFeed = false; + private boolean isAppPost = false; private HTML submitCommentPreloader = new HTML("
"); private TweetTemplate myInstance; @@ -92,16 +90,20 @@ public class TweetTemplate extends Composite { @UiField HTML contentArea; @UiField + HTML postOwnerArea; + @UiField HTML seeMore; @UiField - HTML timeArea; + InlineLabel timeArea; + @UiField + InlineLabel separator; + @UiField + InlineLabel vreSourceInMetadata; @UiField HTML likeArea; @UiField HTML commentArea; @UiField - HTML sharePostArea; - @UiField Image avatarImage; @UiField AvatarReplacement avatarReplacement; @@ -118,8 +120,6 @@ public class TweetTemplate extends Composite { @UiField HTML openImage; @UiField - HTML vreSource; - @UiField VerticalPanel previewPanel; @UiField Placeholder attachmentPreviewPanel; @@ -128,12 +128,12 @@ public class TweetTemplate extends Composite { /** * used when fetching tweets from server * @param myUserInfo - * @param myFeed + * @param myPost * @param isUsers * @param displaySingle tells if you're displaying a single fedd or not * @param eventBus */ - public TweetTemplate(boolean displaySingle, boolean showTimelineSource, UserInfo myUserInfo, EnhancedFeed myFeed, HandlerManager eventBus) { + public TweetTemplate(boolean displaySingle, boolean showTimelineSource, UserInfo myUserInfo, EnhancedFeed myPost, HandlerManager eventBus) { initWidget(uiBinder.createAndBindUi(this)); commentsNo.getElement().getStyle().setPaddingTop(0, Unit.PX); likesNo.getElement().getStyle().setPaddingTop(0, Unit.PX); @@ -144,12 +144,13 @@ public class TweetTemplate extends Composite { myInstance = this; this.myUserInfo = myUserInfo; - this.vreSource.setVisible(false); - this.myFeed = myFeed; - isAppFeed = myFeed.getFeed().isApplicationFeed(); - Feed feed = myFeed.getFeed(); + this.vreSourceInMetadata.setVisible(false); + this.separator.setVisible(false); + this.myPost = myPost; + isAppPost = myPost.getFeed().isApplicationFeed(); + Feed feed = myPost.getFeed(); this.eventBus = eventBus; - this.isUsers = myFeed.isUsers(); + this.isUsers = myPost.isUsers(); this.carousel = new Carousel(); myComments = new ArrayList(); @@ -248,7 +249,7 @@ public class TweetTemplate extends Composite { attachmentPreviewPanel.add(firstAttachmentPreviewer); // check the others - for (Attachment otherAttachment : myFeed.getAttachments()) { + for (Attachment otherAttachment : myPost.getAttachments()) { AttachmentPreviewer attachmentPreviewer = new AttachmentPreviewer(otherAttachment); @@ -291,7 +292,7 @@ public class TweetTemplate extends Composite { openImage.setStyleName("openImage"); openImage.setTitle("Open this feed separately"); //show if the user has already liked this or not - setFavoritedUI(myFeed.isLiked()); + setFavoritedUI(myPost.isLiked()); commentArea.setHTML("" + NewsFeedPanel.COMMENT_LABEL + ""); @@ -305,7 +306,7 @@ public class TweetTemplate extends Composite { } avatarImage.setUrl(feed.getThumbnailURL()); - avatarImage.setPixelSize(50, 50); + avatarImage.setPixelSize(40, 40); //replace the < & and > feedText = feedText.replaceAll("<","<").replaceAll(">",">"); @@ -313,19 +314,28 @@ public class TweetTemplate extends Composite { final String profilePageURL = GCubePortalConstants.PREFIX_GROUP_URL + NewsFeedPanel.extractOrgFriendlyURL(Location.getHref()) +GCubePortalConstants.USER_PROFILE_FRIENDLY_URL; - //show the vreid iff the info is present - this.vreSource.setVisible(true); + + if (showTimelineSource && feed.getVreid() != null && feed.getVreid().compareTo("") != 0) { + this.vreSourceInMetadata.setVisible(true); + this.separator.setVisible(true); String vreName = feed.getVreid().substring(feed.getVreid().lastIndexOf("/")+1); - vreSource.setHTML("[" +vreName + "]"); + vreSourceInMetadata.setText(vreName); + vreSourceInMetadata.addClickHandler(new ClickHandler() { + @Override + public void onClick(ClickEvent event) { + Location.assign("/group/"+vreName.toLowerCase()); + } + }); } - - if (! isAppFeed) { + + if (! isAppPost) { // sharePostArea.setHTML("" + NewsFeedPanel.SHARE_FWD_LABEL + ""); - contentArea.setHTML(""+feed.getFullName()+" " + feedText); + Encoder.encode(feed.getEntityId())+"\">"+feed.getFullName()+""); + contentArea.setHTML(feedText); //check if the user has his own avatar if (feed.getThumbnailURL().contains("img_id=0") || !feed.getThumbnailURL().contains("?")) { //it means no avatar is set @@ -348,17 +358,14 @@ public class TweetTemplate extends Composite { } else { // messageSeparator.setVisible(false); - contentArea.setHTML(""+feed.getFullName()+" " + feedText); - if (isAppFeed) { + postOwnerArea.setHTML(""+feed.getFullName()+""); + contentArea.setHTML(feedText); + + if (isAppPost) { if (myUserInfo.isAdmin()) closeImage.setTitle("Delete this Application feed (Administrator Only)"); else closeImage.removeFromParent(); - try{ - String vreName = feed.getVreid().substring(feed.getVreid().lastIndexOf("/")+1); - sharePostArea.setHTML(" - go App [" +vreName + "] - "); - } - catch (Exception e) {} } } @@ -372,7 +379,7 @@ public class TweetTemplate extends Composite { else formattedTime = DateTimeFormat.getFormat("MMMM dd, h:mm a").format(feed.getTime()); - timeArea.setHTML(formattedTime); + timeArea.setText(formattedTime); String formattedTimeWithYear = DateTimeFormat.getFormat("dd MMMM yyyy h:mm a ").format(feed.getTime()); timeArea.setTitle(formattedTimeWithYear); if (! feed.getCommentsNo().equals("0")) { @@ -391,16 +398,16 @@ public class TweetTemplate extends Composite { totalComments = 0; } catch (Exception e) { - timeArea.setHTML("just now"); + timeArea.setText("just now"); } commentsPanel.setStyleName("commentsPanel"); - if (myFeed.getComments() != null && myFeed.getComments().size() > 0) { + if (myPost.getComments() != null && myPost.getComments().size() > 0) { if (totalComments > 2 && !displaySingle) { showAllComments = getShowAllCommentsLink(totalComments); commentsPanel.add(showAllComments); commentsNo.setVisible(true); } - for (Comment comment : myFeed.getComments()) { + for (Comment comment : myPost.getComments()) { addComment(new SingleComment(comment, this, (comment.getUserid().equals(myUserInfo.getUsername())))); } showAddCommentForm(false); @@ -455,7 +462,7 @@ public class TweetTemplate extends Composite { @UiHandler("seeMore") void onSeeMoreClick(ClickEvent e) { - String feedText = myFeed.getFeed().getDescription(); + String feedText = myPost.getFeed().getDescription(); //replace the < & and > feedText = feedText.replaceAll("<","<").replaceAll(">",">"); feedText = feedText.replaceAll("&","&"); @@ -465,8 +472,8 @@ public class TweetTemplate extends Composite { contentArea.setHTML(""+ - myFeed.getFeed().getFullName()+" " + feedText); + Encoder.encode(myPost.getFeed().getEntityId())+"\">"+ + myPost.getFeed().getFullName()+" " + feedText); seeMore.setHTML(""); } @@ -488,19 +495,19 @@ public class TweetTemplate extends Composite { //if is not liked if (!likeArea.getText().equals(NewsFeedPanel.LIKED_LABEL)) { try { - int cur = Integer.parseInt(myFeed.getFeed().getLikesNo()); + int cur = Integer.parseInt(myPost.getFeed().getLikesNo()); cur++; if (cur == 1) { - myFeed.getFeed().setLikesNo("1"); + myPost.getFeed().setLikesNo("1"); likesNo.setText("1"); likesNo.setTitle("People who have " + NewsFeedPanel.LIKED_LABEL + " this"); likesNo.setVisible(true); } else { - myFeed.getFeed().setLikesNo(""+cur); + myPost.getFeed().setLikesNo(""+cur); likesNo.setText(""+cur); likesNo.setVisible(true); } - eventBus.fireEvent(new AddLikeEvent(this, myFeed.getFeed().getKey())); + eventBus.fireEvent(new AddLikeEvent(this, myPost.getFeed().getKey())); setFavoritedUI(true); } catch (NumberFormatException ex) { @@ -508,19 +515,19 @@ public class TweetTemplate extends Composite { } } else { //it is liked - int cur = Integer.parseInt(myFeed.getFeed().getLikesNo()); + int cur = Integer.parseInt(myPost.getFeed().getLikesNo()); cur--; if (cur == 0) { - myFeed.getFeed().setLikesNo("0"); + myPost.getFeed().setLikesNo("0"); likesNo.setText(""); likesNo.setVisible(false); likesNo.setTitle(""); } else { - myFeed.getFeed().setLikesNo(""+cur); + myPost.getFeed().setLikesNo(""+cur); likesNo.setText(""+cur); likesNo.setVisible(true); } - eventBus.fireEvent(new UnLikeEvent(this, myFeed.getFeed().getKey())); + eventBus.fireEvent(new UnLikeEvent(this, myPost.getFeed().getKey())); setFavoritedUI(false); } } @@ -539,25 +546,6 @@ public class TweetTemplate extends Composite { GWT.log("Commenting disabled"); } - @UiHandler("sharePostArea") - void onMessageClick(ClickEvent e) { - if (! isAppFeed) { - final List listToLogin = new ArrayList(); - listToLogin.add(myFeed.getFeed().getEntityId()); - GWT.runAsync(new RunAsyncCallback() { - @Override - public void onSuccess() { - SharePostDialog dlg = new SharePostDialog(myInstance); - dlg.openModal(); - } - public void onFailure(Throwable reason) { - Window.alert("Could not load this component: " + reason.getMessage()); - } - }); - - } - } - public void showAddCommentForm(boolean focus) { final AddCommentTemplate toAdd = new AddCommentTemplate(this, myUserInfo, eventBus); commentsPanel.add(toAdd); @@ -590,7 +578,7 @@ public class TweetTemplate extends Composite { @UiHandler("likesNo") void onSeeLikes(ClickEvent e) { - eventBus.fireEvent(new SeeLikesEvent(myFeed.getFeed().getKey())); + eventBus.fireEvent(new SeeLikesEvent(myPost.getFeed().getKey())); } @UiHandler("commentsNo") @@ -610,7 +598,7 @@ public class TweetTemplate extends Composite { this.commentingDisabled = commenting; } public String getFeedKey() { - return myFeed.getFeed().getKey(); + return myPost.getFeed().getKey(); } public void remove(Widget w) { @@ -692,15 +680,15 @@ public class TweetTemplate extends Composite { } public String getMyFeedUserId() { - return myFeed.getFeed().getEntityId(); + return myPost.getFeed().getEntityId(); } public String getMyFeedText() { - return myFeed.getFeed().getDescription(); + return myPost.getFeed().getDescription(); } public boolean isAppFeed() { - return isAppFeed; + return isAppPost; } public boolean isUser() { @@ -719,7 +707,7 @@ public class TweetTemplate extends Composite { * @return the context (scope) of the Post */ public String getVREContext() { - return this.myFeed.getFeed().getVreid(); + return this.myPost.getFeed().getVreid(); } /** 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 f60efd4..c12d93d 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 @@ -1,24 +1,48 @@ +
-
- - +
-
 
+ width="30px" height="30px" />
+ + + + + + +
+ + + +
+ + + ยท + +
+
+
+ +
- + +
- +
@@ -34,34 +58,24 @@ - - -
- + - + - - - - - - - +
-
- -
-
- - +
+
diff --git a/src/main/webapp/NewsFeed.css b/src/main/webapp/NewsFeed.css index 7d558ea..0860421 100644 --- a/src/main/webapp/NewsFeed.css +++ b/src/main/webapp/NewsFeed.css @@ -4,22 +4,58 @@ table { border-spacing: 0; } +a.linkProfile { + font-size: 14px; + font-weight: 600; + height: auto; + line-height: 19px; + cursor: pointer; +} + +.timeStampContent { + color: rgb(97, 103, 112); + font-size: 12px; + font-weight: normal; + height: auto; + line-height: 16px; +} +.vreSourceInMetadata { + color: rgb(97, 103, 112); + font-size: 12px; + font-weight: normal; + height: auto; + line-height: 16px; + cursor: pointer; +} + +.vreSourceInMetadata:hover { + text-decoration: underline; + cursor: pointer; +} + +img.member-photo { + border-radius: 2em; + display: block; + padding: 2px; + border: 1px solid #E6E6E6; +} + .result-hashtag { color: #555; font-size: 20px; } #newsfeedDIV .nav .dropdown-toggle .caret { - margin-top: 5px !important; + margin-top: 5px !important; border-top: 7px solid #000; - border-right: 7px solid transparent; - border-left: 7px solid transparent; - border-top-color: #08c; - order-bottom-color: #08c; + border-right: 7px solid transparent; + border-left: 7px solid transparent; + border-top-color: #08c; + order-bottom-color: #08c; } -#newsfeedDIV .nav-pills > li.disabled > a { - padding-right: 0; +#newsfeedDIV .nav-pills>li.disabled>a { + padding-right: 0; } .image-preview-attachment { @@ -274,12 +310,6 @@ div#comment-inputContainer textarea.post-comment.comment-dark-color { line-height: 14px; } -img.member-photo { - display: block; - padding: 2px; - border: 1px solid #E6E6E6; -} - .comment-hidden { opacity: 0; } @@ -506,7 +536,7 @@ a.person-link { } .div-table-col.content { - padding-left: 10px; + padding-top: 7px; vertical-align: top; } @@ -575,8 +605,8 @@ div.tweet-content a.link { width: 260px; } /* div.attachment-preview-container { */ -/* width: 300px; */ -/* } */ + /* width: 300px; */ + /* } */ .linkpreview-desc, .linkpreview-url, .linkpreview-image { display: none; } @@ -607,8 +637,8 @@ div.tweet-content a.link { width: 260px; } /* div.attachment-preview-container { */ -/* width: 300px; */ -/* } */ + /* width: 300px; */ + /* } */ .new-feeds-show { width: 260px; }