/**************************************************************************** * * (c) 2009-2020 QGROUNDCONTROL PROJECT * * QGroundControl is licensed according to the terms in the file * COPYING.md in the root of the source code directory. * ****************************************************************************/ import QtQuick 2.11 <<<<<<< HEAD <<<<<<< HEAD import QtQuick.Controls 1.4 import QtQuick.Layouts 1.11 ======= import QtQuick.Controls 2.2 >>>>>>> upstream_merge ======= import QtQuick.Controls 2.2 >>>>>>> upstream_merge import QGroundControl 1.0 import QGroundControl.ScreenTools 1.0 import QGroundControl.Palette 1.0 import QGroundControl.Controls 1.0 // Tool Strip not tested for mobile devices! Rectangle { id: _root <<<<<<< HEAD <<<<<<< HEAD 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>>>>>> upstream_merge property real maxHeight ///< Maximum height for control, determines whether text is hidden to make control shorter property alias title: titleLabel.text function simulateClick(buttonIndex) { buttonIndex = buttonIndex + 1 // skip over title toolStripColumn.children[buttonIndex].clicked() <<<<<<< HEAD >>>>>>> upstream_merge ======= >>>>>>> upstream_merge } // Ensure we don't get narrower than content property real _idealWidth: (ScreenTools.isMobile ? ScreenTools.minTouchPixels : ScreenTools.defaultFontPixelWidth * 8) + toolStripColumn.anchors.margins * 2 signal dropped(int index) DeadMouseArea { anchors.fill: parent } <<<<<<< HEAD <<<<<<< HEAD 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 } ======= QGCFlickable { id: flickable anchors.margins: ScreenTools.defaultFontPixelWidth * 0.4 anchors.top: parent.top anchors.left: parent.left anchors.right: parent.right height: parent.height contentHeight: toolStripColumn.height flickableDirection: Flickable.VerticalFlick clip: true >>>>>>> upstream_merge GridLayout { id: modelButtonsGrid rows: toolStripGrid.horizontal ? 1 : model.length columns: toolStripGrid.horizontal ? model.length : 1 columnSpacing: _buttonSpacing rowSpacing: _buttonSpacing ======= QGCFlickable { id: flickable anchors.margins: ScreenTools.defaultFontPixelWidth * 0.4 anchors.top: parent.top anchors.left: parent.left anchors.right: parent.right height: parent.height contentHeight: toolStripColumn.height flickableDirection: Flickable.VerticalFlick clip: true Column { id: toolStripColumn anchors.left: parent.left anchors.right: parent.right spacing: ScreenTools.defaultFontPixelWidth * 0.25 QGCLabel { id: titleLabel anchors.left: parent.left anchors.right: parent.right horizontalAlignment: Text.AlignHCenter font.pointSize: ScreenTools.smallFontPointSize visible: title != "" } <<<<<<< HEAD >>>>>>> upstream_merge ======= >>>>>>> upstream_merge Repeater { id: repeater <<<<<<< HEAD <<<<<<< HEAD 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 ======= QGCHoverButton { id: buttonTemplate anchors.left: toolStripColumn.left anchors.right: toolStripColumn.right height: width radius: ScreenTools.defaultFontPixelWidth / 2 fontPointSize: ScreenTools.smallFontPointSize autoExclusive: true enabled: modelData.enabled visible: modelData.visible imageSource: modelData.showAlternateIcon ? modelData.alternateIconSource : modelData.iconSource text: modelData.text checked: modelData.checked checkable: modelData.dropPanelComponent || modelData.checkable onCheckedChanged: modelData.checked = checked onClicked: { dropPanel.hide() if (!modelData.dropPanelComponent) { modelData.triggered(this) } else if (checked) { var panelEdgeTopPoint = mapToItem(_root, width, 0) dropPanel.show(panelEdgeTopPoint, modelData.dropPanelComponent, this) checked = true _root.dropped(index) } } ======= QGCHoverButton { id: buttonTemplate anchors.left: toolStripColumn.left anchors.right: toolStripColumn.right height: width radius: ScreenTools.defaultFontPixelWidth / 2 fontPointSize: ScreenTools.smallFontPointSize autoExclusive: true enabled: modelData.enabled visible: modelData.visible imageSource: modelData.showAlternateIcon ? modelData.alternateIconSource : modelData.iconSource text: modelData.text checked: modelData.checked checkable: modelData.dropPanelComponent || modelData.checkable onCheckedChanged: modelData.checked = checked onClicked: { dropPanel.hide() if (!modelData.dropPanelComponent) { modelData.triggered(this) } else if (checked) { var panelEdgeTopPoint = mapToItem(_root, width, 0) dropPanel.show(panelEdgeTopPoint, modelData.dropPanelComponent, this) checked = true _root.dropped(index) } } >>>>>>> upstream_merge } } >>>>>>> upstream_merge } // 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 } }