Switch toolbar animation to opacity
[harmattan/cameraplus] / qml / CameraToolBar.qml
1 // -*- qml -*-
2
3 /*!
4  * This file is part of CameraPlus.
5  *
6  * Copyright (C) 2012-2013 Mohammed Sameer <msameer@foolab.org>
7  *
8  * This library is free software; you can redistribute it and/or
9  * modify it under the terms of the GNU Lesser General Public
10  * License as published by the Free Software Foundation; either
11  * version 2.1 of the License, or (at your option) any later version.
12  *
13  * This library is distributed in the hope that it will be useful,
14  * but WITHOUT ANY WARRANTY; without even the implied warranty of
15  * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
16  * Lesser General Public License for more details.
17  *
18  * You should have received a copy of the GNU Lesser General Public
19  * License along with this library; if not, write to the Free Software
20  * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301  USA
21  */
22
23 import QtQuick 2.0
24 import "CameraToolBar.js" as Layout
25
26 Rectangle {
27     id: toolBar
28
29     property bool expanded: true
30     property real targetWidth: parent.width - anchors.leftMargin - anchors.rightMargin
31     property bool manualBack: false
32     property bool hideBack: false
33     signal clicked
34
35     property CameraToolBarTools tools
36     property CameraToolBarTools __currentTools
37
38     function push(tools) {
39         if (expanded) {
40             __currentTools = Layout.pushAndShow(tools)
41         }
42         else {
43             __currentTools = Layout.push(tools)
44         }
45     }
46
47     function pop() {
48         __currentTools = Layout.pop();
49     }
50
51     function depth() {
52         return Layout.depth()
53     }
54
55     onToolsChanged: {
56         push(tools)
57     }
58
59     onExpandedChanged: {
60         if (Layout.isEmpty()) {
61             return
62         }
63
64         if (expanded) {
65             Layout.showLast()
66         }
67         else {
68             Layout.hideLast()
69         }
70     }
71
72     Component.onDestruction: Layout.clear()
73
74     width: expanded ? targetWidth : menu.width
75     height: menu.height
76     color: "black"
77     border.color: "gray"
78     radius: 20
79
80     states: [
81         State {
82             name: "expanded"
83             when: expanded
84         },
85         State {
86             name: "collapsed"
87             when: !expanded
88         }
89     ]
90
91     transitions: [
92         Transition {
93             from: "expanded"
94             to: "collapsed"
95
96             PropertyAnimation {
97                 property: "rotation"
98                 target: menu
99                 from: 0
100                 to: 180
101                 duration: 250
102             }
103         },
104         Transition {
105             from: "collapsed"
106             to: "expanded"
107             PropertyAnimation {
108                 property: "rotation"
109                 target: menu
110                 from: 180
111                 to: 360
112                 duration: 250
113             }
114         }
115     ]
116
117     Behavior on width {
118         PropertyAnimation { duration: 100 }
119     }
120
121     CameraToolIcon {
122         visible: !parent.hideBack
123         id: menu
124         anchors.verticalCenter: parent.verticalCenter
125         iconSource: cameraTheme.cameraToolBarMenuIcon
126         anchors.left: parent.left
127         anchors.top: parent.top
128         anchors.bottom: parent.bottom
129
130         onClicked: {
131             if (parent.manualBack) {
132                 parent.clicked()
133             } else if (!parent.expanded) {
134                 parent.expanded = true
135             } else if (Layout.stack.length == 1) {
136                 expanded = false
137             } else {
138                 __currentTools = Layout.pop()
139             }
140         }
141     }
142
143     Rectangle {
144         id: dock
145         property real menuWidth: parent.hideBack ? 0 : menu.width
146         property real leftMargin: (parent.width - __currentTools.childrenWidth - menuWidth) / __currentTools.childrenLen
147         color: "transparent"
148         anchors.top: parent.top
149         anchors.bottom: parent.bottom
150         anchors.right: parent.right
151         anchors.left: parent.hideBack ? parent.left : menu.right
152         anchors.leftMargin: parent.hideBack ? 0 : leftMargin
153     }
154
155     Component {
156         id: toolsContainer
157         Item {
158             property Item tools
159             property Item owner
160         }
161     }
162 }