diff --git a/README.md b/README.md index 74e10e9..3bad591 100644 --- a/README.md +++ b/README.md @@ -12,3 +12,25 @@ Vaadin 7.2.0+ is required for Switch 2.0.0. Use Switch 1.0.1 for Vaadin 6. +Styles +============ + +This addon has various styles. A couple of image based styles and a style which is based on DOM elements. + +## Dom Style + +To activate the dom style you need to use the style name "dom": + +~~~ +Switch switch = new Switch(); +Switch.addStyleName(Switch.DOM_STYLE); +~~~ + +This style has support fort the valo theme. To use the switch-valo add on theme, you need to include the sass file of this addon into your styles.scss file: + +~~~ +/* import the switch addon valo theme */ +@import "VAADIN/addons/switch/css/switch-valo.scss"; +~~~ + +The `switch-valo.scss` provides a **mixin** which can be used to consistently create other sizes of the switch widget if needed. diff --git a/pom.xml b/pom.xml index 254fb58..bd5ba58 100644 --- a/pom.xml +++ b/pom.xml @@ -5,7 +5,7 @@ org.vaadin.teemu switch-root pom - 2.0.3 + 2.0.4-SNAPSHOT Switch Add-on Root Project diff --git a/switch-demo/pom.xml b/switch-demo/pom.xml index 652a4a8..428714d 100644 --- a/switch-demo/pom.xml +++ b/switch-demo/pom.xml @@ -5,12 +5,12 @@ org.vaadin.teemu switch-demo war - 2.0.3 + 2.0.4-SNAPSHOT Switch Add-on Demo UTF-8 - 7.2.0 + 7.7.10 ${vaadin.version} @@ -86,6 +86,18 @@ 3.0.1 provided + + com.vaadin.external.gwt + gwt-codeserver + 2.7.0.vaadin5 + test + + + com.vaadin + vaadin-client-compiler + ${vaadin.version} + test + diff --git a/switch-demo/src/main/java/org/vaadin/teemu/switchui/demo/SwitchComponentDemo.java b/switch-demo/src/main/java/org/vaadin/teemu/switchui/demo/SwitchComponentDemo.java index 0424cfa..29e71b1 100644 --- a/switch-demo/src/main/java/org/vaadin/teemu/switchui/demo/SwitchComponentDemo.java +++ b/switch-demo/src/main/java/org/vaadin/teemu/switchui/demo/SwitchComponentDemo.java @@ -48,6 +48,7 @@ protected void init(VaadinRequest request) { content.addComponent(createDemoPanel(null)); content.addComponent(createDemoPanel("compact")); content.addComponent(createDemoPanel("holodeck")); + content.addComponent(createDemoPanel(Switch.DOM_STYLE)); } private Label createDescription() { @@ -133,6 +134,7 @@ private Switch createSwitch(String caption, String style, return switchComponent; } + @Override public void valueChange(ValueChangeEvent event) { if (event.getProperty() == checkBox) { for (Switch s : allSwitches) { diff --git a/switch-demo/src/main/resources/org/vaadin/teemu/switchui/demo/SwitchDemoWidgetset.gwt.xml b/switch-demo/src/main/resources/org/vaadin/teemu/switchui/demo/SwitchDemoWidgetset.gwt.xml index 79fbb58..e324a76 100644 --- a/switch-demo/src/main/resources/org/vaadin/teemu/switchui/demo/SwitchDemoWidgetset.gwt.xml +++ b/switch-demo/src/main/resources/org/vaadin/teemu/switchui/demo/SwitchDemoWidgetset.gwt.xml @@ -1,6 +1,11 @@ - + - \ No newline at end of file + + + + + + diff --git a/switch/pom.xml b/switch/pom.xml index 13b444c..d0ca923 100644 --- a/switch/pom.xml +++ b/switch/pom.xml @@ -5,12 +5,12 @@ org.vaadin.teemu switch jar - 2.0.3 + 2.0.4-SNAPSHOT Switch UTF-8 - 7.2.0 + 7.7.10 ${vaadin.version} @@ -19,7 +19,7 @@ Switch ${project.organization.name} Apache License 2.0 - ${artifactId}-${project.version}.jar + ${project.artifactId}-${project.version}.jar diff --git a/switch/src/main/java/org/vaadin/teemu/switchui/Switch.java b/switch/src/main/java/org/vaadin/teemu/switchui/Switch.java index cc77f82..67646dc 100644 --- a/switch/src/main/java/org/vaadin/teemu/switchui/Switch.java +++ b/switch/src/main/java/org/vaadin/teemu/switchui/Switch.java @@ -8,13 +8,15 @@ /** * Switch is basically a decorated CheckBox. Server-side API has all the same * functionality and added support for enabling and disabling animation. - * + * * @see com.vaadin.ui.CheckBox * @author Teemu Pöntelin | Vaadin Ltd. | https://vaadin.com/teemu */ @SuppressWarnings("serial") public class Switch extends CheckBox { + public static final String DOM_STYLE = "dom"; + public Switch() { super(); } diff --git a/switch/src/main/java/org/vaadin/teemu/switchui/client/SwitchConnector.java b/switch/src/main/java/org/vaadin/teemu/switchui/client/SwitchConnector.java index 5afb99f..dd25786 100644 --- a/switch/src/main/java/org/vaadin/teemu/switchui/client/SwitchConnector.java +++ b/switch/src/main/java/org/vaadin/teemu/switchui/client/SwitchConnector.java @@ -117,6 +117,8 @@ public void onStateChanged(StateChangeEvent stateChangeEvent) { getWidget().setValue(getState().checked); getWidget().setAnimationEnabled(getState().animated); + boolean isDomStyle = getState().styles.contains(Switch.DOM_STYLE); + getWidget().setDomStyleEnabled(isDomStyle); getWidget().immediate = getState().immediate; } diff --git a/switch/src/main/java/org/vaadin/teemu/switchui/client/SwitchWidget.java b/switch/src/main/java/org/vaadin/teemu/switchui/client/SwitchWidget.java index 8e302e8..6d07233 100644 --- a/switch/src/main/java/org/vaadin/teemu/switchui/client/SwitchWidget.java +++ b/switch/src/main/java/org/vaadin/teemu/switchui/client/SwitchWidget.java @@ -42,7 +42,7 @@ /** * SwitchWidget is the client-side implementation of the Switch component. - * + * * @author Teemu Pöntelin | Vaadin Ltd. | http://vaadin.com/teemu */ public class SwitchWidget extends FocusWidget implements HasValue, @@ -70,6 +70,11 @@ public class SwitchWidget extends FocusWidget implements HasValue, private int tabIndex; private List handlers; + // --- dom style related fields + private boolean domStyleEnabled = false; + private boolean styleInitialized = false; + private Element onPlate, knob, offPlate; + public SwitchWidget() { setElement(Document.get().createDivElement()); setStyleName(CLASSNAME); @@ -83,10 +88,29 @@ public SwitchWidget() { updateStyleName(); } + private void initDomStyle() { + if(isDomStyleEnabled() && ! styleInitialized){ + + onPlate = Document.get().createDivElement(); + knob = Document.get().createDivElement(); + offPlate = Document.get().createDivElement(); + + onPlate.setClassName(CLASSNAME + "-" + "on-plate"); + knob.setClassName(CLASSNAME + "-" + "knob"); + offPlate.setClassName(CLASSNAME + "-" + "off-plate"); + + slider.appendChild(onPlate); + slider.appendChild(offPlate); + slider.appendChild(knob); + + styleInitialized = true; + } + } + private int getUnvisiblePartWidth() { if (unvisiblePartWidth < 0) { - int width = this.getElement().getClientWidth(); - int sliderWidth = this.slider.getClientWidth(); + int width = this.getElement().getOffsetWidth(); + int sliderWidth = this.slider.getOffsetWidth(); if (sliderWidth - width > 0) { unvisiblePartWidth = sliderWidth - width; } @@ -227,6 +251,7 @@ private void updateStyleName() { } } + @Override public void onKeyUp(KeyUpEvent event) { if (event.getNativeKeyCode() == 32) { // 32 = space bar @@ -234,6 +259,7 @@ public void onKeyUp(KeyUpEvent event) { } } + @Override public void onMouseDown(MouseDownEvent event) { handleMouseDown(event.getScreenX()); event.preventDefault(); @@ -245,6 +271,7 @@ private void handleMouseDown(int clientX) { dragInfo.setDragStartOffsetLeft(slider.getOffsetLeft()); } + @Override public void onMouseUp(MouseUpEvent event) { handleMouseUp(event.getNativeEvent()); } @@ -266,6 +293,7 @@ private void handleMouseUp(NativeEvent event) { dragInfo.setDragging(false); // not dragging anymore } + @Override public void onMouseMove(MouseMoveEvent event) { handleMouseMove(event.getScreenX()); } @@ -297,40 +325,57 @@ private void handleMouseMove(int clientX) { } } + @Override public void onFocus(FocusEvent event) { addStyleDependentName("focus"); } + @Override public void onBlur(BlurEvent event) { removeStyleDependentName("focus"); } + @Override public boolean isAnimationEnabled() { return animated; } + @Override public void setAnimationEnabled(boolean enable) { animated = enable; } + @Override public void onTouchCancel(TouchCancelEvent event) { handleMouseUp(event.getNativeEvent()); } + @Override public void onTouchMove(TouchMoveEvent event) { Touch touch = event.getTouches().get(0).cast(); handleMouseMove(touch.getPageX()); event.preventDefault(); } + @Override public void onTouchEnd(TouchEndEvent event) { handleMouseUp(event.getNativeEvent()); } + @Override public void onTouchStart(TouchStartEvent event) { Touch touch = event.getTouches().get(0).cast(); handleMouseDown(touch.getPageX()); event.preventDefault(); } + public void setDomStyleEnabled(boolean enabled) { + domStyleEnabled = enabled; + initDomStyle(); + } + + public boolean isDomStyleEnabled(){ + return domStyleEnabled; + } + } diff --git a/switch/src/main/resources/VAADIN/addons/switch/css/switch-valo.scss b/switch/src/main/resources/VAADIN/addons/switch/css/switch-valo.scss new file mode 100644 index 0000000..a739aa2 --- /dev/null +++ b/switch/src/main/resources/VAADIN/addons/switch/css/switch-valo.scss @@ -0,0 +1,64 @@ + + +//------------------------------------------------------------------ +// parameters: +// +// $border-width: must match the value as set in $v-border +// $widget-height: height of the widget including borders +// $widget-width: width of the widget including borders +// $widget-border-width: +//------------------------------------------------------------------ +@mixin switch-dom-style($border-width: 1px, $widget-height: round($v-unit-size / 2), $widget-width: $v-unit-size, $widget-border-width: 1px) { + + $widget-border-radius: round($widget-height / 2); + + $knob-border-width: $border-width; + $slider-height: $widget-height - 2 * $widget-border-width; + $knob-inner-height: $slider-height - 2 * $knob-border-width; + + $knob-border-width: $border-width; + $slider-width: round($widget-width - 2 * $widget-border-width - $slider-height / 2) * 2; + $knob-border-radius: round($knob-height / 2); + $knob-left: round(($slider-width - $slider-height) / 2); + + .v-switch-dom { + height: $widget-height; + width: $widget-width; + border: valo-border($border: $v-border, $color: $v-background-color, $strength: 0.7); + border-radius: $v-border-radius; + @include box-shadow(valo-bevel-and-shadow($bevel: $v-bevel, $shadow: $v-shadow, $background-color: $v-background-color, $gradient: $v-gradient)); + + .v-switch-slider { + height: $slider-height; + width: $slider-width; + background: none; + } + + .v-switch-on-plate, .v-switch-off-plate { + position: absolute; + top: 0px; + left: 0px; + height: inherit; + width: round($slider-width / 2); + background-color: $v-focus-color; + } + + .v-switch-off-plate { + left: round($slider-width / 2); + background-color: $v-textfield-background-color; + } + + .v-switch-knob { + position: absolute; + top: 0px; + left: $knob-left; + height: $slider-height; + width: $slider-height; + background-color: $v-background-color; + border: valo-border($border: $v-border, $color: $v-background-color, $strength: 0.7); + border-radius: $knob-border-radius; + } + } +} + +@include switch-dom-style(); \ No newline at end of file diff --git a/switch/src/main/resources/org/vaadin/teemu/switchui/public/switch/styles.css b/switch/src/main/resources/org/vaadin/teemu/switchui/public/switch/styles.css index 1c76117..09bede4 100644 --- a/switch/src/main/resources/org/vaadin/teemu/switchui/public/switch/styles.css +++ b/switch/src/main/resources/org/vaadin/teemu/switchui/public/switch/styles.css @@ -71,4 +71,46 @@ } .v-switch-holodeck.on .v-switch-slider:after { content: "ON"; +} + +.v-switch-dom { + height: 22px; + width: 58px; + -moz-border-radius: 10px; + -webkit-border-radius: 10px; + border-radius: 10px; +} +.v-switch-dom .v-switch-slider { + height: 20px; + width: 96px; + background: none; +} +.v-switch-dom .v-switch-on-plate { + position: absolute; + top: 0px; + left: 0px; + height: inherit; + width: 48px; + background-color: green; +} +.v-switch-dom .v-switch-off-plate { + position: absolute; + height: inherit; + top: 0px; + left: 49px; + width: 48px; + background-color: #7f7f7f; +} +.v-switch-dom .v-switch-knob { + position: absolute; + top: 0px; + right: 38px; + height: 18px; /* 20 - 2 * border */ + width: 18px; /* 20 - 2 * border */ + -moz-border-radius: 10px; + -webkit-border-radius: 10px; + border-radius: 10px; + background-color: #e5e5e5; + border: 1px solid #4d4d4d; + } \ No newline at end of file