From b77b051ce75074caa457dc2d2ed0f07b502bb85b Mon Sep 17 00:00:00 2001 From: "massimiliano.assante" Date: Mon, 10 Jun 2013 14:34:57 +0000 Subject: [PATCH] added switchbutton git-svn-id: http://svn.research-infrastructures.eu/public/d4science/gcube/trunk/portlets/user/notifications@76935 82a268e6-3cf1-43bd-a215-b396298e98cf --- .../view/switchbutton/SwitchButton.java | 137 ++++++++++++++++++ .../view/switchbutton/SwitchButton.ui.xml | 13 ++ .../view/templates/CategoryWrapper.java | 4 +- .../view/templates/CategoryWrapper.ui.xml | 16 +- .../templates/NotificationPreferenceView.java | 8 +- .../NotificationPreferenceView.ui.xml | 2 +- .../user/notifications/Notifications.gwt.xml | 1 + src/main/webapp/Notifications.css | 11 +- src/main/webapp/switchbutton.css | 54 +++++++ 9 files changed, 225 insertions(+), 21 deletions(-) create mode 100644 src/main/java/org/gcube/portlets/user/notifications/client/view/switchbutton/SwitchButton.java create mode 100644 src/main/java/org/gcube/portlets/user/notifications/client/view/switchbutton/SwitchButton.ui.xml create mode 100644 src/main/webapp/switchbutton.css diff --git a/src/main/java/org/gcube/portlets/user/notifications/client/view/switchbutton/SwitchButton.java b/src/main/java/org/gcube/portlets/user/notifications/client/view/switchbutton/SwitchButton.java new file mode 100644 index 0000000..9bb5b2e --- /dev/null +++ b/src/main/java/org/gcube/portlets/user/notifications/client/view/switchbutton/SwitchButton.java @@ -0,0 +1,137 @@ +package org.gcube.portlets.user.notifications.client.view.switchbutton; + +import static com.google.gwt.query.client.GQuery.$; + +import org.gcube.portlets.user.gcubewidgets.client.elements.Div; +import org.gcube.portlets.user.gcubewidgets.client.elements.Span; + +import com.google.gwt.core.client.GWT; +import com.google.gwt.event.dom.client.ClickEvent; +import com.google.gwt.event.dom.client.ClickHandler; +import com.google.gwt.event.logical.shared.ValueChangeEvent; +import com.google.gwt.event.logical.shared.ValueChangeHandler; +import com.google.gwt.event.shared.HandlerRegistration; +import com.google.gwt.query.client.Function; +import com.google.gwt.query.client.css.CSS; +import com.google.gwt.query.client.css.Length; +import com.google.gwt.query.client.css.RGBColor; +import com.google.gwt.uibinder.client.UiBinder; +import com.google.gwt.uibinder.client.UiField; +import com.google.gwt.user.client.DOM; +import com.google.gwt.user.client.Timer; +import com.google.gwt.user.client.Window; +import com.google.gwt.user.client.ui.CheckBox; +import com.google.gwt.user.client.ui.Composite; +import com.google.gwt.user.client.ui.FocusPanel; +import com.google.gwt.user.client.ui.HasName; +import com.google.gwt.user.client.ui.HasValue; +import com.google.gwt.user.client.ui.Widget; + +public class SwitchButton extends Composite implements HasName, HasValue{ + + private static SwitchButtonUiBinder uiBinder = GWT + .create(SwitchButtonUiBinder.class); + + interface SwitchButtonUiBinder extends UiBinder { + } + @UiField FocusPanel switchContainer; + @UiField Div switcherButton; + @UiField Span labelOff; + @UiField Span labelOn; + private String name; + private Boolean value; + private Boolean valueChangeHandlerInitialized = Boolean.FALSE; + + public SwitchButton() { + name = DOM.createUniqueId(); + initWidget(uiBinder.createAndBindUi(this)); + value = false; + $(switcherButton).css(CSS.LEFT.with(Length.px(-1))); + ensureDomEventHandlers(); + } + + public SwitchButton(boolean initialValue) { + this(); + setValue(initialValue); + } + + @Override + public HandlerRegistration addValueChangeHandler(ValueChangeHandler handler) { + // Is this the first value change handler? If so, time to add handlers + if (!valueChangeHandlerInitialized) { + valueChangeHandlerInitialized = true; + } + return addHandler(handler, ValueChangeEvent.getType()); + } + + @Override + public Boolean getValue() { + return value; + } + /** + * Checks or unchecks the switch button box, firing {@link ValueChangeEvent} if + * appropriate. + *

