From: Jouni Koivuviita Date: Mon, 21 Dec 2009 10:39:41 +0000 (+0000) Subject: Fixes #1211: ISlider: Provide proper feedback (current value) to user when moving... X-Git-Tag: 6.7.0.beta1~2084^2~37 X-Git-Url: https://source.dussan.org/?a=commitdiff_plain;h=23c526f714381a69ac33fc909a55f67e86161bfb;p=vaadin-framework.git Fixes #1211: ISlider: Provide proper feedback (current value) to user when moving handle svn changeset:10477/svn branch:6.2 --- 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 index c11ee47f9e..ec72a8b6a3 100644 Binary files a/WebContent/VAADIN/themes/reindeer/common/img/vertical-sprites-ie6.png and b/WebContent/VAADIN/themes/reindeer/common/img/vertical-sprites-ie6.png differ diff --git a/WebContent/VAADIN/themes/reindeer/common/img/vertical-sprites.png b/WebContent/VAADIN/themes/reindeer/common/img/vertical-sprites.png index 4a4537ac06..c0e29a99f5 100644 Binary files a/WebContent/VAADIN/themes/reindeer/common/img/vertical-sprites.png and b/WebContent/VAADIN/themes/reindeer/common/img/vertical-sprites.png differ diff --git a/WebContent/VAADIN/themes/reindeer/slider/img/knob-pressed.png b/WebContent/VAADIN/themes/reindeer/slider/img/knob-pressed.png index 3ea2724e77..d5afcb71a0 100644 Binary files a/WebContent/VAADIN/themes/reindeer/slider/img/knob-pressed.png and b/WebContent/VAADIN/themes/reindeer/slider/img/knob-pressed.png differ 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)