Fixes #1211: ISlider: Provide proper feedback (current value) to user when moving...

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 7df6a4d66773dcac873833c68f948573df3fa6d7..5ee6cbf31ceee0ba4761c2c87493dfcea58e6d35 100644 (file)
--- 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 2c508ca59eee7d87275260ded9242aee3d441529..cafbc018ca1440abd3fe6caa1a38a7ee5e812225 100644 (file)
--- 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 c11ee47f9ee300f3ca91f64d8d66a88368d62231..ec72a8b6a371c52e9fc743eaff583ff2e92b68e4 100644 (file)
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 4a4537ac064ccec5f162a5f9253991708184ad99..c0e29a99f5bf0ba9ef67748d3fa2b562384c239c 100644 (file)
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 3ea2724e7724e5d8dcd514085716d21288094aa0..d5afcb71a01f90d595e2aa06c6642f6658ffa33f 100644 (file)
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 33ce41ca723304325630f0ab690b7191a9b6ba92..cb5a0f7dbe5ecda9dc9553c8b7c7a964cd97e950 100644 (file)
--- 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 ee9629160ec0b3328d9430c025378805855d21e0..88e27aacf6d0ca6d75889305ef7bfcd1253e53ee 100644 (file)
--- 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 5665a2aaee753663a83ede88bea1eedd06e1182e..07b10dfa17f8ade4d9659c95a705dadd1011732e 100644 (file)
--- 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 0ae0f686f00b7ea45442c96a7581e6f5841eb150..5626fae70d164be90f1c0f3533c2502576f3be30 100644 (file)
--- 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 1ca8b814a5bba20391e7c55825d3d833fcaa26e5..732ba84a3faecfa0b32a4baf171818e3c198bc1b 100644 (file)
--- 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;\r
 import com.google.gwt.user.client.Event;\r
 import com.google.gwt.user.client.Timer;\r
+import com.google.gwt.user.client.ui.HTML;\r
 import com.google.gwt.user.client.ui.Widget;\r
 import com.vaadin.terminal.gwt.client.ApplicationConnection;\r
 import com.vaadin.terminal.gwt.client.BrowserInfo;\r
@@ -43,9 +44,18 @@ public class VSlider extends Widget implements Paintable, Field,
     private int resolution;\r
     private Double value;\r
     private boolean vertical;\r
-    private int size = -1;\r
+    private final int size = -1;\r
     private boolean arrows;\r
 \r
+    private final HTML feedback = new HTML("", false);\r
+    private final VOverlay feedbackPopup = new VOverlay(true, false, true) {\r
+        @Override\r
+        public void show() {\r
+            super.show();\r
+            updateFeedbackPosition();\r
+        }\r
+    };\r
+\r
     /* DOM element for slider's base */\r
     private final Element base;\r
     private final int BASE_BORDER_WIDTH = 1;\r
@@ -94,6 +104,9 @@ public class VSlider extends Widget implements Paintable, Field,
                 | Event.ONMOUSEOUT);\r
         DOM.sinkEvents(bigger, Event.ONMOUSEDOWN | Event.ONMOUSEUP\r
                 | Event.ONMOUSEOUT);\r
+\r
+        feedbackPopup.addStyleName(CLASSNAME + "-feedback");\r
+        feedbackPopup.setWidget(feedback);\r
     }\r
 \r
     public void updateFromUIDL(UIDL uidl, ApplicationConnection client) {\r
@@ -136,6 +149,8 @@ public class VSlider extends Widget implements Paintable, Field,
         resolution = uidl.getIntAttribute("resolution");\r
         value = new Double(uidl.getDoubleVariable("value"));\r
 \r
+        setFeedbackValue(value);\r
+\r
         handleSize = uidl.getIntAttribute("hsize");\r
 \r
         buildBase();\r
@@ -154,6 +169,29 @@ public class VSlider extends Widget implements Paintable, Field,
         }\r
     }\r
 \r
