gCubeSystem
/
notifications
16
1
Fork 0
Code Issues Pull Requests Releases Wiki Activity

refactored, integrated switchbutton from gcube Widgets 

git-svn-id: http://svn.research-infrastructures.eu/public/d4science/gcube/trunk/portlets/user/notifications@76835 82a268e6-3cf1-43bd-a215-b396298e98cf
This commit is contained in:
Massimiliano Assante 2013-06-06 16:53:28 +00:00
parent 27802448c5
commit 4ba8a60061
15 changed files with 96 additions and 279 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
src/main/java/org/gcube/portlets/user/notifications/client/view/NotificationSettings.java
View File

@ -32,18 +32,6 @@ import com.google.gwt.user.client.ui.ScrollPanel;
import com.google.gwt.user.client.ui.VerticalPanel;
import com.google.gwt.user.client.ui.Widget;
import com.google.gwt.query.client.GQuery;
import com.google.gwt.query.client.Function;
import com.google.gwt.query.client.Selector;
import com.google.gwt.query.client.Selectors;
import com.google.gwt.query.client.css.CSS;
import com.google.gwt.query.client.css.RGBColor;
import static com.google.gwt.query.client.GQuery.*;
import static com.google.gwt.query.client.css.CSS.*;
import static com.google.gwt.query.client.plugins.Effects.Effects;
import static com.google.gwt.query.client.GQuery.$;
/**
* @author Massimiliano Assante ISTI-CNR
@ -51,6 +39,7 @@ import static com.google.gwt.query.client.GQuery.$;
*/
public class NotificationSettings extends GCubeDialog {
private VerticalPanel mainPanel = new VerticalPanel();
private VerticalPanel container = new VerticalPanel();
private HorizontalPanel buttonsContainerPanel = new HorizontalPanel();
private HorizontalPanel buttonsPanel = new HorizontalPanel();
@ -68,14 +57,14 @@ public class NotificationSettings extends GCubeDialog {
public NotificationSettings(LinkedHashMap<String, ArrayList<NotificationPreference>> preferences, final NotificationsServiceAsync notificationService) {
super();
ScrollPanel scroller = new ScrollPanel();
scroller.setWidth("1000px");
scroller.setWidth("890px");
scroller.setHeight("500px");
this.preferences = preferences;
buttonsPanel.setWidth("100%");
buttonsPanel.setHorizontalAlignment(HasHorizontalAlignment.ALIGN_RIGHT);
container.setStyleName("user-notification");
container.setWidth("950px");
container.setWidth("850px");
for (String category : preferences.keySet()) {
container.add(new CategoryWrapper(category));
@ -89,41 +78,21 @@ public class NotificationSettings extends GCubeDialog {
buttonsContainerPanel.add(cancel);
buttonsContainerPanel.add(save);
buttonsPanel.add(buttonsContainerPanel);
container.add(buttonsPanel);
//container.add(buttonsPanel);
setText("Notification Settings");
scroller.add(container);
setWidget(scroller);
Label label = new Label("test");
DOM.setElementProperty(label.getElement(), "id", "myId");
buttonsContainerPanel.add(label);
Timer t = new Timer() {
mainPanel.add(scroller);
mainPanel.add(buttonsPanel);
setWidget(mainPanel);
save.addClickHandler(new ClickHandler() {
@Override
public void run() {
$("#myId").css(CSS.BACKGROUND_COLOR.with(RGBColor.RED));
$("#myId").click(new Function() {
@Override
public void f(Widget w) {
Window.alert("Ciao");
//fade out the button
$(w).fadeOut(1000);
}
});
public void onClick(ClickEvent event) {
}
};
t.schedule(1000);
// save.addClickHandler(new ClickHandler() {
// @Override
// public void onClick(ClickEvent event) {
//
// }
// });
});
cancel.addClickHandler(new ClickHandler() {

37
src/main/java/org/gcube/portlets/user/notifications/client/view/NotificationsPanel.java
View File

@ -31,6 +31,7 @@ import com.google.gwt.user.client.ui.HasHorizontalAlignment;
import com.google.gwt.user.client.ui.HasVerticalAlignment;
import com.google.gwt.user.client.ui.HorizontalPanel;
import com.google.gwt.user.client.ui.Image;
import com.google.gwt.user.client.ui.SimplePanel;
import com.google.gwt.user.client.ui.VerticalPanel;
/**
@ -48,12 +49,14 @@ public class NotificationsPanel extends Composite {
private static final String warning = GWT.getModuleBaseURL() + "../images/warning_blue.png";
private UserInfo myUserInfo;
private Image loadingImage;
private VerticalPanel container = new VerticalPanel();
private HorizontalPanel settingsPanel = new HorizontalPanel();
private VerticalPanel loadingPanel = new VerticalPanel();
private VerticalPanel mainPanel;
private HTML notificationSettings = new HTML("<a style=\"padding-right: 15px;\" class=\"link\">Notification Settings</a>");
public NotificationsPanel() {
@ -84,30 +87,31 @@ public class NotificationsPanel extends Composite {
}
});
initWidget(container);
notificationSettings.addClickHandler(new ClickHandler() {
@Override
public void onClick(ClickEvent event) {
showSettingsLoader(true);
notificationService.getUserNotificationPreferences(new AsyncCallback<LinkedHashMap<String,ArrayList<NotificationPreference>>>() {
@Override
public void onFailure(Throwable caught) { }
public void onFailure(Throwable caught) {
showSettingsLoader(false);
}
@Override
public void onSuccess(LinkedHashMap<String, ArrayList<NotificationPreference>> result) {
NotificationSettings dlg = new NotificationSettings(result, notificationService);
dlg.center();
dlg.show();
showSettingsLoader(false);
}
});
}
});
}
private void showUserNotifications() {
showLoader();
notificationService.getUserNotifications(new AsyncCallback<HashMap<Date, ArrayList<Notification>>>() {
@ -162,6 +166,19 @@ public class NotificationsPanel extends Composite {
mainPanel.setHorizontalAlignment(HasAlignment.ALIGN_CENTER);
mainPanel.setVerticalAlignment(HasVerticalAlignment.ALIGN_MIDDLE);
mainPanel.add(loadingImage);
}
private void showSettingsLoader(boolean show) {
if (show) {
loadingPanel.setWidth("100%");
loadingPanel.setHorizontalAlignment(HasAlignment.ALIGN_CENTER);
loadingPanel.setVerticalAlignment(HasVerticalAlignment.ALIGN_MIDDLE);
loadingPanel.add(loadingImage);
mainPanel.insert(loadingPanel, 0);
} else
mainPanel.remove(loadingPanel);
}
Timer t;

23
src/main/java/org/gcube/portlets/user/notifications/client/view/templates/Div.java
View File

@ -1,23 +0,0 @@
package org.gcube.portlets.user.notifications.client.view.templates;
import com.google.gwt.user.client.DOM;
import com.google.gwt.user.client.ui.HTML;
import com.google.gwt.user.client.ui.HasText;
/**
*
* @author Massimiliano Assante, ISTI-CNR
* @version 0.1 Sep 2012
*
*/
public class Div extends HTML implements HasText {
public Div() {
super(DOM.createElement("div"));
}
public Div(String text) {
this();
setText(text);
}
}

34
src/main/java/org/gcube/portlets/user/notifications/client/view/templates/NotificationPreferenceView.java
View File

@ -1,21 +1,28 @@
package org.gcube.portlets.user.notifications.client.view.templates;
import org.gcube.portlets.user.gcubewidgets.client.elements.Span;
import org.gcube.portlets.user.gcubewidgets.client.switchbutton.SwitchButton;
import org.gcube.portlets.user.notifications.shared.NotificationPreference;
import com.google.gwt.core.client.GWT;
import com.google.gwt.event.logical.shared.ValueChangeEvent;
import com.google.gwt.event.logical.shared.ValueChangeHandler;
import com.google.gwt.uibinder.client.UiBinder;
import com.google.gwt.uibinder.client.UiField;
import com.google.gwt.user.client.ui.CheckBox;
import com.google.gwt.user.client.ui.Composite;
import com.google.gwt.user.client.ui.Widget;
import static com.google.gwt.query.client.GQuery.*;
import static com.google.gwt.query.client.css.CSS.*;
public class NotificationPreferenceView extends Composite {
private static NotificationPreferenceUiBinder uiBinder = GWT
.create(NotificationPreferenceUiBinder.class);
interface NotificationPreferenceUiBinder extends
UiBinder<Widget, NotificationPreferenceView> {
UiBinder<Widget, NotificationPreferenceView> {
}
@UiField Span prefType;
@ -23,12 +30,31 @@ public class NotificationPreferenceView extends Composite {
@UiField CheckBox portalCheckbox;
@UiField CheckBox emailCheckbox;
//@UiField CheckBox noneCheckbox;
@UiField SwitchButton switchButton;
public NotificationPreferenceView(NotificationPreference toDisplay) {
initWidget(uiBinder.createAndBindUi(this));
prefType.setHTML(toDisplay.getTypeLabel());
prefDesc.setHTML(toDisplay.getTypeDesc());
prefDesc.setHTML("("+toDisplay.getTypeDesc()+")");
switchButton.setValue(true);
switchButton.addValueChangeHandler(new ValueChangeHandler<Boolean>() {
@Override
public void onValueChange(ValueChangeEvent<Boolean> event) {
if (event.getValue()) {
portalCheckbox.setValue(true);
emailCheckbox.setValue(true);
$(portalCheckbox).fadeIn(300);
$(emailCheckbox).fadeIn(300);
} else {
portalCheckbox.setValue(false);
emailCheckbox.setValue(false);
$(portalCheckbox).fadeOut(300);
$(emailCheckbox).fadeOut(300);
}
}
});
}

15
src/main/java/org/gcube/portlets/user/notifications/client/view/templates/NotificationPreferenceView.ui.xml
View File

@ -1,20 +1,21 @@
<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
xmlns:c="urn:import:org.gcube.portlets.user.notifications.client.view.templates"
xmlns:e="urn:import:org.gcube.portlets.user.gcubewidgets.client.elements"
xmlns:w="urn:import:org.gcube.portlets.user.gcubewidgets.client.switchbutton"
xmlns:g="urn:import:com.google.gwt.user.client.ui">
<g:HTMLPanel>
<table class="single-notification-table">
<tr>
<td valign="TOP" style="width: 130px;" align="left">
<c:Span styleName="user-notification" ui:field="prefType" />
<td valign="TOP" style="width: 200px;" align="left">
<e:Span styleName="user-notification" ui:field="prefType" />
</td>
<td valign="TOP" style="width: 250px;">
<c:SwitchButton></c:SwitchButton>
<g:CheckBox ui:field="portalCheckbox">Portal</g:CheckBox>
<g:CheckBox ui:field="emailCheckbox">Email</g:CheckBox>
<w:SwitchButton ui:field="switchButton"/>
<g:CheckBox ui:field="portalCheckbox" value="true">Portal</g:CheckBox>
<g:CheckBox ui:field="emailCheckbox" value="true">Email</g:CheckBox>
</td>
<td valign="TOP">
<c:Span styleName="user-notification" ui:field="prefDesc" />
<e:Span styleName="user-notification-comment" ui:field="prefDesc" />
</td>
</tr>
</table>

1
src/main/java/org/gcube/portlets/user/notifications/client/view/templates/SingleNotificationView.java
View File

@ -3,6 +3,7 @@ package org.gcube.portlets.user.notifications.client.view.templates;
import org.gcube.portal.databook.client.GCubeSocialNetworking;
import org.gcube.portal.databook.shared.Notification;
import org.gcube.portal.databook.shared.NotificationType;
import org.gcube.portlets.user.gcubewidgets.client.elements.Span;
import org.gcube.portlets.user.notifications.client.view.templates.images.NotificationImages;
import com.google.gwt.core.client.GWT;

8
src/main/java/org/gcube/portlets/user/notifications/client/view/templates/SingleNotificationView.ui.xml
View File

@ -1,7 +1,7 @@
<!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"
xmlns:c="urn:import:org.gcube.portlets.user.notifications.client.view.templates">
xmlns:e="urn:import:org.gcube.portlets.user.gcubewidgets.client.elements">
<g:HTMLPanel ui:field="mainPanel">
<table class="single-notification-table">
<tr>
@ -11,11 +11,11 @@
</td>
<td valign="TOP" style="width: 50px;">
<c:Span styleName="user-notification-time" ui:field="timeArea" />
<e:Span styleName="user-notification-time" ui:field="timeArea" />
</td>
<td valign="TOP">
<c:Span styleName="user-notification" ui:field="notificationText" />
<c:Span styleName="user-notification" ui:field="goApp" />
<e:Span styleName="user-notification" ui:field="notificationText" />
<e:Span styleName="user-notification" ui:field="goApp" />
</td>
</tr>
</table>

43
src/main/java/org/gcube/portlets/user/notifications/client/view/templates/SlidingButton.java
View File

@ -1,43 +0,0 @@
package org.gcube.portlets.user.notifications.client.view.templates;
import static com.google.gwt.query.client.GQuery.$;
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.query.client.Function;
import com.google.gwt.uibinder.client.UiBinder;
import com.google.gwt.uibinder.client.UiField;
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.FocusPanel;
import com.google.gwt.user.client.ui.HTMLPanel;
import com.google.gwt.user.client.ui.Widget;
public class SlidingButton extends Composite {
private static SlidingButtonUiBinder uiBinder = GWT
.create(SlidingButtonUiBinder.class);
interface SlidingButtonUiBinder extends UiBinder<Widget, SlidingButton> {
}
@UiField FocusPanel switchContainer;
@UiField Div switcherButton;
public SlidingButton() {
initWidget(uiBinder.createAndBindUi(this));
switchContainer.addClickHandler(new ClickHandler() {
@Override
public void onClick(ClickEvent event) {
//switcherButton.getElement().getStyle().setLeft(-1, Unit.PX);
//// Animate the switch
// this.button.animate({ left: newLeft }, 250, "easeInOutCubic");
$(switcherButton).animate("left: -1", 250);
}
});
}
}

8
src/main/java/org/gcube/portlets/user/notifications/client/view/templates/SlidingButton.ui.xml
View File

@ -1,8 +0,0 @@
<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
xmlns:c="urn:import:org.gcube.portlets.user.notifications.client.view.templates"
xmlns:g="urn:import:com.google.gwt.user.client.ui">
<g:FocusPanel ui:field="switchContainer" styleName="switch-button-background">
<c:Div ui:field="switcherButton" styleName="switch-button-button"></c:Div>
</g:FocusPanel>
</ui:UiBinder>

23
src/main/java/org/gcube/portlets/user/notifications/client/view/templates/Span.java
View File

@ -1,23 +0,0 @@
package org.gcube.portlets.user.notifications.client.view.templates;
import com.google.gwt.user.client.DOM;
import com.google.gwt.user.client.ui.HTML;
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 {
public Span() {
super(DOM.createElement("span"));
}
public Span(String text) {
this();
setText(text);
}
}

43
src/main/java/org/gcube/portlets/user/notifications/client/view/templates/SwitchButton.java
View File

@ -1,43 +0,0 @@
package org.gcube.portlets.user.notifications.client.view.templates;
import static com.google.gwt.query.client.GQuery.$;
import com.google.gwt.core.client.GWT;
import com.google.gwt.query.client.Function;
import com.google.gwt.query.client.css.CSS;
import com.google.gwt.query.client.css.RGBColor;
import com.google.gwt.uibinder.client.UiBinder;
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.Widget;
public class SwitchButton extends Composite {
private static SwitchButtonUiBinder uiBinder = GWT
.create(SwitchButtonUiBinder.class);
interface SwitchButtonUiBinder extends UiBinder<Widget, SwitchButton> {
}
public SwitchButton() {
initWidget(uiBinder.createAndBindUi(this));
Timer t = new Timer() {
@Override
public void run() {
$("#switchButton").click(new Function() {
@Override
public void f() {
Window.alert("Ciao");
//fade out the button
// $(w).fadeOut(1000);
}
});
}
};
t.schedule(1000);
}
}

15
src/main/java/org/gcube/portlets/user/notifications/client/view/templates/SwitchButton.ui.xml
View File

@ -1,15 +0,0 @@
<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
xmlns:c="urn:import:org.gcube.portlets.user.notifications.client.view.templates"
xmlns:g="urn:import:com.google.gwt.user.client.ui">
<g:HTMLPanel styleName="floatingLeft">
<c:Span styleName="switch-button-label off">OFF</c:Span>
<c:SlidingButton></c:SlidingButton>
<c:Span styleName="switch-button-label on">ON</c:Span>
<div style="clear: left;"></div>
</g:HTMLPanel>
</ui:UiBinder>
<!-- <div id="switchButton" class="switch-button-background" style="width: 25px; height: 11px;"> -->
<!-- <div class="switch-button-button" style="width: 12px; height: 11px; left: 12px;"></div> -->
<!-- </div> -->

1
src/main/java/org/gcube/portlets/user/notifications/server/NotificationsServiceImpl.java
View File

@ -195,6 +195,7 @@ public class NotificationsServiceImpl extends RemoteServiceServlet implements No
_log.error("While trying to get getUser Notification Preferences");
e.printStackTrace();
}
_log.debug("Got Notification Preferences from Cassandra cluster, returning to the client for user: " + userid);
//need the key in revers order so that workspace appears first
LinkedHashMap<String, ArrayList<NotificationPreference>> toReturn = new LinkedHashMap<String, ArrayList<NotificationPreference>>();
for (String category : treeMap.descendingKeySet()) {

2
src/main/resources/org/gcube/portlets/user/notifications/Notifications.gwt.xml
View File

@ -13,8 +13,6 @@
<!-- inherits gCube Widgets Library -->
<inherits name='org.gcube.portlets.user.gcubewidgets.WidgetFactory' />
<inherits name='org.gcube.portal.databook.GCubeSocialNetworking' />
<inherits name='com.google.gwt.query.Query'/>
<!-- Specify the app entry point class. -->
<entry-point
class='org.gcube.portlets.user.notifications.client.Notifications' />

69
src/main/webapp/Notifications.css
View File

@ -1,4 +1,6 @@
table {
@import url(notifications/switchbutton.css);
table {
border-collapse: separate !important;
border-spacing: 0;
}
@ -48,6 +50,7 @@ a.link:hover {
background-color: #e8effa;
}
.no-notification-message {
line-height: 40px;
font-family: 'Architects Daughter', arial, sans-serif;
@ -88,6 +91,16 @@ a.link:hover {
border-width: 1px;
letter-spacing: normal;
}
.user-notification-comment {
width: 99%;
color: #666;
font: italic 12px 'Lucida Grande', Verdana, 'Bitstream Vera Sans', Arial, sans-serif;
border-color: #999;
border-width: 1px;
letter-spacing: normal;
}
.gwt-CheckBox {
margin-right: 0;
padding-right: 0;
@ -95,57 +108,3 @@ a.link:hover {
.floatingLeft {
float:left;
}
/* Switch Button */
.switch-button-label {
float: left;
font-size: 10pt;
cursor: pointer;
}
.switch-button-label.off {
color: #adadad;
}
.switch-button-label.on {
color: #0088CC;
}
.switch-button-background {
float: left;
position: relative;
background: #ccc;
border: 1px solid #aaa;
margin: 1px 10px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
cursor: pointer;
width: 25px;
height: 11px;
outline-style: none; /* this avoid the tabindex property to sorround this element with a (maybe dotted) rectangle*/
}
.switch-button-button {
position: absolute;
width: 12px;
height: 11px;
left: 12px;
top : -1px;
background: #FAFAFA;
border: 1px solid #aaa;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}