ToolStrip.qml 10.3 KB
Newer Older
1 2 3 4 5 6 7 8 9
/****************************************************************************
 *
 *   (c) 2009-2016 QGROUNDCONTROL PROJECT <http://www.qgroundcontrol.org>
 *
 * QGroundControl is licensed according to the terms in the file
 * COPYING.md in the root of the source code directory.
 *
 ****************************************************************************/

10 11
import QtQuick          2.3
import QtQuick.Controls 1.2
12 13 14 15 16 17 18

import QGroundControl.ScreenTools   1.0
import QGroundControl.Palette       1.0

Rectangle {
    id:         _root
    color:      qgcPal.window
19
    width:      ScreenTools.isMobile ? ScreenTools.minTouchPixels : ScreenTools.defaultFontPixelWidth * 6
20 21 22 23 24
    height:     buttonStripColumn.height + (buttonStripColumn.anchors.margins * 2)
    radius:     _radius

    property string title:              "Title"
    property alias  model:              repeater.model
25 26
    property var    showAlternateIcon                   ///< List of bool values, one for each button in strip - true: show alternate icon, false: show normal icon
    property var    rotateImage                         ///< List of bool values, one for each button in strip - true: animation rotation, false: static image
27
    property var    animateImage                        ///< List of bool values, one for each button in strip - true: animate image, false: static image
28 29 30
    property var    buttonEnabled                       ///< List of bool values, one for each button in strip - true: button enabled, false: button disabled
    property var    buttonVisible                       ///< List of bool values, one for each button in strip - true: button visible, false: button invisible
    property real   maxHeight                           ///< Maximum height for control, determines whether text is hidden to make control shorter
31 32 33

    signal clicked(int index, bool checked)

Don Gagne's avatar
Don Gagne committed
34 35 36
    readonly property real  _radius:                ScreenTools.defaultFontPixelWidth / 2
    readonly property real  _margin:                ScreenTools.defaultFontPixelWidth / 2
    readonly property real  _buttonSpacing:         ScreenTools.defaultFontPixelWidth
37 38 39 40 41 42 43 44 45 46 47 48 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

    // All of the following values, connections and function are to support the ability to determine
    // whether to show or hide the optional elements on the fly.

    property bool _showOptionalElements:    true
    property bool _needRecalc:              true

    Component.onCompleted: recalcShowOptionalElements()

    onMaxHeightChanged: recalcShowOptionalElements()

    Connections {
        target: ScreenTools

        onDefaultFontPixelWidthChanged:     recalcShowOptionalElements()
        onDefaultFontPixelHeightChanged:    recalcShowOptionalElements()
    }

    onHeightChanged: {
        if (_needRecalc) {
            _needRecalc = false
            if (maxHeight && height > maxHeight) {
                _showOptionalElements = false
            }
        }
    }

    function recalcShowOptionalElements() {
        if (_showOptionalElements) {
            if (maxHeight && height > maxHeight) {
                _showOptionalElements = false
            }
        } else {
            _needRecalc = true
            _showOptionalElements = true
        }

    }
75

Don Gagne's avatar
Don Gagne committed
76 77
    QGCPalette { id: qgcPal }
    ExclusiveGroup { id: dropButtonsExclusiveGroup }
78 79 80 81 82

    function uncheckAll() {
        dropButtonsExclusiveGroup.current = null
        // Signal all toggles as off
        for (var i=0; i<model.length; i++) {
83 84
            if (model[i].toggle === true) {
                _root.clicked(i, false)
85 86 87 88 89 90 91 92 93 94 95 96 97 98
            }
        }
    }

    Column {
        id:                 buttonStripColumn
        anchors.margins:    ScreenTools.defaultFontPixelWidth  / 2
        anchors.top:        parent.top
        anchors.left:       parent.left
        anchors.right:      parent.right

        QGCLabel {
            anchors.horizontalCenter:   parent.horizontalCenter
            text:                       title
Don Gagne's avatar
Don Gagne committed
99
            visible:                    _showOptionalElements
100 101
        }

Don Gagne's avatar
Don Gagne committed
102
        Item { width: 1; height: _buttonSpacing; visible: _showOptionalElements }
103 104 105 106 107 108

        Rectangle {
            anchors.left:       parent.left
            anchors.right:      parent.right
            height:             1
            color:              qgcPal.text
Don Gagne's avatar
Don Gagne committed
109
            visible:            _showOptionalElements
110 111 112 113 114 115
        }

        Repeater {
            id: repeater

            delegate: Column {
Don Gagne's avatar
Don Gagne committed
116 117 118
                id:         buttonColumn
                width:      buttonStripColumn.width
                visible:    _root.buttonVisible ? _root.buttonVisible[index] : true
119 120 121 122

                property bool checked: false
                property ExclusiveGroup exclusiveGroup: dropButtonsExclusiveGroup

Don Gagne's avatar
Don Gagne committed
123 124 125 126
                property var    _iconSource:        modelData.iconSource
                property var    _alternateIconSource:   modelData.alternateIconSource
                property var    _source:                (_root.showAlternateIcon && _root.showAlternateIcon[index]) ? _alternateIconSource : _iconSource
                property bool   rotateImage:            _root.rotateImage ? _root.rotateImage[index] : false
127
                property bool   animateImage:           _root.animateImage ? _root.animateImage[index] : false
128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143

                onExclusiveGroupChanged: {
                    if (exclusiveGroup) {
                        exclusiveGroup.bindCheckable(buttonColumn)
                    }
                }

                onRotateImageChanged: {
                    if (rotateImage) {
                        imageRotation.running = true
                    } else {
                        imageRotation.running = false
                        button.rotation = 0
                    }
                }

144 145 146 147 148 149 150 151 152
                onAnimateImageChanged: {
                    if (animateImage) {
                        opacityAnimation.running = true
                    } else {
                        opacityAnimation.running = false
                        button.opacity = 1
                    }
                }

Don Gagne's avatar
Don Gagne committed
153 154 155 156 157
                Item {
                    width:      1
                    height:     _buttonSpacing
                    visible:    index == 0 ? _showOptionalElements : true
                }
158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183

                Rectangle {
                    anchors.left:   parent.left
                    anchors.right:  parent.right
                    height:         width
                    color:          checked ? qgcPal.buttonHighlight : qgcPal.button

                    QGCColoredImage {
                        id:                 button
                        anchors.fill:       parent
                        source:             _source
                        sourceSize.height:  parent.height
                        fillMode:           Image.PreserveAspectFit
                        mipmap:             true
                        smooth:             true
                        color:              checked ? qgcPal.buttonHighlightText : qgcPal.buttonText

                        RotationAnimation on rotation {
                            id:             imageRotation
                            loops:          Animation.Infinite
                            from:           0
                            to:             360
                            duration:       500
                            running:        false
                        }

184 185 186 187 188 189 190 191
                        NumberAnimation on opacity {
                            id:         opacityAnimation
                            running:    false
                            from:       0
                            to:         1.0
                            loops:      Animation.Infinite
                            duration:   2000
                        }
192 193
                    }

194
                    QGCMouseArea {
195
                        // Size of mouse area is expanded to make touch easier
196 197
                        anchors.leftMargin:     -buttonStripColumn.anchors.margins
                        anchors.rightMargin:    -buttonStripColumn.anchors.margins
198 199 200 201 202 203
                        anchors.left:           parent.left
                        anchors.right:          parent.right
                        anchors.top:            parent.top
                        height:                 parent.height + (_showOptionalElements? buttonLabel.height + buttonColumn.spacing : 0)
                        visible:                _root.buttonEnabled ? _root.buttonEnabled[index] : true
                        preventStealing:        true
204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219

                        onClicked: {
                            if (modelData.dropPanelComponent === undefined) {
                                dropPanel.hide()
                                if (modelData.toggle === true) {
                                    checked = !checked
                                } else {
                                    // dropPanel.hide above will close panel, but we need to do this to clear toggles
                                    uncheckAll()
                                }
                                _root.clicked(index, checked)
                            } else {
                                if (checked) {
                                    dropPanel.hide()    // hide affects checked, so this needs to be duplicated inside not outside if
                                } else {
                                    dropPanel.hide()    // hide affects checked, so this needs to be duplicated inside not outside if
220
                                    uncheckAll()
221 222 223 224 225 226 227 228 229 230 231 232 233 234
                                    checked = true
                                    var panelEdgeTopPoint = mapToItem(_root, width, 0)
                                    dropPanel.show(panelEdgeTopPoint, height, modelData.dropPanelComponent)
                                }
                            }
                        }
                    }
                }

                QGCLabel {
                    id:                         buttonLabel
                    anchors.horizontalCenter:   parent.horizontalCenter
                    font.pointSize:             ScreenTools.smallFontPointSize
                    text:                       modelData.name
Don Gagne's avatar
Don Gagne committed
235
                    visible:                    _showOptionalElements
236 237 238 239 240 241 242 243 244 245
                }
            }
        }
    }

    DropPanel {
        id:         dropPanel
        toolStrip:  _root
    }
}