Usability improvements; no longer animates, #1678 and #1679 fixed.

Vertical & scrollbar mode also fixed.

svn changeset:4847/svn branch:trunk

diff --git a/WebContent/ITMILL/themes/default/slider/slider.css b/WebContent/ITMILL/themes/default/slider/slider.css
index 92497700177005fccac5f32e4b8f1b2d9ecccc48..b49df2588b0cf016d68a8455d5ec73fe9135234b 100644 (file)
--- a/WebContent/ITMILL/themes/default/slider/slider.css
+++ b/WebContent/ITMILL/themes/default/slider/slider.css
@@ -3,7 +3,8 @@
   --------------------------*/
 
 .i-slider {
-       border: 1px solid #cccfd0;
+       border-top: 1px solid #cccfd0;
+       border-bottom: 1px solid #cccfd0;
        height: 3px;
        margin: 5px 0;
 }
@@ -12,6 +13,9 @@
        height: 2px;
        border-top: 1px solid #cbcdce;
        background: #f3f3f4;
+       border-left: 1px solid #cccfd0;
+       border-right: 1px solid #cccfd0;
+       
 }
 .i-slider-handle {
        background: transparent url(img/handle-horizontal.png);
@@ -24,6 +28,17 @@
 .i-slider-handle:hover {
        background-position: left bottom;
 }
+
+.i-slider-scrollbar .i-slider-handle,
+.i-slider-scrollbar.i-slider-vertical .i-slider-handle {
+       background: #ffffff;
+       border: 1px solid #cccfd0;
+       border-radius: 6px;
+       -moz-border-radius: 6px;
+       -webkit-border-radius: 6px;
+       
+}
+
 /* TODO
 .i-slider-bigger {
        background: #dde4ef url(img/arrow-right.png);
@@ -61,11 +76,17 @@
        width: 3px;
        height: auto;
        margin: 0 5px;
+       border: none;
+       border-left: 1px solid #cccfd0;
+       border-right: 1px solid #cccfd0;
 }
 .i-slider-vertical .i-slider-base {
        width: 2px;
        border-left: 1px solid #cbcdce;
+       border-right: none;
        background: #f3f3f4;
+       border-top: 1px solid #cccfd0;
+       border-bottom: 1px solid #cccfd0;       
 }
 .i-slider-vertical .i-slider-handle {
        background: transparent url(img/handle-vertical.png);

diff --git a/src/com/itmill/toolkit/terminal/gwt/client/ui/ISlider.java b/src/com/itmill/toolkit/terminal/gwt/client/ui/ISlider.java
index a7e5ef02d1f6435e3c02eb6f14b5aa9938337bee..4cf56de8552e6802af668c3814f24d3cf5b71f3b 100644 (file)
--- a/src/com/itmill/toolkit/terminal/gwt/client/ui/ISlider.java
+++ b/src/com/itmill/toolkit/terminal/gwt/client/ui/ISlider.java
@@ -1,7 +1,7 @@
 /* \r
 @ITMillApache2LicenseForJavaFiles@\r
  */\r
-\r
+// \r
 package com.itmill.toolkit.terminal.gwt.client.ui;\r
 \r
 import com.google.gwt.user.client.Command;\r
@@ -9,7 +9,6 @@ import com.google.gwt.user.client.DOM;
 import com.google.gwt.user.client.DeferredCommand;\r
 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.Widget;\r
 import com.itmill.toolkit.terminal.gwt.client.ApplicationConnection;\r
 import com.itmill.toolkit.terminal.gwt.client.ContainerResizedListener;\r
@@ -60,7 +59,6 @@ public class ISlider extends Widget implements Paintable, Field,
 \r
     /* Temporary dragging/animation variables */\r
     private boolean dragging = false;\r
-    private Timer anim;\r
 \r
     public ISlider() {\r
         super();\r
@@ -138,10 +136,6 @@ public class ISlider extends Widget implements Paintable, Field,
 \r
         handleSize = uidl.getIntAttribute("hsize");\r
 \r
-        if (uidl.hasAttribute("size")) {\r
-            size = uidl.getIntAttribute("size");\r
-        }\r
-\r
         buildBase();\r
 \r
         if (!vertical) {\r
@@ -230,6 +224,7 @@ public class ISlider extends Widget implements Paintable, Field,
         if (value == null) {\r
             return;\r
         }\r
+\r
         if (value.doubleValue() < min) {\r
             value = new Double(min);\r
         } else if (value.doubleValue() > max) {\r
@@ -245,6 +240,13 @@ public class ISlider extends Widget implements Paintable, Field,
                 domProperty));\r
         final int range = baseSize - handleSize;\r
         double v = value.doubleValue();\r
+        // Round value to resolution\r
+        if (resolution > 0) {\r
+            v = Math.round(v * Math.pow(10, resolution));\r
+            v = v / Math.pow(10, resolution);\r
+        } else {\r
+            v = Math.round(v);\r
+        }\r
         final double valueRange = max - min;\r
         double p = 0;\r
         if (valueRange > 0) {\r
@@ -262,45 +264,7 @@ public class ISlider extends Widget implements Paintable, Field,
 \r
         final int current = DOM.getIntStyleAttribute(handle, styleAttribute);\r
 \r
-        if ((int) (Math.round(pos)) != current && animate) {\r
-            if (anim != null) {\r
-                anim.cancel();\r
-            }\r
-            anim = new Timer() {\r
-                private int current;\r
-                private final int goal = (int) Math.round(pos);\r
-                private int dir = 0;\r
-\r
-                public void run() {\r
-                    current = DOM.getIntStyleAttribute(handle, styleAttribute);\r
-\r
-                    // Determine direction\r
-                    if (dir == 0) {\r
-                        dir = (goal - current) / Math.abs(goal - current);\r
-                    }\r
-\r
-                    if ((dir > 0 && current >= goal)\r
-                            || (dir < 0 && current <= goal)) {\r
-                        cancel();\r
-                        return;\r
-                    }\r
-                    final int increment = (goal - current) / 2;\r
-                    DOM.setStyleAttribute(handle, styleAttribute,\r
-                            (current + increment) + "px");\r
-                }\r
-            };\r
-            anim.scheduleRepeating(50);\r
-        } else {\r
-            DOM.setStyleAttribute(handle, styleAttribute, ((int) pos) + "px");\r
-        }\r
-\r
-        // Round value to resolution\r
-        if (resolution > 0) {\r
-            v = (int) (v * Math.pow(10, resolution));\r
-            v = v / Math.pow(10, resolution);\r
-        } else {\r
-            v = Math.round(v);\r
-        }\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
@@ -325,9 +289,9 @@ public class ISlider extends Widget implements Paintable, Field,
         } else if (dragging || DOM.compare(targ, handle)) {\r
             processHandleEvent(event);\r
         } else if (DOM.compare(targ, smaller)) {\r
-            decreaseValue(event, true);\r
+            decreaseValue(event);\r
         } else if (DOM.compare(targ, bigger)) {\r
-            increaseValue(event, true);\r
+            increaseValue(event);\r
         } else {\r
             processBaseEvent(event);\r
         }\r
@@ -336,9 +300,9 @@ public class ISlider extends Widget implements Paintable, Field,
     private void processMouseWheelEvent(Event event) {\r
         final int dir = DOM.eventGetMouseWheelVelocityY(event);\r
         if (dir < 0) {\r
-            increaseValue(event, false);\r
+            increaseValue(event);\r
         } else {\r
-            decreaseValue(event, false);\r
+            decreaseValue(event);\r
         }\r
         DOM.eventPreventDefault(event);\r
         DOM.eventCancelBubble(event, true);\r
@@ -348,9 +312,6 @@ public class ISlider extends Widget implements Paintable, Field,
         switch (DOM.eventGetType(event)) {\r
         case Event.ONMOUSEDOWN:\r
             if (!disabled && !readonly) {\r
-                if (anim != null) {\r
-                    anim.cancel();\r
-                }\r
                 dragging = true;\r
                 DOM.setCapture(getElement());\r
                 DOM.eventPreventDefault(event); // prevent selecting text\r
@@ -386,48 +347,14 @@ public class ISlider extends Widget implements Paintable, Field,
         }\r
     }\r
 \r
-    private void decreaseValue(Event event, boolean animate) {\r
+    private void decreaseValue(Event event) {\r
         setValue(new Double(value.doubleValue() - Math.pow(10, -resolution)),\r
                 false, true);\r
-        if (DOM.eventGetType(event) == Event.ONMOUSEDOWN && animate) {\r
-            if (anim != null) {\r
-                anim.cancel();\r
-            }\r
-            anim = new Timer() {\r
-                public void run() {\r
-                    if (value.doubleValue() - Math.pow(10, -resolution) > min) {\r
-                        setValue(new Double(value.doubleValue()\r
-                                - Math.pow(10, -resolution)), false, true);\r
-                    }\r
-                }\r
-            };\r
-            anim.scheduleRepeating(100);\r
-            DOM.eventCancelBubble(event, true);\r
-        } else if (anim != null) {\r
-            anim.cancel();\r
-        }\r
     }\r
 \r
-    private void increaseValue(Event event, boolean animate) {\r
+    private void increaseValue(Event event) {\r
         setValue(new Double(value.doubleValue() + Math.pow(10, -resolution)),\r
                 false, true);\r
-        if (DOM.eventGetType(event) == Event.ONMOUSEDOWN && animate) {\r
-            if (anim != null) {\r
-                anim.cancel();\r
-            }\r
-            anim = new Timer() {\r
-                public void run() {\r
-                    if (value.doubleValue() - Math.pow(10, -resolution) < max) {\r
-                        setValue(new Double(value.doubleValue()\r
-                                + Math.pow(10, -resolution)), false, true);\r
-                    }\r
-                }\r
-            };\r
-            anim.scheduleRepeating(100);\r
-            DOM.eventCancelBubble(event, true);\r
-        } else if (anim != null) {\r
-            anim.cancel();\r
-        }\r
     }\r
 \r
     private void setValueByEvent(Event event, boolean animate, boolean roundup) {\r
@@ -474,12 +401,7 @@ public class ISlider extends Widget implements Paintable, Field,
             // Calculate decoration size\r
             DOM.setStyleAttribute(base, "height", "0");\r
             DOM.setStyleAttribute(base, "overflow", "hidden");\r
-            final int decoHeight = DOM.getElementPropertyInt(getElement(),\r
-                    "offsetHeight");\r
-            // Get available space size\r
-            final int availableHeight = DOM.getElementPropertyInt(DOM\r
-                    .getParent(getElement()), "offsetHeight");\r
-            int h = availableHeight - decoHeight;\r
+            int h = DOM.getElementPropertyInt(getElement(), "offsetHeight");\r
             if (h < MIN_SIZE) {\r
                 h = MIN_SIZE;\r
             }\r