diff --git a/src/QmlControls/QGCToolBarButton.qml b/src/QmlControls/QGCToolBarButton.qml index aea50b28f9dce181ecd09b2fa9dfa760d944eccd..b78731d3b5cac39cf01d99a1d01a8d44b59465f0 100644 --- a/src/QmlControls/QGCToolBarButton.qml +++ b/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: { diff --git a/src/ui/MainWindowInner.qml b/src/ui/MainWindowInner.qml index 59d2d81a38646590441e98185e847704fff1fb20..5d3a8f9146b552d574b2f120ae952482241fcdad 100644 --- a/src/ui/MainWindowInner.qml +++ b/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 diff --git a/src/ui/toolbar/MainToolBar.qml b/src/ui/toolbar/MainToolBar.qml index 1953f5e7ebc63dc8bfb13873d3795855859763fb..652a97b2cb1e2e23c449abbddf5326c853a05345 100644 --- a/src/ui/toolbar/MainToolBar.qml +++ b/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() } }