gCubeSystem
/
share-updates
15
1
Fork 0
Code Issues Pull Requests Releases Wiki Activity

added TagBox 

git-svn-id: https://svn.research-infrastructures.eu/d4science/gcube/trunk/portlets/user/share-updates@73365 82a268e6-3cf1-43bd-a215-b396298e98cf
This commit is contained in:
Massimiliano Assante 2013-04-15 22:57:45 +00:00
parent e121cff500
commit c7c5f6d2f6
8 changed files with 84 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/main/java/org/gcube/portlets/user/shareupdates/client/dialog/PickUsersDialog.java
View File

@ -62,12 +62,17 @@ public class PickUsersDialog extends PopupPanel {
setWidget(focusPanel);
setStyleName("pickDialog");
oracle.add("Massi Assante");
oracle.add("Gino Strada");
oracle.add("Massimiliano Assante");
oracle.add("Pasquale Pagano");
oracle.add("Leonardo Candela");
oracle.add("Anton Ellenbroek");
oracle.add("Ward Appeltans");
oracle.add("Gianpaolo Coro");
oracle.add("Federico De Faveri");
oracle.add("Marco Pozzi");
oracle.add("Marino Marini");
oracle.add("Franco Zoppi");
oracle.add("Anna Mazza");
oracle.add("Valentina Marioli");
oracle.add("Antonio Gioia");
//remove the first selected when hovering
@ -138,9 +143,15 @@ public class PickUsersDialog extends PopupPanel {
case DELETE:
hide();
case ENTER: //selectd with keyboard
SingleUserTemplate ut = (SingleUserTemplate) mainPanel.getWidget(displayIndexSelected);
SingleUserTemplate ut = null;
if (mainPanel.getWidgetCount() > 0) {
if (displayIndexSelected < 0) //when there's only one left sometimes here i get -sth, no time to see why :)
ut = (SingleUserTemplate) mainPanel.getWidget(0);
else
ut = (SingleUserTemplate) mainPanel.getWidget(displayIndexSelected);
eventBus.fireEvent(new PickedUserEvent(new PickingUser("id", "username", ut.getFullName(), "thumb")));
hide();
}
break;
default:
break;

6
src/main/java/org/gcube/portlets/user/shareupdates/client/elements/Div.java → src/main/java/org/gcube/portlets/user/shareupdates/client/elements/ContentEditDiv.java
View File

@ -10,16 +10,16 @@ import com.google.gwt.user.client.ui.HasText;
* @author Massimiliano Assante, ISTI-CNR
*
*/
public class Div extends HTML implements HasText {
public class ContentEditDiv extends HTML implements HasText {
public Div() {
public ContentEditDiv() {
super(DOM.createElement("div"));
//important to make it act like a textarea
DOM.setElementAttribute(getElement(), "contentEditable", "true");
DOM.setElementAttribute(getElement(), "id", "mycontentEditableElement");
}
public Div(String text) {
public ContentEditDiv(String text) {
this();
setText(text);
}

5
src/main/java/org/gcube/portlets/user/shareupdates/client/elements/Span.java
View File

@ -7,7 +7,6 @@ import com.google.gwt.user.client.ui.HasText;
/**
*
* @author Massimiliano Assante, ISTI-CNR
* @version 0.1 Sep 2012
*
*/
public class Span extends HTML implements HasText {
@ -20,4 +19,8 @@ public class Span extends HTML implements HasText {
this();
setText(text);
}
public void setCSSClassName(String className) {
getElement().addClassName(className);
}
}

26
src/main/java/org/gcube/portlets/user/shareupdates/client/elements/TagBox.java Normal file
View File

@ -0,0 +1,26 @@
package org.gcube.portlets.user.shareupdates.client.elements;
import com.google.gwt.user.client.ui.TextBox;
/**
*
* @author Massimiliano Assante, ISTI-CNR
*
*/
public class TagBox extends TextBox {
public TagBox() {
}
public TagBox(String text) {
super();
this.setStylePrimaryName("user-token");
setValue(text);
setText(text);
//random heuristic, the "i" and "l" char occupies very few px :)
int iCounter = 12 - 2*(text.split("i").length + (text.split("l").length));
setWidth((text.length()*6+iCounter)+"px");
setReadOnly(true);
}
}

4
src/main/java/org/gcube/portlets/user/shareupdates/client/form/ShareUpdateForm.java
View File

@ -42,7 +42,7 @@ public class ShareUpdateForm extends Composite {
.create(ShareUpdateService.class);
final PageBusAdapter pageBusAdapter = new PageBusAdapter();
protected final static String SHARE_UPDATE_TEXT = "Share an update or paste a link";
protected final static String SHARE_UPDATE_TEXT = "Share an update or paste a link, use “@” and then start typing to tag people";
protected final static String ERROR_UPDATE_TEXT = "Looks like empty to me!";
private final static String LISTBOX_LEVEL = " - ";
@ -118,7 +118,7 @@ public class ShareUpdateForm extends Composite {
@UiField
Image avatarImage;
@UiField MyTextArea shareTextArea;
@UiField SmartTextArea shareTextArea;
@UiField ListBox privacyLevel = new ListBox(false);

5
src/main/java/org/gcube/portlets/user/shareupdates/client/form/ShareUpdateForm.ui.xml
View File

@ -13,7 +13,7 @@
<td>
<div class="shareContainer-in">
<m:MyTextArea styleName="post-message" ui:field="shareTextArea" />
<m:SmartTextArea styleName="post-message" ui:field="shareTextArea" />
</div>
</td>
</tr>
@ -32,8 +32,7 @@
<td valign="middle"></td>
<td valign="middle">
<div class="buttonDiv">
<!-- <g:Button styleName="wizardButton" ui:field="attachButton" -->
<!-- text="Attach a Link" /> -->
<!-- TODO: "Attach a Link" /> -->
<g:Button ui:field="submitButton" width="90px" text="Share" />
</div>
</td>

22
src/main/java/org/gcube/portlets/user/shareupdates/client/form/MyTextArea.java → src/main/java/org/gcube/portlets/user/shareupdates/client/form/SmartTextArea.java
View File

@ -4,11 +4,14 @@
package org.gcube.portlets.user.shareupdates.client.form;
import org.gcube.portlets.user.shareupdates.client.dialog.PickUsersDialog;
import org.gcube.portlets.user.shareupdates.client.elements.Div;
import org.gcube.portlets.user.shareupdates.client.elements.ContentEditDiv;
import org.gcube.portlets.user.shareupdates.client.elements.Span;
import org.gcube.portlets.user.shareupdates.client.elements.TagBox;
import org.gcube.portlets.user.shareupdates.client.events.PickedUserEvent;
import org.gcube.portlets.user.shareupdates.client.events.PickedUserEventHandler;
import com.google.gwt.core.client.GWT;
import com.google.gwt.event.dom.client.DomEvent;
import com.google.gwt.event.dom.client.KeyCodes;
import com.google.gwt.event.shared.HandlerManager;
import com.google.gwt.user.client.DOM;
@ -19,7 +22,7 @@ import com.google.gwt.user.client.Timer;
* @author massi
*
*/
public class MyTextArea extends Div {
public class SmartTextArea extends ContentEditDiv {
private final HandlerManager eventBus = new HandlerManager(null);
public final static int ARROW_UP = 38;
@ -28,13 +31,12 @@ public class MyTextArea extends Div {
/**
*
*/
public MyTextArea() {
public SmartTextArea() {
bind();
sinkEvents(Event.ONPASTE);
sinkEvents(Event.ONCONTEXTMENU);
sinkEvents(Event.ONKEYUP);
sinkEvents(Event.ONKEYDOWN);
sinkEvents(Event.ONKEYPRESS);
}
/**
@ -45,13 +47,16 @@ public class MyTextArea extends Div {
@Override
public void onSelectedUser(PickedUserEvent event) {
String[] toSplit = getText().split("@"); //get the interesting part
setText(toSplit[0] + event.getSelectedUser().getFullName());
TagBox span = new TagBox(event.getSelectedUser().getFullName());
setHTML(toSplit[0]);
getElement().appendChild(span.getElement());
getElement().appendChild(new Span(" ").getElement());
setEndOfContenteditable();
}
});
}
/**
* paste event overridden
* paste and other events overridden
*/
public void onBrowserEvent(Event event) {
super.onBrowserEvent(event);
@ -77,8 +82,8 @@ public class MyTextArea extends Div {
pickUserDlg.onKeyUp(event, this.getAbsoluteLeft(), this.getAbsoluteTop()+65, getText());
break;
}
case Event.ONKEYDOWN: { //avoid the arrow up to move the cursor at the beginning of the textbox and the TAB to move around inputs
if (event.getKeyCode() == ARROW_UP || event.getKeyCode() == KeyCodes.KEY_TAB) {
case Event.ONKEYDOWN: { //avoid the arrow up to move the cursor at the beginning of the textbox and the TAB to move around inputs and enter to go newline
if (event.getKeyCode() == ARROW_UP || event.getKeyCode() == KeyCodes.KEY_TAB || event.getKeyCode() == KeyCodes.KEY_ENTER) {
DOM.eventCancelBubble(event, true);
DOM.eventPreventDefault(event);
return;
@ -86,6 +91,7 @@ public class MyTextArea extends Div {
break;
}
}
DomEvent.fireNativeEvent(event, this, this.getElement());
}

15
src/main/webapp/ShareUpdates.css
View File

@ -258,3 +258,18 @@ a.link:hover {
.user-table-col.smallphoto {
width: 40px;
}
.user-token {
margin: 3px;
height: auto !important;
padding: 1px 3px;
background-color: #E2E6F0 !important;
border: 1px solid #9DACCC;
color: #1C2A47;
cursor: default;
font-family: verdana, arial, sans-serif;
font-size: 11px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}