Merge pull request #1971 from dogmaphobic/toggleMapButtons

Made map buttons toggle between black and orange.

qgroundcontrol.qrc

@@ -67,6 +67,7 @@
         <file alias="ZoomMinus.svg">src/FlightMap/Images/ZoomMinus.svg</file>
 
         <!-- Map Buttons -->
+        <file alias="Help.svg">src/FlightMap/Images/Help.svg</file>
         <file alias="MapCenter.svg">src/FlightMap/Images/MapCenter.svg</file>
         <file alias="MapSync.svg">src/FlightMap/Images/MapSync.svg</file>
         <file alias="MapType.svg">src/FlightMap/Images/MapType.svg</file>

src/FlightMap/Images/Help.svg

+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="-89 46 72 72" enable-background="new -89 46 72 72" xml:space="preserve">
+<circle fill="none" stroke="#FFFFFF" stroke-width="2" stroke-miterlimit="10" cx="-53" cy="82" r="22.38"/>
+<g>
+	<path fill="#FFFFFF" d="M-54.662,89.026c-0.012-0.439-0.018-0.768-0.018-0.987c0-1.291,0.183-2.406,0.548-3.344
+		c0.268-0.707,0.7-1.419,1.297-2.138c0.438-0.524,1.227-1.288,2.365-2.293s1.878-1.806,2.219-2.403
+		c0.341-0.597,0.511-1.249,0.511-1.955c0-1.279-0.499-2.403-1.498-3.372c-0.998-0.969-2.222-1.453-3.671-1.453
+		c-1.4,0-2.569,0.439-3.507,1.316c-0.938,0.877-1.553,2.248-1.845,4.112l-3.379-0.402c0.304-2.497,1.209-4.41,2.712-5.738
+		c1.504-1.328,3.492-1.992,5.964-1.992c2.618,0,4.706,0.713,6.265,2.138c1.559,1.425,2.338,3.149,2.338,5.172
+		c0,1.17-0.274,2.248-0.822,3.235s-1.619,2.187-3.215,3.6c-1.072,0.95-1.772,1.651-2.1,2.102c-0.329,0.451-0.572,0.969-0.731,1.553
+		c-0.158,0.585-0.25,1.535-0.274,2.851H-54.662z M-54.863,95.623v-3.746h3.744v3.746H-54.863z"/>
+</g>
+</svg>

src/FlightMap/Images/MapAddMission.svg

 <?xml version="1.0" encoding="utf-8"?>
 <!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 72 72" enable-background="new 0 0 72 72" xml:space="preserve">
-<circle opacity="0.95" cx="36" cy="36" r="34.2"/>
+	 viewBox="-89 46 72 72" enable-background="new -89 46 72 72" xml:space="preserve">
 <g>
-	<path fill="#FFFFFF" d="M33.787,48.612V38.146H23.401v-4.373h10.385V23.384h4.425v10.389h10.387v4.373H38.212v10.466H33.787z"/>
+	<path fill="#FFFFFF" d="M-55.213,94.612V84.146h-10.386v-4.373h10.385V69.384h4.425v10.389h10.387v4.373h-10.386v10.466
+		C-50.788,94.612-55.213,94.612-55.213,94.612z"/>
 </g>
-<circle fill="none" stroke="#FFFFFF" stroke-width="2" stroke-miterlimit="10" cx="36" cy="36" r="22.38"/>
+<circle fill="none" stroke="#FFFFFF" stroke-width="2" stroke-miterlimit="10" cx="-53" cy="82" r="22.38"/>
 </svg>

src/FlightMap/Images/MapCenter.svg

 <?xml version="1.0" encoding="utf-8"?>
 <!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 72 72" enable-background="new 0 0 72 72" xml:space="preserve">
-<circle opacity="0.95" cx="36" cy="36" r="34.2"/>
+	 viewBox="-89 46 72 72" enable-background="new -89 46 72 72" xml:space="preserve">
 <g>
