import "CameraToolBar.js" as Layout
Rectangle {
- id: tools
- property bool expanded: false
- property list<Item> items
- property int targetWidth: parent.width - (2 * anchors.leftMargin)
- property alias menuWidth: menu.width
- property bool manualBack: false
- signal clicked
+ id: tools
+ property bool expanded: false
+ property list<Item> items
+ property int targetWidth: parent.width - (2 * anchors.leftMargin)
+ property alias menuWidth: menu.width
+ property bool manualBack: false
+ signal clicked
- height: menu.height
- width: expanded ? targetWidth : menu.width
- color: expanded ? "black" : width == menu.width ? "transparent" : "black"
- border.color: expanded ? "gray" : width == menu.width ? "transparent" : "gray"
- radius: 20
+ height: menu.height
+ width: expanded ? targetWidth : menu.width
+ color: expanded ? "black" : width == menu.width ? "transparent" : "black"
+ border.color: expanded ? "gray" : width == menu.width ? "transparent" : "gray"
+ radius: 20
- Behavior on width {
- PropertyAnimation { duration: 100; }
- }
-
- ToolIcon {
- property bool __isMenu: true
- id: menu
- anchors.verticalCenter: parent.verticalCenter
- iconSource: "image://theme/icon-m-toolbar-back-white"
- onClicked: {
- if (tools.manualBack) {
- tools.clicked();
- return;
- }
+ Behavior on width {
+ PropertyAnimation { duration: 100 }
+ }
- if (!expanded) {
- expanded = true;
- }
- else if (Layout.stack.length == 1) {
- expanded = false;
- }
- else {
- Layout.pop();
- }
- }
+ ToolIcon {
+ property bool __isMenu: true
+ id: menu
+ anchors.verticalCenter: parent.verticalCenter
+ iconSource: "image://theme/icon-m-toolbar-back-white"
+ onClicked: {
+ if (tools.manualBack) {
+ tools.clicked()
+ return
+ }
- anchors.left: parent.left
- rotation: 180
+ if (!expanded) {
+ expanded = true
+ } else if (Layout.stack.length == 1) {
+ expanded = false
+ } else {
+ Layout.pop()
+ }
}
- onExpandedChanged: {
- if (tools.expanded) {
- tools.push(tools.items);
- }
- else {
- tools.pop();
- }
+ anchors.left: parent.left
+ rotation: 180
+ }
+
+ onExpandedChanged: {
+ if (tools.expanded) {
+ tools.push(tools.items)
+ } else {
+ tools.pop()
}
+ }
- onWidthChanged: Layout.layout();
- onTargetWidthChanged: Layout.layout();
+ onWidthChanged: Layout.layout()
+ onTargetWidthChanged: Layout.layout()
- function push(items) {
- return Layout.push(items);
- }
+ function push(items) {
+ return Layout.push(items)
+ }
- function pop() {
- return Layout.pop();
- }
+ function pop() {
+ return Layout.pop()
+ }
- state: "collapsed"
- states: [
+ state: "collapsed"
+ states: [
State {
- name: "expanded"
- when: tools.expanded
+ name: "expanded"
+ when: tools.expanded
},
State {
- name: "collapsed"
- when: !tools.expanded
+ name: "collapsed"
+ when: !tools.expanded
}
- ]
+ ]
- transitions: [
+ transitions: [
Transition {
- from: "expanded"
- to: "collapsed"
+ from: "expanded"
+ to: "collapsed"
- PropertyAnimation {
- property: "rotation"
- target: menu
- from: 0
- to: 180
- duration: 500
- }
+ PropertyAnimation {
+ property: "rotation"
+ target: menu
+ from: 0
+ to: 180
+ duration: 500
+ }
},
Transition {
- from: "collapsed"
- to: "expanded"
- PropertyAnimation {
- property: "rotation"
- target: menu
- from: 180
- to: 360
- duration: 500
- }
+ from: "collapsed"
+ to: "expanded"
+ PropertyAnimation {
+ property: "rotation"
+ target: menu
+ from: 180
+ to: 360
+ duration: 500
+ }
}
- ]
+ ]
}