DigitSelector6.qml

/****************************************************************************

Copyright 2013-2014 Michał Prędotka

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

****************************************************************************/

import QtQuick 1.1

Item {
    id: root

    property alias digit_list: digit_list
    property alias digit_root: digit_root
    property alias current_digit: digit_list.currentIndex
    property int digit_text: 5 - parseInt(current_digit, 10)

    focus: true
    width: digit_root.width
    height: up_rectangle.height + digit_root.height + down_rectangle.height + 12

    Keys.onUpPressed: if (current_digit > 0 ){
                          current_digit = current_digit - 1;
                      }
    Keys.onDownPressed: if (current_digit < 5){
                            current_digit = current_digit + 1;
                        }
    Keys.onDigit0Pressed: current_digit = 5-0
    Keys.onDigit1Pressed: current_digit = 5-1
    Keys.onDigit2Pressed: current_digit = 5-2
    Keys.onDigit3Pressed: current_digit = 5-3
    Keys.onDigit4Pressed: current_digit = 5-4
    Keys.onDigit5Pressed: current_digit = 5-5

    // Up arrow
    Rectangle {
        id: up_rectangle

        color: "#989898"
        width: 20
        height: 20
        radius: 4
        anchors {
            bottom: digit_root.top
            bottomMargin: 6
            horizontalCenter: parent.horizontalCenter
        }

        Image {
            id: up_image

            source: "images/back.png"
            width: 12
            fillMode: Image.PreserveAspectFit
            rotation: 90
            anchors.centerIn: parent
            smooth: true
        }

        MouseArea {
            id: up_rectangle_ma

            anchors.fill: parent
            onClicked: {
                if (current_digit > 0 ){
                    current_digit = current_digit - 1;
                    root.focus = true;
                }
            }
        }
    }

    // Digit
    Rectangle {
        id: digit_root

        color: root.focus ? "#989898" : "transparent"
        width: digit_list.currentItem.width + 10
        height: digit_list.currentItem.height + 10
        radius: 4
        anchors.centerIn: parent

        ListView {
            id: digit_list

            width: digit_list.currentItem.width
            height: digit_list.currentItem.height
            anchors.centerIn: parent
            maximumFlickVelocity: 400
            snapMode: ListView.SnapToItem
            clip: true
            model: [5,4,3,2,1,0]
            delegate:
                      Text {
                          id: digit_text

                          color: styl.text_color_primary
                          font.pixelSize: 40
                          text: modelData
                      }
            highlightRangeMode: ListView.StrictlyEnforceRange
        }

        MouseArea {
            anchors.fill: parent
            onClicked: root.focus = true
        }
    }

    // Down arrow
    Rectangle {
        id: down_rectangle

        color: "#989898"
        width: 20
        height: 20
        radius: 4
        anchors {
            top: digit_root.bottom
            topMargin: 6
            horizontalCenter: parent.horizontalCenter
        }

        Image {
            id: down_image

            source: "images/back.png"
            width: 12
            fillMode: Image.PreserveAspectFit
            rotation: 270
            anchors.centerIn: parent
            smooth: true
        }

        MouseArea {
            id: down_rectangle_ma

            anchors.fill: parent
            onClicked: {
                if (current_digit < 5){
                    current_digit = current_digit + 1;
                    root.focus = true;
                }
            }
        }
    }
}