diff --git a/src/FlightDisplay/FlightDisplayViewMap.qml b/src/FlightDisplay/FlightDisplayViewMap.qml index f02f022deb3ef3b5bffe2b8942d4b3a464fe223b..3ccdeb548c7e631b68e20d1d1948452b6105cd90 100644 --- a/src/FlightDisplay/FlightDisplayViewMap.qml +++ b/src/FlightDisplay/FlightDisplayViewMap.qml @@ -77,7 +77,7 @@ FlightMap { color: mapPal.text visible: !ScreenTools.isShortScreen anchors.topMargin: _toolButtonTopMargin - anchors.horizontalCenter: toolColumn.horizontalCenter + anchors.horizontalCenter: centerMapDropButton.horizontalCenter anchors.top: parent.top } @@ -103,109 +103,116 @@ FlightMap { } } - Column { - id: toolColumn - anchors.topMargin: ScreenTools.isShortScreen ? _toolButtonTopMargin : ScreenTools.defaultFontPixelHeight / 2 - anchors.leftMargin: ScreenTools.defaultFontPixelHeight - anchors.left: parent.left - anchors.top: ScreenTools.isShortScreen ? parent.top : flyLabel.bottom - spacing: ScreenTools.defaultFontPixelHeight + // IMPORTANT NOTE: Drop Buttons must be parented directly to the map. If they are placed in a Column for example the drop control positioning + // will not work correctly. + + //-- Map Center Control + CenterMapDropButton { + id: centerMapDropButton + anchors.topMargin: flyLabel.visible ? ScreenTools.defaultFontPixelHeight / 2 : _toolButtonTopMargin + anchors.leftMargin: ScreenTools.defaultFontPixelHeight + anchors.left: parent.left + anchors.top: flyLabel.visible ? flyLabel.bottom : parent.top + z: QGroundControl.zOrderWidgets + exclusiveGroup: dropButtonsExclusiveGroup + map: _flightMap + mapFitViewport: Qt.rect(leftToolWidth, _toolButtonTopMargin, flightMap.width - leftToolWidth - rightPanelWidth, flightMap.height - _toolButtonTopMargin) + usePlannedHomePosition: false + geoFenceController: geoFenceController + missionController: missionController + rallyPointController: rallyPointController + showFollowVehicle: true + followVehicle: _followVehicle + onFollowVehicleChanged: _followVehicle = followVehicle + + property real leftToolWidth: centerMapDropButton.x + centerMapDropButton.width + } + + //-- Map Type Control + DropButton { + id: mapTypeButton + anchors.topMargin: ScreenTools.defaultFontPixelHeight + anchors.top: centerMapDropButton.bottom + anchors.left: centerMapDropButton.left + dropDirection: dropRight + buttonImage: "/qmlimages/MapType.svg" + viewportMargins: ScreenTools.defaultFontPixelWidth / 2 + exclusiveGroup: dropButtonsExclusiveGroup z: QGroundControl.zOrderWidgets + lightBorders: isSatelliteMap - //-- Map Center Control - CenterMapDropButton { - id: centerMapDropButton - exclusiveGroup: dropButtonsExclusiveGroup - map: _flightMap - mapFitViewport: Qt.rect(leftToolWidth, _toolButtonTopMargin, flightMap.width - leftToolWidth - rightPanelWidth, flightMap.height - _toolButtonTopMargin) - usePlannedHomePosition: false - geoFenceController: geoFenceController - missionController: missionController - rallyPointController: rallyPointController - showFollowVehicle: true - followVehicle: _followVehicle - onFollowVehicleChanged: _followVehicle = followVehicle - - property real leftToolWidth: centerMapDropButton.x + centerMapDropButton.width - } + dropDownComponent: Component { + Column { + spacing: ScreenTools.defaultFontPixelWidth - //-- Map Type Control - DropButton { - id: mapTypeButton - dropDirection: dropRight - buttonImage: "/qmlimages/MapType.svg" - viewportMargins: ScreenTools.defaultFontPixelWidth / 2 - exclusiveGroup: dropButtonsExclusiveGroup - z: QGroundControl.zOrderWidgets - lightBorders: isSatelliteMap - - dropDownComponent: Component { - Column { + Row { spacing: ScreenTools.defaultFontPixelWidth - Row { - spacing: ScreenTools.defaultFontPixelWidth - - Repeater { - model: QGroundControl.flightMapSettings.mapTypes + Repeater { + model: QGroundControl.flightMapSettings.mapTypes - QGCButton { - checkable: true - checked: QGroundControl.flightMapSettings.mapType === text - text: modelData - width: clearButton.width - exclusiveGroup: mapTypeButtonsExclusiveGroup + QGCButton { + checkable: true + checked: QGroundControl.flightMapSettings.mapType === text + text: modelData + width: clearButton.width + exclusiveGroup: mapTypeButtonsExclusiveGroup - onClicked: { - QGroundControl.flightMapSettings.mapType = text - checked = true - dropButtonsExclusiveGroup.current = null - } + onClicked: { + QGroundControl.flightMapSettings.mapType = text + checked = true + dropButtonsExclusiveGroup.current = null } } } + } - QGCButton { - id: clearButton - text: qsTr("Clear Flight Trails") - enabled: QGroundControl.multiVehicleManager.activeVehicle - onClicked: { - QGroundControl.multiVehicleManager.activeVehicle.clearTrajectoryPoints() - dropButtonsExclusiveGroup.current = null - } + QGCButton { + id: clearButton + text: qsTr("Clear Flight Trails") + enabled: QGroundControl.multiVehicleManager.activeVehicle + onClicked: { + QGroundControl.multiVehicleManager.activeVehicle.clearTrajectoryPoints() + dropButtonsExclusiveGroup.current = null } } } } + } - //-- Zoom Map In - RoundButton { - id: mapZoomPlus - visible: !ScreenTools.isTinyScreen && _mainIsMap - buttonImage: "/qmlimages/ZoomPlus.svg" - exclusiveGroup: dropButtonsExclusiveGroup - z: QGroundControl.zOrderWidgets - lightBorders: isSatelliteMap - onClicked: { - if(_flightMap) - _flightMap.zoomLevel += 0.5 - checked = false - } + //-- Zoom Map In + RoundButton { + id: mapZoomPlus + anchors.topMargin: ScreenTools.defaultFontPixelHeight + anchors.top: mapTypeButton.bottom + anchors.left: mapTypeButton.left + visible: !ScreenTools.isTinyScreen && _mainIsMap + buttonImage: "/qmlimages/ZoomPlus.svg" + exclusiveGroup: dropButtonsExclusiveGroup + z: QGroundControl.zOrderWidgets + lightBorders: isSatelliteMap + onClicked: { + if(_flightMap) + _flightMap.zoomLevel += 0.5 + checked = false } + } - //-- Zoom Map Out - RoundButton { - id: mapZoomMinus - visible: !ScreenTools.isTinyScreen && _mainIsMap - buttonImage: "/qmlimages/ZoomMinus.svg" - exclusiveGroup: dropButtonsExclusiveGroup - z: QGroundControl.zOrderWidgets - lightBorders: isSatelliteMap - onClicked: { - if(_flightMap) - _flightMap.zoomLevel -= 0.5 - checked = false - } + //-- Zoom Map Out + RoundButton { + id: mapZoomMinus + anchors.topMargin: ScreenTools.defaultFontPixelHeight + anchors.top: mapZoomPlus.bottom + anchors.left: mapZoomPlus.left + visible: !ScreenTools.isTinyScreen && _mainIsMap + buttonImage: "/qmlimages/ZoomMinus.svg" + exclusiveGroup: dropButtonsExclusiveGroup + z: QGroundControl.zOrderWidgets + lightBorders: isSatelliteMap + onClicked: { + if(_flightMap) + _flightMap.zoomLevel -= 0.5 + checked = false } } diff --git a/src/MissionEditor/MissionEditor.qml b/src/MissionEditor/MissionEditor.qml index 002b1d61de1c388200099fe482d5c516b23e5567..a349bf947b99766ec33c4e26dc0688d81311ed8b 100644 --- a/src/MissionEditor/MissionEditor.qml +++ b/src/MissionEditor/MissionEditor.qml @@ -768,136 +768,152 @@ QGCView { } QGCLabel { - id: planLabel - text: qsTr("Plan") - color: mapPal.text - visible: !ScreenTools.isShortScreen + id: planLabel + text: qsTr("Plan") + color: mapPal.text + visible: !ScreenTools.isShortScreen anchors.topMargin: _toolButtonTopMargin - anchors.horizontalCenter: toolColumn.horizontalCenter + anchors.horizontalCenter: addMissionItemsButton.horizontalCenter anchors.top: parent.top } + // IMPORTANT NOTE: Drop Buttons must be parented directly to the map. If they are placed in a Column for example the drop control positioning + // will not work correctly. + //-- Vertical Tool Buttons - Column { - id: toolColumn - anchors.topMargin: ScreenTools.isShortScreen ? _toolButtonTopMargin : ScreenTools.defaultFontPixelHeight / 2 + + RoundButton { + id: addMissionItemsButton + anchors.topMargin: planLabel.visible ? ScreenTools.defaultFontPixelHeight / 2 : _toolButtonTopMargin anchors.leftMargin: ScreenTools.defaultFontPixelHeight anchors.left: parent.left - anchors.top: ScreenTools.isShortScreen ? parent.top : planLabel.bottom - spacing: ScreenTools.defaultFontPixelHeight - z: QGroundControl.zOrderWidgets - - RoundButton { - id: addMissionItemsButton - buttonImage: "/qmlimages/MapAddMission.svg" - lightBorders: _lightWidgetBorders - visible: _editingLayer == _layerMission - } + anchors.top: planLabel.visible ? planLabel.bottom : parent.top + buttonImage: "/qmlimages/MapAddMission.svg" + lightBorders: _lightWidgetBorders + visible: _editingLayer == _layerMission + } - RoundButton { - id: addShapeButton - buttonImage: "/qmlimages/MapDrawShape.svg" - lightBorders: _lightWidgetBorders - visible: _editingLayer == _layerMission - - onClicked: { - var coordinate = editorMap.center - coordinate.latitude = coordinate.latitude.toFixed(_decimalPlaces) - coordinate.longitude = coordinate.longitude.toFixed(_decimalPlaces) - coordinate.altitude = coordinate.altitude.toFixed(_decimalPlaces) - var sequenceNumber = missionController.insertComplexMissionItem(coordinate, missionController.visualItems.count) - setCurrentItem(sequenceNumber) - checked = false - addMissionItemsButton.checked = false - } - } + RoundButton { + id: addShapeButton + anchors.topMargin: ScreenTools.defaultFontPixelHeight + anchors.top: addMissionItemsButton.bottom + anchors.left: addMissionItemsButton.left + buttonImage: "/qmlimages/MapDrawShape.svg" + lightBorders: _lightWidgetBorders + visible: _editingLayer == _layerMission - DropButton { - id: syncButton - dropDirection: dropRight - buttonImage: _syncDropDownController.dirty ? "/qmlimages/MapSyncChanged.svg" : "/qmlimages/MapSync.svg" - viewportMargins: ScreenTools.defaultFontPixelWidth / 2 - exclusiveGroup: _dropButtonsExclusiveGroup - dropDownComponent: syncDropDownComponent - enabled: !_syncDropDownController.syncInProgress - rotateImage: _syncDropDownController.syncInProgress - lightBorders: _lightWidgetBorders + onClicked: { + var coordinate = editorMap.center + coordinate.latitude = coordinate.latitude.toFixed(_decimalPlaces) + coordinate.longitude = coordinate.longitude.toFixed(_decimalPlaces) + coordinate.altitude = coordinate.altitude.toFixed(_decimalPlaces) + var sequenceNumber = missionController.insertComplexMissionItem(coordinate, missionController.visualItems.count) + setCurrentItem(sequenceNumber) + checked = false + addMissionItemsButton.checked = false } + } - CenterMapDropButton { - id: centerMapButton - exclusiveGroup: _dropButtonsExclusiveGroup - map: editorMap - mapFitViewport: Qt.rect(leftToolWidth, toolbarHeight, editorMap.width - leftToolWidth - rightPanelWidth, editorMap.height - toolbarHeight) - usePlannedHomePosition: true - geoFenceController: geoFenceController - missionController: missionController - rallyPointController: rallyPointController - - property real toolbarHeight: qgcView.height - ScreenTools.availableHeight - property real rightPanelWidth: _rightPanelWidth - property real leftToolWidth: centerMapButton.x + centerMapButton.width - } + DropButton { + id: syncButton + anchors.topMargin: ScreenTools.defaultFontPixelHeight + anchors.top: addShapeButton.bottom + anchors.left: addShapeButton.left + dropDirection: dropRight + buttonImage: _syncDropDownController.dirty ? "/qmlimages/MapSyncChanged.svg" : "/qmlimages/MapSync.svg" + viewportMargins: ScreenTools.defaultFontPixelWidth / 2 + exclusiveGroup: _dropButtonsExclusiveGroup + dropDownComponent: syncDropDownComponent + enabled: !_syncDropDownController.syncInProgress + rotateImage: _syncDropDownController.syncInProgress + lightBorders: _lightWidgetBorders + } - DropButton { - id: mapTypeButton - dropDirection: dropRight - buttonImage: "/qmlimages/MapType.svg" - viewportMargins: ScreenTools.defaultFontPixelWidth / 2 - exclusiveGroup: _dropButtonsExclusiveGroup - lightBorders: _lightWidgetBorders - - dropDownComponent: Component { - Column { - spacing: _margin - QGCLabel { text: qsTr("Map type:") } - Row { - spacing: ScreenTools.defaultFontPixelWidth - Repeater { - model: QGroundControl.flightMapSettings.mapTypes - - QGCButton { - checkable: true - checked: QGroundControl.flightMapSettings.mapType === text - text: modelData - exclusiveGroup: _mapTypeButtonsExclusiveGroup - onClicked: { - QGroundControl.flightMapSettings.mapType = text - checked = true - mapTypeButton.hideDropDown() - } + CenterMapDropButton { + id: centerMapButton + anchors.topMargin: ScreenTools.defaultFontPixelHeight + anchors.top: syncButton.bottom + anchors.left: syncButton.left + exclusiveGroup: _dropButtonsExclusiveGroup + map: editorMap + mapFitViewport: Qt.rect(leftToolWidth, toolbarHeight, editorMap.width - leftToolWidth - rightPanelWidth, editorMap.height - toolbarHeight) + usePlannedHomePosition: true + geoFenceController: geoFenceController + missionController: missionController + rallyPointController: rallyPointController + + property real toolbarHeight: qgcView.height - ScreenTools.availableHeight + property real rightPanelWidth: _rightPanelWidth + property real leftToolWidth: centerMapButton.x + centerMapButton.width + } + + DropButton { + id: mapTypeButton + anchors.topMargin: ScreenTools.defaultFontPixelHeight + anchors.top: centerMapButton.bottom + anchors.left: centerMapButton.left + dropDirection: dropRight + buttonImage: "/qmlimages/MapType.svg" + viewportMargins: ScreenTools.defaultFontPixelWidth / 2 + exclusiveGroup: _dropButtonsExclusiveGroup + lightBorders: _lightWidgetBorders + + dropDownComponent: Component { + Column { + spacing: _margin + QGCLabel { text: qsTr("Map type:") } + Row { + spacing: ScreenTools.defaultFontPixelWidth + Repeater { + model: QGroundControl.flightMapSettings.mapTypes + + QGCButton { + checkable: true + checked: QGroundControl.flightMapSettings.mapType === text + text: modelData + exclusiveGroup: _mapTypeButtonsExclusiveGroup + onClicked: { + QGroundControl.flightMapSettings.mapType = text + checked = true + mapTypeButton.hideDropDown() } } } } } } + } - //-- Zoom Map In - RoundButton { - id: mapZoomPlus - visible: !ScreenTools.isTinyScreen && !ScreenTools.isShortScreen - buttonImage: "/qmlimages/ZoomPlus.svg" - lightBorders: _lightWidgetBorders - - onClicked: { - if(editorMap) - editorMap.zoomLevel += 0.5 - checked = false - } + //-- Zoom Map In + RoundButton { + id: mapZoomPlus + anchors.topMargin: ScreenTools.defaultFontPixelHeight + anchors.top: mapTypeButton.bottom + anchors.left: mapTypeButton.left + visible: !ScreenTools.isTinyScreen && !ScreenTools.isShortScreen + buttonImage: "/qmlimages/ZoomPlus.svg" + lightBorders: _lightWidgetBorders + + onClicked: { + if(editorMap) + editorMap.zoomLevel += 0.5 + checked = false } + } - //-- Zoom Map Out - RoundButton { - id: mapZoomMinus - visible: !ScreenTools.isTinyScreen && !ScreenTools.isShortScreen - buttonImage: "/qmlimages/ZoomMinus.svg" - lightBorders: _lightWidgetBorders - onClicked: { - if(editorMap) - editorMap.zoomLevel -= 0.5 - checked = false - } + //-- Zoom Map Out + RoundButton { + id: mapZoomMinus + anchors.topMargin: ScreenTools.defaultFontPixelHeight + anchors.top: mapZoomPlus.bottom + anchors.left: mapZoomPlus.left + visible: !ScreenTools.isTinyScreen && !ScreenTools.isShortScreen + buttonImage: "/qmlimages/ZoomMinus.svg" + lightBorders: _lightWidgetBorders + onClicked: { + if(editorMap) + editorMap.zoomLevel -= 0.5 + checked = false } } diff --git a/src/QmlControls/DropButton.qml b/src/QmlControls/DropButton.qml index 956115e605bfcb501ebd6e469496dbbe359054b9..6482a9062f2e5a5502e10e8acf1d6ec50d54352b 100644 --- a/src/QmlControls/DropButton.qml +++ b/src/QmlControls/DropButton.qml @@ -15,6 +15,7 @@ Item { property int dropDirection: dropDown property alias dropDownComponent: dropDownLoader.sourceComponent property real viewportMargins: 0 + property real topMargin: parent.height - ScreenTools.availableHeight property alias lightBorders: roundButton.lightBorders width: radius * 2 @@ -35,7 +36,7 @@ Item { property real _viewportMaxLeft: -x + viewportMargins property real _viewportMaxRight: parent.width - (viewportMargins * 2) - x - property real _viewportMaxTop: -y + viewportMargins + property real _viewportMaxTop: -y + viewportMargins + topMargin property real _viewportMaxBottom: parent.height - (viewportMargins * 2) - y // Set up ExclusiveGroup support. We use the checked property to drive visibility of drop down. @@ -53,8 +54,6 @@ Item { checked = false } - Component.onCompleted: _calcPositions() - function _calcPositions() { var dropComponentWidth = dropDownLoader.item.width var dropComponentHeight = dropDownLoader.item.height @@ -161,6 +160,7 @@ Item { id: roundButton radius: parent.width / 2 onClicked: { + _calcPositions() _root.clicked() } } @@ -216,20 +216,11 @@ Item { Item { id: dropItemHolderRect - //color: qgcPal.button - //radius: _dropCornerRadius Loader { id: dropDownLoader x: _dropMargin y: _dropMargin - - Connections { - target: dropDownLoader.item - - onWidthChanged: _calcPositions() - onHeightChanged: _calcPositions() - } } } } // Item - dropDownItem