ToolStrip.qml

/****************************************************************************
 *
 *   (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.
 *
 ****************************************************************************/

import QtQuick          2.11
import QtQuick.Controls 1.4
import QtQuick.Layouts  1.11

import QGroundControl.ScreenTools   1.0
import QGroundControl.Palette       1.0

// Tool Strip not tested for mobile devices!
Rectangle {
    id:         _root
    color:      qgcPal.window
    width:      toolStripGrid.width + (toolStripGrid.anchors.margins * 2)
    height:     toolStripGrid.height + (toolStripGrid.anchors.margins * 2)
    radius:     _radius
    border.width:   1
    border.color:   qgcPal.globalTheme === QGCPalette.Light ? Qt.rgba(0,0,0,0.35) : Qt.rgba(1,1,1,0.35)

    property string title:              "Title"
    property alias  model:              repeater.model
    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
    property var    animateImage                        ///< List of bool values, one for each button in strip - true: animate image, false: static image
    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 var    maxHeight                           /// legacy parameter, does not have any impact
    property bool   horizontal:         false           /// toolstrip horizontal or vertical ?
    property bool   enableSwitchButton: false           /// enable horizontal vertical button ?



    signal clicked(int index, bool checked)

    readonly property real  _radius:                ScreenTools.defaultFontPixelWidth / 2
    readonly property real  _margin:                ScreenTools.defaultFontPixelWidth / 2
    readonly property real  _buttonSpacing:         ScreenTools.defaultFontPixelHeight / 4

    readonly property real _buttonWidthHeight: ScreenTools.isMobile ? ScreenTools.minTouchPixels : ScreenTools.defaultFontPixelWidth * 6

    Component.onCompleted: toolStripGrid.horizontal = _root.horizontal

    onHorizontalChanged: toolStripGrid.horizontal = _root.horizontal

    QGCPalette { id: qgcPal }
    ExclusiveGroup { id: dropButtonsExclusiveGroup }

    function uncheckAll() {
        dropButtonsExclusiveGroup.current = null
        // Signal all toggles as off
        for (var i=0; i<model.length; i++) {
            if (model[i].toggle === true) {
                _root.clicked(i, false)
            }
        }
    }

    DeadMouseArea {
        anchors.fill: parent
    }

    Grid {
        id:                 toolStripGrid
        anchors.margins:    ScreenTools.defaultFontPixelWidth  / 2
        anchors.top:        parent.top
        anchors.left:       parent.left
        columnSpacing:      _buttonSpacing
        rowSpacing:         _buttonSpacing

        // Lable + Separator + GridLayout + Spearator + Switch Button
        property int numItems: enableSwitchButton ? 5 : 3
        rows:               toolStripGrid.horizontal ? 1 : numItems
        columns:            toolStripGrid.horizontal ? numItems : 1

        horizontalItemAlignment:    Grid.AlignHCenter
        verticalItemAlignment:      Grid.AlignVCenter

        property bool horizontal

        QGCLabel {
            text:                       title
            font.pointSize:             ScreenTools.mobile ? ScreenTools.smallFontPointSize : ScreenTools.defaultFontPointSize
        }


        // separator
        Rectangle {
            height:             toolStripGrid.horizontal ? _buttonWidthHeight : 1
            width:              toolStripGrid.horizontal ? 1 : _buttonWidthHeight
            color:              qgcPal.text
        }

        GridLayout {
            id:             modelButtonsGrid
            rows:           toolStripGrid.horizontal ?            1 : model.length
            columns:        toolStripGrid.horizontal ? model.length : 1
            columnSpacing:  _buttonSpacing
            rowSpacing:     _buttonSpacing



            Repeater {
                id: repeater

                delegate: FocusScope {
                    id:         scope
                    width:      buttonRect.width
                    height:     buttonRect.height
                    visible:    _root.buttonVisible ? _root.buttonVisible[index] : true
                    Layout.alignment: toolStripGrid.horizontal ? Qt.AlignVCenter : Qt.AlignHCenter

                    property bool checked: false
                    property ExclusiveGroup exclusiveGroup: dropButtonsExclusiveGroup

                    property bool   _buttonEnabled:         _root.buttonEnabled ? _root.buttonEnabled[index] : true
                    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
                    property bool   animateImage:           _root.animateImage ? _root.animateImage[index] : false
                    property bool   _hovered:               false
                    property bool   _showHighlight:         checked || (_buttonEnabled && _hovered)

                    QGCPalette { id: _repeaterPal; colorGroupEnabled: _buttonEnabled }

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

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

                    onAnimateImageChanged: {
                        if (animateImage) {
                            opacityAnimation.running = true
                        } else {
                            opacityAnimation.running = false
                            buttonImage.opacity = 1
                        }
                    }

                    Rectangle {
                        id:             buttonRect
                        height:         _buttonWidthHeight
                        width:          _buttonWidthHeight
                        color:          _showHighlight ? _repeaterPal.buttonHighlight : _repeaterPal.window
                        clip:           true
                        radius:         ScreenTools.defaultFontPixelWidth/2

                        Column {

                            anchors.horizontalCenter: parent.horizontalCenter

                            QGCColoredImage {
                                id:             buttonImage
                                height:             _buttonWidthHeight-buttonLabel.height
                                width:              _buttonWidthHeight-buttonLabel.height
                                source:             _source
                                anchors.horizontalCenter: parent.horizontalCenter
                                sourceSize.height:  _buttonWidthHeight-buttonLabel.height
                                sourceSize.width:   _buttonWidthHeight-buttonLabel.height
                                fillMode:           Image.PreserveAspectCrop
                                mipmap:             true
                                smooth:             true
                                color:              _showHighlight ? _repeaterPal.buttonHighlightText : _repeaterPal.text

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

                                NumberAnimation on opacity {
                                    id:         opacityAnimation
                                    running:    false
                                    from:       0
                                    to:         1.0
                                    loops:      Animation.Infinite
                                    duration:   2000
                                }
                            }

                            QGCLabel {
                                id:                         buttonLabel

                                anchors.horizontalCenter:   parent.horizontalCenter
                                font.pointSize:             ScreenTools.smallFontPointSize
                                text:                       modelData.name
                                color:                      _showHighlight ? _repeaterPal.buttonHighlightText : _repeaterPal.text
                                enabled:                    _buttonEnabled
                            }
                        }

                        QGCMouseArea {
                            anchors.fill:       parent
                            visible:            _buttonEnabled
                            hoverEnabled:       true
                            preventStealing:    true

                            onContainsMouseChanged: _hovered = containsMouse
                            onContainsPressChanged: _hovered = containsPress

                            onClicked: {
                                scope.focus = true
                                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
                                        uncheckAll()
                                        checked = true
                                        var panelEdgeTopPoint = mapToItem(_root, width, 0)
                                        dropPanel.show(panelEdgeTopPoint, height, modelData.dropPanelComponent)
                                    }
                                }
                            }
                        }
                    } // Rectangle
                } // FocusScope
            } // Repeater
        } // GridLayout

        // separator
        Rectangle {
            height:             toolStripGrid.horizontal ? _buttonWidthHeight : 1
            width:              toolStripGrid.horizontal ? 1 : _buttonWidthHeight
            color:              qgcPal.text
            visible:            enableSwitchButton
        }

        // switch button, tool strip horizontal <-> vertical
        Rectangle {
            id:             switchButtonRect
            height:         enableSwitchButton ? _buttonWidthHeight : 0
            width:          enableSwitchButton ? _buttonWidthHeight : 0
            color:          _showHighlight ? _switchButtonPal.buttonHighlight : _switchButtonPal.window
            visible:        enableSwitchButton
            radius:         ScreenTools.defaultFontPixelWidth/2
            clip:           true

            property bool   _hovered:               false
            property bool   _showHighlight:         (enableSwitchButton && _hovered)

            QGCPalette { id: _switchButtonPal; colorGroupEnabled: enableSwitchButton }

            Column {
                anchors.horizontalCenter: parent.horizontalCenter
                QGCColoredImage {
                    id:             switchButtonImage
                    height:             _buttonWidthHeight-switchButtonLabel.height
                    width:              _buttonWidthHeight-switchButtonLabel.height
                    source:             "/res/clockwise-arrow.svg"
                    anchors.horizontalCenter: parent.horizontalCenter
                    sourceSize.height:  _buttonWidthHeight-switchButtonLabel.height
                    sourceSize.width:   _buttonWidthHeight-switchButtonLabel.height
                    fillMode:           Image.PreserveAspectCrop
                    mipmap:             true
                    smooth:             true
                    color:              switchButtonRect._showHighlight ? _switchButtonPal.buttonHighlightText : _switchButtonPal.text
                }

                QGCLabel {
                    id:                         switchButtonLabel
                    anchors.horizontalCenter:   parent.horizontalCenter
                    font.pointSize:             ScreenTools.smallFontPointSize
                    text:                       toolStripGrid.horizontal ? "Vert" : "Hor"
                    color:                      switchButtonRect._showHighlight ? _switchButtonPal.buttonHighlightText : _switchButtonPal.text
                    enabled:                    enableSwitchButton
                }
            }

            QGCMouseArea {
                anchors.fill:       parent
                visible:            enableSwitchButton
                hoverEnabled:       true
                preventStealing:    true

                onContainsMouseChanged: switchButtonRect._hovered = containsMouse
                onContainsPressChanged: switchButtonRect._hovered = containsPress

                onClicked: {
                    dropPanel.hide()    // hide affects checked, so this needs to be duplicated inside not outside if
                    if (toolStripGrid.horizontal === true) {
                        toolStripGrid.horizontal = false
                    } else {
                        toolStripGrid.horizontal = true
                    }
                }
            }
        } // switchButton Rectangle
    } // GridLayout

    DropPanel {
        id:         dropPanel
        toolStrip:  _root
    }
}