+ * Note that this does not set the value property of the checkbox + * input element wrapped by this widget. For access to that property, see + * {@link #setFormValue(String)} + * + * @param value true to set on, false to set off; null value implies false + */ + @Override + public void setValue(Boolean value) { + if (value == null) { + value = Boolean.FALSE; + } + + Boolean oldValue = getValue(); + if (value.equals(oldValue)) { + return; + } + this.value = value; + if (!value) { + $(switcherButton).animate("left: -1", 250); + labelOff.setStyleName("switch-button-label on"); + labelOn.setStyleName("switch-button-label off"); + } else { + $(switcherButton).animate("left: 12", 250); + labelOff.setStyleName("switch-button-label off"); + labelOn.setStyleName("switch-button-label on"); + } + } + /** + * Checks or unchecks the switch button box, firing {@link ValueChangeEvent} if + * appropriate. + *

+ * + * @param value true to set on, false to set off; null value implies false + * @param fireEvents If true, and value has changed, fire a + * {@link ValueChangeEvent} + */ + @Override + public void setValue(Boolean value, boolean fireEvents) { + setValue(value); + if (fireEvents) { + ValueChangeEvent.fire(this, value); + } + } + + protected void ensureDomEventHandlers() { + switchContainer.addClickHandler(new ClickHandler() { + public void onClick(ClickEvent event) { + setValue(!value); + ValueChangeEvent.fire(SwitchButton.this, getValue()); + } + }); + } + + @Override + public void setName(String name) { + this.name = name; + } + + @Override + public String getName() { + return name; + } +} diff --git a/src/main/java/org/gcube/portlets/user/notifications/client/view/switchbutton/SwitchButton.ui.xml b/src/main/java/org/gcube/portlets/user/notifications/client/view/switchbutton/SwitchButton.ui.xml new file mode 100644 index 0000000..0f7241f --- /dev/null +++ b/src/main/java/org/gcube/portlets/user/notifications/client/view/switchbutton/SwitchButton.ui.xml @@ -0,0 +1,13 @@ + + + + OFF + + + + ON +

