Browse Source

CheckBox, RadioButton mobile sizing

QGC4.4
DonLakeFlyer 8 years ago
parent
commit
e66ae88bfa
  1. 4
      src/QmlControls/QGCCheckBox.qml
  2. 20
      src/QmlControls/QGCRadioButton.qml
  3. 17
      src/QmlControls/ScreenTools.qml

4
src/QmlControls/QGCCheckBox.qml

@ -11,7 +11,7 @@ CheckBox { @@ -11,7 +11,7 @@ CheckBox {
style: CheckBoxStyle {
label: Item {
implicitWidth: text.implicitWidth + 2
implicitHeight: text.implicitHeight
implicitHeight: ScreenTools.implicitCheckBoxHeight
baselineOffset: text.baselineOffset
Rectangle {
@ -39,7 +39,7 @@ CheckBox { @@ -39,7 +39,7 @@ CheckBox {
} // label
indicator: Item {
implicitWidth: ScreenTools.implicitCheckBoxWidth
implicitWidth: ScreenTools.checkBoxIndicatorSize
implicitHeight: implicitWidth
Rectangle {

20
src/QmlControls/QGCRadioButton.qml

@ -15,7 +15,7 @@ RadioButton { @@ -15,7 +15,7 @@ RadioButton {
style: RadioButtonStyle {
label: Item {
implicitWidth: text.implicitWidth + ScreenTools.defaultFontPixelWidth * 0.25
implicitHeight: text.implicitHeight
implicitHeight: ScreenTools.implicitRadioButtonHeight
baselineOffset: text.y + text.baselineOffset
Rectangle {
@ -43,5 +43,23 @@ RadioButton { @@ -43,5 +43,23 @@ RadioButton {
anchors.centerIn: parent
}
}
indicator: Rectangle {
width: ScreenTools.radioButtonIndicatorSize
height: width
border.color: qgcPal.text
antialiasing: true
radius: height / 2
Rectangle {
anchors.centerIn: parent
width: Math.round(parent.width * 0.5)
height: width
antialiasing: true
radius: height/2
color: qgcPal.text
opacity: control.checked ? (control.enabled ? 1 : 0.5) : 0
}
}
}
}

17
src/QmlControls/ScreenTools.qml

@ -64,13 +64,16 @@ Item { @@ -64,13 +64,16 @@ Item {
property real minTouchPixels: 0 ///< Minimum touch size in pixels
// 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))
property real implicitSliderHeight: isMobile ? Math.max(defaultFontPixelHeight, minTouchPixels) : defaultFontPixelHeight
property real implicitButtonWidth: Math.round(defaultFontPixelWidth * (isMobile ? 7.0 : 5.0))
property real implicitButtonHeight: Math.round(defaultFontPixelHeight * (isMobile ? 2.0 : 1.6))
property real implicitCheckBoxHeight: Math.round(defaultFontPixelHeight * (isMobile ? 2.0 : 1.0))
property real implicitRadioButtonHeight: implicitCheckBoxHeight
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))
property real implicitSliderHeight: isMobile ? Math.max(defaultFontPixelHeight, minTouchPixels) : defaultFontPixelHeight
property real checkBoxIndicatorSize: Math.round(defaultFontPixelHeight * (isMobile ? 1.5 : 1.0))
property real radioButtonIndicatorSize: checkBoxIndicatorSize
readonly property string normalFontFamily: "opensans"
readonly property string demiboldFontFamily: "opensans-demibold"

Loading…
Cancel
Save