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

parent 5cb9ce83
Pipeline #9190 passed with stage
in 31 minutes and 15 seconds
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()
}
}
}
}
}
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()
}
}
}
......
......@@ -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 {
......
......@@ -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 {
......
......@@ -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
......
......@@ -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
......
......@@ -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
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment