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

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 real   maxHeight                           ///< Maximum height for control, determines whether text is hidden to make control shorter
    property bool   horizontal:         false           /// toolstrip horizontal or vertical ?
    property bool   enableSwitchButton: false           /// enable horizontal vertical button ?


    property real  _horizontal: horizontal

    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 _imageWidthHeight: ScreenTools.isMobile ? ScreenTools.minTouchPixels : ScreenTools.defaultFontPixelWidth * 5

    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
    }

    GridLayout {
        id:                 toolStripGrid
        anchors.margins:    ScreenTools.defaultFontPixelWidth  / 2
        anchors.top:        parent.top
        anchors.left:       parent.left
        columnSpacing:      _buttonSpacing
        rowSpacing:         _buttonSpacing
        rows:               _horizontal  ?            1 : model.length
        columns:            _horizontal  ? model.length : 1

        QGCLabel {
            text:                       title
            font.pointSize:             ScreenTools.mobile ? ScreenTools.smallFontPointSize : ScreenTools.defaultFontPointSize
            Layout.alignment:           _horizontal ? Qt.AlignVCenter : Qt.AlignHCenter
        }

        // separator
        Rectangle {
            height:             _horizontal ? undefined     : 1
            width:              _horizontal ?         1     : undefined
            Layout.fillWidth:   _horizontal ? false : true
            Layout.fillHeight:  _horizontal ? true : false
            color:              qgcPal.text
        }

        GridLayout {
            rows:           _horizontal ?            1 : model.length
            columns:        _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: _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
                        anchors.left:   parent.left
                        anchors.top:    parent.top
                        height:         buttonColumn.height
                        width:          buttonColumn.width
                        color:          _showHighlight ? _repeaterPal.buttonHighlight : _repeaterPal.window

                        Column {
                            id:             buttonColumn
                            anchors.top:    parent.top
                            anchors.left:   parent.left
                            spacing:        _buttonSpacing

                            QGCColoredImage {
                                id:             buttonImage
                                height:         _imageWidthHeight
                                width:          _imageWidthHeight
                                //anchors.centerIn:   parent
                                source:             _source
                                sourceSize.height:  height
                                fillMode:           Image.PreserveAspectFit
                                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
                            }
                        }  // Column

                        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:             _horizontal ? undefined     : 1
            width:              _horizontal ?         1     : undefined
            Layout.fillWidth:   _horizontal ? false : true
            Layout.fillHeight:  _horizontal ? true : false
            color:              qgcPal.text
            visible:            enableSwitchButton
        }

        // switch button, tool strip horizontal <-> vertical
        Rectangle {
            id:             switchButtonRect
            height:         switchButtonColumn.height
            width:          switchButtonColumn.width
            color:          _showHighlight ? _switchButtonPal.buttonHighlight : _switchButtonPal.window
            visible:       enableSwitchButton

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

            QGCPalette { id: _switchButtonPal; colorGroupEnabled: enableSwitchButton }

            Column {
                id:             switchButtonColumn
                anchors.top:    parent.top
                anchors.left:   parent.left
                spacing:        _buttonSpacing

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

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

            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 (_root._horizontal === true) {
                        _root._horizontal = false
                    } else {
                        _root._horizontal = true
                    }
                }
            }
        } // switchButton Rectangle
    } // GridLayout

    DropPanel {
        id:         dropPanel
        toolStrip:  _root
    }
}