added switchbutton
git-svn-id: http://svn.research-infrastructures.eu/public/d4science/gcube/trunk/portlets/user/notifications@76935 82a268e6-3cf1-43bd-a215-b396298e98cf
This commit is contained in:
parent
fc4de390e0
commit
b77b051ce7
|
@ -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<Boolean>{
|
||||||
|
|
||||||
|
private static SwitchButtonUiBinder uiBinder = GWT
|
||||||
|
.create(SwitchButtonUiBinder.class);
|
||||||
|
|
||||||
|
interface SwitchButtonUiBinder extends UiBinder<Widget, SwitchButton> {
|
||||||
|
}
|
||||||
|
@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<Boolean> 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.
|
||||||
|
* <p>
|
||||||
|
* Note that this <em>does not</em> 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.
|
||||||
|
* <p>
|
||||||
|
*
|
||||||
|
* @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;
|
||||||
|
}
|
||||||
|
}
|
|
@ -0,0 +1,13 @@
|
||||||
|
<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
|
||||||
|
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
|
||||||
|
xmlns:e="urn:import:org.gcube.portlets.user.gcubewidgets.client.elements"
|
||||||
|
xmlns:g="urn:import:com.google.gwt.user.client.ui">
|
||||||
|
<g:HTMLPanel>
|
||||||
|
<e:Span styleName="switch-button-label on" ui:field="labelOff">OFF</e:Span>
|
||||||
|
<g:FocusPanel ui:field="switchContainer" styleName="switch-button-background">
|
||||||
|
<e:Div ui:field="switcherButton" styleName="switch-button-button"></e:Div>
|
||||||
|
</g:FocusPanel>
|
||||||
|
<e:Span styleName="switch-button-label off" ui:field="labelOn">ON</e:Span>
|
||||||
|
<div style="clear: left;"></div>
|
||||||
|
</g:HTMLPanel>
|
||||||
|
</ui:UiBinder>
|
|
@ -4,12 +4,11 @@ import static com.google.gwt.query.client.GQuery.$;
|
||||||
|
|
||||||
import java.util.ArrayList;
|
import java.util.ArrayList;
|
||||||
import java.util.HashMap;
|
import java.util.HashMap;
|
||||||
import java.util.Map;
|
|
||||||
|
|
||||||
import org.gcube.portal.databook.shared.NotificationChannelType;
|
import org.gcube.portal.databook.shared.NotificationChannelType;
|
||||||
import org.gcube.portal.databook.shared.NotificationType;
|
import org.gcube.portal.databook.shared.NotificationType;
|
||||||
import org.gcube.portlets.user.gcubewidgets.client.elements.Span;
|
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 org.gcube.portlets.user.notifications.shared.NotificationPreference;
|
||||||
|
|
||||||
import com.google.gwt.core.client.GWT;
|
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.uibinder.client.UiField;
|
||||||
import com.google.gwt.user.client.ui.CheckBox;
|
import com.google.gwt.user.client.ui.CheckBox;
|
||||||
import com.google.gwt.user.client.ui.Composite;
|
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.VerticalPanel;
|
||||||
import com.google.gwt.user.client.ui.Widget;
|
import com.google.gwt.user.client.ui.Widget;
|
||||||
|
|
||||||
|
|
|
@ -1,15 +1,23 @@
|
||||||
<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
|
<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
|
||||||
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
|
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
|
||||||
xmlns:w="urn:import:org.gcube.portlets.user.gcubewidgets.client.switchbutton"
|
xmlns:w="urn:import:org.gcube.portlets.user.notifications.client.view.switchbutton"
|
||||||
xmlns:e="urn:import:org.gcube.portlets.user.gcubewidgets.client.elements"
|
xmlns:e="urn:import:org.gcube.portlets.user.gcubewidgets.client.elements"
|
||||||
xmlns:g="urn:import:com.google.gwt.user.client.ui">
|
xmlns:g="urn:import:com.google.gwt.user.client.ui">
|
||||||
<g:HTMLPanel>
|
<g:HTMLPanel>
|
||||||
<div class="day-wrapper">
|
<div class="day-wrapper">
|
||||||
<e:Span styleName="day-label" ui:field="categoryLabel" />
|
<e:Span styleName="day-label" ui:field="categoryLabel" />
|
||||||
<div class="floatingRight">
|
<div class="floatingRight">
|
||||||
<g:CheckBox ui:field="portalCheckbox">Portal</g:CheckBox>
|
<table>
|
||||||
<g:CheckBox ui:field="emailCheckbox">Email</g:CheckBox>
|
<tr>
|
||||||
<w:SwitchButton ui:field="switchButton" styleName="floatingRight paddingLeft" />
|
<td>
|
||||||
|
<g:CheckBox ui:field="portalCheckbox">Portal</g:CheckBox>
|
||||||
|
<g:CheckBox ui:field="emailCheckbox">Email</g:CheckBox>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<w:SwitchButton ui:field="switchButton" styleName="paddingLeft" />
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<g:VerticalPanel ui:field="categoryPanel"></g:VerticalPanel>
|
<g:VerticalPanel ui:field="categoryPanel"></g:VerticalPanel>
|
||||||
|
|
|
@ -1,11 +1,13 @@
|
||||||
package org.gcube.portlets.user.notifications.client.view.templates;
|
package org.gcube.portlets.user.notifications.client.view.templates;
|
||||||
|
|
||||||
|
import static com.google.gwt.query.client.GQuery.$;
|
||||||
|
|
||||||
import java.util.ArrayList;
|
import java.util.ArrayList;
|
||||||
|
|
||||||
import org.gcube.portal.databook.shared.NotificationChannelType;
|
import org.gcube.portal.databook.shared.NotificationChannelType;
|
||||||
import org.gcube.portal.databook.shared.NotificationType;
|
import org.gcube.portal.databook.shared.NotificationType;
|
||||||
import org.gcube.portlets.user.gcubewidgets.client.elements.Span;
|
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 org.gcube.portlets.user.notifications.shared.NotificationPreference;
|
||||||
|
|
||||||
import com.google.gwt.core.client.GWT;
|
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.uibinder.client.UiField;
|
||||||
import com.google.gwt.user.client.ui.CheckBox;
|
import com.google.gwt.user.client.ui.CheckBox;
|
||||||
import com.google.gwt.user.client.ui.Composite;
|
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 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 {
|
public class NotificationPreferenceView extends Composite {
|
||||||
|
|
||||||
private static NotificationPreferenceUiBinder uiBinder = GWT
|
private static NotificationPreferenceUiBinder uiBinder = GWT
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
|
<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
|
||||||
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
|
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
|
||||||
xmlns:e="urn:import:org.gcube.portlets.user.gcubewidgets.client.elements"
|
xmlns:e="urn:import:org.gcube.portlets.user.gcubewidgets.client.elements"
|
||||||
xmlns:w="urn:import:org.gcube.portlets.user.gcubewidgets.client.switchbutton"
|
xmlns:w="urn:import:org.gcube.portlets.user.notifications.client.view.switchbutton"
|
||||||
xmlns:g="urn:import:com.google.gwt.user.client.ui">
|
xmlns:g="urn:import:com.google.gwt.user.client.ui">
|
||||||
<g:HTMLPanel>
|
<g:HTMLPanel>
|
||||||
<table class="single-notification-table">
|
<table class="single-notification-table">
|
||||||
|
|
|
@ -9,6 +9,7 @@
|
||||||
<!-- To Comment out -->
|
<!-- To Comment out -->
|
||||||
<!-- <set-property name="user.agent" value="gecko1_8" /> -->
|
<!-- <set-property name="user.agent" value="gecko1_8" /> -->
|
||||||
|
|
||||||
|
<inherits name='com.google.gwt.query.Query' />
|
||||||
<!-- Other module inherits -->
|
<!-- Other module inherits -->
|
||||||
<!-- inherits gCube Widgets Library -->
|
<!-- inherits gCube Widgets Library -->
|
||||||
<inherits name='org.gcube.portlets.user.gcubewidgets.WidgetFactory' />
|
<inherits name='org.gcube.portlets.user.gcubewidgets.WidgetFactory' />
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
@import url(notifications/switchbutton.css);
|
@import url(switchbutton.css);
|
||||||
|
|
||||||
table {
|
table {
|
||||||
border-collapse: separate !important;
|
border-collapse: separate !important;
|
||||||
|
@ -121,11 +121,6 @@ a.link:hover {
|
||||||
padding-left: 15px;
|
padding-left: 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.labelOn {
|
.displayInline {
|
||||||
color: #0088CC;
|
display: inline;
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.labelOff {
|
|
||||||
color: #777;
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -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;
|
||||||
|
}
|
Loading…
Reference in New Issue