SetupButton.qml 2.54 KB
Newer Older
Don Gagne's avatar
Don Gagne committed
1 2 3 4
import QtQuick 2.2
import QtQuick.Controls 1.2
import QtQuick.Controls.Styles 1.2
import QtGraphicalEffects 1.0
5 6

import QGroundControl.Palette 1.0
Don Gagne's avatar
Don Gagne committed
7 8 9

Button {
    checkable: true
10
    height: 60
Don Gagne's avatar
Don Gagne committed
11 12 13 14 15 16 17 18 19 20 21 22 23 24

    text: "Button"
    property bool setupComplete: true
    property bool setupIndicator: true

    style: ButtonStyle {
        id: buttonStyle

        property var __qgcpal: QGCPalette {
            colorGroup: control.enabled ? QGCPalette.Active : QGCPalette.Disabled
        }

        background: Rectangle {
            id: innerRect
25
            readonly property real titleHeight: 20
Don Gagne's avatar
Don Gagne committed
26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47

            border.color: control.checked ? "#eee333" : "#676767"
            radius: 10

            color: control.checked ? "#eee333" : "#343434"

            Text {
                id: titleBar

                width: parent.width
                height: parent.titleHeight

                verticalAlignment: TextEdit.AlignVCenter
                horizontalAlignment: TextEdit.AlignHCenter

                text: control.text
                font.pixelSize: 12
                color: control.checked ? "black" : "white"

                Rectangle {
                    id: setupIndicator

48
                    readonly property real indicatorRadius: 4
Don Gagne's avatar
Don Gagne committed
49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89

                    x: parent.width - (indicatorRadius * 2) - 5
                    y: (parent.height - (indicatorRadius * 2)) / 2
                    width: indicatorRadius * 2
                    height: indicatorRadius * 2

                    radius: indicatorRadius
                    color: control.setupIndicator ? (control.setupComplete ? "green" : "red") : innerRect.color
                }
            }

            Rectangle {
                width: parent.width
                height: parent.height - parent.titleHeight

                y: parent.titleHeight

                color: __qgcpal.window
                border.color: control.checked ? "#eee333" : "#676767"

                Image {
                    id: buttonImage
                    source: "setupButtonImage.png"
                    sourceSize: Qt.size(parent.width - 20, parent.height - 20)
                    anchors.horizontalCenter: parent.horizontalCenter
                    anchors.verticalCenter: parent.verticalCenter
                    smooth: true
                    visible: false
                }

                ColorOverlay {
                    anchors.fill: buttonImage
                    source: buttonImage
                    color: control.checked ? "#eee333" : "#58585a"
                }
            }
        }

    label: Item {}
    }
}