-	<circle fill="none" stroke="#FFFFFF" stroke-width="2" stroke-miterlimit="10" cx="36" cy="36" r="22.38"/>
-	<line fill="none" stroke="#FFFFFF" stroke-width="2" stroke-miterlimit="10" x1="13.536" y1="35.975" x2="24.577" y2="36.025"/>
-	<line fill="none" stroke="#FFFFFF" stroke-width="2" stroke-miterlimit="10" x1="35.975" y1="58.464" x2="36.025" y2="47.423"/>
-	<line fill="none" stroke="#FFFFFF" stroke-width="2" stroke-miterlimit="10" x1="58.464" y1="36.025" x2="47.423" y2="35.975"/>
-	<line fill="none" stroke="#FFFFFF" stroke-width="2" stroke-miterlimit="10" x1="36.025" y1="13.536" x2="35.975" y2="24.577"/>
+	<circle fill="none" stroke="#FFFFFF" stroke-width="2" stroke-miterlimit="10" cx="-53" cy="82" r="22.38"/>
+	<line fill="none" stroke="#FFFFFF" stroke-width="2" stroke-miterlimit="10" x1="-75.464" y1="81.975" x2="-64.423" y2="82.025"/>
+	<line fill="none" stroke="#FFFFFF" stroke-width="2" stroke-miterlimit="10" x1="-53.025" y1="104.464" x2="-52.975" y2="93.423"/>
+	<line fill="none" stroke="#FFFFFF" stroke-width="2" stroke-miterlimit="10" x1="-30.536" y1="82.025" x2="-41.577" y2="81.975"/>
+	<line fill="none" stroke="#FFFFFF" stroke-width="2" stroke-miterlimit="10" x1="-52.975" y1="59.536" x2="-53.025" y2="70.577"/>
 </g>
 </svg>

src/FlightMap/Images/MapHome.svg

 <?xml version="1.0" encoding="utf-8"?>
 <!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 72 72" enable-background="new 0 0 72 72" xml:space="preserve">
-<circle opacity="0.95" cx="36" cy="36" r="34.2"/>
+	 viewBox="-89 46 72 72" enable-background="new -89 46 72 72" xml:space="preserve">
 <g>
-	<polygon fill="#FFFFFF" points="48.6,36.098 36,21.397 23.4,36.098 26.55,36.098 26.55,46.599 32.85,46.599 32.85,38.199 
-		39.15,38.199 39.15,46.599 45.45,46.599 45.45,36.098 	"/>
+	<polygon fill="#FFFFFF" points="-40.4,82.098 -53,67.397 -65.6,82.098 -62.45,82.098 -62.45,92.599 -56.15,92.599 -56.15,84.199 
+		-49.85,84.199 -49.85,92.599 -43.55,92.599 -43.55,82.098 	"/>
 </g>
-<circle fill="none" stroke="#FFFFFF" stroke-width="2" stroke-miterlimit="10" cx="36" cy="36" r="22.38"/>
+<circle fill="none" stroke="#FFFFFF" stroke-width="2" stroke-miterlimit="10" cx="-53" cy="82" r="22.38"/>
 </svg>

src/FlightMap/Images/MapSync.svg

 <?xml version="1.0" encoding="utf-8"?>
 <!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 72 72" enable-background="new 0 0 72 72" xml:space="preserve">
-<circle opacity="0.95" cx="36" cy="36" r="34.2"/>
+	 viewBox="-89 46 72 72" enable-background="new -89 46 72 72" xml:space="preserve">
 <g>
 	<g>
 		<g>
-			<path fill="none" stroke="#FFFFFF" stroke-width="2" stroke-miterlimit="10" d="M22.644,23.933C19.758,27.126,18,31.358,18,36
+			<path fill="none" stroke="#FFFFFF" stroke-width="2" stroke-miterlimit="10" d="M-66.356,69.933C-69.242,73.126-71,77.358-71,82
 				c0,9.941,8.059,18,18,18c0.009,0,0.017-0.001,0.026-0.001"/>
 			<g>
-				<polygon fill="#FFFFFF" points="34.578,44.921 35.03,63.138 43.911,53.804 				"/>
+				<polygon fill="#FFFFFF" points="-54.422,90.921 -53.97,109.138 -45.089,99.804 				"/>
 			</g>
 		</g>
 	</g>
 	<g>
 		<g>
-			<path fill="none" stroke="#FFFFFF" stroke-width="2" stroke-miterlimit="10" d="M49.356,48.067C52.242,44.874,54,40.642,54,36
+			<path fill="none" stroke="#FFFFFF" stroke-width="2" stroke-miterlimit="10" d="M-39.644,94.067C-36.758,90.874-35,86.642-35,82
 				c0-9.941-8.059-18-18-18c-0.009,0-0.017,0.001-0.026,0.001"/>
 			<g>
