From f5779c5372aad26536d1809aa74795907fbdca34 Mon Sep 17 00:00:00 2001 From: Massimiliano Assante Date: Thu, 2 Oct 2014 22:33:14 +0000 Subject: [PATCH] added possibility to include trigger char in search (for hashtags) git-svn-id: http://svn.research-infrastructures.eu/public/d4science/gcube/trunk/portlets/widgets/pickitem-widget@100401 82a268e6-3cf1-43bd-a215-b396298e98cf --- .../widgets/pickitem/client/PickItem.java | 17 ++++---- .../pickitem/client/bundle/PickItem.css | 32 ++++++++++++--- .../client/dialog/PickItemsDialog.java | 39 ++++++++++++++----- 3 files changed, 65 insertions(+), 23 deletions(-) diff --git a/src/main/java/org/gcube/portlets/widgets/pickitem/client/PickItem.java b/src/main/java/org/gcube/portlets/widgets/pickitem/client/PickItem.java index 61f052e..4032f20 100644 --- a/src/main/java/org/gcube/portlets/widgets/pickitem/client/PickItem.java +++ b/src/main/java/org/gcube/portlets/widgets/pickitem/client/PickItem.java @@ -37,18 +37,19 @@ public class PickItem implements EntryPoint { private void sample() { HandlerManager eventbus = new HandlerManager(null); ArrayList users = new ArrayList(); - users.add(new ItemBean("id", "test.user1", "Test Foo", "phot URL")); - users.add(new ItemBean("id", "test.user2", "Test Fie", "phot URL")); - users.add(new ItemBean("id", "test.user3", "Abba Foo", "phot URL")); - users.add(new ItemBean("id", "test.user4", "ABabba Fie", "phot URL")); - users.add(new ItemBean("id", "test.user5", "ACaro Foo", "phot URL")); - users.add(new ItemBean("id", "test.user6", "Dario Fie", "phot URL")); - users.add(new ItemBean("id", "test.user7", "Ergo Fie", "phot URL")); + users.add(new ItemBean("id", "test.user1", "TestFoo", "phot URL")); + users.add(new ItemBean("id", "test.user2", "TestFie", "phot URL")); + users.add(new ItemBean("id", "test.user3", "tAbbaFoo", "phot URL")); + users.add(new ItemBean("id", "test.user4", "#ABabbaFie", "phot URL")); + users.add(new ItemBean("id", "test.user5", "#ACaroFoo", "phot URL")); + users.add(new ItemBean("id", "test.user6", "#DarioFie", "phot URL")); + users.add(new ItemBean("id", "test.user7", "#ErgoFie", "phot URL")); final TextBox tb = new TextBox(); final int popUpY = tb.getAbsoluteTop()+30; - final PickItemsDialog pickUserDlg = new PickItemsDialog('#', users, eventbus, 300, true); + final PickItemsDialog pickUserDlg = new PickItemsDialog('#', users, eventbus, 300); + pickUserDlg.withTriggerCharIncluded(); tb.addKeyUpHandler(new KeyUpHandler() { @Override public void onKeyUp(KeyUpEvent event) { diff --git a/src/main/java/org/gcube/portlets/widgets/pickitem/client/bundle/PickItem.css b/src/main/java/org/gcube/portlets/widgets/pickitem/client/bundle/PickItem.css index 1a9f02b..fd2bdfc 100644 --- a/src/main/java/org/gcube/portlets/widgets/pickitem/client/bundle/PickItem.css +++ b/src/main/java/org/gcube/portlets/widgets/pickitem/client/bundle/PickItem.css @@ -1,7 +1,7 @@ -@external pick-item, pickDialog, pick-label, pickperson, pickperson-selected, pickperson-photo, user-table, user-table-row, user-table-col, user-table-col.content, .user-table-col.smallphoto, user-token, content, smallphoto; +@external pickitem-selected, pickitem, pick-item, pickDialog, pick-label, pickperson, pickperson-selected, pickperson-photo, user-table, user-table-row, user-table-col, user-table-col.content, .user-table-col.smallphoto, user-token, content, smallphoto; .pickDialog { - border: 1px solid #333; + border: 1px solid #CCC; background-color: #FFF; } @@ -13,19 +13,18 @@ } .pick-item { + padding: 7px 10px 7px; font-family: 'Helvetica Neue', Arial, sans-serif; - font-size: 13px; + font-size: 15px; + line-height: 18px; color: inherit; - padding: 0 4px; } - .pickperson { color: #0B61A4; cursor: pointer; cursor: hand; background: #FFF; - -webkit-transition: background-color .25s ease-in-out; -moz-transition: background-color .25s ease-in-out; -o-transition: background-color .25s ease-in-out; @@ -37,6 +36,27 @@ color: whitesmoke; } +.pickitem-selected { + background-color: #0B61A4; + color: whitesmoke; +} + +.pickitem { + color: #66757f; + cursor: pointer; + cursor: hand; + background: #FFF; + -webkit-transition: background-color .25s ease-in-out; + -moz-transition: background-color .25s ease-in-out; + -o-transition: background-color .25s ease-in-out; + transition: background-color .25s ease-in-out; +} + +.pickitem:active,.pickitem:focus,.pickitem:hover { + background-color: #0B61A4; + color: whitesmoke; +} + .pickperson:active,.pickperson:focus,.pickperson:hover { background-color: #033E6B; color: whitesmoke; diff --git a/src/main/java/org/gcube/portlets/widgets/pickitem/client/dialog/PickItemsDialog.java b/src/main/java/org/gcube/portlets/widgets/pickitem/client/dialog/PickItemsDialog.java index e310212..f2ed114 100644 --- a/src/main/java/org/gcube/portlets/widgets/pickitem/client/dialog/PickItemsDialog.java +++ b/src/main/java/org/gcube/portlets/widgets/pickitem/client/dialog/PickItemsDialog.java @@ -9,7 +9,6 @@ import org.gcube.portlets.widgets.pickitem.client.uibinder.SelectableItem; import org.gcube.portlets.widgets.pickitem.client.uibinder.WithPhotoTemplate; import org.gcube.portlets.widgets.pickitem.shared.ItemBean; -import com.google.gwt.core.client.GWT; import com.google.gwt.event.dom.client.KeyCodes; import com.google.gwt.event.dom.client.MouseDownEvent; import com.google.gwt.event.dom.client.MouseDownHandler; @@ -61,25 +60,29 @@ public class PickItemsDialog extends PopupPanel { //needed because is selected when it popups private Widget first; private boolean hasPhoto; + private boolean includeTriggerChar; static { CssAndImages.INSTANCE.css().ensureInjected(); } + /** * @param triggerChar the 'single char' used to trigger the items list show, e.g. '@', '#' .... * @param the list of user to pick * @param eventBus the event bus on where the widget will fire the selected user event * @param widthInPixel the desired width (grater than 199 pixel) * @param hasPhoto tell of you have want to show photo for the item or not + * @param includeTriggerChar true if your suggestions start with the trigger char (e.g. #anHashTag triggered by #) false otherwise */ - public PickItemsDialog(char triggerChar, ArrayList users, final HandlerManager eventBus, int widthInPixel, boolean hasPhoto) { + public PickItemsDialog(char triggerChar, ArrayList users, final HandlerManager eventBus, int widthInPixel) { super(true, false); if (widthInPixel < 200) { throw new IllegalArgumentException("width must be greater than 199"); } this.eventBus = eventBus; this.triggerChar = ""+triggerChar; - this.hasPhoto = hasPhoto; + this.includeTriggerChar = false; + this.hasPhoto = false; this.users = users; focusPanel.setWidth(widthInPixel+"px"); mainPanel.setWidth(widthInPixel+"px"); @@ -97,8 +100,9 @@ public class PickItemsDialog extends PopupPanel { focusPanel.addMouseOverHandler(new MouseOverHandler() { @Override public void onMouseOver(MouseOverEvent event) { + String styleSelected = hasPhoto ? "pickperson-selected" : "pickitem-selected"; if (first != null) - first.removeStyleName("pickperson-selected"); + first.removeStyleName(styleSelected); } }); @@ -116,7 +120,19 @@ public class PickItemsDialog extends PopupPanel { } }); } - + /** + * use if you have want to show a photo for the item or not, remember to provide it in {@link ItemBean} instances + */ + public void withPhoto() { + hasPhoto = true; + } + /** + * use to include the trigger char in search if your suggestions start with the trigger char (e.g. #anHashTag triggered by #) + */ + public void withTriggerCharIncluded() { + includeTriggerChar = true; + } + private void handleMouseDown() { SelectableItem ut = (SelectableItem) mainPanel.getWidget(displayIndexSelected); eventBus.fireEvent(new PickedItemEvent(new ItemBean("id", "username", ut.getItemName(), "thumb"), this.triggerChar)); @@ -157,7 +173,10 @@ public class PickItemsDialog extends PopupPanel { String[] splitted = toSplit.split(triggerChar); //get the interesting part if (splitted[1].trim().length() > 0) { - showSuggestions(splitted[1]); + if (includeTriggerChar) + showSuggestions(triggerChar+splitted[1]); + else + showSuggestions(splitted[1]); return true; } hide(); @@ -207,7 +226,8 @@ public class PickItemsDialog extends PopupPanel { for (Suggestion s : response.getSuggestions()) { if (i == 0) { first = getUserTemplate(getUserModelBySuggestion(s), i, hasPhoto); - first.addStyleName("pickperson-selected"); + String styleSelected = hasPhoto ? "pickperson-selected" : "pickitem-selected"; + first.addStyleName(styleSelected); mainPanel.add(first); } else @@ -241,14 +261,15 @@ public class PickItemsDialog extends PopupPanel { * @param displayIndex */ public void select(int displayIndex) { + String styleSelected = hasPhoto ? "pickperson-selected" : "pickitem-selected"; for (int i = 0; i < mainPanel.getWidgetCount(); i++) { Widget ut = (Widget) mainPanel.getWidget(i); if (i == displayIndex) { - ut.addStyleName("pickperson-selected"); + ut.addStyleName(styleSelected); displayIndexSelected = i; } else - ut.removeStyleName("pickperson-selected"); + ut.removeStyleName(styleSelected); } } }