'Sequential' statechanges

rubikon

Hello.

I have implemented a kind of touchscreen menubar. The menu shall be a bottom aligned bar with buttons on it which represents the top level menu item. By taping the menu entry, another submenubar with buttons shall appear (animated with transition and a certain duration) which represents the submenu items.

If the submenubar is visible after tapping for example the fist menu button, the submenubar shall show the following behaviour if the second button is pressed: The submenubar shall disappear, then the texts of the buttons shall change and then the submenubar shall appear again.

So what I need is some kind of 'sequential statechanges'. How do I have to implement this in the else cases of the onClicked events (Lines 38, 58, 78)?

In this approach the first thing I do is set the state to initial state. Now the application should 'wait' till the animation is finished and then set the texts and start the animation for the transition to the 'active' state.

@
// main.qml
import QtQuick 2.0
import QtQuick.Controls 1.0
import QtQuick.Layouts 1.0
import QtQuick.Window 2.0

ApplicationWindow {
width: 360
height: 360

SubMenubar {
id: subMenuBar;
y: mainbar.y
}

Rectangle {
id: mainbar;
height: 50
width: parent.width
color: "#bb5555"
anchors.bottom: parent.bottom

RowLayout {
anchors.margins: 8
anchors.fill: parent

Button {
text: "File"
anchors.centerIn: parent.Center
onClicked: {
if(subMenuBar.state == "") {
subMenuBar.text1 = "Open..."
subMenuBar.text2 = "Close"
subMenuBar.text3 = ""
subMenuBar.state = "active"
}
else {
subMenuBar.state = ""
subMenuBar.text1 = "Open..."
subMenuBar.text2 = "Close"
subMenuBar.text3 = ""
subMenuBar.state = "active"
}
}
}

Button {
text: "Edit"
anchors.centerIn: parent.Center
onClicked: {
if(subMenuBar.state == "") {
subMenuBar.text1 = "Cut"
subMenuBar.text2 = "Copy"
subMenuBar.text3 = "Paste"
subMenuBar.state = "active"
}
else {
subMenuBar.state = ""
subMenuBar.text1 = "Cut"
subMenuBar.text2 = "Copy"
subMenuBar.text3 = "Paste"
subMenuBar.state = "active"
}
}
}

Button {
text: "?"
anchors.centerIn: parent.Center
onClicked: {
if(subMenuBar.state == "") {
subMenuBar.text1 = "Help"
subMenuBar.text2 = "About"
subMenuBar.text3 = ""
subMenuBar.state = "active"
}
else {
subMenuBar.state = ""
subMenuBar.text1 = "Help"
subMenuBar.text2 = "About"
subMenuBar.text3 = ""
subMenuBar.state = "active"
}
}
}

Item { Layout.fillWidth: true }
}
}
}

// SubMenuBar.qml
import QtQuick 2.0
import QtQuick.Controls 1.0
import QtQuick.Layouts 1.0

Rectangle {
id: self
height: 50
width: parent.width
color: "#55bb55"

property alias text1: first.text;
property alias text2: second.text;
property alias text3: third.text;

RowLayout {
anchors.margins: 8
anchors.fill: parent

Button {
id: first
anchors.centerIn: parent.Center
visible: text != ""
}

Button {
id: second
anchors.centerIn: parent.Center
visible: text != ""
}

Button {
id: third
anchors.centerIn: parent.Center
visible: text != ""
}

Item { Layout.fillWidth: true }
}

states: [
State {
name: "active"
PropertyChanges {
target: self
explicit: true
y: y - height
}
}
]

transitions: [
Transition {
NumberAnimation { properties: "y"; easing.type: Easing.OutCubic; duration: 200 }
}
]
}
@

Thanx in advance.

Lucijan

I know this isn't exactly what you're looking for, but why not just make three submenubars and then just hide/show them as needed? You're going to need to give each button of the submenubar a separate implementation for its action (opening, closing etc.) anyway so I'm not sure why you'd do it this way.

rubikon

What do you mean by 'You’re going to need to give each button of the submenubar a separate implementation for its action (opening, closing etc.'

If I do it this way:

@ Button {
text: "File"
anchors.centerIn: parent.Center
onClicked: {
if(subMenuBarEdit.state == "active")
subMenuBarEdit.state = ""

 if(subMenuBarHelp.state == "active")
  subMenuBarHelp.state = "" 
 
 // should wait here...
 
 subMenuBarFile.state = "active"
 }
}

}@

the problem remains the same: The second statechange should wait till the first animation/transition is finished...

Lucijan

Perhaps you could use a SequentialAnimation and PropertyAction inside it after the pop-up animation. Then for PropertyAction you can enable/disable the Submenubars as needed. This way you could prevent the user from clicking any other buttons until the animation finishes. So just set enable to false with PropertyAction, then do a NumberAnimation (or whatever you're using), then use PropertyAction again to enable the Submenubar again.