-				<polygon fill="#FFFFFF" points="37.422,27.079 36.97,8.862 28.089,18.196 				"/>
+				<polygon fill="#FFFFFF" points="-51.578,73.079 -52.03,54.862 -60.911,64.196 				"/>
 			</g>
 		</g>
 	</g>
 </g>
 <g>
-	<path fill="none" d="M35.969,13.537"/>
+	<path fill="none" d="M-53.031,59.537"/>
 </g>
 </svg>

src/FlightMap/Images/MapType.svg

 <?xml version="1.0" encoding="utf-8"?>
 <!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 72 72" enable-background="new 0 0 72 72" xml:space="preserve">
-<circle opacity="0.95" cx="36" cy="36" r="34.2"/>
-<g>
-	<polygon stroke="#FFFFFF" stroke-width="2" stroke-miterlimit="10" points="58.5,38.788 36,55.5 13.5,38.788 36,22.076 	"/>
-	<polygon stroke="#FFFFFF" stroke-width="2" stroke-miterlimit="10" points="58.5,33.212 36,49.924 13.5,33.212 36,16.5 	"/>
-</g>
+	 viewBox="-89 46 72 72" enable-background="new -89 46 72 72" xml:space="preserve">
+<polyline fill="none" stroke="#FFFFFF" stroke-width="2" stroke-miterlimit="10" points="-33.676,83.43 -30.5,85.789 -53,102.501 
+	-75.5,85.789 -72.467,83.536 "/>
+<path fill="none" stroke="#FFFFFF" stroke-width="2" stroke-miterlimit="10" d="M-53,69.077"/>
+<polygon fill="none" stroke="#FFFFFF" stroke-width="2" stroke-miterlimit="10" points="-30.5,78.211 -53,94.923 -75.5,78.211 
+	-53,61.499 "/>
 </svg>

src/MissionEditor/MissionEditor.qml

