diff options
-rw-r--r-- | WebContent/VAADIN/themes/base/slider/slider.css | 15 | ||||
-rw-r--r-- | WebContent/VAADIN/themes/base/styles.css | 15 | ||||
-rw-r--r-- | WebContent/VAADIN/themes/reindeer/common/img/vertical-sprites-ie6.png | bin | 8090 -> 8116 bytes | |||
-rw-r--r-- | WebContent/VAADIN/themes/reindeer/common/img/vertical-sprites.png | bin | 22844 -> 23017 bytes | |||
-rw-r--r-- | WebContent/VAADIN/themes/reindeer/slider/img/knob-pressed.png | bin | 420 -> 360 bytes | |||
-rw-r--r-- | WebContent/VAADIN/themes/reindeer/slider/slider.css | 2 | ||||
-rw-r--r-- | WebContent/VAADIN/themes/reindeer/styles.css | 17 | ||||
-rw-r--r-- | WebContent/VAADIN/themes/runo/slider/slider.css | 2 | ||||
-rw-r--r-- | WebContent/VAADIN/themes/runo/styles.css | 17 | ||||
-rw-r--r-- | src/com/vaadin/terminal/gwt/client/ui/VSlider.java | 56 |
10 files changed, 113 insertions, 11 deletions
diff --git a/WebContent/VAADIN/themes/base/slider/slider.css b/WebContent/VAADIN/themes/base/slider/slider.css index 7df6a4d667..5ee6cbf31c 100644 --- a/WebContent/VAADIN/themes/base/slider/slider.css +++ b/WebContent/VAADIN/themes/base/slider/slider.css @@ -38,6 +38,21 @@ margin-left: -5px; } +.v-slider-feedback { + padding: 2px 5px; + background: #444; + color: #fff; + font-size: 11px; + line-height: 13px; + font-weight: bold; + font-family: Arial, Helvetica, sans-serif; + border-radius: 4px; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + margin: -2px 0 0 2px; + text-shadow: 0 1px 0 #000; +} + /* Disabled by default .v-slider-error .v-slider-base { background: #FFE0E0; diff --git a/WebContent/VAADIN/themes/base/styles.css b/WebContent/VAADIN/themes/base/styles.css index 2c508ca59e..cafbc018ca 100644 --- a/WebContent/VAADIN/themes/base/styles.css +++ b/WebContent/VAADIN/themes/base/styles.css @@ -1151,6 +1151,21 @@ div.v-progressindicator-indeterminate-disabled { margin-left: -5px; } +.v-slider-feedback { + padding: 2px 5px; + background: #444; + color: #fff; + font-size: 11px; + line-height: 13px; + font-weight: bold; + font-family: Arial, Helvetica, sans-serif; + border-radius: 4px; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + margin: -2px 0 0 2px; + text-shadow: 0 1px 0 #000; +} + /* Disabled by default .v-slider-error .v-slider-base { background: #FFE0E0; diff --git a/WebContent/VAADIN/themes/reindeer/common/img/vertical-sprites-ie6.png b/WebContent/VAADIN/themes/reindeer/common/img/vertical-sprites-ie6.png Binary files differindex c11ee47f9e..ec72a8b6a3 100644 --- a/WebContent/VAADIN/themes/reindeer/common/img/vertical-sprites-ie6.png +++ b/WebContent/VAADIN/themes/reindeer/common/img/vertical-sprites-ie6.png diff --git a/WebContent/VAADIN/themes/reindeer/common/img/vertical-sprites.png b/WebContent/VAADIN/themes/reindeer/common/img/vertical-sprites.png Binary files differindex 4a4537ac06..c0e29a99f5 100644 --- a/WebContent/VAADIN/themes/reindeer/common/img/vertical-sprites.png +++ b/WebContent/VAADIN/themes/reindeer/common/img/vertical-sprites.png diff --git a/WebContent/VAADIN/themes/reindeer/slider/img/knob-pressed.png b/WebContent/VAADIN/themes/reindeer/slider/img/knob-pressed.png Binary files differindex 3ea2724e77..d5afcb71a0 100644 --- a/WebContent/VAADIN/themes/reindeer/slider/img/knob-pressed.png +++ b/WebContent/VAADIN/themes/reindeer/slider/img/knob-pressed.png diff --git a/WebContent/VAADIN/themes/reindeer/slider/slider.css b/WebContent/VAADIN/themes/reindeer/slider/slider.css index 33ce41ca72..cb5a0f7dbe 100644 --- a/WebContent/VAADIN/themes/reindeer/slider/slider.css +++ b/WebContent/VAADIN/themes/reindeer/slider/slider.css @@ -17,7 +17,7 @@ height: 10px; margin-top: -5px; } -.v-slider-handle:active { +.v-slider-handle-active { background-image: url(img/knob-pressed.png); /** sprite-ref: verticals */ } .v-slider-vertical { diff --git a/WebContent/VAADIN/themes/reindeer/styles.css b/WebContent/VAADIN/themes/reindeer/styles.css index ee9629160e..88e27aacf6 100644 --- a/WebContent/VAADIN/themes/reindeer/styles.css +++ b/WebContent/VAADIN/themes/reindeer/styles.css @@ -1151,6 +1151,21 @@ div.v-progressindicator-indeterminate-disabled { margin-left: -5px; } +.v-slider-feedback { + padding: 2px 5px; + background: #444; + color: #fff; + font-size: 11px; + line-height: 13px; + font-weight: bold; + font-family: Arial, Helvetica, sans-serif; + border-radius: 4px; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + margin: -2px 0 0 2px; + text-shadow: 0 1px 0 #000; +} + /* Disabled by default .v-slider-error .v-slider-base { background: #FFE0E0; @@ -3650,7 +3665,7 @@ td.v-datefield-calendarpanel-nextyear { height: 10px; margin-top: -5px; } -.v-slider-handle:active { +.v-slider-handle-active { background-image: url(common/img/vertical-sprites.png); -background-image: url(common/img/vertical-sprites-ie6.png); background-position: left -895px; diff --git a/WebContent/VAADIN/themes/runo/slider/slider.css b/WebContent/VAADIN/themes/runo/slider/slider.css index 5665a2aaee..07b10dfa17 100644 --- a/WebContent/VAADIN/themes/runo/slider/slider.css +++ b/WebContent/VAADIN/themes/runo/slider/slider.css @@ -51,7 +51,7 @@ height: 12px; margin-left: -5px; } -.v-slider-vertical .v-slider-handle:hover { +.v-slider-vertical .v-slider-handle-active { background-position: left bottom; } diff --git a/WebContent/VAADIN/themes/runo/styles.css b/WebContent/VAADIN/themes/runo/styles.css index 0ae0f686f0..5626fae70d 100644 --- a/WebContent/VAADIN/themes/runo/styles.css +++ b/WebContent/VAADIN/themes/runo/styles.css @@ -1151,6 +1151,21 @@ div.v-progressindicator-indeterminate-disabled { margin-left: -5px; } +.v-slider-feedback { + padding: 2px 5px; + background: #444; + color: #fff; + font-size: 11px; + line-height: 13px; + font-weight: bold; + font-family: Arial, Helvetica, sans-serif; + border-radius: 4px; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + margin: -2px 0 0 2px; + text-shadow: 0 1px 0 #000; +} + /* Disabled by default .v-slider-error .v-slider-base { background: #FFE0E0; @@ -2755,7 +2770,7 @@ div.v-tree-node-leaf { height: 12px; margin-left: -5px; } -.v-slider-vertical .v-slider-handle:hover { +.v-slider-vertical .v-slider-handle-active { background-position: left bottom; } diff --git a/src/com/vaadin/terminal/gwt/client/ui/VSlider.java b/src/com/vaadin/terminal/gwt/client/ui/VSlider.java index 1ca8b814a5..732ba84a3f 100644 --- a/src/com/vaadin/terminal/gwt/client/ui/VSlider.java +++ b/src/com/vaadin/terminal/gwt/client/ui/VSlider.java @@ -10,6 +10,7 @@ import com.google.gwt.user.client.DeferredCommand; import com.google.gwt.user.client.Element;
import com.google.gwt.user.client.Event;
import com.google.gwt.user.client.Timer;
+import com.google.gwt.user.client.ui.HTML;
import com.google.gwt.user.client.ui.Widget;
import com.vaadin.terminal.gwt.client.ApplicationConnection;
import com.vaadin.terminal.gwt.client.BrowserInfo;
@@ -43,9 +44,18 @@ public class VSlider extends Widget implements Paintable, Field, private int resolution;
private Double value;
private boolean vertical;
- private int size = -1;
+ private final int size = -1;
private boolean arrows;
+ private final HTML feedback = new HTML("", false);
+ private final VOverlay feedbackPopup = new VOverlay(true, false, true) {
+ @Override
+ public void show() {
+ super.show();
+ updateFeedbackPosition();
+ }
+ };
+
/* DOM element for slider's base */
private final Element base;
private final int BASE_BORDER_WIDTH = 1;
@@ -94,6 +104,9 @@ public class VSlider extends Widget implements Paintable, Field, | Event.ONMOUSEOUT);
DOM.sinkEvents(bigger, Event.ONMOUSEDOWN | Event.ONMOUSEUP
| Event.ONMOUSEOUT);
+
+ feedbackPopup.addStyleName(CLASSNAME + "-feedback");
+ feedbackPopup.setWidget(feedback);
}
public void updateFromUIDL(UIDL uidl, ApplicationConnection client) {
@@ -136,6 +149,8 @@ public class VSlider extends Widget implements Paintable, Field, resolution = uidl.getIntAttribute("resolution");
value = new Double(uidl.getDoubleVariable("value"));
+ setFeedbackValue(value);
+
handleSize = uidl.getIntAttribute("hsize");
buildBase();
@@ -154,6 +169,29 @@ public class VSlider extends Widget implements Paintable, Field, }
}
+ private void setFeedbackValue(double value) {
+ String currentValue = "" + value;
+ if (resolution == 0) {
+ currentValue = "" + new Double(value).intValue();
+ }
+ feedback.setText(currentValue);
+ }
+
+ private void updateFeedbackPosition() {
+ if (vertical) {
+ feedbackPopup.setPopupPosition(DOM.getAbsoluteLeft(handle)
+ + handle.getOffsetWidth(), DOM.getAbsoluteTop(handle)
+ + handle.getOffsetHeight() / 2
+ - feedbackPopup.getOffsetHeight() / 2);
+ } else {
+ feedbackPopup.setPopupPosition(DOM.getAbsoluteLeft(handle)
+ + handle.getOffsetWidth() / 2
+ - feedbackPopup.getOffsetWidth() / 2, DOM
+ .getAbsoluteTop(handle)
+ - feedbackPopup.getOffsetHeight());
+ }
+ }
+
private void buildBase() {
final String styleAttribute = vertical ? "height" : "width";
final String domProperty = vertical ? "offsetHeight" : "offsetWidth";
@@ -244,6 +282,7 @@ public class VSlider extends Widget implements Paintable, Field, final int range = baseSize - handleSize;
double v = value.doubleValue();
+
// Round value to resolution
if (resolution > 0) {
v = Math.round(v * Math.pow(10, resolution));
@@ -268,11 +307,9 @@ public class VSlider extends Widget implements Paintable, Field, DOM.setStyleAttribute(handle, styleAttribute, (Math.round(pos)) + "px");
- // TODO give more detailed info when dragging and do roundup
- DOM.setElementAttribute(handle, "title", "" + v);
-
// Update value
this.value = new Double(v);
+ setFeedbackValue(v);
if (updateToServer) {
updateValueToServer();
@@ -329,7 +366,10 @@ public class VSlider extends Widget implements Paintable, Field, switch (DOM.eventGetType(event)) {
case Event.ONMOUSEDOWN:
if (!disabled && !readonly) {
+ feedbackPopup.show();
dragging = true;
+ DOM.setElementProperty(handle, "className", CLASSNAME
+ + "-handle " + CLASSNAME + "-handle-active");
DOM.setCapture(getElement());
DOM.eventPreventDefault(event); // prevent selecting text
DOM.eventCancelBubble(event, true);
@@ -337,12 +377,14 @@ public class VSlider extends Widget implements Paintable, Field, break;
case Event.ONMOUSEMOVE:
if (dragging) {
- // DOM.setCapture(getElement());
setValueByEvent(event, false);
+ updateFeedbackPosition();
}
break;
case Event.ONMOUSEUP:
+ feedbackPopup.hide();
dragging = false;
+ DOM.setElementProperty(handle, "className", CLASSNAME + "-handle");
DOM.releaseCapture(getElement());
setValueByEvent(event, true);
break;
@@ -381,8 +423,8 @@ public class VSlider extends Widget implements Paintable, Field, .eventGetClientX(event);
final String domProperty = vertical ? "offsetHeight" : "offsetWidth";
- final double handleSize = Integer.parseInt(DOM.getElementProperty(
- handle, domProperty));
+ final int handleSize = Integer.parseInt(DOM.getElementProperty(handle,
+ domProperty));
final double baseSize = Integer.parseInt(DOM.getElementProperty(base,
domProperty));
final double baseOffset = vertical ? DOM.getAbsoluteTop(base)
|