Merge pull request #8028 from DonLakeFlyer/QGCComboBox

Tweak combobox visuals

src/QmlControls/QGCComboBox.qml

@@ -15,16 +15,16 @@ import QtQuick.Templates        2.4 as T
 
 import QGroundControl.ScreenTools   1.0
 import QGroundControl.Palette       1.0
+import QGroundControl.Controls      1.0
 
 T.ComboBox {
     id:             control
     padding:        ScreenTools.comboBoxPadding
     spacing:        ScreenTools.defaultFontPixelWidth
     implicitWidth:  Math.max(background ? background.implicitWidth : 0,
-                            contentItem.implicitWidth + leftPadding + rightPadding)
+                             contentItem.implicitWidth + leftPadding + rightPadding + padding)
     implicitHeight: Math.max(background ? background.implicitHeight : 0,
-                             Math.max(contentItem.implicitHeight,
-                                      indicator ? indicator.implicitHeight : 0) + topPadding + bottomPadding)
+                             Math.max(contentItem.implicitHeight, indicator ? indicator.implicitHeight : 0) + topPadding + bottomPadding)
     leftPadding:    padding + (!control.mirrored || !indicator || !indicator.visible ? 0 : indicator.width + spacing)
     rightPadding:   padding + (control.mirrored || !indicator || !indicator.visible ? 0 : indicator.width)
 
@@ -76,14 +76,14 @@ T.ComboBox {
         highlighted:                control.highlightedIndex === index
     }
 
-    // Dropdown indicator
-    indicator: ColorImage {
-        x:              control.mirrored ? control.padding : control.width - width
-        y:              control.topPadding + (control.availableHeight - height) / 2
-        color:          _qgcPal.text
-        defaultColor:   "#353637"
-        source:         "qrc:/qt-project.org/imports/QtQuick/Controls.2/images/double-arrow.png"
-        opacity:        enabled ? 1 : 0.3
+    indicator: QGCColoredImage {
+        anchors.rightMargin:    control.padding
+        anchors.right:          parent.right
+        anchors.verticalCenter: parent.verticalCenter
+        height:                 ScreenTools.defaultFontPixelWidth
+        width:                  height
+        source:                 "/qmlimages/arrow-down.png"
+        color:                  _qgcPal.text
     }
 
     // The label of the button

src/QmlControls/ScreenTools.qml

@@ -90,7 +90,7 @@ Item {
     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 comboBoxPadding:                  Math.round(defaultFontPixelWidth *  (isShortScreen ? 1 : 0.5))
+    property real comboBoxPadding:                  defaultFontPixelWidth
     property real implicitSliderHeight:             isMobile ? Math.max(defaultFontPixelHeight, minTouchPixels) : defaultFontPixelHeight
     // It's not possible to centralize an even number of pixels, checkBoxIndicatorSize should be an odd number to allow centralization
     property real checkBoxIndicatorSize:            2 * Math.floor(defaultFontPixelHeight * (isMobile ? 1.5 : 1.0) / 2) + 1