futuqtquickhackathon/FutuHeia/qml/FutuHeia-hackathon/maemo5/TimeDistanceSelector.qml

import Qt 4.7

Item {
    // api
    property alias hours: valueHours.displayText
    property alias minutes: valueMinutes.displayText
    property alias distance: valueDistance.displayText

    IntSelector {
        height: 20
        width:  40
    }

    // internal
    Text {
        id: textTime
        text: qsTr("Time")
        color: heiaLightGrey
        font {
            family: appItem.applicationFont
            pixelSize: appItem.applicationFontSize
        }

        anchors.left: parent.left
        anchors.leftMargin: 15
        anchors.top: parent.top
    }

    BorderImage {
        id: inputHours
        anchors.top: textTime.bottom
        anchors.topMargin: 5
        anchors.left: textTime.left
        width: 64; height: 48
        border { left: 6; top: 6; right: 6; bottom: 6 }
        horizontalTileMode: BorderImage.Repeat
        verticalTileMode: BorderImage.Repeat
        source: "textbox.png"
        MouseArea {
            anchors.fill:  parent
            onClicked: valueHours.focus = true;
        }
    }
    TextInput {
        id: valueHours
        anchors.horizontalCenter: inputHours.horizontalCenter
        anchors.verticalCenter: inputHours.verticalCenter
        focus: true
        cursorVisible: focus
        font {
            family: appItem.applicationFont
            pixelSize: appItem.applicationFontSize
        }
        inputMask: "09"
        text: "0"
        KeyNavigation.tab: valueMinutes
    }
    Text {
        id: textHours
        text: qsTr("h")
        font {
            family: appItem.applicationFont
            pixelSize: appItem.applicationFontSize
        }
        anchors.left: inputHours.right
        anchors.verticalCenter: inputHours.verticalCenter
        color: heiaLightGrey
        anchors.leftMargin: 3
    }

    BorderImage {
        id: inputMinutes
        anchors.left: textHours.right
        anchors.top: inputHours.top
        width: 64; height: 48
        border { left: 6; top: 6; right: 6; bottom: 6 }
        horizontalTileMode: BorderImage.Repeat
        verticalTileMode: BorderImage.Repeat
        source: "textbox.png"
        anchors.leftMargin: 3
        MouseArea {
            anchors.fill:  parent
            onClicked: valueMinutes.focus = true;
        }
    }
    TextInput {
        id: valueMinutes
        anchors.horizontalCenter: inputMinutes.horizontalCenter
        anchors.verticalCenter: inputMinutes.verticalCenter
        cursorVisible: focus
        font {
            family: appItem.applicationFont
            pixelSize: appItem.applicationFontSize
        }
        inputMask: "09"
        text: "0"
        KeyNavigation.tab: valueDistance
    }
    Text {
        id: textMinutes
        text: qsTr("min")
        font {
            family: appItem.applicationFont
            pixelSize: appItem.applicationFontSize
        }
        anchors.left: inputMinutes.right
        anchors.verticalCenter: inputMinutes.verticalCenter
        color: heiaLightGrey
        anchors.leftMargin: 3
    }

    Text {
        id: textDistance
        text: qsTr("Distance")
        font {
            family: appItem.applicationFont
            pixelSize: appItem.applicationFontSize
        }
        anchors.top: inputHours.bottom
        anchors.topMargin: 15
        anchors.left: textTime.left
        color: heiaLightGrey
    }

    BorderImage {
        id: inputDistance
        anchors.top: textDistance.bottom
        anchors.topMargin: 5
        anchors.left: textDistance.left
        width: 128; height: 48
        border { left: 6; top: 6; right: 6; bottom: 6 }
        source: "textbox.png"
        MouseArea {
            anchors.fill:  parent
            onClicked: valueDistance.focus = true;
        }
    }
    TextInput {
        id: valueDistance
        anchors.horizontalCenter: inputDistance.horizontalCenter
        anchors.verticalCenter: inputDistance.verticalCenter
        cursorVisible: focus
        font {
            family: appItem.applicationFont
            pixelSize: appItem.applicationFontSize
        }
        inputMask: "000"
        text: "0"
        KeyNavigation.tab: valueHours
    }

    Text {
        id: textDistanceUnit
        text: qsTr("km/miles")
        font {
            family: appItem.applicationFont
            pixelSize: appItem.applicationFontSize
        }
        anchors.left: inputDistance.right
        anchors.verticalCenter: inputDistance.verticalCenter
        color: heiaLightGrey
        anchors.leftMargin: 3
    }
}