zhaohuwei
/
QG4
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Tweaking control sizing for better touch usability

QGC4.4
Don Gagne 8 years ago committed by Lorenz Meier
parent
94cac7e5fe
commit
d930895b1f
7 changed files with 103 additions and 59 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      qgcresources.qrc
  2. 37
      src/QmlControls/QGCButton.qml
  3. 52
      src/QmlControls/QGCCheckBox.qml
  4. 5
      src/QmlControls/QGCComboBox.qml
  5. 2
      src/QmlControls/QGCTextField.qml
  6. 8
      src/QmlControls/ScreenTools.qml
  7. BIN
      src/QmlControls/check.png

2
qgcresources.qrc
Unescape View File

@ -46,6 +46,7 @@ @@ -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 @@ @@ -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>

37
src/QmlControls/QGCButton.qml
Unescape View File

@ -22,7 +22,8 @@ Button { @@ -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 { @@ -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
background: Rectangle {
implicitWidth: ScreenTools.implicitButtonWidth
implicitHeight: ScreenTools.implicitButtonHeight
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
}
}
/*! 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
@ -101,11 +86,11 @@ Button { @@ -101,11 +86,11 @@ Button {
Text {
id: text
anchors.verticalCenter: parent.verticalCenter
antialiasing: true
text: control.text
font.pointSize: pointSize
font.family: ScreenTools.normalFontFamily
anchors.verticalCenter: parent.verticalCenter
color: _showHighlight ?
control._qgcPal.buttonHighlightText :
(primary ? control._qgcPal.primaryButtonText : control._qgcPal.buttonText)

52
src/QmlControls/QGCCheckBox.qml
Unescape View File

@ -13,11 +13,12 @@ CheckBox { @@ -13,11 +13,12 @@ CheckBox {
implicitWidth: text.implicitWidth + 2
implicitHeight: text.implicitHeight
baselineOffset: text.baselineOffset
Rectangle {
anchors.fill: text
anchors.margins: -1
anchors.leftMargin: -3
anchors.rightMargin: -3
anchors.fill: text
visible: control.activeFocus
height: 6
radius: 3
@ -25,6 +26,7 @@ CheckBox { @@ -25,6 +26,7 @@ CheckBox {
border.color: "#47b"
opacity: 0.6
}
Text {
id: text
text: control.text
@ -34,6 +36,54 @@ CheckBox { @@ -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
}

5
src/QmlControls/QGCComboBox.qml
Unescape View File

@ -18,13 +18,12 @@ ComboBox { @@ -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
}

2
src/QmlControls/QGCTextField.qml
Unescape View File

@ -27,7 +27,7 @@ TextField { @@ -27,7 +27,7 @@ TextField {
textColor: qgcPal.textFieldText
implicitHeight: Math.round(ScreenTools.defaultFontPixelHeight * (ScreenTools.isMobile ? 2 : 1.2))
implicitHeight: ScreenTools.implicitTextFieldHeight
QGCLabel {
id: unitsLabelWidthGenerator

8
src/QmlControls/ScreenTools.qml
Unescape View File

@ -60,6 +60,14 @@ Item { @@ -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"

BIN
src/QmlControls/check.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 176 B

Write Preview
Loading…
Cancel
Save