Skip to content

Q
qgroundcontrol
Commit fa793fe4 authored by Stefan Dunca's avatar Stefan Dunca Committed by Gus Grubba
Browse files
Options

New toolstrip based on QGCHoverButton

parent a08427a3
Hide whitespace changes
Inline Side-by-side
Showing with 121 additions and 244 deletions
src/FlightDisplay/FlightDisplayView.qml
View file @ fa793fe4
...@@ -561,16 +561,16 @@ Item { ...@@ -561,16 +561,16 @@ Item {
ToolStrip { ToolStrip {
visible: (activeVehicle ? activeVehicle.guidedModeSupported : true) && !QGroundControl.videoManager.fullScreen visible: (activeVehicle ? activeVehicle.guidedModeSupported : true) && !QGroundControl.videoManager.fullScreen
id: toolStrip id: toolStrip
anchors.leftMargin: isInstrumentRight() ? ScreenTools.defaultFontPixelWidth : undefined
anchors.leftMargin: isInstrumentRight() ? ScreenTools.defaultFontPixelWidth * 2 : undefined
anchors.left: isInstrumentRight() ? _mapAndVideo.left : undefined anchors.left: isInstrumentRight() ? _mapAndVideo.left : undefined
anchors.rightMargin:isInstrumentRight() ? undefined : ScreenTools.defaultFontPixelWidth anchors.rightMargin:isInstrumentRight() ? undefined : ScreenTools.defaultFontPixelWidth
anchors.right: isInstrumentRight() ? undefined : _mapAndVideo.right anchors.right: isInstrumentRight() ? undefined : _mapAndVideo.right
anchors.topMargin: ScreenTools.toolbarHeight + (_margins * 2) anchors.topMargin: ScreenTools.toolbarHeight + anchors.leftMargin
anchors.top: _mapAndVideo.top anchors.top: _mapAndVideo.top
z: _mapAndVideo.z + 4 z: _mapAndVideo.z + 4
title: qsTr("Fly")
maxHeight: (_flightVideo.visible ? _flightVideo.y : parent.height) - toolStrip.y maxHeight: (_flightVideo.visible ? _flightVideo.y : parent.height) - toolStrip.y
buttonVisible: [_useChecklist, _guidedController.showTakeoff || !_guidedController.showLand, _guidedController.showLand && !_guidedController.showTakeoff, true, true, true ] buttonVisible: [_useChecklist, _guidedController.showTakeoff || !_guidedController.showLand, _guidedController.showLand && !_guidedController.showTakeoff, true, _guidedController.showPause, !_guidedController.showPause ]
buttonEnabled: [_useChecklist && activeVehicle, _guidedController.showTakeoff, _guidedController.showLand, _guidedController.showRTL, _guidedController.showPause, _anyActionAvailable ] buttonEnabled: [_useChecklist && activeVehicle, _guidedController.showTakeoff, _guidedController.showLand, _guidedController.showRTL, _guidedController.showPause, _anyActionAvailable ]
property bool _anyActionAvailable: _guidedController.showStartMission || _guidedController.showResumeMission || _guidedController.showChangeAlt || _guidedController.showLandAbort property bool _anyActionAvailable: _guidedController.showStartMission || _guidedController.showResumeMission || _guidedController.showChangeAlt || _guidedController.showLandAbort
......
src/PlanView/PlanView.qml
View file @ fa793fe4
...@@ -286,7 +286,7 @@ Item { ...@@ -286,7 +286,7 @@ Item {
var sequenceNumber = _missionController.insertROIMissionItem(coordinate, index) var sequenceNumber = _missionController.insertROIMissionItem(coordinate, index)
_missionController.setCurrentPlanViewIndex(sequenceNumber, true) _missionController.setCurrentPlanViewIndex(sequenceNumber, true)
_addROIOnClick = false _addROIOnClick = false
toolStrip.uncheckAll() toolStrip.lastClickedButton.checked = false
} }
property int _moveDialogMissionItemIndex property int _moveDialogMissionItemIndex
...@@ -533,64 +533,64 @@ Item { ...@@ -533,64 +533,64 @@ Item {
border.width: object.lineWidth border.width: object.lineWidth
} }
} }
}
ToolStrip { //-----------------------------------------------------------
id: toolStrip // Left tool strip
anchors.leftMargin: ScreenTools.defaultFontPixelWidth ToolStrip {
anchors.left: parent.left id: toolStrip
anchors.topMargin: _toolButtonTopMargin anchors.leftMargin: ScreenTools.defaultFontPixelWidth * 2
anchors.top: parent.top anchors.left: parent.left
color: qgcPal.window anchors.topMargin: _toolButtonTopMargin + anchors.leftMargin
title: qsTr("Plan") anchors.top: parent.top
z: QGroundControl.zOrderWidgets z: QGroundControl.zOrderWidgets
showAlternateIcon: [ _planMasterController.dirty, false, false, false, false, false, false ] showAlternateIcon: [ _planMasterController.dirty, false, false, false, false, false, false ]
rotateImage: [ _planMasterController.syncInProgress, false, false, false, false, false, false ] rotateImage: [ _planMasterController.syncInProgress, false, false, false, false, false, false ]
animateImage: [ _planMasterController.dirty, false, false, false, false, false, false ] animateImage: [ _planMasterController.dirty, false, false, false, false, false, false ]
buttonEnabled: [ !_planMasterController.syncInProgress, true, true, true, true, true, true ] buttonEnabled: [ !_planMasterController.syncInProgress, true, true, true, true, true, true ]
buttonVisible: [ true, true, _waypointsOnlyMode, true, true, _showZoom, _showZoom ] buttonVisible: [ true, true, _waypointsOnlyMode, true, true, _showZoom, _showZoom ]
maxHeight: mapScale.y - toolStrip.y maxHeight: mapScale.y - toolStrip.y
property bool _showZoom: !ScreenTools.isMobile
property bool _showZoom: !ScreenTools.isMobile
model: [
model: [ {
{ name: qsTr("File"),
name: qsTr("File"), iconSource: "/qmlimages/MapSync.svg",
iconSource: "/qmlimages/MapSync.svg", alternateIconSource: "/qmlimages/MapSyncChanged.svg",
alternateIconSource: "/qmlimages/MapSyncChanged.svg", dropPanelComponent: syncDropPanel
dropPanelComponent: syncDropPanel },
}, {
{ name: qsTr("Waypoint"),
name: qsTr("Waypoint"), iconSource: "/qmlimages/MapAddMission.svg",
iconSource: "/qmlimages/MapAddMission.svg", toggle: true
toggle: true },
}, {
{ name: qsTr("ROI"),
name: qsTr("ROI"), iconSource: "/qmlimages/MapAddMission.svg",
iconSource: "/qmlimages/MapAddMission.svg", toggle: true
toggle: true },
}, {
{ name: _singleComplexItem ? _missionController.complexMissionItemNames[0] : qsTr("Pattern"),
name: _singleComplexItem ? _missionController.complexMissionItemNames[0] : qsTr("Pattern"), iconSource: "/qmlimages/MapDrawShape.svg",
iconSource: "/qmlimages/MapDrawShape.svg", dropPanelComponent: _singleComplexItem ? undefined : patternDropPanel
dropPanelComponent: _singleComplexItem ? undefined : patternDropPanel },
}, {
{ name: qsTr("Center"),
name: qsTr("Center"), iconSource: "/qmlimages/MapCenter.svg",
iconSource: "/qmlimages/MapCenter.svg", dropPanelComponent: centerMapDropPanel
dropPanelComponent: centerMapDropPanel },
}, {
{ name: qsTr("In"),
name: qsTr("In"), iconSource: "/qmlimages/ZoomPlus.svg"
iconSource: "/qmlimages/ZoomPlus.svg" },
}, {
{ name: qsTr("Out"),
name: qsTr("Out"), iconSource: "/qmlimages/ZoomMinus.svg"
iconSource: "/qmlimages/ZoomMinus.svg" }
} ]
]
onClicked: { onClicked: {
switch (index) { switch (index) {
case 1: case 1:
_addWaypointOnClick = checked _addWaypointOnClick = checked
_addROIOnClick = false _addROIOnClick = false
...@@ -610,7 +610,6 @@ Item { ...@@ -610,7 +610,6 @@ Item {
case 6: case 6:
editorMap.zoomLevel -= 0.5 editorMap.zoomLevel -= 0.5
break break
}
} }
} }
} }
......
src/QmlControls/DropPanel.qml
View file @ fa793fe4
...@@ -63,7 +63,7 @@ Item { ...@@ -63,7 +63,7 @@ Item {
if (visible) { if (visible) {
visible = false visible = false
_dropDownComponent = undefined _dropDownComponent = undefined
toolStrip.uncheckAll() toolStrip.lastClickedButton.checked = false
} }
} }
......
src/QmlControls/ToolStrip.qml
View file @ fa793fe4
...@@ -8,215 +8,93 @@ ...@@ -8,215 +8,93 @@
****************************************************************************/ ****************************************************************************/
import QtQuick 2.11 import QtQuick 2.11
import QtQuick.Controls 1.4 import QtQuick.Controls 2.2
import QGroundControl.ScreenTools 1.0 import QGroundControl.ScreenTools 1.0
import QGroundControl.Palette 1.0 import QGroundControl.Palette 1.0
import QGroundControl.Controls 1.0
Rectangle { Rectangle {
id: _root id: _root
color: qgcPal.window color: qgcPal.windowShade
width: ScreenTools.isMobile ? ScreenTools.minTouchPixels : ScreenTools.defaultFontPixelWidth * 7 width: _idealWidth < repeater.contentWidth ? repeater.contentWidth : _idealWidth
height: toolStripColumn.height + (toolStripColumn.anchors.margins * 2) height: toolStripColumn.height + (toolStripColumn.anchors.margins * 2)
radius: _radius radius: ScreenTools.defaultFontPixelWidth / 2
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 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 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 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 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 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 real maxHeight ///< Maximum height for control, determines whether text is hidden to make control shorter property var showAlternateIcon ///< List of bool values, one for each button in strip - true: show alternate icon, false: show normal icon
signal clicked(int index, bool checked) property AbstractButton lastClickedButton: null
readonly property real _radius: ScreenTools.defaultFontPixelWidth / 2 // Ensure we don't get lower than
readonly property real _margin: ScreenTools.defaultFontPixelWidth / 2 property real _idealWidth: (ScreenTools.isMobile ? ScreenTools.minTouchPixels : ScreenTools.defaultFontPixelWidth * 10) + toolStripColumn.anchors.margins * 2
readonly property real _buttonSpacing: ScreenTools.defaultFontPixelHeight / 4
QGCPalette { id: qgcPal } signal clicked(int index, bool checked)
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 { QGCPalette { id: qgcPal }
anchors.fill: parent ButtonGroup {
id: buttonGroup
exclusive: false
} }
Column { Column {
id: toolStripColumn id: toolStripColumn
anchors.margins: ScreenTools.defaultFontPixelWidth / 2 anchors.margins: ScreenTools.defaultFontPixelWidth * 0.8
anchors.top: parent.top anchors.top: parent.top
anchors.left: parent.left anchors.left: parent.left
anchors.right: parent.right anchors.right: parent.right
spacing: _buttonSpacing
QGCLabel { Repeater {
anchors.horizontalCenter: parent.horizontalCenter id: repeater
text: title
font.pointSize: ScreenTools.mobile ? ScreenTools.smallFontPointSize : ScreenTools.defaultFontPointSize
}
Rectangle { QGCHoverButton {
anchors.left: parent.left id: buttonTemplate
anchors.right: parent.right
height: 1
color: qgcPal.text
}
Column { color: _root.color
anchors.left: parent.left
anchors.right: parent.right
spacing: _buttonSpacing
Repeater {
id: repeater
delegate: FocusScope {
id: scope
width: toolStripColumn.width
height: buttonRect.height
visible: _root.buttonVisible ? _root.buttonVisible[index] : true
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: { anchors.left: toolStripColumn.left
if (rotateImage) { anchors.right: toolStripColumn.right
imageRotation.running = true height: width
} else { radius: ScreenTools.defaultFontPixelWidth / 2
imageRotation.running = false fontPointSize: ScreenTools.isMobile ? ScreenTools.smallFontPointSize : ScreenTools.mediumFontPointSize
buttonImage.rotation = 0
} enabled: _root.buttonEnabled ? _root.buttonEnabled[index] : true
} visible: _root.buttonVisible ? _root.buttonVisible[index] : true
imageSource: (_root.showAlternateIcon && _root.showAlternateIcon[index]) ? _alternateIconSource : _iconSource
text: modelData.name
property var _iconSource: modelData.iconSource
property var _alternateIconSource: modelData.alternateIconSource
onAnimateImageChanged: { ButtonGroup.group: buttonGroup
if (animateImage) { // Only drop pannel and toggleable are checkable
opacityAnimation.running = true checkable: modelData.dropPanelComponent !== undefined || (modelData.toggle !== undefined && modelData.toggle)
} else {
opacityAnimation.running = false onClicked: {
buttonImage.opacity = 1 dropPanel.hide() // DropPanel will call hide on "lastClickedButton"
// Uncheck other checked buttons
// TODO: Implement ButtonGroup exclusive with checkable and uncheckable and get rid of this workaround
for(var i = 0; i < buttonGroup.buttons.length; i++) {
var b = buttonGroup.buttons[i]
if(b !== buttonTemplate) {
b.checked = false;
} }
} }
Rectangle { if (modelData.dropPanelComponent === undefined) {
id: buttonRect _root.clicked(index, checked)
anchors.left: parent.left } else if (checked) {
anchors.right: parent.right var panelEdgeTopPoint = mapToItem(_root, width, 0)
height: buttonColumn.height dropPanel.show(panelEdgeTopPoint, height, modelData.dropPanelComponent)
color: _showHighlight ? _repeaterPal.buttonHighlight : _repeaterPal.window }
lastClickedButton = buttonTemplate
Column { }
id: buttonColumn
anchors.left: parent.left
anchors.right: parent.right
spacing: -buttonImage.height / 8
QGCColoredImage {
id: buttonImage
anchors.left: parent.left
anchors.right: parent.right
height: width * 0.8
//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
} }
} }
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment