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

Simpler control design for better mobile display

QGC4.4
Don Gagne 6 years ago
parent
86ead133fa
commit
fb8d580644
3 changed files with 50 additions and 107 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 4
      src/FlightDisplay/FlightDisplayView.qml
  2. 90
      src/QmlControls/QGCCheckBox.qml
  3. 45
      src/QmlControls/QGCRadioButton.qml

4
src/FlightDisplay/FlightDisplayView.qml
Unescape View File

@ -488,13 +488,13 @@ QGCView {
exclusiveGroup: multiVehicleSelectorGroup exclusiveGroup: multiVehicleSelectorGroup
text: qsTr("Single") text: qsTr("Single")
checked: true checked: true
color: mapPal.text textColor: mapPal.text
} }
QGCRadioButton { QGCRadioButton {
exclusiveGroup: multiVehicleSelectorGroup exclusiveGroup: multiVehicleSelectorGroup
text: qsTr("Multi-Vehicle") text: qsTr("Multi-Vehicle")
color: mapPal.text textColor: mapPal.text
} }
} }

90
src/QmlControls/QGCCheckBox.qml
Unescape View File

@ -6,39 +6,31 @@ import QGroundControl.Palette 1.0
import QGroundControl.ScreenTools 1.0 import QGroundControl.ScreenTools 1.0
CheckBox { CheckBox {
activeFocusOnPress: true property color textColor: _qgcPal.text
property bool textBold: false
property real textFontPointSize: ScreenTools.defaultFontPointSize
property var _qgcPal: QGCPalette { colorGroupEnabled: enabled }
property bool _noText: text === ""
property real _radius: ScreenTools.defaultFontPixelHeight * 0.16
property var __qgcPal: QGCPalette { colorGroupEnabled: enabled } activeFocusOnPress: true
style: CheckBoxStyle { style: CheckBoxStyle {
label: Item { label: Item {
implicitWidth: text.implicitWidth + 2 implicitWidth: _noText ? 0 : text.implicitWidth + ScreenTools.defaultFontPixelWidth * 0.25
implicitHeight: ScreenTools.implicitCheckBoxHeight implicitHeight: _noText ? 0 : Math.max(text.implicitHeight, ScreenTools.checkBoxIndicatorSize)
baselineOffset: text.baselineOffset baselineOffset: text.baselineOffset
Rectangle {
anchors.margins: -1
anchors.leftMargin: -3
anchors.rightMargin: -3
anchors.fill: text
visible: control.activeFocus
height: 6
radius: 3
color: "#224f9fef"
border.color: "#47b"
opacity: 0.6
}
Text { Text {
id: text id: text
text: control.text text: control.text
antialiasing: true font.pointSize: textFontPointSize
font.pointSize: ScreenTools.defaultFontPointSize font.bold: control.textBold
font.family: ScreenTools.normalFontFamily color: control.textColor
color: control.__qgcPal.text anchors.centerIn: parent
anchors.verticalCenter: parent.verticalCenter }
} }
} // label
indicator: Item { indicator: Item {
implicitWidth: ScreenTools.checkBoxIndicatorSize implicitWidth: ScreenTools.checkBoxIndicatorSize
@ -46,56 +38,18 @@ CheckBox {
Rectangle { Rectangle {
anchors.fill: parent anchors.fill: parent
anchors.bottomMargin: -1 radius: _radius
color: "#44ffffff" border.color: "black"
radius: baserect.radius opacity: control.checkedState === Qt.PartiallyChecked ? 0.5 : 1
}
Rectangle { Rectangle {
id: baserect anchors.margins: parent.height / 4
property var enabledGradient: Gradient {
GradientStop {color: "#eee" ; position: 0}
GradientStop {color: control.pressed ? "#eee" : "#fff" ; position: 0.1}
GradientStop {color: "#fff" ; position: 1}
}
property var disabledGradient: Gradient {
GradientStop {color: "#999" ; position: 0}
GradientStop {color: __qgcPal.textField ; position: 0.1}
GradientStop {color: __qgcPal.textField ; position: 0.9}
GradientStop {color: "#999" ; position: 1}
}
gradient: control.enabled ? enabledGradient : disabledGradient
radius: ScreenTools.defaultFontPixelHeight * 0.16
anchors.fill: parent anchors.fill: parent
border.color: control.activeFocus ? "#47b" : "#999" radius: _radius
opacity: control.enabled ? 1 : 0.5 color: "black"
visible: control.checkedState === Qt.Checked
} }
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
} }

45
src/QmlControls/QGCRadioButton.qml
Unescape View File

@ -6,41 +6,30 @@ import QGroundControl.Palette 1.0
import QGroundControl.ScreenTools 1.0 import QGroundControl.ScreenTools 1.0
RadioButton { RadioButton {
property var color: qgcPal.text ///< Text color property color textColor: _qgcPal.text
property int textStyle: Text.Normal
property color textStyleColor: qgcPal.text
property bool textBold: false property bool textBold: false
property var qgcPal: QGCPalette { colorGroupEnabled: enabled } property real textFontPointSize: ScreenTools.defaultFontPointSize
property var _qgcPal: QGCPalette { colorGroupEnabled: enabled }
property bool _noText: text === ""
activeFocusOnPress: true
style: RadioButtonStyle { style: RadioButtonStyle {
spacing: _noText ? 0 : ScreenTools.defaultFontPixelWidth / 2
label: Item { label: Item {
implicitWidth: text.implicitWidth + ScreenTools.defaultFontPixelWidth * 0.25 implicitWidth: _noText ? 0 : text.implicitWidth + ScreenTools.defaultFontPixelWidth * 0.25
implicitHeight: ScreenTools.implicitRadioButtonHeight implicitHeight: _noText ? 0 : Math.max(text.implicitHeight, ScreenTools.radioButtonIndicatorSize)
baselineOffset: text.y + text.baselineOffset baselineOffset: text.y + text.baselineOffset
Rectangle {
anchors.fill: text
anchors.margins: -1
anchors.leftMargin: -3
anchors.rightMargin:-3
visible: control.activeFocus
height: ScreenTools.defaultFontPixelWidth * 0.25
radius: height * 0.5
color: "#224f9fef"
border.color: "#47b"
opacity: 0.6
}
Text { Text {
id: text id: text
text: control.text text: control.text
font.pointSize: ScreenTools.defaultFontPointSize font.pointSize: textFontPointSize
font.family: ScreenTools.normalFontFamily
font.bold: control.textBold font.bold: control.textBold
antialiasing: true color: control.textColor
color: control.color
style: control.textStyle
styleColor: control.textStyleColor
anchors.centerIn: parent anchors.centerIn: parent
} }
} }
@ -49,9 +38,9 @@ RadioButton {
width: ScreenTools.radioButtonIndicatorSize width: ScreenTools.radioButtonIndicatorSize
height: width height: width
color: "white" color: "white"
border.color: control.qgcPal.text border.color: "black"
antialiasing: true
radius: height / 2 radius: height / 2
opacity: control.enabled ? 1 : 0.5
Rectangle { Rectangle {
anchors.centerIn: parent anchors.centerIn: parent
@ -60,7 +49,7 @@ RadioButton {
antialiasing: true antialiasing: true
radius: height / 2 radius: height / 2
color: "black" color: "black"
opacity: control.checked ? (control.enabled ? 1 : 0.5) : 0 visible: control.checked
} }
} }
} }

Write Preview
Loading…
Cancel
Save