Refactor monitor tool bars (Pt. 1)

Increase code reusage (better maintainability) by using a custom tool
button (extents QtQuick.Controls ToolButton)

src/monitor/view/EffectToolBar.qml

@@ -27,7 +27,6 @@ MouseArea {
         id: effecttoolbar
         objectName: "effecttoolbar"
         width: barZone.width
-        anchors.right: barZone.right
         anchors.verticalCenter: parent.verticalCenter
         height: childrenRect.height
         color: Qt.rgba(activePalette.window.r, activePalette.window.g, activePalette.window.b, 0.7)
@@ -51,43 +50,18 @@ MouseArea {
         }
 
         Column {
-            ToolButton {
+            width: parent.width
+            MonitorToolButton {
                 id: fullscreenButton
                 objectName: "fullScreen"
-                contentItem: Item {
-                    Image {
-                        source: "image://icon/view-fullscreen"
-                        anchors.centerIn: parent
-                        width: barZone.width - 4
-                        height: width
-                    }
-                }
-                width: barZone.width
-                height: barZone.width
-                focusPolicy: Qt.NoFocus
-                ToolTip.visible: hovered
-                ToolTip.delay: Qt.styleHints.mousePressAndHoldInterval
-                ToolTip.text: i18n("Switch Full Screen")
-                ToolTip.timeout: 3000
+                iconName: "view-fullscreen"
+                toolTipText: i18n("Switch Full Screen")
                 onClicked: controller.triggerAction('monitor_fullscreen')
             }
-            ToolButton {
+            MonitorToolButton {
                 objectName: "switchOverlay"
-                contentItem: Item {
-                    Image {
-                        source: "image://icon/view-grid"
-                        anchors.centerIn: parent
-                        width: barZone.width - 4
-                        height: width
-                    }
-                }
-                width: barZone.width
-                height: barZone.width
-                focusPolicy: Qt.NoFocus
-                ToolTip.visible: hovered
-                ToolTip.delay: Qt.styleHints.mousePressAndHoldInterval
-                ToolTip.text: i18n("Change Overlay")
-                ToolTip.timeout: 3000
+                iconName: "view-grid"
+                toolTipText: i18n("Change Overlay")
                 onClicked: {
                     if (controller.overlayType >= 5) {
                         controller.overlayType = 0
@@ -97,153 +71,57 @@ MouseArea {
                     root.overlayType = controller.overlayType
                 }
             }
-            ToolButton {
+            MonitorToolButton {
                 objectName: "nextKeyframe"
-                contentItem: Item {
-                    Image {
-                        source: "image://icon/keyframe-next"
-                        anchors.centerIn: parent
-                        width: barZone.width - 4
-                        height: width
-                    }
-                }
-                width: barZone.width
-                height: barZone.width
-                focusPolicy: Qt.NoFocus
-                ToolTip.visible: hovered
-                ToolTip.delay: Qt.styleHints.mousePressAndHoldInterval
-                ToolTip.text: i18n("Go to Next Keyframe")
-                ToolTip.timeout: 3000
+                iconName: "keyframe-next"
+                toolTipText: i18n("Go to Next Keyframe")
                 onClicked: controller.seekNextKeyframe()
             }
-            ToolButton {
+            MonitorToolButton {
                 objectName: "prevKeyframe"
-                contentItem: Item {
-                    Image {
-                        source: "image://icon/keyframe-previous"
-                        anchors.centerIn: parent
-                        width: barZone.width - 4
-                        height: width
-                    }
-                }
-                width: barZone.width
-                height: barZone.width
-                focusPolicy: Qt.NoFocus
-                ToolTip.visible: hovered
-                ToolTip.delay: Qt.styleHints.mousePressAndHoldInterval
-                ToolTip.text: i18n("Go to Previous Keyframe")
-                ToolTip.timeout: 3000
+                iconName: "keyframe-previous"
+                toolTipText: i18n("Go to Previous Keyframe")
                 onClicked: controller.seekPreviousKeyframe()
             }
-            ToolButton {
+            MonitorToolButton {
                 objectName: "addKeyframe"
-                contentItem: Item {
-                    Image {
-                        source: "image://icon/keyframe-add"
-                        anchors.centerIn: parent
-                        width: barZone.width - 4
-                        height: width
-                    }
-                }
-                width: barZone.width
-                height: barZone.width
-                focusPolicy: Qt.NoFocus
-                ToolTip.visible: hovered
-                ToolTip.delay: Qt.styleHints.mousePressAndHoldInterval
-                ToolTip.text: i18n("Add/Remove Keyframe")
-                ToolTip.timeout: 3000
+                iconName: "keyframe-add"
+                toolTipText: i18n("Add/Remove Keyframe")
                 onClicked: controller.addRemoveKeyframe()
             }
-            ToolButton {
-                contentItem: Item {
-                    Image {
-                        source: "image://icon/keyframe-record"
-                        anchors.centerIn: parent
-                        width: barZone.width - 4
-                        height: width
-                    }
-                }
-                width: barZone.width
-                height: barZone.width
-                ToolTip.visible: hovered
-                focusPolicy: Qt.NoFocus
-                ToolTip.delay: Qt.styleHints.mousePressAndHoldInterval
-                ToolTip.text: i18n("Automatic Keyframes")
-                ToolTip.timeout: 3000
+            MonitorToolButton {
+                iconName: "keyframe-record"
+                toolTipText: i18n("Automatic Keyframes")
                 onClicked: controller.switchAutoKeyframe()
                 checkable: true
                 checked: controller.autoKeyframe
                 visible: barZone.showAutoKeyframe
             }
-            ToolButton {
-                contentItem: Item {
-                    Image {
-                        source: "image://icon/zoom-in"
-                        anchors.centerIn: parent
-                        width: barZone.width - 4
-                        height: width
-                    }
-                }
-                width: barZone.width
-                height: barZone.width
-                focusPolicy: Qt.NoFocus
-                ToolTip.visible: hovered
-                ToolTip.delay: Qt.styleHints.mousePressAndHoldInterval
-                ToolTip.text: i18n("Zoom in")
-                ToolTip.timeout: 3000
+            MonitorToolButton {
+                iconName: "zoom-in"
+                toolTipText: i18n("Zoom in")
                 onClicked: controller.triggerAction('monitor_zoomin')
             }
-            ToolButton {
-                contentItem: Item {
-                    Image {
-                        source: "image://icon/zoom-out"
-                        anchors.centerIn: parent
-                        width: barZone.width - 4
-                        height: width
-                    }
-                }
-                width: barZone.width
-                height: barZone.width
-                focusPolicy: Qt.NoFocus
-                ToolTip.visible: hovered
-                ToolTip.delay: Qt.styleHints.mousePressAndHoldInterval
-                ToolTip.text: i18n("Zoom out")
-                ToolTip.timeout: 3000
+            MonitorToolButton {
+                iconName: "zoom-out"
+                toolTipText: i18n("Zoom out")
                 onClicked: controller.triggerAction('monitor_zoomout')
             }
-            ToolButton {
+
+            MonitorToolButton {
                 objectName: "moveBar"
-                contentItem: Item {
-                    Image {
-                        source: "image://icon/transform-move-horizontal"
-                        anchors.centerIn: parent
-                        width: barZone.width - 4
-                        height: width
-                    }
-                }
-                width: barZone.width
-                height: barZone.width
-                focusPolicy: Qt.NoFocus
-                ToolTip.visible: hovered
-                ToolTip.delay: Qt.styleHints.mousePressAndHoldInterval
-                ToolTip.text: i18n("Move Toolbar")
-                ToolTip.timeout: 3000
+                iconName: "transform-move-horizontal"
+                toolTipText: i18n("Move Toolbar")
                 onClicked: {
                     if (barZone.rightSide) {
                         barZone.anchors.right = undefined
                         barZone.anchors.left = barZone.parent.left
-                        barZone.rightSide = false
-                        effecttoolbar.anchors.right = undefined
-                        effecttoolbar.anchors.left = barZone.left
-                        effecttoolbar.fadeBar()
                     } else {
                         barZone.anchors.left = undefined
                         barZone.anchors.right = barZone.parent.right
-                        barZone.rightSide = true
-                        effecttoolbar.anchors.left = undefined
-                        effecttoolbar.anchors.right = barZone.right
-                        effecttoolbar.fadeBar()
                     }
+                    barZone.rightSide = !barZone.rightSide
+                    effecttoolbar.fadeBar()
                 }
             }
         }

src/monitor/view/MonitorRuler.qml

@@ -319,11 +319,13 @@ Rectangle {
             anchors.fill: parent
             hoverEnabled: true
             cursorShape: Qt.SizeHorCursor
-            drag.target: parent
-            drag.axis: Drag.XAxis
-            drag.smoothed: false
-            drag.minimumX: 0
-            drag.maximumX: ruler.width
+            drag {
+                target: parent
+                axis: Drag.XAxis
+                smoothed: false
+                minimumX: 0
+                maximumX: ruler.width
+            }
             onPressed: {
                 controller.startZoneMove()
             }
@@ -352,11 +354,13 @@ Rectangle {
             anchors.fill: parent
             hoverEnabled: true
             cursorShape: Qt.SizeHorCursor
-            drag.target: parent
-            drag.axis: Drag.XAxis
-            drag.smoothed: false
-            drag.minimumX: 0
-            drag.maximumX: ruler.width - trimOut.width
+            drag {
+                target: parent
+                axis: Drag.XAxis
+                smoothed: false
+                minimumX: 0
+                maximumX: ruler.width - trimOut.width
+            }
             onPressed: {
                 controller.startZoneMove()
             }
@@ -403,9 +407,11 @@ Rectangle {
                     asynchronous: true
                     height: visible ? 4 * mlabel.height : 0
                     fillMode: Image.PreserveAspectFit
-                    anchors.horizontalCenter: markerTooltip.horizontalCenter
-                    anchors.top: parent.top
-                    anchors.topMargin: 1
+                    anchors {
+                        horizontalCenter: markerTooltip.horizontalCenter
+                        top: parent.top
+                        topMargin: 1
+                    }
                 }
                 Text {
                     id: mlabel
@@ -413,9 +419,11 @@ Rectangle {
                     font: fixedFont
                     verticalAlignment: Text.AlignVCenter
                     horizontalAlignment: Text.AlignHCenter
-                    anchors.bottom: parent.bottom
-                    anchors.left: parent.left
-                    anchors.right: parent.right
+                    anchors {
+                        bottom: parent.bottom
+                        left: parent.left
+                        right: parent.right
+                    }
                     color: '#000'
                 }
                 MouseArea {

src/monitor/view/MonitorToolButton.qml

+import QtQuick 2.11
+import QtQuick.Controls 2.4
+
+
+ToolButton {
+    property string iconName
+    property string toolTipText
+    contentItem: Item {
+        Image {
+            visible: iconName
+            source: 'image://icon/' + iconName
+            anchors.centerIn: parent
+            width: parent.width - 4
+            height: width
+        }
+    }
+    width: parent.width
+    height: width
+    focusPolicy: Qt.NoFocus
+    ToolTip {
+        visible: parent.hovered
+        delay: Qt.styleHints.mousePressAndHoldInterval
+        text: toolTipText
+        timeout: 3000
+    }
+}

src/monitor/view/MultiScreenToolBar.qml

@@ -22,7 +22,6 @@ MouseArea {
         objectName: "scenetoolbar"
         width: barZone.width
         height: childrenRect.height
-        anchors.right: barZone.right
         SystemPalette { id: myPalette; colorGroup: SystemPalette.Active }
         color: Qt.rgba(myPalette.window.r, myPalette.window.g, myPalette.window.b, 0.7)
         opacity: 0
@@ -43,107 +42,48 @@ MouseArea {
             animator.start()
         }
 
-    
-        
         Column {
-            ToolButton {
+            width: parent.width
+            MonitorToolButton {
                 id: fullscreenButton
                 objectName: "fullScreen"
-                contentItem: Item {
-                    Image {
-                        source: "image://icon/view-fullscreen"
-                        anchors.centerIn: parent
-                        width: barZone.width - 4
-                        height: width
-                    }
-                }
-                width: barZone.width
-                height: barZone.width
-                focusPolicy: Qt.NoFocus
-                ToolTip.visible: hovered
-                ToolTip.delay: Qt.styleHints.mousePressAndHoldInterval
-                ToolTip.text: i18n("Switch Full Screen")
-                ToolTip.timeout: 3000
+                iconName: "view-fullscreen"
+                toolTipText: i18n("Switch Full Screen")
                 onClicked: {
                     controller.activateClipMonitor(root.isClipMonitor)
                     controller.triggerAction('monitor_fullscreen')
                 }
             }
-            ToolButton {
-                contentItem: Item {
-                    Image {
-                        source: "image://icon/zoom-in"
-                        anchors.centerIn: parent
-                        width: barZone.width - 4
-                        height: width
-                    }
-                }
-                width: barZone.width
-                height: barZone.width
-                focusPolicy: Qt.NoFocus
-                ToolTip.visible: hovered
-                ToolTip.delay: Qt.styleHints.mousePressAndHoldInterval
-                ToolTip.text: i18n("Zoom in")
-                ToolTip.timeout: 3000
+            MonitorToolButton {
+                iconName: "zoom-in"
+                toolTipText: i18n("Zoom in")
                 onClicked: {
                     controller.activateClipMonitor(root.isClipMonitor)
                     controller.triggerAction('monitor_zoomin')
                 }
             }
-            ToolButton {
-                contentItem: Item {
-                    Image {
-                        source: "image://icon/zoom-out"
-                        anchors.centerIn: parent
-                        width: barZone.width - 4
-                        height: width
-                    }
-                }
-                width: barZone.width
-                height: barZone.width
-                ToolTip.visible: hovered
-                focusPolicy: Qt.NoFocus
-                ToolTip.delay: Qt.styleHints.mousePressAndHoldInterval
-                ToolTip.text: i18n("Zoom out")
-                ToolTip.timeout: 3000
+            MonitorToolButton {
+                iconName: "zoom-out"
+                toolTipText: i18n("Zoom out")
                 onClicked: {
                     controller.activateClipMonitor(root.isClipMonitor)
                     controller.triggerAction('monitor_zoomout')
                 }
             }
-            ToolButton {
+            MonitorToolButton {
                 objectName: "moveBar"
-                contentItem: Item {
-                    Image {
-                        source: "image://icon/transform-move-horizontal"
-                        anchors.centerIn: parent
-                        width: barZone.width - 4
-                        height: width
-                    }
-                }
-                width: barZone.width
-                height: barZone.width
-                focusPolicy: Qt.NoFocus
-                ToolTip.visible: hovered
-                ToolTip.delay: Qt.styleHints.mousePressAndHoldInterval
-                ToolTip.text: i18n("Move Toolbar")
-                ToolTip.timeout: 3000
+                iconName: "transform-move-horizontal"
+                toolTipText: i18n("Move Toolbar")
                 onClicked: {
                     if (barZone.rightSide) {
                         barZone.anchors.right = undefined
                         barZone.anchors.left = barZone.parent.left
-                        barZone.rightSide = false
-                        scenetoolbar.anchors.right = undefined
-                        scenetoolbar.anchors.left = barZone.left
-                        scenetoolbar.fadeBar()
                     } else {
                         barZone.anchors.left = undefined
                         barZone.anchors.right = barZone.parent.right
-                        barZone.rightSide = true
-                        scenetoolbar.anchors.left = undefined
-                        scenetoolbar.anchors.right = barZone.right
-                        scenetoolbar.fadeBar()
                     }
+                    barZone.rightSide = !barZone.rightSide
+                    scenetoolbar.fadeBar()
                 }
             }
         }

src/monitor/view/SceneToolBar.qml

@@ -11,8 +11,8 @@ MouseArea {
     id: barZone
     hoverEnabled: true
     property bool rightSide: true
-    acceptedButtons: Qt.NoButton
     width: 2.4 * fontMetrics.font.pixelSize
+    acceptedButtons: Qt.NoButton
     height: parent.height
     onEntered: {
         animator.stop()
@@ -27,7 +27,6 @@ MouseArea {
         objectName: "scenetoolbar"
         width: barZone.width
         height: childrenRect.height
-        anchors.right: barZone.right
         SystemPalette { id: myPalette; colorGroup: SystemPalette.Active }
         color: Qt.rgba(myPalette.window.r, myPalette.window.g, myPalette.window.b, 0.7)
         opacity: 0
@@ -49,46 +48,21 @@ MouseArea {
         }
 
         Column {
-            ToolButton {
+            width: parent.width
+            MonitorToolButton {
                 id: fullscreenButton
                 objectName: "fullScreen"
-                contentItem: Item {
-                    Image {
-                        source: "image://icon/view-fullscreen"
-                        anchors.centerIn: parent
-                        width: barZone.width - 4
-                        height: width
-                    }
-                }
-                width: barZone.width
-                height: barZone.width
-                focusPolicy: Qt.NoFocus
-                ToolTip.visible: hovered
-                ToolTip.delay: Qt.styleHints.mousePressAndHoldInterval
-                ToolTip.text: i18n("Switch Full Screen")
-                ToolTip.timeout: 3000
+                iconName: "view-fullscreen"
+                toolTipText: i18n("Switch Full Screen")
                 onClicked: {
                     controller.activateClipMonitor(root.isClipMonitor)
                     controller.triggerAction('monitor_fullscreen')
                 }
             }
-            ToolButton {
+            MonitorToolButton {
                 objectName: "switchOverlay"
-                contentItem: Item {
-                    Image {
-                        source: "image://icon/view-grid"
-                        anchors.centerIn: parent
-                        width: barZone.width - 6
-                        height: width
-                    }
-                }
-                width: barZone.width
-                height: barZone.width
-                focusPolicy: Qt.NoFocus
-                ToolTip.visible: hovered
-                ToolTip.delay: Qt.styleHints.mousePressAndHoldInterval
-                ToolTip.text: i18n("Change Overlay")
-                ToolTip.timeout: 3000
+                iconName: "view-grid"
+                toolTipText: i18n("Change Overlay")
                 onClicked: {
                     if (controller.overlayType >= 5) {
                         controller.overlayType = 0
@@ -98,125 +72,54 @@ MouseArea {
                     root.overlayType = controller.overlayType
                 }
             }
-            ToolButton {
-                contentItem: Item {
-                    Image {
-                        source: "image://icon/zoom-in"
-                        anchors.centerIn: parent
-                        width: barZone.width - 6
-                        height: width
-                    }
-                }
-                width: barZone.width
-                height: barZone.width
-                focusPolicy: Qt.NoFocus
-                ToolTip.visible: hovered
-                ToolTip.delay: Qt.styleHints.mousePressAndHoldInterval
-                ToolTip.text: i18n("Zoom in")
-                ToolTip.timeout: 3000
+            MonitorToolButton {
+                iconName: "zoom-in"
+                toolTipText: i18n("Zoom in")
                 onClicked: {
                     controller.activateClipMonitor(root.isClipMonitor)
                     controller.triggerAction('monitor_zoomin')
                 }
             }
-            ToolButton {
-                contentItem: Item {
-                    Image {
-                        source: "image://icon/zoom-out"
-                        anchors.centerIn: parent
-                        width: barZone.width - 6
-                        height: width
-                    }
-                }
-                width: barZone.width
-                height: barZone.width
-                focusPolicy: Qt.NoFocus
-                ToolTip.visible: hovered
-                ToolTip.delay: Qt.styleHints.mousePressAndHoldInterval
-                ToolTip.text: i18n("Zoom out")
-                ToolTip.timeout: 3000
+            MonitorToolButton {
+                iconName: "zoom-out"
+                toolTipText: i18n("Zoom out")
                 onClicked: {
                     controller.activateClipMonitor(root.isClipMonitor)
                     controller.triggerAction('monitor_zoomout')
                 }
             }
-            ToolButton {
+            MonitorToolButton {
                 objectName: "addMarker"
-                contentItem: Item {
-                    Image {
-                        source: "image://icon/list-add"
-                        anchors.centerIn: parent
-                        width: barZone.width - 6
-                        height: width
-                    }
-                }
-                width: barZone.width
-                height: barZone.width
-                focusPolicy: Qt.NoFocus
-                ToolTip.visible: hovered
-                ToolTip.delay: Qt.styleHints.mousePressAndHoldInterval
-                ToolTip.text: root.isClipMonitor ? i18n("Add Marker") : i18n("Add Guide")
-                ToolTip.timeout: 3000
+                iconName: "list-add"
+                toolTipText: root.isClipMonitor ? i18n("Add Marker") : i18n("Add Guide")
                 onClicked: {
                     controller.activateClipMonitor(root.isClipMonitor)