Convert TextSwitch to a platform specific component and rename it to CameraTextSwitch

[harmattan/cameraplus] / qml / CameraToolBar.qml

diff --git a/qml/CameraToolBar.qml b/qml/CameraToolBar.qml
index c0e5366..0526128 100644 (file)
--- a/qml/CameraToolBar.qml
+++ b/qml/CameraToolBar.qml
@@ -20,83 +20,71 @@
  * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301  USA
  */
 
-@IMPORT_QT_QUICK@
-import com.nokia.meego 1.1
+import QtQuick 2.0
 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
+    id: toolBar
+
+    property bool expanded: true
+    property real targetWidth: parent.width - anchors.leftMargin - anchors.rightMargin
     property bool manualBack: false
     property bool hideBack: 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
+    property CameraToolBarTools tools
+    property CameraToolBarTools __currentTools
 
-    Behavior on width {
-        PropertyAnimation { duration: 100 }
+    function push(tools) {
+        if (expanded) {
+            __currentTools = Layout.pushAndShow(tools)
+        }
+        else {
+            __currentTools = Layout.push(tools)
+        }
     }
 
-    ToolIcon {
-        property bool __isMenu: true
-        visible: !parent.hideBack
-        id: menu
-        anchors.verticalCenter: parent.verticalCenter
-        iconSource: "image://theme/icon-m-toolbar-back-white"
-        onClicked: {
-            if (tools.manualBack) {
-                tools.clicked()
-                return
-            }
+    function pop() {
+        __currentTools = Layout.pop();
+    }
 
-            if (!expanded) {
-                expanded = true
-            } else if (Layout.stack.length == 1) {
-                expanded = false
-            } else {
-                Layout.pop()
-            }
-        }
+    function depth() {
+        return Layout.depth()
+    }
 
-        anchors.left: parent.left
-        rotation: 180
+    onToolsChanged: {
+        push(tools)
     }
 
     onExpandedChanged: {
-        if (tools.expanded) {
-            tools.push(tools.items)
-        } else {
-            tools.pop()
+        if (Layout.isEmpty()) {
+            return
         }
-    }
-
-    onWidthChanged: Layout.layout()
-    onTargetWidthChanged: Layout.layout()
 
-    function push(items) {
-        return Layout.push(items)
+        if (expanded) {
+            Layout.showLast()
+        }
+        else {
+            Layout.hideLast()
+        }
     }
 
-    function pop() {
-        return Layout.pop()
-    }
+    Component.onDestruction: Layout.clear()
+
+    width: expanded ? targetWidth : menu.width
+    height: menu.height
+    color: "black"
+    border.color: "gray"
+    radius: 20
 
-    state: "collapsed"
     states: [
         State {
             name: "expanded"
-            when: tools.expanded
+            when: expanded
         },
         State {
             name: "collapsed"
-            when: !tools.expanded
+            when: !expanded
         }
     ]
 
@@ -110,7 +98,7 @@ Rectangle {
                 target: menu
                 from: 0
                 to: 180
-                duration: 500
+                duration: 250
             }
         },
         Transition {
@@ -121,8 +109,54 @@ Rectangle {
                 target: menu
                 from: 180
                 to: 360
-                duration: 500
+                duration: 250
             }
         }
     ]
+
+    Behavior on width {
+        PropertyAnimation { duration: 100 }
+    }
+
+    CameraToolIcon {
+        visible: !parent.hideBack
+        id: menu
+        anchors.verticalCenter: parent.verticalCenter
+        iconSource: cameraTheme.cameraToolBarMenuIcon
+        anchors.left: parent.left
+        anchors.top: parent.top
+        anchors.bottom: parent.bottom
+
+        onClicked: {
+            if (parent.manualBack) {
+                parent.clicked()
+            } else if (!parent.expanded) {
+                parent.expanded = true
+            } else if (Layout.stack.length == 1) {
+                expanded = false
+            } else {
+                __currentTools = Layout.pop()
+            }
+        }
+    }
+
+    Rectangle {
+        id: dock
+        property real menuWidth: parent.hideBack ? 0 : menu.width
+        property real leftMargin: (parent.width - __currentTools.childrenWidth - menuWidth) / __currentTools.childrenLen
+        color: "transparent"
+        anchors.top: parent.top
+        anchors.bottom: parent.bottom
+        anchors.right: parent.right
+        anchors.left: parent.hideBack ? parent.left : menu.right
+        anchors.leftMargin: parent.hideBack ? 0 : leftMargin
+    }
+
+    Component {
+        id: toolsContainer
+        Item {
+            property Item tools
+            property Item owner
+        }
+    }
 }