+ Component{
+ id: contextMenuComponent
+
+ MenuBar{
+ id: menuBar
+
+ width: 450
+ height: 60
+
+ opacity: 0
+ onTickersClicked: titleBar.tickersClicked();
+ onOptionsClicked: titleBar.optionsClicked();
+
+ states: [
+ State {
+ name: "visible"; when: titleBar.displayMenu === true;
+ PropertyChanges { target: menuBar; opacity:1}
+ AnchorChanges { target: contextMenuLoader; anchors { bottom: titleArea.bottom; top: parent.top } }
+ PropertyChanges { target: contextMenuLoader; anchors.topMargin: 0; anchors.bottomMargin: -5}
+ },
+ State {
+ name: "hidden"; when: titleBar.displayMenu === false;
+ PropertyChanges { target: menuBar; opacity:0}
+ AnchorChanges { target: contextMenuLoader; anchors { bottom: parent.top; top: parent.top } }
+ PropertyChanges { target: contextMenuLoader; anchors.topMargin: 0;anchors.bottomMargin: 0}
+ }
+ ]
+
+ transitions: [
+ //Sequential transition is not working otherway round
+ Transition {
+ from: "*"; to: "visible"
+ SequentialAnimation{
+ PropertyAnimation{target: menuBar; property: "opacity"; easing.type:Easing.InExpo; duration: 1000 }
+ AnchorAnimation { easing.type: Easing.InOutQuad; duration: 500 }
+ }
+ },
+ //Hidden transition is not working as expected
+ Transition {
+ from: "*"; to: "hidden"
+ SequentialAnimation{
+ PropertyAnimation{target: menuBar; property: "opacity"; easing.type:Easing.OutExpo; duration: 1000 }
+ AnchorAnimation { easing.type: Easing.InExpo; duration: 500 }
+ }
+ }
+ ]
+ }
+ }
+
+ Timer {
+ id: contextMenuTimer
+ interval: displayMenuTimeout
+ repeat: false
+ onTriggered: {
+ if (displayMenu) {
+ displayMenu = false;
+ }
+ }
+ }
+
+ Loader {
+ id: contextMenuLoader
+ //width: 450
+ anchors {top: parent.top; horizontalCenter: parent.horizontalCenter}
+ z: 10
+ sourceComponent: contextMenuComponent
+ }
+
+ Rectangle {
+ id: titleArea
+ width: parent.width/3
+ height: parent.height
+ color: "#00000000"
+