TelemetryValuesBar: Improve user experience with new edit and layout option

Signed-off-by: Patrick José Pereira <patrickelectric@gmail.com>

src/FlightDisplay/TelemetryValuesBar.qml

@@ -23,24 +23,83 @@ Rectangle {
     color:              qgcPal.window
     radius:             ScreenTools.defaultFontPixelWidth / 2
 
+    property bool       bottomMode: true
+
     DeadMouseArea { anchors.fill: parent }
 
     ColumnLayout {
         id:                 telemetryLayout
         anchors.margins:    _toolsMargin
-        anchors.top:        parent.top
+        anchors.bottom:     parent.bottom
         anchors.left:       parent.left
 
+         RowLayout {
+            visible: mouseArea.containsMouse || valueArea.settingsUnlocked
+
+            QGCColoredImage {
+                source:             "/res/layout-bottom.svg"
+                mipmap:             true
+                width:              ScreenTools.minTouchPixels * 0.75
+                height:             width
+                sourceSize.width:   width
+                color:              qgcPal.text
+                fillMode:           Image.PreserveAspectFit
+                visible:            !bottomMode
+
+                QGCMouseArea {
+                    fillItem:   parent
+                    onClicked:  bottomMode = true
+                }
+            }
+
+            QGCColoredImage {
+                source:             "/res/layout-right.svg"
+                mipmap:             true
+                width:              ScreenTools.minTouchPixels * 0.75
+                height:             width
+                sourceSize.width:   width
+                color:              qgcPal.text
+                fillMode:           Image.PreserveAspectFit
+                visible:            bottomMode
+
+                QGCMouseArea {
+                    fillItem:   parent
+                    onClicked:  bottomMode = false
+                }
+            }
+
+            QGCColoredImage {
+                source:             valueArea.settingsUnlocked ? "/res/LockOpen.svg" : "/res/pencil.svg"
+                mipmap:             true
+                width:              ScreenTools.minTouchPixels * 0.75
+                height:             width
+                sourceSize.width:   width
+                color:              qgcPal.text
+                fillMode:           Image.PreserveAspectFit
+
+                QGCMouseArea {
+                    anchors.fill: parent
+                    hoverEnabled: true
+                    cursorShape:  Qt.PointingHandCursor
+                    onClicked:    valueArea.settingsUnlocked = !valueArea.settingsUnlocked
+                }
+            }
+        }
+
+        QGCMouseArea {
+            id:                         mouseArea
+            x:                          telemetryLayout.x
+            y:                          telemetryLayout.y
+            width:                      telemetryLayout.width
+            height:                     telemetryLayout.height
+            hoverEnabled:               true
+            propagateComposedEvents:    true
+        }
+
         HorizontalFactValueGrid {
             id:                     valueArea
             userSettingsGroup:      telemetryBarUserSettingsGroup
             defaultSettingsGroup:   telemetryBarDefaultSettingsGroup
-
-            QGCMouseArea {
-                anchors.fill:   parent
-                visible:        !parent.settingsUnlocked
-                onClicked:      parent.settingsUnlocked = true
-            }
         }
 
         GuidedActionConfirm {