Add visible handles to monitor zoom bar.

Related to #651

src/monitor/view/MonitorRuler.qml

@@ -104,8 +104,13 @@ Rectangle {
 
     // Zoom bar container
     Rectangle {
+        id: zoomContainer
+        SystemPalette { id: barPalette; colorGroup: SystemPalette.Disabled }
         height: root.baseUnit
-        color: activePalette.base
+        property bool hoveredBar: zoomArea.containsMouse || zoomArea.pressed || zoomStart.isActive || zoomEnd.isActive
+        color: hoveredBar ? barPalette.text : activePalette.dark
+        border.color: activePalette.dark
+        border.width: 1
         visible: root.showZoomBar
         onVisibleChanged: {
             root.zoomOffset = visible ? height : 0
@@ -143,11 +148,10 @@ Rectangle {
             property int previousX: 0
             property int previousWidth: zoomHandleContainer.width
             anchors.fill: parent
-            anchors.margins: 3
+            anchors.margins: 1
             Rectangle {
                 id: zoomBar
-                radius: height / 2
-                color: (zoomArea.containsMouse ||  zoomArea.pressed) ? activePalette.highlight : activePalette.text
+                color: zoomContainer.hoveredBar ? activePalette.highlight : barPalette.text
                 height: parent.height
                 width: parent.width
                 MouseArea {
@@ -180,7 +184,6 @@ Rectangle {
                         }
                     }
                     onWheel: {
-                        console.log('GOT ZOOM WHEEL OK')
                         if (wheel.modifiers & Qt.ControlModifier) {
                             if (wheel.angleDelta.y < 0) {
                                 // zoom out
@@ -204,6 +207,7 @@ Rectangle {
             }
             MouseArea {
                 id: zoomStart
+                property bool isActive: zoomStart.containsMouse || zoomStart.pressed
                 anchors.left: zoomBar.left
                 anchors.leftMargin: - root.baseUnit / 2
                 anchors.bottom: zoomBar.bottom
@@ -213,9 +217,11 @@ Rectangle {
                 cursorShape: Qt.SizeHorCursor
                 onPressed: {
                     anchors.left = undefined
+                    startHandleRect.anchors.fill = undefined
                 }
                 onReleased: {
                     anchors.left = zoomBar.left
+                    startHandleRect.anchors.fill = zoomStart
                 }
                 onPositionChanged: {
                     if (mouse.buttons === Qt.LeftButton) {
@@ -225,11 +231,24 @@ Rectangle {
                         zoomBar.x = updatedPos
                         root.zoomStart = updatedPos / zoomHandleContainer.width
                         root.zoomFactor = zoomBar.width / zoomHandleContainer.width
+                        startHandleRect.x = mouseX
+                    }
+                }
+                Rectangle {
+                    id: startHandleRect
+                    anchors.fill: parent
+                    radius: height / 2
+                    color: zoomStart.isActive ? activePalette.text : barPalette.light
+                    Rectangle {
+                        anchors.fill: parent
+                        anchors.leftMargin: height / 2
+                        color: parent.color
                     }
                 }
             }
             MouseArea {
                 id: zoomEnd
+                property bool isActive: zoomEnd.containsMouse || zoomEnd.pressed
                 anchors.left: zoomBar.right
                 anchors.leftMargin: - root.baseUnit / 2
                 anchors.bottom: zoomBar.bottom
@@ -239,9 +258,11 @@ Rectangle {
                 cursorShape: Qt.SizeHorCursor
                 onPressed: {
                     anchors.left = undefined
+                    endHandleRect.anchors.fill = undefined
                 }
                 onReleased: {
                     anchors.left = zoomBar.right
+                    endHandleRect.anchors.fill = zoomEnd
                 }
                 onPositionChanged: {
                     if (mouse.buttons === Qt.LeftButton) {
@@ -249,6 +270,18 @@ Rectangle {
                         updatedPos = Math.max(updatedPos, zoomBar.x + root.baseUnit / 2)
                         zoomBar.width = updatedPos - zoomBar.x
                         root.zoomFactor = zoomBar.width / zoomHandleContainer.width
+                        endHandleRect.x = mouseX
+                    }
+                }
+                Rectangle {
+                    id: endHandleRect
+                    anchors.fill: parent
+                    radius: height / 2
+                    color: zoomEnd.isActive ? activePalette.text : barPalette.light
+                    Rectangle {
+                        anchors.fill: parent
+                        anchors.rightMargin: height / 2
+                        color: parent.color
                     }
                 }
             }