Help text for toolbar buttons (#3711)

src/QmlControls/QGCToolBarButton.qml

@@ -16,17 +16,22 @@ import QGroundControl.Palette       1.0
 import QGroundControl.ScreenTools   1.0
 
 Item {
-    id: _root
+    id:     _root
+    state:  "HelpShown"
+    clip:   true
 
-    property alias          source:  icon.source
-    property bool           checked: false
+    property alias          text:           helpText.text
+    property alias          source:         icon.source
+    property bool           checked:        false
+    property bool           logo:           false
     property ExclusiveGroup exclusiveGroup:  null
 
-    readonly property real _topBottomMargins: ScreenTools.defaultFontPixelHeight / 2
-
     signal   clicked()
 
-    QGCPalette { id: qgcPal }
+    readonly property real _topBottomMargins: ScreenTools.defaultFontPixelHeight / 2
+
+    property real   _helpTextBottomMargin:  0
+    property real   _imageBottomMargin:     0
 
     onExclusiveGroupChanged: {
         if (exclusiveGroup) {
@@ -34,17 +39,62 @@ Item {
         }
     }
 
+    QGCPalette { id: qgcPal }
+
+    states: [
+        State {
+            name: "HelpShown"
+        },
+        State {
+            name: "HelpHidden"
+            PropertyChanges { target: imageAnimation; running: true  }
+            PropertyChanges { target: helpTextAnimation; running: true  }
+        }
+    ]
+
+    PropertyAnimation {
+        id:             imageAnimation
+        target:         _root
+        property:       "_imageBottomMargin"
+        duration:       1000
+        easing.type:    Easing.InOutQuad
+        to:             _topBottomMargins
+        from:           0
+    }
+
+    PropertyAnimation {
+        id:             helpTextAnimation
+        target:         _root
+        property:       "_helpTextBottomMargin"
+        duration:       1000
+        easing.type:    Easing.InOutQuad
+        to:             -helpText.height
+        from:           0
+    }
+
+    Timer {
+        interval:       10000
+        running:        true
+        onTriggered:    _root.state = "HelpHidden"
+    }
+
+    Rectangle {
+        anchors.fill:   parent
+        visible:        logo
+        color:          "#4A2C6D"
+    }
+
     QGCColoredImage {
         id:                     icon
         anchors.left:           parent.left
         anchors.right:          parent.right
         anchors.topMargin:      _topBottomMargins
-        anchors.bottomMargin:   _topBottomMargins
         anchors.top:            parent.top
-        anchors.bottom:         parent.bottom
+        anchors.bottomMargin:   _imageBottomMargin
+        anchors.bottom:         helpText.top
         sourceSize.height:      parent.height
         fillMode:               Image.PreserveAspectFit
-        color:                  checked ? qgcPal.buttonHighlight : qgcPal.buttonText
+        color:                  logo ? "white" : (checked ? qgcPal.buttonHighlight : qgcPal.buttonText)
     }
 
     Rectangle {
@@ -56,6 +106,16 @@ Item {
         visible:        checked
     }
 
+    QGCLabel {
+        id:                     helpText
+        anchors.left:           parent.left
+        anchors.right:          parent.right
+        anchors.bottomMargin:   _helpTextBottomMargin
+        anchors.bottom:         parent.bottom
+        horizontalAlignment:    Text.AlignHCenter
+        color:                  logo ? "white" : qgcPal.buttonText
+    }
+
     MouseArea {
         anchors.fill: parent
         onClicked: {

src/ui/MainWindowInner.qml

@@ -107,6 +107,7 @@ Item {
         setupViewLoader.visible     = false
         planViewLoader.visible      = false
         preferencesPanel.visible    = true
+        toolBar.checkPreferencesButton()
     }
 
     // The following are use for unit testing only

src/ui/toolbar/MainToolBar.qml

@@ -52,6 +52,10 @@ Rectangle {
 
     MainToolBarController { id: _controller }
 
+    function checkPreferencesButton() {
+        preferencesButton.checked = true
+    }
+
     function checkSetupButton() {
         setupButton.checked = true
     }
@@ -307,53 +311,31 @@ Rectangle {
         visible:        qgcPal.globalTheme == QGCPalette.Light
     }
 
-    //---------------------------------------------
-    // Logo (Preferences Button)
-    Rectangle {
-        id:                     preferencesButton
-        width:                  mainWindow.tbButtonWidth * 1.25
-        height:                 parent.height
-        anchors.top:            parent.top
-        anchors.left:           parent.left
-        color:                  "#4A2C6D"
-        Image {
-            height:                 mainWindow.tbCellHeight
-            anchors.centerIn:       parent
-            source:                 "/res/QGCLogoWhite"
-            fillMode:               Image.PreserveAspectFit
-            smooth:                 true
-            mipmap:                 true
-            antialiasing:           true
-        }
-        /* Experimenting with a white/black divider
-        Rectangle {
-            color:      qgcPal.globalTheme === QGCPalette.Light ? Qt.rgba(0,0,0,0.15) : Qt.rgba(1,1,1,0.15)
-            height: parent.height
-            width:  1
-            anchors.right:  parent.right
-            anchors.top:    parent.top
-        }
-        */
-        MouseArea {
-            anchors.fill:   parent
-            onClicked:      toolBar.showPreferences()
-        }
-    }
-
     //---------------------------------------------
     // Toolbar Row
     Row {
         id:                     viewRow
         height:                 mainWindow.tbCellHeight
         spacing:                mainWindow.tbSpacing
-        anchors.left:           preferencesButton.right
-        anchors.leftMargin:     mainWindow.tbSpacing
+        anchors.left:           parent.left
         anchors.bottomMargin:   1
         anchors.top:            parent.top
         anchors.bottom:         parent.bottom
 
         ExclusiveGroup { id: mainActionGroup }
 
+        QGCToolBarButton {
+            id:                 preferencesButton
+            width:              mainWindow.tbButtonWidth
+            anchors.top:        parent.top
+            anchors.bottom:     parent.bottom
+            exclusiveGroup:     mainActionGroup
+            source:             "/res/QGCLogoWhite"
+            logo:               true
+            text:               "Settings"
+            onClicked:          toolBar.showPreferences()
+        }
+
         QGCToolBarButton {
             id:                 setupButton
             width:              mainWindow.tbButtonWidth
@@ -361,6 +343,7 @@ Rectangle {
             anchors.bottom:     parent.bottom
             exclusiveGroup:     mainActionGroup
             source:             "/qmlimages/Gears.svg"
+            text:               "Setup"
             onClicked:          toolBar.showSetupView()
         }
 
@@ -371,6 +354,7 @@ Rectangle {
             anchors.bottom:     parent.bottom
             exclusiveGroup:     mainActionGroup
             source:             "/qmlimages/Plan.svg"
+            text:               "Plan"
             onClicked:          toolBar.showPlanView()
         }
 
@@ -381,6 +365,7 @@ Rectangle {
             anchors.bottom:     parent.bottom
             exclusiveGroup:     mainActionGroup
             source:             "/qmlimages/PaperPlane.svg"
+            text:               "Fly"
             onClicked:          toolBar.showFlyView()
         }
     }