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
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 4
      src/FlightDisplay/FlightDisplayView.qml
  2. 106
      src/QmlControls/QGCCheckBox.qml
  3. 47
      src/QmlControls/QGCRadioButton.qml

4
src/FlightDisplay/FlightDisplayView.qml
Unescape View File

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

106
src/QmlControls/QGCCheckBox.qml
Unescape View File

@ -6,96 +6,50 @@ import QGroundControl.Palette 1.0 @@ -6,96 +6,50 @@ import QGroundControl.Palette 1.0
import QGroundControl.ScreenTools 1.0
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 {
label: Item {
implicitWidth: text.implicitWidth + 2
implicitHeight: ScreenTools.implicitCheckBoxHeight
implicitWidth: _noText ? 0 : text.implicitWidth + ScreenTools.defaultFontPixelWidth * 0.25
implicitHeight: _noText ? 0 : Math.max(text.implicitHeight, ScreenTools.checkBoxIndicatorSize)
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 {
id: text
text: control.text
antialiasing: true
font.pointSize: ScreenTools.defaultFontPointSize
font.family: ScreenTools.normalFontFamily
color: control.__qgcPal.text
anchors.verticalCenter: parent.verticalCenter
id: text
text: control.text
font.pointSize: textFontPointSize
font.bold: control.textBold
color: control.textColor
anchors.centerIn: parent
}
} // label
}
indicator: Item {
implicitWidth: ScreenTools.checkBoxIndicatorSize
implicitHeight: implicitWidth
Rectangle {
anchors.fill: parent
anchors.bottomMargin: -1
color: "#44ffffff"
radius: baserect.radius
}
Rectangle {
id: baserect
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
border.color: control.activeFocus ? "#47b" : "#999"
opacity: control.enabled ? 1 : 0.5
}
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}
anchors.fill: parent
radius: _radius
border.color: "black"
opacity: control.checkedState === Qt.PartiallyChecked ? 0.5 : 1
Rectangle {
anchors.margins: parent.height / 4
anchors.fill: parent
radius: _radius
color: "black"
visible: control.checkedState === Qt.Checked
}
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
}
}
}

47
src/QmlControls/QGCRadioButton.qml
Unescape View File

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

Write Preview
Loading…
Cancel
Save