Add ScrollDecorator component

ScrollDecorators API is defined in QtComponents's common API
This component just diplay how a Flickable content size and
content position is. It's similar to a ScrollBar but is not
interactive.

The current implemetation makes it visible only when flickable
content is moved.

The plasma implementation has 2 extra properties:
- orientation: Qt.Vertical / Qt.Horizontal orientaion
- inverted: true if the scroll decorator should appear inverted
  (the same logic of Slider and ScrollBar)
  it has a false default value

Signed-off-by: Daker Fernandes Pinheiro <dakerfp@gmail.com>

declarativeimports/plasmacomponents/ScrollDecorator.qml

@@ -0,0 +1,126 @@
+/*
+*   Copyright (C) 2011 by Daker Fernandes Pinheiro <dakerfp@gmail.com>
+*
+*   This program is free software; you can redistribute it and/or modify
+*   it under the terms of the GNU Library General Public License as
+*   published by the Free Software Foundation; either version 2, or
+*   (at your option) any later version.
+*
+*   This program is distributed in the hope that it will be useful,
+*   but WITHOUT ANY WARRANTY; without even the implied warranty of
+*   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+*   GNU General Public License for more details
+*
+*   You should have received a copy of the GNU Library General Public
+*   License along with this program; if not, write to the
+*   Free Software Foundation, Inc.,
+*   51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+*/
+
+import QtQuick 1.1
+import org.kde.plasma.core 0.1 as PlasmaCore
+
+Item {
+    id: scrollDecorator
+
+    // Common API
+    property Flickable flickableItem: null
+
+    // Plasma API
+    property int orientation: Qt.Horizontal
+    property bool inverted: false
+
+    // Convinience API
+    property bool _isVertical: orientation == Qt.Vertical
+    property bool _inverted: _isVertical ?
+        !scrollDecorator.inverted : scrollDecorator.inverted
+    property alias _value: range.value
+
+    implicitWidth: _isVertical ? 22 : 200
+    implicitHeight: _isVertical ? 200 : 22
+
+    visible: flickableItem && handle.width < contents.width
+
+    Item {
+        width: _isVertical ? scrollDecorator.height : scrollDecorator.width
+        height: _isVertical ? scrollDecorator.width : scrollDecorator.height
+        rotation: _isVertical ? -90 : 0
+
+        anchors.centerIn: parent
+
+        PlasmaCore.Svg {
+            id: scrollDecoratorSvg
+            imagePath: "widgets/scrollDecorator"
+        }
+
+        Item {
+            id: contents
+
+            anchors.fill: parent
+
+            PlasmaCore.RangeModel {
+                id: range
+
+                minimumValue: 0
+                maximumValue: {
+                    var diff;
+                    if (_isVertical)
+                        diff = flickableItem.contentHeight - flickableItem.height;
+                    else
+                        diff = flickableItem.contentWidth - flickableItem.width;
+
+                    return Math.max(0, diff);
+                }
+                stepSize: 0.0
+                inverted: _inverted
+                positionAtMinimum: 0 + handle.width / 2
+                positionAtMaximum: contents.width - handle.width / 2
+                value: _isVertical ? flickableItem.contentY : flickableItem.contentX
+            }
+
+            PlasmaCore.FrameSvgItem {
+                id: handle
+
+                x: range.position
+                transform: Translate { x: - handle.width / 2 }
+                anchors.verticalCenter: parent.verticalCenter
+                width: {
+                    var ratio;
+                    if (_isVertical)
+                        ratio = flickableItem.visibleArea.heightRatio;
+                    else
+                        ratio = flickableItem.visibleArea.widthRatio;
+
+                    return ratio * parent.width;
+                }
+                height: parent.height - margins.top // TODO: check mergin
+                imagePath: "widgets/scrollbar"
+                prefix: "slider"
+                opacity: flickableItem && flickableItem.flicking ? 1 : 0
+
+                Connections {
+                    target: flickableItem
+                    onMovementStarted: handle.opacity = 1
+                    onMovementEnded: opacityAnimation.start()
+                }
+
+                Behavior on x {
+                    PropertyAnimation {
+                        duration: 150
+                        easing.type: Easing.OutSine
+                    }
+                }
+
+                PropertyAnimation {
+                    id: opacityAnimation
+
+                    target: handle
+                    property: "opacity"
+                    from: 1; to: 0
+                    duration: 500
+                    easing.type: Easing.Linear
+                }
+            }
+        }
+    }
+}

declarativeimports/plasmacomponents/qmldir

@@ -12,6 +12,7 @@ Highlight 0.1 Highlight.qml
 PushButton 0.1 PushButton.qml
 RadioButton 0.1 RadioButton.qml
 ScrollBar 0.1 ScrollBar.qml
+ScrollDecorator 0.1 ScrollDecorator.qml
 Slider 0.1 Slider.qml
 Switch 0.1 Switch.qml
 ToolButton 0.1 ToolButton.qml

declarativeimports/test/Gallery.qml

@@ -21,8 +21,8 @@ import QtQuick 1.0
 import org.kde.plasma.components 0.1 as PlasmaComponents
 
 Rectangle {
-    width: 800
+    width: 1000
-    height: 400
+    height: 800
     color: "lightgrey"
 
     Flickable {
@@ -248,6 +248,75 @@ Rectangle {
                         }
                     }
                 }
+
+                Text {
+                    font.pixelSize: 20
+                    text: "Scroll Decorator"
+                }
+
+                Item {
+                    width: 200
+                    height: 200
+                    PlasmaComponents.Highlight {
+                        anchors.fill: parent
+                        anchors.margins: -10
+                    }
+                    Flickable {
+                        id: scrollArea
+                        anchors.fill: parent
+                        clip: true
+                        contentWidth: 400
+                        contentHeight: 400
+
+                        // Flickable Contents
+                        Rectangle {
+                            color: "green"
+                            width: 100
+                            height: 100
+                        }
+                        Rectangle {
+                            x: 80
+                            y: 80
+                            color: "blue"
+                            width: 200
+                            height: 200
+                        }
+                        Rectangle {
+                            x: 200
+                            y: 200
+                            color: "red"
+                            width: 150
+                            height: 150
+                        }
+                    }
+
+                    // Scroll Decorators
+                    PlasmaComponents.ScrollDecorator {
+                        orientation: Qt.Vertical
+                        flickableItem: scrollArea
+                        inverted: true
+                        anchors {
+                            top: scrollArea.top
+                            right: scrollArea.right
+                            bottom: scrollArea.bottom
+                        }
+                        Text {
+                            y: parent.height / 2
+                            x: 13
+                            rotation: -90
+                            text: "inverted"
+                        }
+                    }
+                    PlasmaComponents.ScrollDecorator {
+                        orientation: Qt.Horizontal
+                        flickableItem: scrollArea
+                        anchors {
+                            left: scrollArea.left
+                            right: scrollArea.right
+                            bottom: scrollArea.bottom
+                        }
+                    }
+                }
             }
 
             Column {