QML ScrollBar

[gedixss]

Hi guys,

I have a two problems. I have a Scroll Bar like this.

"ScrollBar":http://i.imgur.com/5IdE2SE.png

I want to do, what i showed in this picture. My first problem is when i scroll down my text goes out of my rectangle, another problem, I want ScrollBar shift to the right, out of my rectangle, any idea how can i do that ? :)

My main.qml

@import QtQuick 2.0

Rectangle {
width: 1280
height: 864;
color: "transparent";
y:160;

FontLoader { id: font; source: "/home/g/Documents/UI/canvas_img/fonts/OpenSans-Light.ttf" }

Text {
    id: text;
    anchors.horizontalCenter: parent.horizontalCenter;
    anchors.top: parent.top;
    anchors.topMargin: 30;
    text: "Rules";
    font.pixelSize: 30;
    font.family: font.name;
}

Rectangle {
id: _scrollbar;
width: 1000;
height: 300;
anchors.centerIn: parent;
color: "#c2c2c2"
radius: 8;
    ListView {
        id: list;
        width: 1000;
        height: 590;
        anchors.fill: parent;
        model: 1;
        delegate: Rectangle {
            height: 800;
            width: parent.width;
            color: "transparent" //(model.index %2 === 0 ? "darkgray" : "lightgray");
            Text {
                id: rules;
                anchors.left: parent.left;
                anchors.leftMargin: 15;
                anchors.topMargin: 15;
                text: "Rules Rules Rules Rules Rules Rules Rules Rules Rules Rules Rules Rules Rules Rules Rules  \nRules Rules Rules Rules Rules Rules Rules Rules Rules Rules Rules Rules \nRules Rules Rules Rules Rules Rules Rules Rules \nRules Rules Rules Rules ";
                font.pixelSize: 20;
                font.family: font.name;
            }
        }
    }
    ScrollBar {
        target: list;
    }
}

}@

[gedixss]

And my ScrollBar.qml

@import QtQuick 2.0

BorderImage {
property variant target
border {left: 0; top: 3; right: 0; bottom: 3}
width: 72

anchors {top: target.top; bottom: target.bottom; right: target.right }
visible: (track.height == slider.height) ? false : true //TODO: !visible -> width: 0 (but creates a binding loop)

Item {
anchors {fill: parent; margins: 1; rightMargin: 2; bottomMargin: 2}

    Rectangle {
        id: upArrow;
        anchors.top: parent.top;
        width: 72;
        height: 74;
        color: "#9d9d9d";
        radius: 8;

        Rectangle {
            id: up;
            width: 72;
            height: 72;
            radius: 8;

            gradient: off

            Gradient {
                id:off
                GradientStop { position: 0.0; color: "#ebebeb" }
                GradientStop { position: 1.0; color: "#c8c8c8" }
            }

            Gradient {
                id:onn
                GradientStop { position: 0.0; color: "#c8c8c8" }
                GradientStop { position: 1.0; color: "#c8c8c8" }
            }

            MouseArea {
                anchors.fill: parent
                onEntered:{
                    up.gradient=onn
                }

                onCanceled:{
                    up.gradient=off
                }

                onExited: {
                    up.gradient=off
                }
                onPressed: {
                    timer.scrollAmount = -10
                    timer.running = true;
                }
                onReleased: {
                    timer.running = false;
                }
            }
        }
    }

Timer {
property int scrollAmount

id: timer
repeat: true
interval: 20
onTriggered: {
target.contentY = Math.max(
0, Math.min(
target.contentY + scrollAmount,
target.contentHeight - target.height));
}
}

Item {
id: track
anchors {top: upArrow.bottom; topMargin: 1; bottom: dnArrow.top;}
width: parent.width

MouseArea {
anchors.fill: parent
onPressed: {
timer.scrollAmount = target.height * (mouseY < slider.y ? -1 : 1) // scroll by a page
timer.running = true;
}
onReleased: {
timer.running = false;
}
}

            Rectangle {
                id: slider;
                width: 72;
                radius: 8;
                height: 72;
                y: target.visibleArea.yPosition * track.height
                gradient: _off_

                Gradient {
                    id:_off_
                    GradientStop { position: 0.0; color: "#ebebeb" }
                    GradientStop { position: 1.0; color: "#c8c8c8" }
                }

                Gradient {
                    id:_onn_
                    GradientStop { position: 0.0; color: "#c8c8c8" }
                    GradientStop { position: 1.0; color: "#c8c8c8" }
                }

                MouseArea {
                    anchors.fill: parent
                    drag.target: parent
                    drag.axis: Drag.YAxis
                    drag.minimumY: 0
                    drag.maximumY: track.height - height

                    onEntered:{
                        slider.gradient=_onn_
                    }

                    onCanceled:{
                        slider.gradient=_off_
                    }

                    onExited: {
                        slider.gradient=_off_
                    }

                    onPositionChanged: {
                        if (pressedButtons == Qt.LeftButton) {
                            target.contentY = slider.y * target.contentHeight / track.height
                        }
                    }
                }
            }

}

    Rectangle {
        id: dnArrow;
        anchors.bottom: parent.bottom;
        width: 72;
        height: 74;
        color: "#9d9d9d";
        radius: 8;

        Rectangle {
            id: down;
            width: 72;
            height: 72;
            radius: 8;

            gradient: off_

            Gradient {
                id:off_
                GradientStop { position: 0.0; color: "#ebebeb" }
                GradientStop { position: 1.0; color: "#c8c8c8" }
            }

            Gradient {
                id:onn_
                GradientStop { position: 0.0; color: "#c8c8c8" }
                GradientStop { position: 1.0; color: "#c8c8c8" }
            }

            MouseArea {
                anchors.fill: parent

                onEntered:{
                    down.gradient=onn_
                }

                onCanceled:{
                    down.gradient=off_
                }

                onExited: {
                    down.gradient=off_
                }
                onPressed: {
                    timer.scrollAmount = 10
                    timer.running = true;
                }
                onReleased: {
                    timer.running = false;
                }
            }
        }
    }

}
}@

Thanks in advance ;))

[gedixss]

Problem shift to the right [Solved] :))

Can anyone help with text ? :)