+    private void setFeedbackValue(double value) {\r
+        String currentValue = "" + value;\r
+        if (resolution == 0) {\r
+            currentValue = "" + new Double(value).intValue();\r
+        }\r
+        feedback.setText(currentValue);\r
+    }\r
+\r
+    private void updateFeedbackPosition() {\r
+        if (vertical) {\r
+            feedbackPopup.setPopupPosition(DOM.getAbsoluteLeft(handle)\r
+                    + handle.getOffsetWidth(), DOM.getAbsoluteTop(handle)\r
+                    + handle.getOffsetHeight() / 2\r
+                    - feedbackPopup.getOffsetHeight() / 2);\r
+        } else {\r
+            feedbackPopup.setPopupPosition(DOM.getAbsoluteLeft(handle)\r
+                    + handle.getOffsetWidth() / 2\r
+                    - feedbackPopup.getOffsetWidth() / 2, DOM\r
+                    .getAbsoluteTop(handle)\r
+                    - feedbackPopup.getOffsetHeight());\r
+        }\r
+    }\r
+\r
     private void buildBase() {\r
         final String styleAttribute = vertical ? "height" : "width";\r
         final String domProperty = vertical ? "offsetHeight" : "offsetWidth";\r
@@ -244,6 +282,7 @@ public class VSlider extends Widget implements Paintable, Field,
 \r
         final int range = baseSize - handleSize;\r
         double v = value.doubleValue();\r
+\r
         // Round value to resolution\r
         if (resolution > 0) {\r
             v = Math.round(v * Math.pow(10, resolution));\r
@@ -268,11 +307,9 @@ public class VSlider extends Widget implements Paintable, Field,
 \r
         DOM.setStyleAttribute(handle, styleAttribute, (Math.round(pos)) + "px");\r
 \r
-        // TODO give more detailed info when dragging and do roundup\r
-        DOM.setElementAttribute(handle, "title", "" + v);\r
-\r
         // Update value\r
         this.value = new Double(v);\r
+        setFeedbackValue(v);\r
 \r
         if (updateToServer) {\r
             updateValueToServer();\r
@@ -329,7 +366,10 @@ public class VSlider extends Widget implements Paintable, Field,
         switch (DOM.eventGetType(event)) {\r
         case Event.ONMOUSEDOWN:\r
             if (!disabled && !readonly) {\r
+                feedbackPopup.show();\r
                 dragging = true;\r
+                DOM.setElementProperty(handle, "className", CLASSNAME\r
+                        + "-handle " + CLASSNAME + "-handle-active");\r
                 DOM.setCapture(getElement());\r
                 DOM.eventPreventDefault(event); // prevent selecting text\r
                 DOM.eventCancelBubble(event, true);\r
@@ -337,12 +377,14 @@ public class VSlider extends Widget implements Paintable, Field,
             break;\r
         case Event.ONMOUSEMOVE:\r
             if (dragging) {\r
-                // DOM.setCapture(getElement());\r
                 setValueByEvent(event, false);\r
+                updateFeedbackPosition();\r
             }\r
             break;\r
         case Event.ONMOUSEUP:\r
+            feedbackPopup.hide();\r
             dragging = false;\r
+            DOM.setElementProperty(handle, "className", CLASSNAME + "-handle");\r
             DOM.releaseCapture(getElement());\r
             setValueByEvent(event, true);\r
             break;\r
@@ -381,8 +423,8 @@ public class VSlider extends Widget implements Paintable, Field,
                 .eventGetClientX(event);\r
         final String domProperty = vertical ? "offsetHeight" : "offsetWidth";\r
 \r
-        final double handleSize = Integer.parseInt(DOM.getElementProperty(\r
-                handle, domProperty));\r
+        final int handleSize = Integer.parseInt(DOM.getElementProperty(handle,\r
+                domProperty));\r
         final double baseSize = Integer.parseInt(DOM.getElementProperty(base,\r
                 domProperty));\r
         final double baseOffset = vertical ? DOM.getAbsoluteTop(base)\r