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
Hide whitespace changes
Inline Side-by-side
Showing with 103 additions and 59 deletions
qgcresources.qrc
View file @ d930895b
......@@ -46,6 +46,7 @@
<file alias="Airframe/HelicopterCoaxial">src/AutoPilotPlugins/Common/Images/HelicopterCoaxial.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="check.png">src/QmlControls/check.png</file>
<file alias="FirmwareUpgradeIcon.png">src/VehicleSetup/FirmwareUpgradeIcon.png</file>
<file alias="FlightModesComponentIcon.png">src/AutoPilotPlugins/PX4/Images/FlightModesComponentIcon.png</file>
<file alias="CameraTrigger.svg">src/AutoPilotPlugins/PX4/Images/CameraTrigger.svg</file>
......@@ -160,6 +161,7 @@
<file alias="APM/BrandImage">src/FirmwarePlugin/APM/APMBrandImage.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>
</qresource>
<qresource prefix="/res">
<file alias="AntennaRC">resources/Antenna_RC.svg</file>
......
src/QmlControls/QGCButton.qml
View file @ d930895b
......@@ -22,7 +22,8 @@ Button {
property int __lastGlobalMouseX: 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 {
target: __behavior
......@@ -50,42 +51,26 @@ Button {
style: ButtonStyle {
/*! The padding between the background and the label components. */
padding {
top: __padding * 0.5
left: __padding
right: control.menu !== null ? Math.round(ScreenTools.defaultFontPixelHeight) : __padding
bottom: __padding * 0.5
top: _verticalPadding
bottom: _verticalPadding
left: _horizontalPadding
right: _horizontalPadding
}
/*! This defines the background of the button. */
background: Item {
property bool down: control.pressed || (control.checkable && control.checked)
implicitWidth: Math.round(ScreenTools.defaultFontPixelWidth * 4.5)
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.color: _qgcPal.buttonText
//radius: 3
color: _showHighlight ?
control._qgcPal.buttonHighlight :
(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
}
background: Rectangle {
implicitWidth: ScreenTools.implicitButtonWidth
implicitHeight: ScreenTools.implicitButtonHeight
border.width: _showBorder ? 1: 0
border.color: _qgcPal.buttonText
color: _showHighlight ?
control._qgcPal.buttonHighlight :
(primary ? control._qgcPal.primaryButton : control._qgcPal.button)
}
/*! This defines the label of the button. */
label: Item {
implicitWidth: control.menu === null ? row.implicitWidth : row.implicitWidth + ScreenTools.defaultFontPixelWidth
implicitWidth: row.implicitWidth
implicitHeight: row.implicitHeight
baselineOffset: row.y + text.y + text.baselineOffset
......@@ -95,20 +80,20 @@ Button {
spacing: ScreenTools.defaultFontPixelWidth * 0.25
Image {
source: control.iconSource
source: control.iconSource
anchors.verticalCenter: parent.verticalCenter
}
Text {
id: text
antialiasing: true
text: control.text
font.pointSize: pointSize
font.family: ScreenTools.normalFontFamily
id: text
anchors.verticalCenter: parent.verticalCenter
color: _showHighlight ?
control._qgcPal.buttonHighlightText :
(primary ? control._qgcPal.primaryButtonText : control._qgcPal.buttonText)
antialiasing: true
text: control.text
font.pointSize: pointSize
font.family: ScreenTools.normalFontFamily
color: _showHighlight ?
control._qgcPal.buttonHighlightText :
(primary ? control._qgcPal.primaryButtonText : control._qgcPal.buttonText)
}
}
}
......
src/QmlControls/QGCCheckBox.qml
View file @ d930895b
import QtQuick 2.2
import QtQuick.Controls 1.2
import QtQuick.Controls.Styles 1.2
import QtQuick 2.2
import QtQuick.Controls 1.2
import QtQuick.Controls.Styles 1.2
import QGroundControl.Palette 1.0
import QGroundControl.ScreenTools 1.0
import QGroundControl.Palette 1.0
import QGroundControl.ScreenTools 1.0
CheckBox {
property var __qgcPal: QGCPalette { colorGroupEnabled: enabled }
style: CheckBoxStyle {
label: Item {
implicitWidth: text.implicitWidth + 2
implicitWidth: text.implicitWidth + 2
implicitHeight: text.implicitHeight
baselineOffset: text.baselineOffset
Rectangle {
anchors.fill: text
anchors.margins: -1
anchors.margins: -1
anchors.leftMargin: -3
anchors.rightMargin: -3
visible: control.activeFocus
height: 6
radius: 3
color: "#224f9fef"
border.color: "#47b"
opacity: 0.6
anchors.fill: text
visible: control.activeFocus
height: 6
radius: 3
color: "#224f9fef"
border.color: "#47b"
opacity: 0.6
}
Text {
id: text
text: control.text
......@@ -34,6 +36,54 @@ CheckBox {
color: control.__qgcPal.text
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 {
control._qgcPal.buttonText
background: Item {
implicitWidth: Math.round(ScreenTools.defaultFontPixelWidth * 4.5)
implicitHeight: Math.round(ScreenTools.defaultFontPixelHeight * (ScreenTools.isMobile ? 2 : 1.2))
implicitWidth: ScreenTools.implicitComboBoxWidth
implicitHeight: ScreenTools.implicitComboBoxHeight
Rectangle {
anchors.fill: parent
color: _showHighlight ? control._qgcPal.buttonHighlight : control._qgcPal.button
//radius: 3
border.width: _showBorder ? 1: 0
border.color: control._qgcPal.buttonText
}
......
src/QmlControls/QGCTextField.qml
View file @ d930895b
......@@ -27,7 +27,7 @@ TextField {
textColor: qgcPal.textFieldText
implicitHeight: Math.round(ScreenTools.defaultFontPixelHeight * (ScreenTools.isMobile ? 2 : 1.2))
implicitHeight: ScreenTools.implicitTextFieldHeight
QGCLabel {
id: unitsLabelWidthGenerator
......
src/QmlControls/ScreenTools.qml
View file @ d930895b
......@@ -60,6 +60,14 @@ Item {
property bool isTinyScreen: (Screen.width / Screen.pixelDensity) < 120 // 120mm
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 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