Commit 66d45cc9 authored by Don Gagne's avatar Don Gagne

Merge pull request #1871 from DonLakeFlyer/Positioning

Font size based sizing and relative positioning fixes
parents 0a77bbcf b30d4eb1
...@@ -94,6 +94,8 @@ QGCView { ...@@ -94,6 +94,8 @@ QGCView {
id: panel id: panel
anchors.fill: parent anchors.fill: parent
readonly property real spacerHeight: ScreenTools.defaultFontPixelHeight
QGCLabel { QGCLabel {
id: header id: header
width: parent.width width: parent.width
...@@ -104,12 +106,18 @@ QGCView { ...@@ -104,12 +106,18 @@ QGCView {
Item { Item {
id: headingSpacer id: headingSpacer
anchors.top: header.bottom anchors.top: header.bottom
height: 20 height: parent.spacerHeight
width: 20 width: 20
} }
QGCLabel { Item {
id: helpApplyRow
anchors.top: headingSpacer.bottom anchors.top: headingSpacer.bottom
width: parent.width
height: Math.max(helpText.contentHeight, applyButton.height)
QGCLabel {
id: helpText
width: parent.width - applyButton.width - 5 width: parent.width - applyButton.width - 5
text: "Please select your airframe type. Click 'Apply and Restart' to reboot the autopilot. Please re-connect then manually." text: "Please select your airframe type. Click 'Apply and Restart' to reboot the autopilot. Please re-connect then manually."
wrapMode: Text.WordWrap wrapMode: Text.WordWrap
...@@ -117,17 +125,17 @@ QGCView { ...@@ -117,17 +125,17 @@ QGCView {
QGCButton { QGCButton {
id: applyButton id: applyButton
anchors.top: headingSpacer.bottom
anchors.right: parent.right anchors.right: parent.right
text: "Apply and Restart" text: "Apply and Restart"
onClicked: showDialog(applyRestartDialogComponent, "Apply and Restart", 50, StandardButton.Apply | StandardButton.Cancel) onClicked: showDialog(applyRestartDialogComponent, "Apply and Restart", 50, StandardButton.Apply | StandardButton.Cancel)
} }
}
Item { Item {
id: lastSpacer id: lastSpacer
anchors.top: applyButton.bottom anchors.top: helpApplyRow.bottom
height: 20 height: parent.spacerHeight
width: 10 width: 10
} }
...@@ -140,7 +148,7 @@ QGCView { ...@@ -140,7 +148,7 @@ QGCView {
Flow { Flow {
width: scroll.width width: scroll.width
spacing: 10 spacing: ScreenTools.defaultFontPixelWidth
ExclusiveGroup { ExclusiveGroup {
id: airframeTypeExclusive id: airframeTypeExclusive
...@@ -152,13 +160,13 @@ QGCView { ...@@ -152,13 +160,13 @@ QGCView {
// Outer summary item rectangle // Outer summary item rectangle
Rectangle { Rectangle {
id: airframeBackground id: airframeBackground
readonly property real titleHeight: 30 width: ScreenTools.defaultFontPixelWidth * 30
readonly property real innerMargin: 10 height: width * .75
width: 250
height: 200
color: (modelData.name != controller.currentAirframeType) ? qgcPal.windowShade : qgcPal.buttonHighlight color: (modelData.name != controller.currentAirframeType) ? qgcPal.windowShade : qgcPal.buttonHighlight
readonly property real titleHeight: ScreenTools.defaultFontPixelHeight * 1.75
readonly property real innerMargin: ScreenTools.defaultFontPixelWidth
MouseArea { MouseArea {
anchors.fill: parent anchors.fill: parent
onClicked: airframeCheckBox.checked = true onClicked: airframeCheckBox.checked = true
...@@ -170,29 +178,26 @@ QGCView { ...@@ -170,29 +178,26 @@ QGCView {
height: parent.titleHeight height: parent.titleHeight
color: qgcPal.windowShadeDark color: qgcPal.windowShadeDark
Text { QGCLabel {
anchors.fill: parent anchors.fill: parent
color: qgcPal.buttonText color: qgcPal.buttonText
font.pixelSize: 12
text: modelData.name
verticalAlignment: TextEdit.AlignVCenter verticalAlignment: TextEdit.AlignVCenter
horizontalAlignment: TextEdit.AlignHCenter horizontalAlignment: TextEdit.AlignHCenter
text: modelData.name
} }
} }
Image { Image {
id: image id: image
anchors.topMargin: innerMargin
anchors.top: title.bottom
x: innerMargin x: innerMargin
width: parent.width - (innerMargin * 2) width: parent.width - (innerMargin * 2)
height: parent.height - title.height - combo.height - (innerMargin * 3) height: parent.height - title.height - combo.height - (innerMargin * 3)
anchors.topMargin: innerMargin
anchors.top: title.bottom
source: modelData.imageResource
fillMode: Image.PreserveAspectFit fillMode: Image.PreserveAspectFit
smooth: true smooth: true
source: modelData.imageResource
} }
...@@ -220,8 +225,8 @@ QGCView { ...@@ -220,8 +225,8 @@ QGCView {
anchors.topMargin: innerMargin anchors.topMargin: innerMargin
anchors.top: image.bottom anchors.top: image.bottom
width: parent.width - (innerMargin * 2) width: parent.width - (innerMargin * 2)
model: modelData.airframes
currentIndex: (modelData.name == controller.currentAirframeType) ? controller.currentVehicleIndex : -1 currentIndex: (modelData.name == controller.currentAirframeType) ? controller.currentVehicleIndex : -1
model: modelData.airframes
onActivated: { onActivated: {
if (index != -1) { if (index != -1) {
......
...@@ -226,14 +226,20 @@ QGCView { ...@@ -226,14 +226,20 @@ QGCView {
Item { Item {
id: headingSpacer id: headingSpacer
anchors.top: header.bottom anchors.top: header.bottom
height: 20 height: ScreenTools.defaultFontPixelHeight
width: 20 width: 20
} }
QGCLabel { Item {
id: helpApplyRow
anchors.top: headingSpacer.bottom anchors.top: headingSpacer.bottom
anchors.left: parent.left width: parent.width
height: Math.max(helpText.contentHeight, applyButton.height)
QGCLabel {
id: helpText
anchors.rightMargin: ScreenTools.defaultFontPixelWidth anchors.rightMargin: ScreenTools.defaultFontPixelWidth
anchors.left: parent.left
anchors.right: applyButton.left anchors.right: applyButton.left
text: topHelpText text: topHelpText
wrapMode: Text.WordWrap wrapMode: Text.WordWrap
...@@ -241,18 +247,18 @@ QGCView { ...@@ -241,18 +247,18 @@ QGCView {
QGCButton { QGCButton {
id: applyButton id: applyButton
anchors.top: headingSpacer.bottom
anchors.rightMargin: ScreenTools.defaultFontPixelWidth anchors.rightMargin: ScreenTools.defaultFontPixelWidth
anchors.right: parent.right anchors.right: parent.right
text: "Generate Thresholds" text: "Generate Thresholds"
onClicked: controller.generateThresholds() onClicked: controller.generateThresholds()
} }
}
Item { Item {
id: lastSpacer id: lastSpacer
anchors.top: applyButton.bottom anchors.top: helpApplyRow.bottom
height: 20 height: ScreenTools.defaultFontPixelHeight
width: 10 width: 10
} }
......
This diff is collapsed.
...@@ -200,7 +200,7 @@ QGCView { ...@@ -200,7 +200,7 @@ QGCView {
Column { Column {
anchors.fill: parent anchors.fill: parent
spacing: 10 spacing: ScreenTools.defaultFontPixelHeight
QGCLabel { QGCLabel {
width: parent.width width: parent.width
...@@ -283,12 +283,12 @@ QGCView { ...@@ -283,12 +283,12 @@ QGCView {
font.pixelSize: ScreenTools.largeFontPixelSize font.pixelSize: ScreenTools.largeFontPixelSize
} }
Item { height: 20; width: 10 } // spacer Item { height: ScreenTools.defaultFontPixelHeight; width: 10 } // spacer
Row { Row {
readonly property int buttonWidth: 120 readonly property int buttonWidth: ScreenTools.defaultFontPixelWidth * 15
spacing: 20 spacing: ScreenTools.defaultFontPixelWidth
QGCLabel { text: "Calibrate:"; anchors.baseline: compassButton.baseline } QGCLabel { text: "Calibrate:"; anchors.baseline: compassButton.baseline }
...@@ -367,17 +367,16 @@ QGCView { ...@@ -367,17 +367,16 @@ QGCView {
} }
} }
Item { height: 20; width: 10 } // spacer Item { height: ScreenTools.defaultFontPixelHeight; width: 10 } // spacer
ProgressBar { ProgressBar {
id: progressBar id: progressBar
width: parent.width - rotationColumnWidth width: parent.width - rotationColumnWidth
} }
Item { height: 10; width: 10 } // spacer Item { height: ScreenTools.defaultFontPixelHeight; width: 10 } // spacer
Item { Item {
readonly property int calibrationAreaHeight: 300
property int calDisplayAreaWidth: parent.width - rotationColumnWidth property int calDisplayAreaWidth: parent.width - rotationColumnWidth
width: parent.width width: parent.width
...@@ -406,24 +405,21 @@ QGCView { ...@@ -406,24 +405,21 @@ QGCView {
QGCLabel { QGCLabel {
id: orientationCalAreaHelpText id: orientationCalAreaHelpText
anchors.margins: ScreenTools.defaultFontPixelWidth
anchors.top: orientationCalArea.top
anchors.left: orientationCalArea.left
width: parent.width width: parent.width
wrapMode: Text.WordWrap wrapMode: Text.WordWrap
font.pixelSize: ScreenTools.mediumFontPixelSize font.pixelSize: ScreenTools.mediumFontPixelSize
anchors.top: orientationCalArea.top
anchors.left: orientationCalArea.left
anchors.topMargin: 15
anchors.leftMargin: 15
anchors.rightMargin: 15
anchors.bottomMargin: 15
} }
Flow { Flow {
anchors.topMargin: ScreenTools.defaultFontPixelWidth
anchors.top: orientationCalAreaHelpText.bottom anchors.top: orientationCalAreaHelpText.bottom
anchors.left: orientationCalAreaHelpText.left anchors.left: orientationCalAreaHelpText.left
anchors.topMargin: 15
width: parent.width width: parent.width
height: parent.height - orientationCalAreaHelpText.implicitHeight height: parent.height - orientationCalAreaHelpText.implicitHeight
spacing: 5 spacing: ScreenTools.defaultFontPixelWidth
VehicleRotationCal { VehicleRotationCal {
visible: controller.orientationCalDownSideVisible visible: controller.orientationCalDownSideVisible
...@@ -471,13 +467,13 @@ QGCView { ...@@ -471,13 +467,13 @@ QGCView {
} }
Column { Column {
anchors.leftMargin: ScreenTools.defaultFontPixelWidth
anchors.left: orientationCalArea.right anchors.left: orientationCalArea.right
anchors.leftMargin: 5
spacing: 20
x: parent.width - rotationColumnWidth x: parent.width - rotationColumnWidth
spacing: ScreenTools.defaultFontPixelWidth
Column { Column {
spacing: 5 spacing: ScreenTools.defaultFontPixelWidth
QGCLabel { QGCLabel {
font.pixelSize: sideBarH1PointSize font.pixelSize: sideBarH1PointSize
...@@ -499,7 +495,7 @@ QGCView { ...@@ -499,7 +495,7 @@ QGCView {
} }
Column { Column {
spacing: 5 spacing: ScreenTools.defaultFontPixelWidth
// Compass 0 rotation // Compass 0 rotation
Component { Component {
...@@ -510,6 +506,7 @@ QGCView { ...@@ -510,6 +506,7 @@ QGCView {
text: "External Compass Orientation" text: "External Compass Orientation"
} }
} }
Component { Component {
id: compass0ComponentCombo2 id: compass0ComponentCombo2
...@@ -520,12 +517,14 @@ QGCView { ...@@ -520,12 +517,14 @@ QGCView {
fact: cal_mag0_rot fact: cal_mag0_rot
} }
} }
Loader { sourceComponent: showCompass0Rot ? compass0ComponentLabel2 : null } Loader { sourceComponent: showCompass0Rot ? compass0ComponentLabel2 : null }
Loader { sourceComponent: showCompass0Rot ? compass0ComponentCombo2 : null } Loader { sourceComponent: showCompass0Rot ? compass0ComponentCombo2 : null }
} }
Column { Column {
spacing: 5 spacing: ScreenTools.defaultFontPixelWidth
// Compass 1 rotation // Compass 1 rotation
Component { Component {
id: compass1ComponentLabel2 id: compass1ComponentLabel2
...@@ -535,6 +534,7 @@ QGCView { ...@@ -535,6 +534,7 @@ QGCView {
text: "External Compass 1 Orientation" text: "External Compass 1 Orientation"
} }
} }
Component { Component {
id: compass1ComponentCombo2 id: compass1ComponentCombo2
...@@ -545,12 +545,14 @@ QGCView { ...@@ -545,12 +545,14 @@ QGCView {
fact: cal_mag1_rot fact: cal_mag1_rot
} }
} }
Loader { sourceComponent: showCompass1Rot ? compass1ComponentLabel2 : null } Loader { sourceComponent: showCompass1Rot ? compass1ComponentLabel2 : null }
Loader { sourceComponent: showCompass1Rot ? compass1ComponentCombo2 : null } Loader { sourceComponent: showCompass1Rot ? compass1ComponentCombo2 : null }
} }
Column { Column {
spacing: 5 spacing: ScreenTools.defaultFontPixelWidth
// Compass 2 rotation // Compass 2 rotation
Component { Component {
id: compass2ComponentLabel2 id: compass2ComponentLabel2
...@@ -560,6 +562,7 @@ QGCView { ...@@ -560,6 +562,7 @@ QGCView {
text: "Compass 2 Orientation" text: "Compass 2 Orientation"
} }
} }
Component { Component {
id: compass2ComponentCombo2 id: compass2ComponentCombo2
......
...@@ -3,6 +3,7 @@ import QtQuick.Controls 1.2 ...@@ -3,6 +3,7 @@ import QtQuick.Controls 1.2
import QGroundControl.Controls 1.0 import QGroundControl.Controls 1.0
import QGroundControl.Palette 1.0 import QGroundControl.Palette 1.0
import QGroundControl.ScreenTools 1.0
// An IndicatorButton works just like q QGCButton with the additional support or a red/green // An IndicatorButton works just like q QGCButton with the additional support or a red/green
// indicator on the right edge. // indicator on the right edge.
...@@ -11,14 +12,12 @@ QGCButton { ...@@ -11,14 +12,12 @@ QGCButton {
property bool indicatorGreen: false property bool indicatorGreen: false
Rectangle { Rectangle {
readonly property real indicatorRadius: 4 anchors.rightMargin: ScreenTools.defaultFontPixelWidth / 3
anchors.right: parent.right
x: parent.width - (indicatorRadius * 2) - 5 anchors.verticalCenter: parent.verticalCenter
y: (parent.height - (indicatorRadius * 2)) / 2 width: radius * 2
width: indicatorRadius * 2 height: width
height: indicatorRadius * 2 radius: (ScreenTools.defaultFontPixelHeight * .75) / 2
radius: indicatorRadius
color: indicatorGreen ? "#00d932" : "red" color: indicatorGreen ? "#00d932" : "red"
} }
} }
...@@ -121,6 +121,11 @@ FactPanel { ...@@ -121,6 +121,11 @@ FactPanel {
} }
} }
/// Shows a QGCViewDialog component
/// @param compoent QGCViewDialog component
/// @param title Title for dialog
/// @param charWidth Width of dialog in characters (-1 for full parent width)
/// @param buttons Buttons to show in dialog using StandardButton enum
function showDialog(component, title, charWidth, buttons) { function showDialog(component, title, charWidth, buttons) {
if (__checkForEarlyDialog()) { if (__checkForEarlyDialog()) {
return return
......
...@@ -7,75 +7,67 @@ import QGroundControl.Palette 1.0 ...@@ -7,75 +7,67 @@ import QGroundControl.Palette 1.0
import QGroundControl.ScreenTools 1.0 import QGroundControl.ScreenTools 1.0
Button { Button {
checkable: true property bool setupComplete: true ///< true: setup complete indicator shows as completed
height: 60 property bool setupIndicator: true ///< true: show setup complete indicator
property string imageResource: "/qmlimages/subMenuButtonImage.png" ///< Button image
text: "Button" ///< Pass in your own button text
text: "Button" checkable: true
property bool setupComplete: true height: ScreenTools.defaultFontPixelHeight * 5
property bool setupIndicator: true
property string imageResource: "/qmlimages/subMenuButtonImage.png"
style: ButtonStyle { style: ButtonStyle {
id: buttonStyle id: buttonStyle
property var __qgcPal: QGCPalette { QGCPalette {
id: qgcPal
colorGroupEnabled: control.enabled colorGroupEnabled: control.enabled
} }
property bool __showHighlight: control.pressed | control.checked property bool showHighlight: control.pressed | control.checked
background: Rectangle { background: Rectangle {
id: innerRect id: innerRect
readonly property real titleHeight: 20 color: showHighlight ? qgcPal.buttonHighlight : qgcPal.button
color: __showHighlight ? __qgcPal.buttonHighlight : __qgcPal.button readonly property real titleHeight: ScreenTools.defaultFontPixelHeight * 1.5
Text { QGCLabel {
id: titleBar id: titleBar
width: parent.width width: parent.width
height: parent.titleHeight height: parent.titleHeight
verticalAlignment: TextEdit.AlignVCenter verticalAlignment: TextEdit.AlignVCenter
horizontalAlignment: TextEdit.AlignHCenter horizontalAlignment: TextEdit.AlignHCenter
color: showHighlight ? qgcPal.buttonHighlightText : qgcPal.buttonText
text: control.text text: control.text
font.pixelSize: ScreenTools.defaultFontPixelSize
antialiasing: true
color: __showHighlight ? __qgcPal.buttonHighlightText : __qgcPal.buttonText
Rectangle { Rectangle {
id: setupIndicator anchors.rightMargin: ScreenTools.defaultFontPixelWidth / 3
anchors.right: parent.right
readonly property real indicatorRadius: 4 anchors.verticalCenter: parent.verticalCenter
width: radius * 2
x: parent.width - (indicatorRadius * 2) - 3 height: width
y: (parent.height - (indicatorRadius * 2)) / 2
width: indicatorRadius * 2
height: indicatorRadius * 2
radius: indicatorRadius radius: indicatorRadius
color: control.setupIndicator ? (control.setupComplete ? "#00d932" : "red") : innerRect.color color: control.setupComplete ? "#00d932" : "red"
visible: control.setupIndicator
readonly property real indicatorRadius: (ScreenTools.defaultFontPixelHeight * .75) / 2
} }
} }
Rectangle { Rectangle {
anchors.top: titleBar.bottom
anchors.bottom: parent.bottom
width: parent.width width: parent.width
height: parent.height - parent.titleHeight color: qgcPal.windowShade
y: parent.titleHeight
color: __qgcPal.windowShade
QGCColoredImage { QGCColoredImage {
source: control.imageResource anchors.margins: ScreenTools.defaultFontPixelHeight * .75
anchors.fill: parent
fillMode: Image.PreserveAspectFit fillMode: Image.PreserveAspectFit
width: parent.width - 20
height: parent.height - 20
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
smooth: true smooth: true
color: __showHighlight ? __qgcPal.buttonHighlight : __qgcPal.button color: showHighlight ? qgcPal.buttonHighlight : qgcPal.button
source: control.imageResource
} }
} }
} }
......
...@@ -26,36 +26,28 @@ import QtQuick.Controls 1.2 ...@@ -26,36 +26,28 @@ import QtQuick.Controls 1.2
import QtQuick.Controls.Styles 1.2 import QtQuick.Controls.Styles 1.2
import QGroundControl.FactSystem 1.0 import QGroundControl.FactSystem 1.0
import QGroundControl.Palette 1.0
import QGroundControl.Controls 1.0 import QGroundControl.Controls 1.0
import QGroundControl.ScreenTools 1.0 import QGroundControl.ScreenTools 1.0
import QGroundControl.MultiVehicleManager 1.0 import QGroundControl.MultiVehicleManager 1.0
import QGroundControl.Palette 1.0
Rectangle { Rectangle {
width: 600
height: 400
property var qgcPal: QGCPalette { id: palette; colorGroupEnabled: true }
id: topLevel
objectName: "topLevel"
color: qgcPal.window color: qgcPal.window
QGCPalette {
id: qgcPal
colorGroupEnabled: enabled
}
Column { Column {
anchors.fill: parent anchors.fill: parent
spacing: ScreenTools.defaultFontPixelHeight
QGCLabel { QGCLabel {
text: "VEHICLE SUMMARY" text: "VEHICLE SUMMARY"
font.pixelSize: ScreenTools.largeFontPixelSize font.pixelSize: ScreenTools.largeFontPixelSize
} }
Item {
// Just used as a spacer
height: 15
width: 10
}
QGCLabel { QGCLabel {
width: parent.width width: parent.width
wrapMode: Text.WordWrap wrapMode: Text.WordWrap
...@@ -68,12 +60,6 @@ Rectangle { ...@@ -68,12 +60,6 @@ Rectangle {
property bool setupComplete: multiVehicleManager.activeVehicle.autopilot.setupComplete property bool setupComplete: multiVehicleManager.activeVehicle.autopilot.setupComplete
} }
Item {
// Just used as a spacer
height: 20
width: 10
}
Flow { Flow {
width: parent.width width: parent.width
spacing: ScreenTools.defaultFontPixelWidth spacing: ScreenTools.defaultFontPixelWidth
...@@ -84,15 +70,15 @@ Rectangle { ...@@ -84,15 +70,15 @@ Rectangle {
// Outer summary item rectangle // Outer summary item rectangle
Rectangle { Rectangle {
readonly property real titleHeight: ScreenTools.defaultFontPixelHeight * 2
width: ScreenTools.defaultFontPixelWidth * 28 width: ScreenTools.defaultFontPixelWidth * 28
height: ScreenTools.defaultFontPixelHeight * 13 height: ScreenTools.defaultFontPixelHeight * 13
color: qgcPal.windowShade color: qgcPal.windowShade
readonly property real titleHeight: ScreenTools.defaultFontPixelHeight * 2
// Title bar // Title bar
Rectangle { Rectangle {
id: titleBar
width: parent.width width: parent.width
height: titleHeight height: titleHeight
color: qgcPal.windowShadeDark color: qgcPal.windowShadeDark
...@@ -100,34 +86,28 @@ Rectangle { ...@@ -100,34 +86,28 @@ Rectangle {
// Title text // Title text
QGCLabel { QGCLabel {
anchors.fill: parent anchors.fill: parent
color: qgcPal.buttonText
text: modelData.name.toUpperCase()
verticalAlignment: TextEdit.AlignVCenter verticalAlignment: TextEdit.AlignVCenter
horizontalAlignment: TextEdit.AlignHCenter horizontalAlignment: TextEdit.AlignHCenter
} text: modelData.name.toUpperCase()
} }
// Setup indicator // Setup indicator
Rectangle { Rectangle {
readonly property real indicatorRadius: 6 anchors.rightMargin: ScreenTools.defaultFontPixelWidth / 3
readonly property real indicatorRightInset: 5 anchors.right: parent.right
anchors.verticalCenter: parent.verticalCenter
x: parent.width - (indicatorRadius * 2) - indicatorRightInset width: 10//radius * 2
y: (parent.titleHeight - (indicatorRadius * 2)) / 2 height: 10//height
width: indicatorRadius * 2 radius: (ScreenTools.defaultFontPixelHeight * .75) * 2
height: indicatorRadius * 2
radius: indicatorRadius
color: modelData.setupComplete ? "#00d932" : "red" color: modelData.setupComplete ? "#00d932" : "red"
visible: modelData.requiresSetup
}
} }
// Summary Qml // Summary Qml
Rectangle { Rectangle {
y: parent.titleHeight anchors.top: titleBar.bottom
width: parent.width width: parent.width
height: parent.height - parent.titleHeight
color: qgcPal.windowShade
Loader { Loader {
anchors.fill: parent anchors.fill: parent
......
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