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

Vertical & scrollbar mode also fixed.

svn changeset:4847/svn branch:trunk

2 files changed, 39 insertions, 96 deletions

diff --git a/WebContent/ITMILL/themes/default/slider/slider.css b/WebContent/ITMILL/themes/default/slider/slider.css
index 9249770017..b49df2588b 100644
--- 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 a7e5ef02d1..4cf56de855 100644
--- 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 @@
 /* 

 @ITMillApache2LicenseForJavaFiles@

  */

-

+// 

 package com.itmill.toolkit.terminal.gwt.client.ui;

 

 import com.google.gwt.user.client.Command;

@@ -9,7 +9,6 @@ import com.google.gwt.user.client.DOM;
 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.Widget;

 import com.itmill.toolkit.terminal.gwt.client.ApplicationConnection;

 import com.itmill.toolkit.terminal.gwt.client.ContainerResizedListener;

@@ -60,7 +59,6 @@ public class ISlider extends Widget implements Paintable, Field,
 

     /* Temporary dragging/animation variables */

     private boolean dragging = false;

-    private Timer anim;

 

     public ISlider() {

         super();

@@ -138,10 +136,6 @@ public class ISlider extends Widget implements Paintable, Field,
 

         handleSize = uidl.getIntAttribute("hsize");

 

-        if (uidl.hasAttribute("size")) {

-            size = uidl.getIntAttribute("size");

-        }

-

         buildBase();

 

         if (!vertical) {

@@ -230,6 +224,7 @@ public class ISlider extends Widget implements Paintable, Field,
         if (value == null) {

             return;

         }

+

         if (value.doubleValue() < min) {

             value = new Double(min);

         } else if (value.doubleValue() > max) {

@@ -245,6 +240,13 @@ public class ISlider extends Widget implements Paintable, Field,
                 domProperty));

         final int range = baseSize - handleSize;

         double v = value.doubleValue();

+        // Round value to resolution

+        if (resolution > 0) {

+            v = Math.round(v * Math.pow(10, resolution));

+            v = v / Math.pow(10, resolution);

+        } else {

+            v = Math.round(v);

+        }

         final double valueRange = max - min;

         double p = 0;

         if (valueRange > 0) {

@@ -262,45 +264,7 @@ public class ISlider extends Widget implements Paintable, Field,
 

         final int current = DOM.getIntStyleAttribute(handle, styleAttribute);

 

-        if ((int) (Math.round(pos)) != current && animate) {

-            if (anim != null) {

-                anim.cancel();

-            }

-            anim = new Timer() {

-                private int current;

-                private final int goal = (int) Math.round(pos);

-                private int dir = 0;

-

-                public void run() {

-                    current = DOM.getIntStyleAttribute(handle, styleAttribute);

-

-                    // Determine direction

-                    if (dir == 0) {

-                        dir = (goal - current) / Math.abs(goal - current);

-                    }

-

-                    if ((dir > 0 && current >= goal)

-                            || (dir < 0 && current <= goal)) {

-                        cancel();

-                        return;

-                    }

-                    final int increment = (goal - current) / 2;

-                    DOM.setStyleAttribute(handle, styleAttribute,

-                            (current + increment) + "px");

-                }

-            };

-            anim.scheduleRepeating(50);

-        } else {

-            DOM.setStyleAttribute(handle, styleAttribute, ((int) pos) + "px");

-        }

-

-        // Round value to resolution

-        if (resolution > 0) {

-            v = (int) (v * Math.pow(10, resolution));

-            v = v / Math.pow(10, resolution);

-        } else {

-            v = Math.round(v);

-        }

+        DOM.setStyleAttribute(handle, styleAttribute, (Math.round(pos)) + "px");

 

         // TODO give more detailed info when dragging and do roundup

         DOM.setElementAttribute(handle, "title", "" + v);

@@ -325,9 +289,9 @@ public class ISlider extends Widget implements Paintable, Field,
         } else if (dragging || DOM.compare(targ, handle)) {

             processHandleEvent(event);

         } else if (DOM.compare(targ, smaller)) {

-            decreaseValue(event, true);

+            decreaseValue(event);

         } else if (DOM.compare(targ, bigger)) {

-            increaseValue(event, true);

+            increaseValue(event);

         } else {

             processBaseEvent(event);

         }

@@ -336,9 +300,9 @@ public class ISlider extends Widget implements Paintable, Field,
     private void processMouseWheelEvent(Event event) {

         final int dir = DOM.eventGetMouseWheelVelocityY(event);

         if (dir < 0) {

-            increaseValue(event, false);

+            increaseValue(event);

         } else {

-            decreaseValue(event, false);

+            decreaseValue(event);

         }

         DOM.eventPreventDefault(event);

         DOM.eventCancelBubble(event, true);

@@ -348,9 +312,6 @@ public class ISlider extends Widget implements Paintable, Field,
         switch (DOM.eventGetType(event)) {

         case Event.ONMOUSEDOWN:

             if (!disabled && !readonly) {

-                if (anim != null) {

-                    anim.cancel();

-                }

                 dragging = true;

                 DOM.setCapture(getElement());

                 DOM.eventPreventDefault(event); // prevent selecting text

@@ -386,48 +347,14 @@ public class ISlider extends Widget implements Paintable, Field,
         }

     }

 

-    private void decreaseValue(Event event, boolean animate) {

+    private void decreaseValue(Event event) {

         setValue(new Double(value.doubleValue() - Math.pow(10, -resolution)),

                 false, true);

-        if (DOM.eventGetType(event) == Event.ONMOUSEDOWN && animate) {

-            if (anim != null) {

-                anim.cancel();

-            }

-            anim = new Timer() {

-                public void run() {

-                    if (value.doubleValue() - Math.pow(10, -resolution) > min) {

-                        setValue(new Double(value.doubleValue()

-                                - Math.pow(10, -resolution)), false, true);

-                    }

-                }

-            };

-            anim.scheduleRepeating(100);

-            DOM.eventCancelBubble(event, true);

-        } else if (anim != null) {

-            anim.cancel();

-        }

     }

 

-    private void increaseValue(Event event, boolean animate) {

+    private void increaseValue(Event event) {

         setValue(new Double(value.doubleValue() + Math.pow(10, -resolution)),

                 false, true);

-        if (DOM.eventGetType(event) == Event.ONMOUSEDOWN && animate) {

-            if (anim != null) {

-                anim.cancel();

-            }

-            anim = new Timer() {

-                public void run() {

-                    if (value.doubleValue() - Math.pow(10, -resolution) < max) {

-                        setValue(new Double(value.doubleValue()

-                                + Math.pow(10, -resolution)), false, true);

-                    }

-                }

-            };

-            anim.scheduleRepeating(100);

-            DOM.eventCancelBubble(event, true);

-        } else if (anim != null) {

-            anim.cancel();

-        }

     }

 

     private void setValueByEvent(Event event, boolean animate, boolean roundup) {

@@ -474,12 +401,7 @@ public class ISlider extends Widget implements Paintable, Field,
             // Calculate decoration size

             DOM.setStyleAttribute(base, "height", "0");

             DOM.setStyleAttribute(base, "overflow", "hidden");

-            final int decoHeight = DOM.getElementPropertyInt(getElement(),

-                    "offsetHeight");

-            // Get available space size

-            final int availableHeight = DOM.getElementPropertyInt(DOM

-                    .getParent(getElement()), "offsetHeight");

-            int h = availableHeight - decoHeight;

+            int h = DOM.getElementPropertyInt(getElement(), "offsetHeight");

             if (h < MIN_SIZE) {

                 h = MIN_SIZE;

             }