@@ -48,6 +48,7 @@ QGCView {
     property var    _missionItems:              controller.missionItems
     property bool   _showHomePositionManager:   false
     property bool   _addMissionItems:           false
+    property bool   _showHelpPanel:             true
 
     property var    _homePositionManager:       QGroundControl.homePositionManager
     property string _homePositionName:          _homePositionManager.homePositions.get(0).name
@@ -63,6 +64,12 @@ QGCView {
         id: _dropButtonsExclusiveGroup
     }
 
+    function disableToggles() {
+        _showHomePositionManager    = false
+        _addMissionItems            = false
+        _showHelpPanel              = false
+    }
+
     function setCurrentItem(index) {
         for (var i=0; i<_missionItems.count; i++) {
             _missionItems.get(i).isCurrentItem = (i == index)
@@ -156,20 +163,20 @@ QGCView {
                     RoundButton {
                         id:                     addMissionItemsButton
                         buttonImage:            "/qmlimages/MapAddMission.svg"
-                        opacity:                _addMissionItems ? 1.0 : 0.75
+                        exclusiveGroup:         _dropButtonsExclusiveGroup
                         onClicked: {
-                            _addMissionItems = !_addMissionItems
-                            _showHomePositionManager = false
+                            disableToggles()
+                            _addMissionItems = addMissionItemsButton.checked
                         }
                     }
 
                     RoundButton {
                         id:                     homePositionManagerButton
                         buttonImage:            "/qmlimages/MapHome.svg"
-                        opacity:                _showHomePositionManager ? 1.0 : 0.75
+                        exclusiveGroup:         _dropButtonsExclusiveGroup
                         onClicked: {
-                            _showHomePositionManager = !_showHomePositionManager
-                            _addMissionItems = false
+                            disableToggles()
+                            _showHomePositionManager = homePositionManagerButton.checked
                         }
                     }
 
@@ -180,6 +187,10 @@ QGCView {
                         viewportMargins:        ScreenTools.defaultFontPixelWidth / 2
                         exclusiveGroup:         _dropButtonsExclusiveGroup
 
+                        onClicked: {
+                            disableToggles()
+                        }
+
                         dropDownComponent: Component {
                             Row {
                                 spacing: ScreenTools.defaultFontPixelWidth
@@ -253,6 +264,10 @@ QGCView {
                         viewportMargins:        ScreenTools.defaultFontPixelWidth / 2
                         exclusiveGroup:         _dropButtonsExclusiveGroup
 
+                        onClicked: {
+                            disableToggles()
+                        }
+
                         dropDownComponent: Component {
                             Row {
                                 spacing: ScreenTools.defaultFontPixelWidth
@@ -305,6 +320,10 @@ QGCView {
                         viewportMargins:    ScreenTools.defaultFontPixelWidth / 2
                         exclusiveGroup:         _dropButtonsExclusiveGroup
 
+                        onClicked: {
+                            disableToggles()
+                        }
+
                         dropDownComponent: Component {
                             Row {
                                 spacing: ScreenTools.defaultFontPixelWidth
@@ -328,6 +347,18 @@ QGCView {
                             }
                         }
                     }
+
+                    RoundButton {
+                        id:                     showHelpButton
+                        buttonImage:            "/qmlimages/Help.svg"
+                        exclusiveGroup:         _dropButtonsExclusiveGroup
+                        checked:                true
+                        onClicked: {
+                            disableToggles()
+                            _showHelpPanel = showHelpButton.checked
+                        }
+                    }
+
                 }
 
                 // Add the mission items to the map
@@ -379,7 +410,7 @@ QGCView {
                     delegate:
                         MapPolyline {
                             line.width: 3
-                            line.color: "orange"
+                            line.color: _qgcPal.mapButtonHighlight
                             z:          1
 
                             path: [
@@ -419,7 +450,7 @@ QGCView {
                     // Mission Item Editor
                     Item {
                         anchors.fill:   parent
-                        visible:        !_showHomePositionManager && controller.missionItems.count != 1
+                        visible:        !_showHomePositionManager && controller.missionItems.count != 1 && ! _showHelpPanel
 
                         ListView {
                             id:             missionItemSummaryList
@@ -463,7 +494,7 @@ QGCView {
                     // Home Position Manager
                     Item {
                         anchors.fill:   parent
-                        visible:        _showHomePositionManager
+                        visible:        _showHomePositionManager && !_showHelpPanel
 
                         Column {
                             anchors.fill: parent
@@ -638,7 +669,7 @@ QGCView {
                     // Help Panel
                     Item {
                         anchors.fill:   parent
-                        visible:        !_showHomePositionManager && controller.missionItems.count == 1
+                        visible:        !_showHomePositionManager && (controller.missionItems.count == 1 || _showHelpPanel)
 
                         QGCLabel {
                             id:             helpTitle

src/QGCPalette.cc

@@ -98,6 +98,16 @@ QColor QGCPalette::_textFieldText[QGCPalette::_cThemes][QGCPalette::_cColorGroup
     { QColor(0x2c, 0x2c, 0x2c), QColor(0, 0, 0) },
 };
 
+QColor QGCPalette::_mapButton[QGCPalette::_cThemes][QGCPalette::_cColorGroups] = {
+    { QColor(0x58, 0x58, 0x58), QColor(0, 0, 0) },
+    { QColor(0x58, 0x58, 0x58), QColor(0, 0, 0) },
+};
+
+QColor QGCPalette::_mapButtonHighlight[QGCPalette::_cThemes][QGCPalette::_cColorGroups] = {
+    { QColor(0x58, 0x58, 0x58), QColor(190, 120, 28) },
+    { QColor(0x58, 0x58, 0x58), QColor(190, 120, 28) },
+};
+
 QGCPalette::QGCPalette(QObject* parent) :
     QObject(parent),
     _colorGroupEnabled(true)

src/QGCPalette.h

@@ -86,6 +86,12 @@ class QGCPalette : public QObject
     // Text color for TextFields
     Q_PROPERTY(QColor textFieldText READ textFieldText NOTIFY paletteChanged)
     
+    /// Background color for map buttons
+    Q_PROPERTY(QColor mapButton READ mapButton NOTIFY paletteChanged)
+
+    /// Background color for map button in selected or hover state
+    Q_PROPERTY(QColor mapButtonHighlight READ mapButtonHighlight NOTIFY paletteChanged)
+
 public:
     enum ColorGroup {
         Disabled = 0,
@@ -121,6 +127,9 @@ public:
     QColor textField(void) const { return _textField[_theme][_colorGroupEnabled ? 1 : 0]; }
     QColor textFieldText(void) const { return _textFieldText[_theme][_colorGroupEnabled ? 1 : 0]; }
     
+    QColor mapButton(void) const { return _mapButton[_theme][_colorGroupEnabled ? 1 : 0]; }
+    QColor mapButtonHighlight(void) const { return _mapButtonHighlight[_theme][_colorGroupEnabled ? 1 : 0]; }
+
     static Theme globalTheme(void) { return _theme; }
     static void setGlobalTheme(Theme newTheme);
 
@@ -154,6 +163,9 @@ private:
     static QColor _textField[_cThemes][_cColorGroups];
     static QColor _textFieldText[_cThemes][_cColorGroups];
     
+    static QColor _mapButton[_cThemes][_cColorGroups];
+    static QColor _mapButtonHighlight[_cThemes][_cColorGroups];
+
     void _themeChanged(void);
     
     static QList<QGCPalette*>   _paletteObjects;    ///< List of all active QGCPalette objects

src/QmlControls/DropButton.qml

@@ -8,6 +8,7 @@ import QGroundControl.Palette       1.0
 Item {
     id: _root
 
+    signal          clicked()
     property alias  buttonImage:        button.source
     property real   radius:             (ScreenTools.defaultFontPixelHeight * 3) / 2
     property int    dropDirection:      dropDown
@@ -148,8 +149,10 @@ Item {
         width:      _viewportMaxRight -_viewportMaxLeft
         height:     _viewportMaxBottom - _viewportMaxTop
         visible:    checked
-
-        onClicked: checked = false
+        onClicked:  {
+            checked = false
+            _root.clicked()
+        }
     }
 
     // Button
@@ -158,19 +161,21 @@ Item {
         radius:         width / 2
         border.width:   2
         border.color:   "white"
-        color:          "transparent"
+        opacity:        checked ? 0.95 : 0.65
+        color:          checked ? qgcPal.mapButtonHighlight : qgcPal.mapButton
 
         Image {
             id:             button
             anchors.fill:   parent
             fillMode:       Image.PreserveAspectFit
-            opacity:        checked ? 1.0 : 0.75
             mipmap:         true
             smooth:         true
             MouseArea {
                 anchors.fill: parent
-
-                onClicked: checked = !checked
+                onClicked:  {
+                    checked = !checked
+                    _root.clicked()
+                }
             }
         } // Image - button
     }

src/QmlControls/MissionItemIndexLabel.qml

@@ -3,6 +3,7 @@ import QtQuick.Controls         1.2
 import QtQuick.Controls.Styles  1.2
 
 import QGroundControl.ScreenTools 1.0
+import QGroundControl.Palette     1.0
 
 Rectangle {
     property alias  label:          _label.text
@@ -10,12 +11,14 @@ Rectangle {
 
     signal clicked
 
+    QGCPalette { id: qgcPal }
+
     width:          ScreenTools.defaultFontPixelHeight * 1.5
     height:         width
     radius:         width / 2
     border.width:   2
     border.color:   "white"
-    color:          isCurrentItem ? "green" : "orange"
+    color:          isCurrentItem ? "green" : qgcPal.mapButtonHighlight
 
     MouseArea {
         anchors.fill: parent

src/QmlControls/RoundButton.qml

@@ -3,6 +3,7 @@ import QtQuick.Controls         1.2
 import QtQuick.Controls.Styles  1.2
 
 import QGroundControl.ScreenTools   1.0
+import QGroundControl.Palette       1.0
 
 Item {
     id: _root
@@ -14,12 +15,24 @@ Item {
     width:  radius * 2
     height: radius * 2
 
+    property bool checked: false
+    property ExclusiveGroup exclusiveGroup: null
+
+    QGCPalette { id: qgcPal }
+
+    onExclusiveGroupChanged: {
+        if (exclusiveGroup) {
+            exclusiveGroup.bindCheckable(_root)
+        }
+    }
+
     Rectangle {
         anchors.fill:   parent
         radius:         width / 2
         border.width:   2
         border.color:   "white"
-        color:          "transparent"
+        opacity:        checked ? 0.95 : 0.65
+        color:          checked ? qgcPal.mapButtonHighlight : qgcPal.mapButton
         Image {
             id:             button
             anchors.fill:   parent
@@ -28,7 +41,10 @@ Item {
             smooth:         true
             MouseArea {
                 anchors.fill:   parent
-                onClicked:      _root.clicked()
+                onClicked: {
+                    checked = !checked
+                    _root.clicked()
+                }
             }
         }
     }