+ + \ No newline at end of file diff --git a/src/main/java/org/gcube/portlets/user/notifications/client/view/templates/CategoryWrapper.java b/src/main/java/org/gcube/portlets/user/notifications/client/view/templates/CategoryWrapper.java index 847595c..1cda6e3 100644 --- a/src/main/java/org/gcube/portlets/user/notifications/client/view/templates/CategoryWrapper.java +++ b/src/main/java/org/gcube/portlets/user/notifications/client/view/templates/CategoryWrapper.java @@ -4,12 +4,11 @@ import static com.google.gwt.query.client.GQuery.$; import java.util.ArrayList; import java.util.HashMap; -import java.util.Map; import org.gcube.portal.databook.shared.NotificationChannelType; import org.gcube.portal.databook.shared.NotificationType; import org.gcube.portlets.user.gcubewidgets.client.elements.Span; -import org.gcube.portlets.user.gcubewidgets.client.switchbutton.SwitchButton; +import org.gcube.portlets.user.notifications.client.view.switchbutton.SwitchButton; import org.gcube.portlets.user.notifications.shared.NotificationPreference; import com.google.gwt.core.client.GWT; @@ -19,7 +18,6 @@ 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.HTML; import com.google.gwt.user.client.ui.VerticalPanel; import com.google.gwt.user.client.ui.Widget; diff --git a/src/main/java/org/gcube/portlets/user/notifications/client/view/templates/CategoryWrapper.ui.xml b/src/main/java/org/gcube/portlets/user/notifications/client/view/templates/CategoryWrapper.ui.xml index f7b623c..16e7722 100644 --- a/src/main/java/org/gcube/portlets/user/notifications/client/view/templates/CategoryWrapper.ui.xml +++ b/src/main/java/org/gcube/portlets/user/notifications/client/view/templates/CategoryWrapper.ui.xml @@ -1,15 +1,23 @@
- Portal - Email - + + + + + +
+ Portal + Email + + +
diff --git a/src/main/java/org/gcube/portlets/user/notifications/client/view/templates/NotificationPreferenceView.java b/src/main/java/org/gcube/portlets/user/notifications/client/view/templates/NotificationPreferenceView.java index 8aa9c03..2456fc5 100644 --- a/src/main/java/org/gcube/portlets/user/notifications/client/view/templates/NotificationPreferenceView.java +++ b/src/main/java/org/gcube/portlets/user/notifications/client/view/templates/NotificationPreferenceView.java @@ -1,11 +1,13 @@ package org.gcube.portlets.user.notifications.client.view.templates; +import static com.google.gwt.query.client.GQuery.$; + import java.util.ArrayList; import org.gcube.portal.databook.shared.NotificationChannelType; import org.gcube.portal.databook.shared.NotificationType; import org.gcube.portlets.user.gcubewidgets.client.elements.Span; -import org.gcube.portlets.user.gcubewidgets.client.switchbutton.SwitchButton; +import org.gcube.portlets.user.notifications.client.view.switchbutton.SwitchButton; import org.gcube.portlets.user.notifications.shared.NotificationPreference; import com.google.gwt.core.client.GWT; @@ -15,12 +17,8 @@ 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.Label; 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 diff --git a/src/main/java/org/gcube/portlets/user/notifications/client/view/templates/NotificationPreferenceView.ui.xml b/src/main/java/org/gcube/portlets/user/notifications/client/view/templates/NotificationPreferenceView.ui.xml index cf979d3..9e139f7 100644 --- a/src/main/java/org/gcube/portlets/user/notifications/client/view/templates/NotificationPreferenceView.ui.xml +++ b/src/main/java/org/gcube/portlets/user/notifications/client/view/templates/NotificationPreferenceView.ui.xml @@ -1,7 +1,7 @@ diff --git a/src/main/resources/org/gcube/portlets/user/notifications/Notifications.gwt.xml b/src/main/resources/org/gcube/portlets/user/notifications/Notifications.gwt.xml index 60c930d..85fee8a 100644 --- a/src/main/resources/org/gcube/portlets/user/notifications/Notifications.gwt.xml +++ b/src/main/resources/org/gcube/portlets/user/notifications/Notifications.gwt.xml @@ -9,6 +9,7 @@ + diff --git a/src/main/webapp/Notifications.css b/src/main/webapp/Notifications.css index 3a2fee3..627a1fd 100644 --- a/src/main/webapp/Notifications.css +++ b/src/main/webapp/Notifications.css @@ -1,4 +1,4 @@ - @import url(notifications/switchbutton.css); + @import url(switchbutton.css); table { border-collapse: separate !important; @@ -121,11 +121,6 @@ a.link:hover { padding-left: 15px; } -.labelOn { - color: #0088CC; -} - - -.labelOff { - color: #777; +.displayInline { + display: inline; } diff --git a/src/main/webapp/switchbutton.css b/src/main/webapp/switchbutton.css new file mode 100644 index 0000000..28ee543 --- /dev/null +++ b/src/main/webapp/switchbutton.css @@ -0,0 +1,54 @@ +/* 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; +} \ No newline at end of file