Slider component finished, fixes #1030

svn changeset:2600/svn branch:trunk

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 f66bab15984cd959aa20162d6e3fc4dd4b15b052..04ef0ecf0321c3b4e09391a2e6dcabedf80b55dc 100644 (file)
--- a/src/com/itmill/toolkit/terminal/gwt/client/ui/ISlider.java
+++ b/src/com/itmill/toolkit/terminal/gwt/client/ui/ISlider.java
@@ -8,13 +8,22 @@ import com.google.gwt.user.client.Event;
 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
 import com.itmill.toolkit.terminal.gwt.client.Paintable;\r
 import com.itmill.toolkit.terminal.gwt.client.UIDL;\r
+import com.itmill.toolkit.terminal.gwt.client.Util;\r
 \r
-public class ISlider extends Widget implements Paintable {\r
+public class ISlider extends Widget implements Paintable,\r
+               ContainerResizedListener {\r
 \r
        public static final String CLASSNAME = "i-slider";\r
 \r
+       /**\r
+        * Minimum size (width or height, depending on orientation) of the slider\r
+        * base.\r
+        */\r
+       private static final int MIN_SIZE = 50;\r
+\r
        ApplicationConnection client;\r
 \r
        String id;\r
@@ -22,6 +31,7 @@ public class ISlider extends Widget implements Paintable {
        private boolean immediate;\r
        private boolean disabled;\r
        private boolean readonly;\r
+       private boolean scrollbarStyle;\r
 \r
        private int handleSize;\r
        private double min;\r
@@ -73,10 +83,13 @@ public class ISlider extends Widget implements Paintable {
                DOM.setStyleAttribute(bigger, "display", "none");\r
                DOM.setStyleAttribute(handle, "visibility", "hidden");\r
 \r
-               DOM.sinkEvents(base, Event.ONMOUSEDOWN);\r
+               DOM.sinkEvents(getElement(), Event.MOUSEEVENTS);\r
+               DOM.sinkEvents(base, Event.ONCLICK);\r
                DOM.sinkEvents(handle, Event.MOUSEEVENTS);\r
-               DOM.sinkEvents(smaller, Event.ONMOUSEDOWN | Event.ONMOUSEUP);\r
-               DOM.sinkEvents(bigger, Event.ONMOUSEDOWN | Event.ONMOUSEUP);\r
+               DOM.sinkEvents(smaller, Event.ONMOUSEDOWN | Event.ONMOUSEUP\r
+                               | Event.ONMOUSEOUT);\r
+               DOM.sinkEvents(bigger, Event.ONMOUSEDOWN | Event.ONMOUSEUP\r
+                               | Event.ONMOUSEOUT);\r
        }\r
 \r
        public void updateFromUIDL(UIDL uidl, ApplicationConnection client) {\r
@@ -95,15 +108,15 @@ public class ISlider extends Widget implements Paintable {
                vertical = uidl.hasAttribute("vertical");\r
                arrows = uidl.hasAttribute("arrows");\r
 \r
+               String style = "";\r
+               if (uidl.hasAttribute("style"))\r
+                       style = uidl.getStringAttribute("style");\r
+\r
+               scrollbarStyle = style.indexOf("scrollbar") > -1;\r
+\r
                if (arrows) {\r
                        DOM.setStyleAttribute(smaller, "display", "block");\r
                        DOM.setStyleAttribute(bigger, "display", "block");\r
-                       if (vertical) {\r
-                               int arrowSize = Integer.parseInt(DOM.getElementProperty(\r
-                                               smaller, "offsetWidth"));\r
-                               DOM.setStyleAttribute(bigger, "marginLeft", arrowSize + "px");\r
-                               DOM.setStyleAttribute(bigger, "marginRight", arrowSize + "px");\r
-                       }\r
                }\r
 \r
                if (vertical)\r
@@ -125,14 +138,12 @@ public class ISlider extends Widget implements Paintable {
 \r
                if (!vertical) {\r
                        // Draw handle with a delay to allow base to gain maximum width\r
-                       // TODO implement with onLoad or DeferredCommand ??\r
-                       Timer delay = new Timer() {\r
-                               public void run() {\r
+                       DeferredCommand.addCommand(new Command() {\r
+                               public void execute() {\r
                                        buildHandle();\r
                                        setValue(value, false, false);\r
                                }\r
-                       };\r
-                       delay.schedule(100);\r
+                       });\r
                } else {\r
                        buildHandle();\r
                        setValue(value, false, false);\r
@@ -140,122 +151,116 @@ public class ISlider extends Widget implements Paintable {
        }\r
 \r
        private void buildBase() {\r
-               if (vertical) {\r
-                       // TODO\r
-               } else {\r
-                       if (size > -1)\r
-                               DOM.setStyleAttribute(getElement(), "width", size + "px");\r
-                       else {\r
-                               Element p = DOM.getParent(getElement());\r
-                               if (Integer.parseInt(DOM.getElementProperty(p, "offsetWidth")) > 50)\r
-                                       DOM.setStyleAttribute(getElement(), "width", "auto");\r
-                               else {\r
-                                       // Set minimum of 50px width and adjust after all\r
-                                       // components have (supposedly) been drawn completely.\r
-                                       DOM.setStyleAttribute(getElement(), "width", "50px");\r
-                                       DeferredCommand.addCommand(new Command() {\r
-                                               public void execute() {\r
-                                                       Element p = DOM.getParent(getElement());\r
-                                                       if (Integer.parseInt(DOM.getElementProperty(p,\r
-                                                                       "offsetWidth")) > 50)\r
-                                                               DOM.setStyleAttribute(getElement(), "width",\r
-                                                                               "auto");\r
-                                               }\r
-                                       });\r
-                               }\r
+               final String styleAttribute = vertical ? "height" : "width";\r
+               final String domProperty = vertical ? "offsetHeight" : "offsetWidth";\r
+\r
+               if (size == -1) {\r
+                       Element p = DOM.getParent(getElement());\r
+                       if (DOM.getElementPropertyInt(p, domProperty) > 50) {\r
+                               if (vertical)\r
+                                       setHeight();\r
+                               else\r
+                                       DOM.setStyleAttribute(base, styleAttribute, "");\r
+                       } else {\r
+                               // Set minimum size and adjust after all components have\r
+                               // (supposedly) been drawn completely.\r
+                               DOM.setStyleAttribute(base, styleAttribute, MIN_SIZE + "px");\r
+                               DeferredCommand.addCommand(new Command() {\r
+                                       public void execute() {\r
+                                               Element p = DOM.getParent(getElement());\r
+                                               if (DOM.getElementPropertyInt(p, domProperty) > 50)\r
+                                                       if (vertical) {\r
+                                                               setHeight();\r
+                                                       } else\r
+                                                               DOM.setStyleAttribute(base, styleAttribute, "");\r
+                                       }\r
+                               });\r
                        }\r
-               }\r
-               // Allow absolute positioning of handle\r
-               DOM.setStyleAttribute(base, "position", "relative");\r
+               } else\r
+                       DOM.setStyleAttribute(base, styleAttribute, size + "px");\r
 \r
-               // TODO attach listeners for focusing and arrow keys\r
+               // TODO attach listeners for focusing and arrow keys + scroll wheel\r
        }\r
 \r
        private void buildHandle() {\r
-               // Allow absolute positioning\r
-               DOM.setStyleAttribute(handle, "position", "absolute");\r
+               String styleAttribute = vertical ? "height" : "width";\r
+               String handleAttribute = vertical ? "marginTop" : "marginLeft";\r
+               String domProperty = vertical ? "offsetHeight" : "offsetWidth";\r
 \r
-               if (vertical) {\r
-                       // TODO\r
-               } else {\r
-                       int t = Integer.parseInt(DOM.getElementProperty(base,\r
-                                       "offsetHeight"))\r
-                                       - Integer.parseInt(DOM.getElementProperty(handle,\r
-                                                       "offsetHeight"));\r
-                       DOM.setStyleAttribute(handle, "top", (t / 2) + "px");\r
-                       DOM.setStyleAttribute(handle, "left", "0px");\r
-                       int w = (int) (Double.parseDouble(DOM.getElementProperty(base,\r
-                                       "offsetWidth")) / 100 * handleSize);\r
+               DOM.setStyleAttribute(handle, handleAttribute, "0");\r
+\r
+               if (scrollbarStyle) {\r
+                       // Only stretch the handle if scrollbar style is set.\r
+                       int s = (int) (Double.parseDouble(DOM.getElementProperty(base,\r
+                                       domProperty)) / 100 * handleSize);\r
                        if (handleSize == -1) {\r
-                               int baseW = Integer.parseInt(DOM.getElementProperty(base,\r
-                                               "offsetWidth"));\r
+                               int baseS = Integer.parseInt(DOM.getElementProperty(base,\r
+                                               domProperty));\r
                                double range = (max - min) * (resolution + 1) * 3;\r
-                               w = (int) (baseW - range);\r
+                               s = (int) (baseS - range);\r
                        }\r
-                       if (w < 3)\r
-                               w = 3;\r
-                       DOM.setStyleAttribute(handle, "width", w + "px");\r
-               }\r
+                       if (s < 3)\r
+                               s = 3;\r
+                       DOM.setStyleAttribute(handle, styleAttribute, s + "px");\r
+               } else\r
+                       DOM.setStyleAttribute(handle, styleAttribute, "");\r
 \r
+               // Restore visibility\r
                DOM.setStyleAttribute(handle, "visibility", "visible");\r
 \r
        }\r
 \r
        private void setValue(Double value, boolean animate, boolean updateToServer) {\r
-               if (vertical) {\r
-                       // TODO\r
-               } else {\r
-                       int handleWidth = Integer.parseInt(DOM.getElementProperty(handle,\r
-                                       "offsetWidth"));\r
-                       int baseWidth = Integer.parseInt(DOM.getElementProperty(base,\r
-                                       "offsetWidth"));\r
-                       int range = baseWidth - handleWidth;\r
-                       double v = value.doubleValue();\r
-                       double valueRange = max - min;\r
-                       double p = 0;\r
-                       if (valueRange != 0)\r
-                               p = range * ((v - min) / valueRange);\r
-                       if (p < 0)\r
-                               p = 0;\r
-                       final double pos = p;\r
-\r
-                       String styleLeft = DOM.getStyleAttribute(handle, "left");\r
-                       int left = Integer.parseInt(styleLeft.substring(0, styleLeft\r
-                                       .length() - 2));\r
-\r
-                       if ((int) (Math.round(pos)) != left && animate) {\r
-                               if (anim != null)\r
-                                       anim.cancel();\r
-                               anim = new Timer() {\r
-                                       private int left;\r
-                                       private int goal = (int) Math.round(pos);\r
-                                       private int dir = 0;\r
-\r
-                                       public void run() {\r
-                                               String styleLeft = DOM\r
-                                                               .getStyleAttribute(handle, "left");\r
-                                               left = Integer.parseInt(styleLeft.substring(0,\r
-                                                               styleLeft.length() - 2));\r
-\r
-                                               // Determine direction\r
-                                               if (dir == 0)\r
-                                                       dir = (goal - left) / Math.abs(goal - left);\r
-\r
-                                               if ((dir > 0 && left >= goal)\r
-                                                               || (dir < 0 && left <= goal)) {\r
-                                                       this.cancel();\r
-                                                       return;\r
-                                               }\r
-                                               int increment = (goal - left) / 2;\r
-                                               DOM.setStyleAttribute(handle, "left",\r
-                                                               (left + increment) + "px");\r
+               final String styleAttribute = vertical ? "marginTop" : "marginLeft";\r
+               String domProperty = vertical ? "offsetHeight" : "offsetWidth";\r
+               int handleSize = Integer.parseInt(DOM.getElementProperty(handle,\r
+                               domProperty));\r
+               int baseSize = Integer.parseInt(DOM.getElementProperty(base,\r
+                               domProperty));\r
+               int range = baseSize - handleSize;\r
+               double v = value.doubleValue();\r
+               double valueRange = max - min;\r
+               double p = 0;\r
+               if (valueRange > 0)\r
+                       p = range * ((v - min) / valueRange);\r
+               if (p < 0)\r
+                       p = 0;\r
+               if (vertical)\r
+                       p = range - p - (Util.isIE6() ? 1 : 0);\r
+               final double pos = p;\r
+\r
+               int current = DOM.getIntStyleAttribute(handle, styleAttribute);\r
+\r
+               if ((int) (Math.round(pos)) != current && animate) {\r
+                       if (anim != null)\r
+                               anim.cancel();\r
+                       anim = new Timer() {\r
+                               private int current;\r
+                               private 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
+                                       if ((dir > 0 && current >= goal)\r
+                                                       || (dir < 0 && current <= goal)) {\r
+                                               this.cancel();\r
+                                               return;\r
                                        }\r
-                               };\r
-                               anim.scheduleRepeating(50);\r
-                       } else\r
-                               DOM.setStyleAttribute(handle, "left", ((int) pos) + "px");\r
-                       // DOM.setAttribute(handle, "title", ""+v);\r
-               }\r
+                                       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
+               DOM.setElementAttribute(handle, "title", "" + v);\r
 \r
                if (value.doubleValue() < min)\r
                        value = new Double(min);\r
@@ -274,47 +279,10 @@ public class ISlider extends Widget implements Paintable {
                Element targ = DOM.eventGetTarget(event);\r
                if (dragging || DOM.compare(targ, handle)) {\r
                        processHandleEvent(event);\r
-\r
                } else if (DOM.compare(targ, smaller)) {\r
-                       // Decrease value by resolution\r
-                       if (DOM.eventGetType(event) == Event.ONMOUSEDOWN) {\r
-                               setValue(new Double(value.doubleValue()\r
-                                               - Math.pow(10, -resolution)), false, true);\r
-                               if (anim != null)\r
-                                       anim.cancel();\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
-                               anim.scheduleRepeating(100);\r
-                               DOM.eventCancelBubble(event, true);\r
-                       } else if (DOM.eventGetType(event) == Event.ONMOUSEUP) {\r
-                               anim.cancel();\r
-                       }\r
-\r
+                       decreaseValue(event);\r
                } else if (DOM.compare(targ, bigger)) {\r
-                       // Increase value by resolution\r
-                       if (DOM.eventGetType(event) == Event.ONMOUSEDOWN) {\r
-                               setValue(new Double(value.doubleValue()\r
-                                               + Math.pow(10, -resolution)), false, true);\r
-                               if (anim != null)\r
-                                       anim.cancel();\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
-                               anim.scheduleRepeating(100);\r
-                               DOM.eventCancelBubble(event, true);\r
-                       } else if (DOM.eventGetType(event) == Event.ONMOUSEUP) {\r
-                               anim.cancel();\r
-                       }\r
-\r
+                       increaseValue(event);\r
                } else\r
                        processBaseEvent(event);\r
        }\r
@@ -333,7 +301,7 @@ public class ISlider extends Widget implements Paintable {
                        break;\r
                case Event.ONMOUSEMOVE:\r
                        if (dragging) {\r
-                               DOM.setCapture(getElement());\r
+                               // DOM.setCapture(getElement());\r
                                setValueByEvent(event, false, false);\r
                        }\r
                        break;\r
@@ -353,23 +321,73 @@ public class ISlider extends Widget implements Paintable {
                                setValueByEvent(event, true, true);\r
                                DOM.eventCancelBubble(event, true);\r
                        }\r
+               } else if (DOM.eventGetType(event) == Event.ONMOUSEDOWN && dragging) {\r
+                       dragging = false;\r
+                       DOM.releaseCapture(getElement());\r
+                       setValueByEvent(event, true, true);\r
                }\r
        }\r
 \r
+       private void decreaseValue(Event event) {\r
+               if (DOM.eventGetType(event) == Event.ONMOUSEDOWN) {\r
+                       setValue(\r
+                                       new Double(value.doubleValue() - Math.pow(10, -resolution)),\r
+                                       false, true);\r
+                       if (anim != null)\r
+                               anim.cancel();\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
+                       anim.scheduleRepeating(100);\r
+                       DOM.eventCancelBubble(event, true);\r
+               } else\r
+                       anim.cancel();\r
+       }\r
+\r
+       private void increaseValue(Event event) {\r
+               if (DOM.eventGetType(event) == Event.ONMOUSEDOWN) {\r
+                       setValue(\r
+                                       new Double(value.doubleValue() + Math.pow(10, -resolution)),\r
+                                       false, true);\r
+                       if (anim != null)\r
+                               anim.cancel();\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
+                       anim.scheduleRepeating(100);\r
+                       DOM.eventCancelBubble(event, true);\r
+               } else\r
+                       anim.cancel();\r
+       }\r
+\r
        private void setValueByEvent(Event event, boolean animate, boolean roundup) {\r
-               int x = DOM.eventGetClientX(event);\r
-               // int y = DOM.eventGetClientY(event);\r
                double v = min; // Fallback to min\r
-               if (vertical) {\r
-                       // TODO\r
-               } else {\r
-                       double handleW = Integer.parseInt(DOM.getElementProperty(handle,\r
-                                       "offsetWidth"));\r
-                       double baseX = DOM.getAbsoluteLeft(base) + handleW / 2;\r
-                       double baseW = Integer.parseInt(DOM.getElementProperty(base,\r
-                                       "offsetWidth"));\r
-                       v = ((x - baseX) / (baseW - handleW)) * (max - min) + min;\r
-               }\r
+\r
+               int coord = vertical ? DOM.eventGetClientY(event) : DOM\r
+                               .eventGetClientX(event);\r
+               String domProperty = vertical ? "offsetHeight" : "offsetWidth";\r
+\r
+               double handleSize = Integer.parseInt(DOM.getElementProperty(handle,\r
+                               domProperty));\r
+               double baseSize = Integer.parseInt(DOM.getElementProperty(base,\r
+                               domProperty));\r
+               double baseOffset = vertical ? DOM.getAbsoluteTop(base) - handleSize\r
+                               / 2 : DOM.getAbsoluteLeft(base) + handleSize / 2;\r
+\r
+               if (vertical)\r
+                       v = ((baseSize - (coord - baseOffset)) / (baseSize - handleSize))\r
+                                       * (max - min) + min;\r
+               else\r
+                       v = ((coord - baseOffset) / (baseSize - handleSize)) * (max - min)\r
+                                       + min;\r
 \r
                if (v < min)\r
                        v = min;\r
@@ -387,4 +405,32 @@ public class ISlider extends Widget implements Paintable {
                setValue(new Double(v), animate, roundup);\r
        }\r
 \r
+       public void iLayout() {\r
+               if (vertical) {\r
+                       setHeight();\r
+               }\r
+               // Update handle position\r
+               setValue(value, false, false);\r
+       }\r
+\r
+       private void setHeight() {\r
+               if (size == -1) {\r
+                       // Calculate decoration size\r
+                       DOM.setStyleAttribute(base, "height", "0");\r
+                       DOM.setStyleAttribute(base, "overflow", "hidden");\r
+                       int decoHeight = DOM.getElementPropertyInt(getElement(),\r
+                                       "offsetHeight");\r
+                       // Get available space size\r
+                       int availableHeight = DOM.getElementPropertyInt(DOM\r
+                                       .getParent(getElement()), "offsetHeight");\r
+                       int h = availableHeight - decoHeight;\r
+                       if (h < MIN_SIZE)\r
+                               h = MIN_SIZE;\r
+                       DOM.setStyleAttribute(base, "height", h + "px");\r
+               } else {\r
+                       DOM.setStyleAttribute(base, "height", size + "px");\r
+               }\r
+               DOM.setStyleAttribute(base, "overflow", "");\r
+       }\r
+\r
 }\r

diff --git a/src/com/itmill/toolkit/terminal/gwt/public/default/slider/img/arrow-left-over.png b/src/com/itmill/toolkit/terminal/gwt/public/default/slider/img/arrow-left-over.png
deleted file mode 100644 (file)
index a87df4b..0000000
Binary files a/src/com/itmill/toolkit/terminal/gwt/public/default/slider/img/arrow-left-over.png and /dev/null differ

diff --git a/src/com/itmill/toolkit/terminal/gwt/public/default/slider/img/arrow-left.png b/src/com/itmill/toolkit/terminal/gwt/public/default/slider/img/arrow-left.png
deleted file mode 100644 (file)
index de77d45..0000000
Binary files a/src/com/itmill/toolkit/terminal/gwt/public/default/slider/img/arrow-left.png and /dev/null differ

diff --git a/src/com/itmill/toolkit/terminal/gwt/public/default/slider/img/arrow-right-over.png b/src/com/itmill/toolkit/terminal/gwt/public/default/slider/img/arrow-right-over.png
deleted file mode 100644 (file)
index ccfaba5..0000000
Binary files a/src/com/itmill/toolkit/terminal/gwt/public/default/slider/img/arrow-right-over.png and /dev/null differ

diff --git a/src/com/itmill/toolkit/terminal/gwt/public/default/slider/img/arrow-right.png b/src/com/itmill/toolkit/terminal/gwt/public/default/slider/img/arrow-right.png
deleted file mode 100644 (file)
index becbcdc..0000000
Binary files a/src/com/itmill/toolkit/terminal/gwt/public/default/slider/img/arrow-right.png and /dev/null differ

diff --git a/src/com/itmill/toolkit/terminal/gwt/public/default/slider/img/bg.png b/src/com/itmill/toolkit/terminal/gwt/public/default/slider/img/bg.png
deleted file mode 100644 (file)
index 0c4400b..0000000
Binary files a/src/com/itmill/toolkit/terminal/gwt/public/default/slider/img/bg.png and /dev/null differ

diff --git a/src/com/itmill/toolkit/terminal/gwt/public/default/slider/img/handle-bg.png b/src/com/itmill/toolkit/terminal/gwt/public/default/slider/img/handle-bg.png
deleted file mode 100644 (file)
index 027f520..0000000
Binary files a/src/com/itmill/toolkit/terminal/gwt/public/default/slider/img/handle-bg.png and /dev/null differ

diff --git a/src/com/itmill/toolkit/terminal/gwt/public/default/slider/img/handle-horizontal.png b/src/com/itmill/toolkit/terminal/gwt/public/default/slider/img/handle-horizontal.png
new file mode 100755 (executable)
index 0000000..a4fc19d
Binary files /dev/null and b/src/com/itmill/toolkit/terminal/gwt/public/default/slider/img/handle-horizontal.png differ

diff --git a/src/com/itmill/toolkit/terminal/gwt/public/default/slider/img/handle-left.png b/src/com/itmill/toolkit/terminal/gwt/public/default/slider/img/handle-left.png
deleted file mode 100644 (file)
index 703acb9..0000000
Binary files a/src/com/itmill/toolkit/terminal/gwt/public/default/slider/img/handle-left.png and /dev/null differ

diff --git a/src/com/itmill/toolkit/terminal/gwt/public/default/slider/img/handle-right.png b/src/com/itmill/toolkit/terminal/gwt/public/default/slider/img/handle-right.png
deleted file mode 100644 (file)
index 91b07ab..0000000
Binary files a/src/com/itmill/toolkit/terminal/gwt/public/default/slider/img/handle-right.png and /dev/null differ

diff --git a/src/com/itmill/toolkit/terminal/gwt/public/default/slider/img/handle-vertical.png b/src/com/itmill/toolkit/terminal/gwt/public/default/slider/img/handle-vertical.png
new file mode 100755 (executable)
index 0000000..280fff8
Binary files /dev/null and b/src/com/itmill/toolkit/terminal/gwt/public/default/slider/img/handle-vertical.png differ

diff --git a/src/com/itmill/toolkit/terminal/gwt/public/default/slider/slider.css b/src/com/itmill/toolkit/terminal/gwt/public/default/slider/slider.css
index c7c4f665bdbce4753aadfd5859e6da5834b4b5f1..fb9fb43e4348099c61c8a431804bbd2df2d7c125 100644 (file)
--- a/src/com/itmill/toolkit/terminal/gwt/public/default/slider/slider.css
+++ b/src/com/itmill/toolkit/terminal/gwt/public/default/slider/slider.css
@@ -1,99 +1,80 @@
-.i-slider {\r
-       background: #c3d0dd url(../img/bg.png) repeat-x;\r
-       border: 1px solid #29528a;\r
-       border-left: none;\r
-       border-right: none;\r
-       height: 14px;\r
-}\r
-.i-slider:before {\r
-       display: block;\r
-       width: 1px;\r
-       height: 14px;\r
-       background-color: #29528a;\r
-       border-top: 1px solid #b9c8dc;\r
-       border-bottom: 1px solid #b9c8dc;\r
-       margin: -1px 0 -15px -1px;\r
-       content: "";\r
-}\r
-.i-slider:after {\r
-       display: block;\r
-       width: 1px;\r
-       height: 14px;\r
-       background-color: #29528a;\r
-       border-top: 1px solid #b9c8dc;\r
-       border-bottom: 1px solid #b9c8dc;\r
-       margin: -15px 0 0 100%;\r
-       content: "";\r
-}\r
-.i-slider-base {\r
-       background: #c3d0dd url(../img/bg.png) repeat-x;\r
-       height: 14px;\r
-       overflow: hidden;\r
-}\r
-.i-slider-handle {\r
-       background: #fff url(../img/handle-bg.png) repeat-x;\r
-       border: 1px solid #29528a;\r
-       height: 10px;\r
-       font-size: 1px;\r
-}\r
-.i-slider-handle:before {\r
-       display: block;\r
-       height: 12px;\r
-       background: transparent url(../img/handle-right.png) no-repeat right top;\r
-       margin: -1px -1px 0 -1px;\r
-       content: url(../img/handle-left.png);\r
-}\r
-.i-slider-bigger {\r
-       background: #dde4ef url(../img/arrow-right.png);\r
-       float: right;\r
-       width: 14px;\r
-       height: 14px;\r
-       overflow: hidden;\r
-       margin: 0 0 0 1px;\r
-}\r
-.i-slider-bigger:hover {\r
-       background-image: url(../img/arrow-right-over.png);\r
-}\r
-.i-slider-smaller {\r
-       background: #dde4ef url(../img/arrow-left.png);\r
-       float: left;\r
-       width: 14px;\r
-       height: 14px;\r
-       overflow: hidden;\r
-       margin: 0 1px 0 0;\r
-}\r
-.i-slider-smaller:hover {\r
-       background-image: url(../img/arrow-left-over.png);\r
-}\r
-\r
-\r
-\r
-/*-----------------\r
-  Vertical styles \r
-  -----------------*/\r
-\r
-.i-slider-vertical {\r
-\r
-}\r
-.i-slider-vertical .i-slider-base {\r
-       \r
-}\r
-.i-slider-vertical .i-slider-handle {\r
-\r
-}\r
-.i-slider-vertical .i-slider-bigger {\r
-\r
-}\r
-\r
-\r
-\r
-/*--------------------\r
-  IE specific styles\r
-  -------------------*/\r
-\r
-* html .i-slider {\r
-       border: 1px solid #29528a;\r
-}\r
-*+html .i-slider {\r
-       border: 1px solid #29528a;\r
+/*--------------------------
+  Default (horizontal) styles
+  --------------------------*/
+
+.i-slider {
+       border: 1px solid #d8dbdc;
+       height: 2px;
+       margin: 5px 0;
+}
+
+.i-slider-base {
+       height: 1px;
+       border-top: 1px solid #e5e8e8;
+       background: #fff;
+}
+.i-slider-handle {
+       background: #babfc0 url(img/handle-horizontal.png);
+       width: 7px;
+       height: 15px;
+       margin-top: -5px;
+       font-size: 0;
+       cursor: pointer;
+}
+/* TODO
+.i-slider-bigger {
+       background: #dde4ef url(img/arrow-right.png);
+       float: right;
+       width: 14px;
+       height: 14px;
+       overflow: hidden;
+       margin: 0 0 0 1px;
+}
+
+.i-slider-bigger:hover {
+       background-image: url(img/arrow-right-over.png);
+}
+
+.i-slider-smaller {
+       background: #dde4ef url(img/arrow-left.png);
+       float: left;
+       width: 14px;
+       height: 14px;
+       overflow: hidden;
+       margin: 0 1px 0 0;
+}
+
+.i-slider-smaller:hover {
+       background-image: url(img/arrow-left-over.png);
+}
+*/
+
+
+/*-----------------
+  Vertical styles 
+  -----------------*/
+
+.i-slider-vertical {
+       width: 2px;
+       height: auto;
+       margin: 0 5px;
+}
+.i-slider-vertical .i-slider-base {
+       width: 1px;
+       border-left: 1px solid #e5e8e8;
+       background: #fff;
+}
+.i-slider-vertical .i-slider-handle {
+       background: #babfc0 url(img/handle-vertical.png);
+       width: 14px;
+       height: 7px;
+       font-size: 0;
+       cursor: pointer;
+       margin-left: -7px;
+}
+.i-slider-vertical .i-slider-bigger {
+
+}
+.i-slider-vertical .i-slider-smaller {
+
 }
\ No newline at end of file

diff --git a/src/com/itmill/toolkit/ui/Slider.java b/src/com/itmill/toolkit/ui/Slider.java
index 20ef7d65eaea04a086eb181d8cb7fda6a8cc9279..213e9aaf608bb09d5dfe0d17870693853f5d0bff 100644 (file)
--- a/src/com/itmill/toolkit/ui/Slider.java
+++ b/src/com/itmill/toolkit/ui/Slider.java
@@ -45,6 +45,14 @@ public class Slider extends AbstractField {
 \r
        public static final int ORIENTATION_VERTICAL = 1;\r
 \r
+       /**\r
+        * Style constant representing a scrollbar styled slider. Use this with\r
+        * {@link #addStyleName(String)}. Default styling usually represents a\r
+        * common slider found e.g. in Adobe Photoshop. The client side\r
+        * implementation dictates how different styles will look.\r
+        */\r
+       public static final String STYLE_SCROLLBAR = "scrollbar";\r
+\r
        /** Minimum value of slider */\r
        private double min = 0;\r
 \r
@@ -82,7 +90,7 @@ public class Slider extends AbstractField {
         * (client-side implementation decides the increment, usually somewhere\r
         * between 5-10% of slide range).\r
         */\r
-       private boolean arrows = true;\r
+       private boolean arrows = false;\r
 \r
        /**\r
         * Default Slider constructor. Sets all values to defaults and the slide\r
@@ -295,7 +303,7 @@ public class Slider extends AbstractField {
        /**\r
         * Get the current Slider size.\r
         * \r
-        * @return size in pixels or -1.\r
+        * @return size in pixels or -1 for auto sizing.\r
         */\r
        public int getSize() {\r
                return size;\r
@@ -391,6 +399,9 @@ public class Slider extends AbstractField {
                        target.addAttribute("hsize", handleSize);\r
                else\r
                        target.addAttribute("hsize", 100);\r
+               \r
+               if(!getStyleName().equals(""))\r
+                       target.addAttribute("style", getStyleName());\r
 \r
        }\r
 \r