Show and fade toolbar when switching side. Related to #370

src/monitor/view/EffectToolBar.qml

 import QtQuick.Controls 1.3
 import QtQuick.Controls.Styles 1.3
-import QtQuick 2.0
+import QtQuick 2.7
 
 
 Rectangle {
     id: effecttoolbar
     objectName: "effecttoolbar"
     width: fullscreenButton.width
+    property bool rightSide: true
+    property bool barContainsMouse
     height: childrenRect.height
     color: Qt.rgba(activePalette.window.r, activePalette.window.g, activePalette.window.b, 0.7)
     radius: 4
     border.color : Qt.rgba(0, 0, 0, 0.3)
     border.width: 1
+    
+    Timer {
+        id: fadeTimer
+        interval: 2000; running: false;
+        onTriggered: {
+            effecttoolbar.visible = false
+            effecttoolbar.opacity = 1
+        }
+    }
+    OpacityAnimator {
+        id: animator
+        target: effecttoolbar;
+        from: 1;
+        to: 0;
+        duration: 2000
+        running: false
+    }
+
+    function fadeBar()
+    {
+        effecttoolbar.visible = true
+        animator.start()
+        fadeTimer.start()
+    }
 
     Column {
         ToolButton {
@@ -49,5 +75,23 @@ Rectangle {
             tooltip: i18n("Zoom out")
             onClicked: controller.triggerAction('monitor_zoomout')
         }
+        ToolButton {
+            objectName: "moveBar"
+            iconName: "transform-move-horizontal"
+            tooltip: i18n("Move Toolbar")
+            onClicked: {
+                if (effecttoolbar.rightSide) {
+                    effecttoolbar.anchors.right = undefined
+                    effecttoolbar.anchors.left = effecttoolbar.parent.left
+                    effecttoolbar.rightSide = false
+                    fadeBar()
+                } else {
+                    effecttoolbar.anchors.left = undefined
+                    effecttoolbar.anchors.right = effecttoolbar.parent.right
+                    effecttoolbar.rightSide = true
+                    fadeBar()
+                }
+            }
+        }
     }
 }

src/monitor/view/SceneToolBar.qml

 import QtQuick.Controls 1.3
 import QtQuick.Controls.Styles 1.3
 import QtQuick.Layouts 1.3
-import QtQuick 2.0
+import QtQuick 2.7
 
 Rectangle {
     id: scenetoolbar
@@ -9,11 +9,35 @@ Rectangle {
     width: fullscreenButton.width
     height: childrenRect.height
     property bool rightSide: true
+    property bool barContainsMouse
     SystemPalette { id: myPalette; colorGroup: SystemPalette.Active }
     color: Qt.rgba(myPalette.window.r, myPalette.window.g, myPalette.window.b, 0.7)
     radius: 4
     border.color : Qt.rgba(0, 0, 0, 0.3)
     border.width: 1
+    Timer {
+        id: fadeTimer
+        interval: 2000; running: false;
+        onTriggered: {
+            scenetoolbar.visible = false
+            scenetoolbar.opacity = 1
+        }
+    }
+    OpacityAnimator {
+        id: animator
+        target: scenetoolbar;
+        from: 1;
+        to: 0;
+        duration: 2000
+        running: false
+    }
+
+    function fadeBar()
+    {
+        scenetoolbar.visible = true
+        animator.start()
+        fadeTimer.start()
+    }
 
     Column {
         ToolButton {
@@ -77,10 +101,12 @@ Rectangle {
                     scenetoolbar.anchors.right = undefined
                     scenetoolbar.anchors.left = scenetoolbar.parent.left
                     scenetoolbar.rightSide = false
+                    fadeBar()
                 } else {
                     scenetoolbar.anchors.left = undefined
                     scenetoolbar.anchors.right = scenetoolbar.parent.right
                     scenetoolbar.rightSide = true
+                    fadeBar()
                 }
             }
         }

src/monitor/view/kdenliveclipmonitor.qml

@@ -71,6 +71,11 @@ Item {
     }
     SceneToolBar {
         id: sceneToolBar
+        barContainsMouse: sceneToolBar.rightSide ? barOverArea.mouseX >= x - 10 : barOverArea.mouseX < x + width + 10
+        onBarContainsMouseChanged: {
+            sceneToolBar.opacity = 1
+            sceneToolBar.visible = sceneToolBar.barContainsMouse
+        }
         anchors {
             right: parent.right
             top: parent.top
@@ -78,7 +83,6 @@ Item {
             rightMargin: 4
             leftMargin: 4
         }
-        visible: sceneToolBar.rightSide ? barOverArea.mouseX >= x - 10 : barOverArea.mouseX < x + width + 10
     }
 
     Item {

src/monitor/view/kdenlivemonitor.qml

@@ -68,6 +68,11 @@ Item {
     }
     SceneToolBar {
         id: sceneToolBar
+        barContainsMouse: sceneToolBar.rightSide ? barOverArea.mouseX >= x - 10 : barOverArea.mouseX < x + width + 10
+        onBarContainsMouseChanged: {
+            sceneToolBar.opacity = 1
+            sceneToolBar.visible = sceneToolBar.barContainsMouse
+        }
         anchors {
             right: parent.right
             top: parent.top
@@ -75,7 +80,6 @@ Item {
             rightMargin: 4
             leftMargin: 4
         }
-        visible: sceneToolBar.rightSide ? barOverArea.mouseX >= x - 10 : barOverArea.mouseX < x + width + 10
     }
 
     Item {

src/monitor/view/kdenlivemonitorcornerscene.qml

@@ -198,6 +198,11 @@ Item {
     }
     EffectToolBar {
         id: effectToolBar
+        barContainsMouse: effectToolBar.rightSide ? global.mouseX >= x - 10 : global.mouseX < x + width + 10
+        onBarContainsMouseChanged: {
+            effectToolBar.opacity = 1
+            effectToolBar.visible = effectToolBar.barContainsMouse
+        }
         anchors {
             right: parent.right
             top: parent.top
@@ -205,7 +210,6 @@ Item {
             rightMargin: 4
             leftMargin: 4
         }
-        visible: effectToolBar.rightSide ? global.mouseX >= x - 10 : global.mouseX < x + width + 10
     }
     MonitorRuler {
         id: clipMonitorRuler

src/monitor/view/kdenlivemonitoreffectscene.qml

@@ -547,6 +547,11 @@ Item {
     }
     EffectToolBar {
         id: effectToolBar
+        barContainsMouse: effectToolBar.rightSide ? global.mouseX >= x - 10 : global.mouseX < x + width + 10
+        onBarContainsMouseChanged: {
+            effectToolBar.opacity = 1
+            effectToolBar.visible = effectToolBar.barContainsMouse
+        }
         anchors {
             right: parent.right
             top: parent.top
@@ -554,7 +559,6 @@ Item {
             rightMargin: 4
             leftMargin: 4
         }
-        visible: effectToolBar.rightSide ? global.mouseX >= x - 10 : global.mouseX < x + width + 10
     }
     MonitorRuler {
         id: clipMonitorRuler

src/monitor/view/kdenlivemonitorrotoscene.qml

@@ -359,6 +359,11 @@ Item {
 }
     EffectToolBar {
         id: effectToolBar
+        barContainsMouse: effectToolBar.rightSide ? global.mouseX >= x - 10 : global.mouseX < x + width + 10
+        onBarContainsMouseChanged: {
+            effectToolBar.opacity = 1
+            effectToolBar.visible = effectToolBar.barContainsMouse
+        }
         anchors {
             right: parent.right
             top: parent.top
@@ -366,7 +371,6 @@ Item {
             rightMargin: 4
             leftMargin: 4
         }
-        visible: effectToolBar.rightSide ? global.mouseX >= x - 10 : global.mouseX < x + width + 10
     }
     MonitorRuler {
         id: clipMonitorRuler