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 @@ ...@@ -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)) border.width: _showBorder ? 1: 0
border.color: _qgcPal.buttonText
Rectangle { color: _showHighlight ?
anchors.fill: parent control._qgcPal.buttonHighlight :
border.width: _showBorder ? 1: 0 (primary ? control._qgcPal.primaryButton : control._qgcPal.button)
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
}
} }
/*! 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
...@@ -95,20 +80,20 @@ Button { ...@@ -95,20 +80,20 @@ Button {
spacing: ScreenTools.defaultFontPixelWidth * 0.25 spacing: ScreenTools.defaultFontPixelWidth * 0.25
Image { Image {
source: control.iconSource source: control.iconSource
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
} }
Text { Text {
id: text id: text
antialiasing: true
text: control.text
font.pointSize: pointSize
font.family: ScreenTools.normalFontFamily
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
color: _showHighlight ? antialiasing: true
control._qgcPal.buttonHighlightText : text: control.text
(primary ? control._qgcPal.primaryButtonText : control._qgcPal.buttonText) 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 2.2
import QtQuick.Controls 1.2 import QtQuick.Controls 1.2
import QtQuick.Controls.Styles 1.2 import QtQuick.Controls.Styles 1.2
import QGroundControl.Palette 1.0 import QGroundControl.Palette 1.0
import QGroundControl.ScreenTools 1.0 import QGroundControl.ScreenTools 1.0
CheckBox { CheckBox {
property var __qgcPal: QGCPalette { colorGroupEnabled: enabled } property var __qgcPal: QGCPalette { colorGroupEnabled: enabled }
style: CheckBoxStyle { style: CheckBoxStyle {
label: Item { label: Item {
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
visible: control.activeFocus anchors.fill: text
height: 6 visible: control.activeFocus
radius: 3 height: 6
color: "#224f9fef" radius: 3
border.color: "#47b" color: "#224f9fef"
opacity: 0.6 border.color: "#47b"
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