Adding a RoundButton element.

Also moving the Plan View tool bar buttons into a Row element.

qgroundcontrol.qrc

@@ -114,6 +114,7 @@
         <file alias="QGroundControl/Controls/MissionItemSummary.qml">src/QmlControls/MissionItemSummary.qml</file>
         <file alias="QGroundControl/Controls/MissionItemEditor.qml">src/QmlControls/MissionItemEditor.qml</file>
         <file alias="QGroundControl/Controls/DropButton.qml">src/QmlControls/DropButton.qml</file>
+        <file alias="QGroundControl/Controls/RoundButton.qml">src/QmlControls/RoundButton.qml</file>
         <file alias="QGroundControl/Controls/QGCCanvas.qml">src/QmlControls/QGCCanvas.qml</file>
 
         <!-- Vehicle Setup -->

src/MissionEditor/MissionEditor.qml

@@ -130,51 +130,34 @@ QGCView {
                     }
                 }
 
-                Image {
+                Row {
+                    spacing:            ScreenTools.defaultFontPixelWidth
+                    anchors.top:        parent.top
+                    anchors.right:      parent.right
+                    anchors.margins:    ScreenTools.defaultFontPixelWidth
+
+                    RoundButton {
                         id:                     addMissionItemsButton
-                    anchors.rightMargin:    ScreenTools.defaultFontPixelHeight
-                    anchors.right:          homePositionManagerButton.left
-                    anchors.top:            homePositionManagerButton.top
-                    width:                  ScreenTools.defaultFontPixelHeight * 3
-                    fillMode:               Image.PreserveAspectFit
-                    mipmap:                 true
-                    smooth:                 true
-                    source:                 "/qmlimages/MapAddMission.svg"
+                        buttonImage:            "/qmlimages/MapAddMission.svg"
                         opacity:                _addMissionItems ? 1.0 : 0.75
-                    MouseArea {
-                        anchors.fill: parent
                         onClicked: {
                             _addMissionItems = !_addMissionItems
                             _showHomePositionManager = false
                         }
                     }
-                }
 
-                Image {
+                    RoundButton {
                         id:                     homePositionManagerButton
-                    anchors.rightMargin:    ScreenTools.defaultFontPixelHeight
-                    anchors.right:          centerMapButton.left
-                    anchors.top:            centerMapButton.top
-                    width:                  ScreenTools.defaultFontPixelHeight * 3
-                    fillMode:               Image.PreserveAspectFit
-                    mipmap:                 true
-                    smooth:                 true
-                    source:                 "/qmlimages/MapHome.svg"
+                        buttonImage:            "/qmlimages/MapHome.svg"
                         opacity:                _showHomePositionManager ? 1.0 : 0.75
-                    MouseArea {
-                        anchors.fill: parent
                         onClicked: {
                             _showHomePositionManager = !_showHomePositionManager
                             _addMissionItems = false
                         }
                     }
-                }
 
                     DropButton {
                         id:                     centerMapButton
-                    anchors.rightMargin:    ScreenTools.defaultFontPixelHeight
-                    anchors.right:          syncButton.left
-                    anchors.top:            syncButton.top
                         dropDirection:          dropDown
                         buttonImage:            "/qmlimages/MapCenter.svg"
                         viewportMargins:        ScreenTools.defaultFontPixelWidth / 2
@@ -248,9 +231,6 @@ This code will need to wait for Qml 5.5 support since Map.visibleRegion is only
 
                     DropButton {
                         id:                     syncButton
-                    anchors.rightMargin:    ScreenTools.defaultFontPixelHeight
-                    anchors.right:          mapTypeButton.left
-                    anchors.top:            mapTypeButton.top
                         dropDirection:          dropDown
                         buttonImage:            "/qmlimages/MapSync.svg"
                         viewportMargins:        ScreenTools.defaultFontPixelWidth / 2
@@ -303,9 +283,6 @@ This code will need to wait for Qml 5.5 support since Map.visibleRegion is only
 
                     DropButton {
                         id:                 mapTypeButton
-                    anchors.margins:    ScreenTools.defaultFontPixelHeight
-                    anchors.top:        parent.top
-                    anchors.right:      parent.right
                         dropDirection:      dropDown
                         buttonImage:        "/qmlimages/MapType.svg"
                         viewportMargins:    ScreenTools.defaultFontPixelWidth / 2
@@ -334,6 +311,7 @@ This code will need to wait for Qml 5.5 support since Map.visibleRegion is only
                             }
                         }
                     }
+                }
 
                 MissionItemIndicator {
                     label:          "H"

src/QmlControls/QGroundControl.Controls.qmldir

@@ -14,6 +14,7 @@ QGCCanvas           1.0 QGCCanvas.qml
 SubMenuButton       1.0 SubMenuButton.qml
 IndicatorButton     1.0 IndicatorButton.qml
 DropButton          1.0 DropButton.qml
+RoundButton         1.0 RoundButton.qml
 VehicleRotationCal  1.0 VehicleRotationCal.qml
 VehicleSummaryRow   1.0 VehicleSummaryRow.qml
 ViewWidget          1.0 ViewWidget.qml

src/QmlControls/RoundButton.qml

@@ -0,0 +1,35 @@
+import QtQuick                  2.4
+import QtQuick.Controls         1.2
+import QtQuick.Controls.Styles  1.2
+
+import QGroundControl.ScreenTools   1.0
+
+Item {
+    id: _root
+
+    signal          clicked()
+    property alias  buttonImage:        button.source
+    property real   radius:             (ScreenTools.defaultFontPixelHeight * 3) / 2
+
+    width:  radius * 2
+    height: radius * 2
+
+    Rectangle {
+        anchors.fill:   parent
+        radius:         width / 2
+        border.width:   2
+        border.color:   "white"
+        color:          "transparent"
+        Image {
+            id:             button
+            anchors.fill:   parent
+            fillMode:       Image.PreserveAspectFit
+            mipmap:         true
+            smooth:         true
+            MouseArea {
+                anchors.fill:   parent
+                onClicked:      _root.clicked()
+            }
+        }
+    }
+}