Skip to content

Q
qgroundcontrol
Commit d930895b authored by Don Gagne's avatar Don Gagne Committed by Lorenz Meier
Browse files
Options

Tweaking control sizing for better touch usability

parent 94cac7e5
Show whitespace changes
Inline Side-by-side
Showing with 103 additions and 59 deletions
qgcresources.qrc
View file @ d930895b
...@@ -46,6 +46,7 @@ ...@@ -46,6 +46,7 @@
<file alias="Airframe/HelicopterCoaxial">src/AutoPilotPlugins/Common/Images/HelicopterCoaxial.svg</file> <file alias="Airframe/HelicopterCoaxial">src/AutoPilotPlugins/Common/Images/HelicopterCoaxial.svg</file>
<file alias="wifi.svg">src/AutoPilotPlugins/Common/Images/wifi.svg</file> <file alias="wifi.svg">src/AutoPilotPlugins/Common/Images/wifi.svg</file>
<file alias="arrow-down.png">src/QmlControls/arrow-down.png</file> <file alias="arrow-down.png">src/QmlControls/arrow-down.png</file>
<file alias="check.png">src/QmlControls/check.png</file>
<file alias="FirmwareUpgradeIcon.png">src/VehicleSetup/FirmwareUpgradeIcon.png</file> <file alias="FirmwareUpgradeIcon.png">src/VehicleSetup/FirmwareUpgradeIcon.png</file>
<file alias="FlightModesComponentIcon.png">src/AutoPilotPlugins/PX4/Images/FlightModesComponentIcon.png</file> <file alias="FlightModesComponentIcon.png">src/AutoPilotPlugins/PX4/Images/FlightModesComponentIcon.png</file>
<file alias="CameraTrigger.svg">src/AutoPilotPlugins/PX4/Images/CameraTrigger.svg</file> <file alias="CameraTrigger.svg">src/AutoPilotPlugins/PX4/Images/CameraTrigger.svg</file>
...@@ -160,6 +161,7 @@ ...@@ -160,6 +161,7 @@
<file alias="APM/BrandImage">src/FirmwarePlugin/APM/APMBrandImage.png</file> <file alias="APM/BrandImage">src/FirmwarePlugin/APM/APMBrandImage.png</file>
<file alias="APM/BrandImageSub">src/FirmwarePlugin/APM/APMBrandImageSub.png</file> <file alias="APM/BrandImageSub">src/FirmwarePlugin/APM/APMBrandImageSub.png</file>
<file alias="PX4/BrandImage">src/FirmwarePlugin/PX4/PX4BrandImage.png</file> <file alias="PX4/BrandImage">src/FirmwarePlugin/PX4/PX4BrandImage.png</file>
<file alias="PX4/BrandImage">src/FirmwarePlugin/PX4/PX4BrandImage.png</file>
</qresource> </qresource>
<qresource prefix="/res"> <qresource prefix="/res">
<file alias="AntennaRC">resources/Antenna_RC.svg</file> <file alias="AntennaRC">resources/Antenna_RC.svg</file>
......
src/QmlControls/QGCButton.qml
View file @ d930895b
...@@ -22,7 +22,8 @@ Button { ...@@ -22,7 +22,8 @@ Button {
property int __lastGlobalMouseX: 0 property int __lastGlobalMouseX: 0
property int __lastGlobalMouseY: 0 property int __lastGlobalMouseY: 0
property int __padding: Math.round(ScreenTools.defaultFontPixelHeight * 0.5) property int _horizontalPadding: ScreenTools.defaultFontPixelWidth
property int _verticalPadding: Math.round(ScreenTools.defaultFontPixelHeight / 2)
Connections { Connections {
target: __behavior target: __behavior
...@@ -50,42 +51,26 @@ Button { ...@@ -50,42 +51,26 @@ Button {
style: ButtonStyle { style: ButtonStyle {
/*! The padding between the background and the label components. */ /*! The padding between the background and the label components. */
padding { padding {
top: __padding * 0.5 top: _verticalPadding
left: __padding bottom: _verticalPadding
right: control.menu !== null ? Math.round(ScreenTools.defaultFontPixelHeight) : __padding left: _horizontalPadding
bottom: __padding * 0.5 right: _horizontalPadding
} }
/*! This defines the background of the button. */ /*! This defines the background of the button. */
background: Item { background: Rectangle {
property bool down: control.pressed || (control.checkable && control.checked) implicitWidth: ScreenTools.implicitButtonWidth
implicitWidth: Math.round(ScreenTools.defaultFontPixelWidth * 4.5) implicitHeight: ScreenTools.implicitButtonHeight
implicitHeight: ScreenTools.isMobile ? Math.max(25, Math.round(ScreenTools.defaultFontPixelHeight * 2)) : Math.max(25, Math.round(ScreenTools.defaultFontPixelHeight * 1.2))
Rectangle {
anchors.fill: parent
border.width: _showBorder ? 1: 0 border.width: _showBorder ? 1: 0
border.color: _qgcPal.buttonText border.color: _qgcPal.buttonText
//radius: 3
color: _showHighlight ? color: _showHighlight ?
control._qgcPal.buttonHighlight : control._qgcPal.buttonHighlight :
(primary ? control._qgcPal.primaryButton : control._qgcPal.button) (primary ? control._qgcPal.primaryButton : control._qgcPal.button)
} }
Image {
id: imageItem
visible: control.menu !== null
source: "/qmlimages/arrow-down.png"
anchors.verticalCenter: parent.verticalCenter
anchors.right: parent.right
anchors.rightMargin: __padding
opacity: control.enabled ? 0.6 : 0.5
}
}
/*! This defines the label of the button. */ /*! This defines the label of the button. */
label: Item { label: Item {
implicitWidth: control.menu === null ? row.implicitWidth : row.implicitWidth + ScreenTools.defaultFontPixelWidth implicitWidth: row.implicitWidth
implicitHeight: row.implicitHeight implicitHeight: row.implicitHeight
baselineOffset: row.y + text.y + text.baselineOffset baselineOffset: row.y + text.y + text.baselineOffset
...@@ -101,11 +86,11 @@ Button { ...@@ -101,11 +86,11 @@ Button {
Text { Text {
id: text id: text
anchors.verticalCenter: parent.verticalCenter
antialiasing: true antialiasing: true
text: control.text text: control.text
font.pointSize: pointSize font.pointSize: pointSize
font.family: ScreenTools.normalFontFamily font.family: ScreenTools.normalFontFamily
anchors.verticalCenter: parent.verticalCenter
color: _showHighlight ? color: _showHighlight ?
control._qgcPal.buttonHighlightText : control._qgcPal.buttonHighlightText :
(primary ? control._qgcPal.primaryButtonText : control._qgcPal.buttonText) (primary ? control._qgcPal.primaryButtonText : control._qgcPal.buttonText)
......
src/QmlControls/QGCCheckBox.qml
View file @ d930895b
...@@ -13,11 +13,12 @@ CheckBox { ...@@ -13,11 +13,12 @@ CheckBox {
implicitWidth: text.implicitWidth + 2 implicitWidth: text.implicitWidth + 2
implicitHeight: text.implicitHeight implicitHeight: text.implicitHeight
baselineOffset: text.baselineOffset baselineOffset: text.baselineOffset
Rectangle { Rectangle {
anchors.fill: text
anchors.margins: -1 anchors.margins: -1
anchors.leftMargin: -3 anchors.leftMargin: -3
anchors.rightMargin: -3 anchors.rightMargin: -3
anchors.fill: text
visible: control.activeFocus visible: control.activeFocus
height: 6 height: 6
radius: 3 radius: 3
...@@ -25,6 +26,7 @@ CheckBox { ...@@ -25,6 +26,7 @@ CheckBox {
border.color: "#47b" border.color: "#47b"
opacity: 0.6 opacity: 0.6
} }
Text { Text {
id: text id: text
text: control.text text: control.text
...@@ -34,6 +36,54 @@ CheckBox { ...@@ -34,6 +36,54 @@ CheckBox {
color: control.__qgcPal.text color: control.__qgcPal.text
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
} }
} // label
indicator: Item {
implicitWidth: ScreenTools.implicitCheckBoxWidth
implicitHeight: implicitWidth
Rectangle {
anchors.fill: parent
anchors.bottomMargin: -1
color: "#44ffffff"
radius: baserect.radius
}
Rectangle {
id: baserect
gradient: Gradient {
GradientStop {color: "#eee" ; position: 0}
GradientStop {color: control.pressed ? "#eee" : "#fff" ; position: 0.1}
GradientStop {color: "#fff" ; position: 1}
}
radius: ScreenTools.defaultFontPixelHeight * 0.16
anchors.fill: parent
border.color: control.activeFocus ? "#47b" : "#999"
}
Image {
source: "/qmlimages/check.png"
opacity: control.checkedState === Qt.Checked ? control.enabled ? 1 : 0.5 : 0
anchors.centerIn: parent
anchors.verticalCenterOffset: 1
Behavior on opacity {NumberAnimation {duration: 80}}
}
Rectangle {
anchors.fill: parent
anchors.margins: Math.round(baserect.radius)
antialiasing: true
gradient: Gradient {
GradientStop {color: control.pressed ? "#555" : "#999" ; position: 0}
GradientStop {color: "#555" ; position: 1}
} }
radius: baserect.radius - 1
anchors.centerIn: parent
anchors.alignWhenCentered: true
border.color: "#222"
Behavior on opacity {NumberAnimation {duration: 80}}
opacity: control.checkedState === Qt.PartiallyChecked ? control.enabled ? 1 : 0.5 : 0
} }
} // indicator
} // style
} }
src/QmlControls/QGCComboBox.qml
View file @ d930895b
...@@ -18,13 +18,12 @@ ComboBox { ...@@ -18,13 +18,12 @@ ComboBox {
control._qgcPal.buttonText control._qgcPal.buttonText
background: Item { background: Item {
implicitWidth: Math.round(ScreenTools.defaultFontPixelWidth * 4.5) implicitWidth: ScreenTools.implicitComboBoxWidth
implicitHeight: Math.round(ScreenTools.defaultFontPixelHeight * (ScreenTools.isMobile ? 2 : 1.2)) implicitHeight: ScreenTools.implicitComboBoxHeight
Rectangle { Rectangle {
anchors.fill: parent anchors.fill: parent
color: _showHighlight ? control._qgcPal.buttonHighlight : control._qgcPal.button color: _showHighlight ? control._qgcPal.buttonHighlight : control._qgcPal.button
//radius: 3
border.width: _showBorder ? 1: 0 border.width: _showBorder ? 1: 0
border.color: control._qgcPal.buttonText border.color: control._qgcPal.buttonText
} }
......
src/QmlControls/QGCTextField.qml
View file @ d930895b
...@@ -27,7 +27,7 @@ TextField { ...@@ -27,7 +27,7 @@ TextField {
textColor: qgcPal.textFieldText textColor: qgcPal.textFieldText
implicitHeight: Math.round(ScreenTools.defaultFontPixelHeight * (ScreenTools.isMobile ? 2 : 1.2)) implicitHeight: ScreenTools.implicitTextFieldHeight
QGCLabel { QGCLabel {
id: unitsLabelWidthGenerator id: unitsLabelWidthGenerator
......
src/QmlControls/ScreenTools.qml
View file @ d930895b
...@@ -60,6 +60,14 @@ Item { ...@@ -60,6 +60,14 @@ Item {
property bool isTinyScreen: (Screen.width / Screen.pixelDensity) < 120 // 120mm property bool isTinyScreen: (Screen.width / Screen.pixelDensity) < 120 // 120mm
property bool isShortScreen: ScreenToolsController.isMobile && ((Screen.height / Screen.width) < 0.6) // Nexus 7 for example property bool isShortScreen: ScreenToolsController.isMobile && ((Screen.height / Screen.width) < 0.6) // Nexus 7 for example
// The implicit heights/widths for our custom control set
property real implicitButtonWidth: Math.round(defaultFontPixelWidth * (isMobile ? 7.0 : 5.0))
property real implicitButtonHeight: Math.round(defaultFontPixelHeight * (isMobile ? 2.0 : 1.6))
property real implicitCheckBoxWidth: Math.round(defaultFontPixelHeight * (isMobile ? 1.5 : 1.0))
property real implicitTextFieldHeight: Math.round(defaultFontPixelHeight * (isMobile ? 2.0 : 1.6))
property real implicitComboBoxHeight: Math.round(defaultFontPixelHeight * (isMobile ? 2.0 : 1.6))
property real implicitComboBoxWidth: Math.round(defaultFontPixelWidth * (isMobile ? 7.0 : 5.0))
readonly property string normalFontFamily: "opensans" readonly property string normalFontFamily: "opensans"
readonly property string demiboldFontFamily: "opensans-demibold" readonly property string demiboldFontFamily: "opensans-demibold"
......
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