Toolstrip and QmlTest tweaks

src/QmlControls/QGCHoverButton.qml

@@ -6,19 +6,13 @@ import QtGraphicalEffects 1.0
 import QGroundControl.ScreenTools 1.0
 import QGroundControl.Palette 1.0
 
+// TODO: use QT palette
 Button {
     id: button
     width: columnItem.contentWidth + contentLayoutItem.margins * 2
     height: width
     flat: true
 
-    property color color: qgcPal.button
-    property color disabledColor: qgcPalDisabled.button
-    property color pressedColor: qgcPal.buttonHighlight
-    // TODO: remove after we add it to the palette
-    property color hoverColor: qgcPal.hoverColor
-    property color contentColor: qgcPal.buttonText
-    property color contentPressedColor: qgcPal.buttonHighlightText
     property color borderColor: qgcPal.windowShadeDark
 
     property alias radius: buttonBkRect.radius
@@ -30,8 +24,8 @@ Button {
     property real  borderWidth: 0
     property real  contentMargins: innerText.height * 0.1
 
-    property color _currentColor: checked ? pressedColor : color
-    property color _currentContentColor: contentColor
+    property color _currentColor: qgcPal.button
+    property color _currentContentColor: qgcPal.buttonText
 
     QGCPalette { id: qgcPal }
     QGCPalette { id: qgcPalDisabled; colorGroupEnabled: false }
@@ -102,27 +96,36 @@ Button {
         id: buttonBkRect
         anchors.fill: parent
         color: _currentColor
+        visible: !flat
 
         border.width: borderWidth
         border.color: borderColor
     }
 
-    // Change the aspect of the content in differen button states
+    // Change the colors based on button states
     states: [
         State {
             name: "Hovering"
             PropertyChanges {
                 target: button;
-                _currentColor: pressed || checked ? pressedColor : hoverColor
-                _currentContentColor: pressed || checked ? contentPressedColor : contentColor
+                _currentColor: (checked || pressed) ? qgcPal.buttonHighlight : qgcPal.hoverColor
+                _currentContentColor: qgcPal.buttonHighlightText
+            }
+            PropertyChanges {
+                target: buttonBkRect
+                visible: true
             }
         },
         State {
             name: "Default"
             PropertyChanges {
                 target: button;
-                _currentColor: enabled ? ((checked || pressed) ? pressedColor : color) : disabledColor
-                _currentContentColor: contentColor
+                _currentColor: enabled ? ((checked || pressed) ? qgcPal.buttonHighlight : qgcPal.button) : qgcPalDisabled.button
+                _currentContentColor: enabled ? ((checked || pressed) ? qgcPal.buttonHighlightText : qgcPal.buttonHighlight) : qgcPalDisabled.buttonText
+            }
+            PropertyChanges {
+                target: buttonBkRect
+                visible: !flat || (checked || pressed)
             }
         }
     ]

src/QmlControls/ToolStrip.qml

@@ -32,7 +32,7 @@ Rectangle {
     property AbstractButton lastClickedButton: null
 
     // Ensure we don't get lower than
-    property real _idealWidth: (ScreenTools.isMobile ? ScreenTools.minTouchPixels : ScreenTools.defaultFontPixelWidth * 10) + toolStripColumn.anchors.margins * 2
+    property real _idealWidth: (ScreenTools.isMobile ? ScreenTools.minTouchPixels : ScreenTools.defaultFontPixelWidth * 8) + toolStripColumn.anchors.margins * 2
 
     signal clicked(int index, bool checked)
 
@@ -44,7 +44,7 @@ Rectangle {
 
     Column {
         id:                 toolStripColumn
-        anchors.margins:    ScreenTools.defaultFontPixelWidth * 0.8
+        anchors.margins:    ScreenTools.defaultFontPixelWidth * 0.4
         anchors.top:        parent.top
         anchors.left:       parent.left
         anchors.right:      parent.right
@@ -55,13 +55,11 @@ Rectangle {
             QGCHoverButton {
                 id: buttonTemplate
 
-                color:          _root.color
-
                 anchors.left:   toolStripColumn.left
                 anchors.right:  toolStripColumn.right
                 height:         width
                 radius:         ScreenTools.defaultFontPixelWidth / 2
-                fontPointSize:  ScreenTools.isMobile ? ScreenTools.smallFontPointSize : ScreenTools.mediumFontPointSize
+                fontPointSize:  ScreenTools.isMobile ? ScreenTools.smallFontPointSize : ScreenTools.defaultFontPointSize
 
                 enabled:        _root.buttonEnabled ? _root.buttonEnabled[index] : true
                 visible:        _root.buttonVisible ? _root.buttonVisible[index] : true