Rework InstrumentSwipeView

src/FlightMap/Widgets/InstrumentSwipeView.qml

 import QtQuick                  2.5
-import QtQuick.Controls         1.4
+import QtQuick.Controls         2.0
+import QtQuick.Layouts          1.3
 
 import QGroundControl.Palette       1.0
 import QGroundControl.ScreenTools   1.0
 import QGroundControl.FlightMap     1.0
 
 Item {
-    id: _root
-    clip: true
-    height: valuesPage.height + pageIndicatorRow.anchors.topMargin + pageIndicatorRow.height
+    id:     _root
+    clip:   true
+    height: column.height
 
-    property var    qgcView     ///< QGCView to use for showing dialogs
+    property var    qgcView         ///< QGCView to use for showing dialogs
     property color  textColor
     property color  backgroundColor
-    property var    maxHeight   ///< Maximum height that should be taken, smaller than this is ok
+    property var    maxHeight       ///< Maximum height that should be taken, smaller than this is ok
 
-    property real   _margins:           ScreenTools.defaultFontPixelWidth / 2
-    property real   _pageWidth:         _root.width
-    property int    _currentPage:       0
-    property int    _maxPage:           2
+    property real   _margins:       ScreenTools.defaultFontPixelWidth / 2
+    property real   _pageWidth:     _root.width
+    property int    _currentPage:   0
+    property int    _maxPage:       3
+
+    onWidthChanged: showPage(_currentPage)
 
     function showPicker() {
         valuesPage.showPicker()
     }
 
     function showPage(pageIndex) {
-        _root.height = Qt.binding(function() { return _root.children[pageIndex].height + pageIndicatorRow.anchors.topMargin + pageIndicatorRow.height } )
-        _root.children[0].x = -(pageIndex * _pageWidth)
-    }
-
-    ValuesWidget {
-        id:         valuesPage
-        width:      _pageWidth
-        qgcView:    _root.qgcView
-        textColor:  _root.textColor
-        maxHeight:  _root.maxHeight
-    }
-
-    VehicleHealthWidget {
-        id:             healthPage
-        anchors.left:   valuesPage.right
-        width:          _pageWidth
-        qgcView:        _root.qgcView
-        textColor:      _root.textColor
-        maxHeight:      _root.maxHeight
+        pageRow.x = -(pageIndex * _pageWidth)
     }
 
-    VibrationWidget {
-        id:                 vibrationPage
-        anchors.left:       healthPage.right
-        width:              _pageWidth
-        textColor:          _root.textColor
-        backgroundColor:    _root.backgroundColor
-        maxHeight:          _root.maxHeight
-    }
-
-    Row {
-        id:                         pageIndicatorRow
-        anchors.bottom:             parent.bottom
-        anchors.horizontalCenter:   parent.horizontalCenter
-        spacing:                    _margins
-
-        Repeater {
-            model: _maxPage + 1
-
-            Rectangle {
-                height:         radius * 2
-                width:          radius * 2
-                radius:         ScreenTools.defaultFontPixelWidth / 3
-                border.color:   textColor
-                border.width:   1
-                color:          _currentPage == index ? textColor : "transparent"
-            }
+    function showNextPage() {
+        if (_currentPage == _maxPage) {
+            _currentPage = 0
+        } else {
+            _currentPage++
         }
+        showPage(_currentPage)
     }
 
     MouseArea {
-        anchors.fill: parent
-
-        onClicked: {
-            if (_currentPage == _maxPage) {
-                _currentPage = 0
-            } else {
-                _currentPage++
-            }
-            showPage(_currentPage)
-        }
+        anchors.fill:   parent
+        onClicked:      showNextPage()
     }
 
-    /*
-      Switching from swipe to click to change pages. Keeping swipe code for now in case of change back.
-    MouseArea {
-        anchors.fill: parent
+    Column {
+        id:             column
+        anchors.left:   parent.left
+        anchors.right:  parent.right
 
-        property real xDragStart
-        property real xFirstPageSave
+        Row {
+            id: pageRow
 
-        onPressed: {
-            if (mouse.button == Qt.LeftButton) {
-                mouse.accepted = true
-                xDragStart = mouse.x
-                xFirstPageSave = _root.children[0].x
+            ValuesWidget {
+                id:         valuesPage
+                width:      _pageWidth
+                qgcView:    _root.qgcView
+                textColor:  _root.textColor
+                maxHeight:  _root.maxHeight
+            }
+            CameraWidget {
+                width:      _pageWidth
+                qgcView:    _root.qgcView
+                textColor:  _root.textColor
+                maxHeight:  _root.maxHeight
+            }
+            VehicleHealthWidget {
+                width:      _pageWidth
+                qgcView:    _root.qgcView
+                textColor:  _root.textColor
+                maxHeight:  _root.maxHeight
+            }
+            VibrationWidget {
+                width:              _pageWidth
+                textColor:          _root.textColor
+                backgroundColor:    _root.backgroundColor
+                maxHeight:          _root.maxHeight
             }
         }
 
-        onPositionChanged: {
-            _root.children[0].x = xFirstPageSave + mouse.x - xDragStart
-        }
-
-        onReleased: {
-            if (mouse.x < xDragStart) {
-                // Swipe left
-                _currentPage = Math.min(_currentPage + 1, _maxPage)
-            } else {
-                // Swipe right
-                _currentPage = Math.max(_currentPage - 1, 0)
+        Row {
+            anchors.horizontalCenter:   parent.horizontalCenter
+            spacing:                    _margins
+
+            Repeater {
+                model: _maxPage + 1
+
+                Rectangle {
+                    height:         radius * 2
+                    width:          radius * 2
+                    radius:         ScreenTools.defaultFontPixelWidth / 3
+                    border.color:   textColor
+                    border.width:   1
+                    color:          _currentPage == index ? textColor : "transparent"
+                }
             }
-            showPage(_currentPage)
         }
     }
-    */
 }

src/FlightMap/Widgets/ValuesWidget.qml

@@ -54,7 +54,7 @@ QGCFlickable {
 
     MouseArea {
         anchors.fill:   parent
-        onClicked:      showPicker()
+        onClicked:      showNextPage()
     }
 
     Column {

src/FlightMap/Widgets/VehicleHealthWidget.qml

@@ -34,6 +34,11 @@ QGCFlickable {
         }
     }
 
+    MouseArea {
+        anchors.fill:   parent
+        onClicked:      showNextPage()
+    }
+
     Column {
         id:     healthColumn
         width:  parent.width

src/FlightMap/Widgets/VibrationWidget.qml

@@ -39,6 +39,11 @@ QGCFlickable {
 
     QGCPalette { id:qgcPal; colorGroupEnabled: true }
 
+    MouseArea {
+        anchors.fill:   parent
+        onClicked:      showNextPage()
+    }
+
     Item {
         id:     innerItem
         width:  parent.width