From d930895b1fa921cb7182e8cdf39b8c131bb779f6 Mon Sep 17 00:00:00 2001 From: Don Gagne Date: Tue, 28 Feb 2017 09:45:32 -0800 Subject: [PATCH] Tweaking control sizing for better touch usability --- qgcresources.qrc | 2 + src/QmlControls/QGCButton.qml | 63 +++++++++--------------- src/QmlControls/QGCCheckBox.qml | 82 +++++++++++++++++++++++++------ src/QmlControls/QGCComboBox.qml | 5 +- src/QmlControls/QGCTextField.qml | 2 +- src/QmlControls/ScreenTools.qml | 8 +++ src/QmlControls/check.png | Bin 0 -> 176 bytes 7 files changed, 103 insertions(+), 59 deletions(-) create mode 100644 src/QmlControls/check.png diff --git a/qgcresources.qrc b/qgcresources.qrc index bc66e1716..cb4c509db 100644 --- a/qgcresources.qrc +++ b/qgcresources.qrc @@ -46,6 +46,7 @@ src/AutoPilotPlugins/Common/Images/HelicopterCoaxial.svg src/AutoPilotPlugins/Common/Images/wifi.svg src/QmlControls/arrow-down.png + src/QmlControls/check.png src/VehicleSetup/FirmwareUpgradeIcon.png src/AutoPilotPlugins/PX4/Images/FlightModesComponentIcon.png src/AutoPilotPlugins/PX4/Images/CameraTrigger.svg @@ -160,6 +161,7 @@ src/FirmwarePlugin/APM/APMBrandImage.png src/FirmwarePlugin/APM/APMBrandImageSub.png src/FirmwarePlugin/PX4/PX4BrandImage.png + src/FirmwarePlugin/PX4/PX4BrandImage.png resources/Antenna_RC.svg diff --git a/src/QmlControls/QGCButton.qml b/src/QmlControls/QGCButton.qml index 5238f025a..55fe10af6 100644 --- a/src/QmlControls/QGCButton.qml +++ b/src/QmlControls/QGCButton.qml @@ -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) } } } diff --git a/src/QmlControls/QGCCheckBox.qml b/src/QmlControls/QGCCheckBox.qml index f57d52143..7cf0c4bc6 100644 --- a/src/QmlControls/QGCCheckBox.qml +++ b/src/QmlControls/QGCCheckBox.qml @@ -1,30 +1,32 @@ -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 } diff --git a/src/QmlControls/QGCComboBox.qml b/src/QmlControls/QGCComboBox.qml index 9950708b4..1a7402167 100644 --- a/src/QmlControls/QGCComboBox.qml +++ b/src/QmlControls/QGCComboBox.qml @@ -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 } diff --git a/src/QmlControls/QGCTextField.qml b/src/QmlControls/QGCTextField.qml index 502e428be..699a82c64 100644 --- a/src/QmlControls/QGCTextField.qml +++ b/src/QmlControls/QGCTextField.qml @@ -27,7 +27,7 @@ TextField { textColor: qgcPal.textFieldText - implicitHeight: Math.round(ScreenTools.defaultFontPixelHeight * (ScreenTools.isMobile ? 2 : 1.2)) + implicitHeight: ScreenTools.implicitTextFieldHeight QGCLabel { id: unitsLabelWidthGenerator diff --git a/src/QmlControls/ScreenTools.qml b/src/QmlControls/ScreenTools.qml index 0eb0c5593..0d2d2a27f 100644 --- a/src/QmlControls/ScreenTools.qml +++ b/src/QmlControls/ScreenTools.qml @@ -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" diff --git a/src/QmlControls/check.png b/src/QmlControls/check.png new file mode 100644 index 0000000000000000000000000000000000000000..ad1df9572e99cebd676eaa8db86a66593b2f5345 GIT binary patch literal 176 zcmeAS@N?(olHy`uVBq!ia0vp^AT~D#3y^%1eq}O{D))484B?PvJ*dcah(Uzm!t&xn z4r)>1EX}#%1?CYOX6)@`k1&kLVSB8XC~#1E#+h5{YdG$IXK1)|`Mey%GC8MY9tP`$ zri=}D&fXUC(0Q_=^%%pA7qOyxR@x0`0xf=LEM+)zr*#7>!?k^J&lnDzICxTkVL<@n a2X^;^l3rbszj=X9VDNPHb6Mw<&;$UUI6bHU literal 0 HcmV?d00001 -- 2.22.0