cgit.sxemacs.org Git - harmattan/cameraplus/blob - 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 1.1
  24 import com.nokia.meego 1.1
  25 import "CameraToolBar.js" as Layout
  26
  27 Rectangle {
  28     id: tools
  29     property bool expanded: false
  30     property list<Item> items
  31     property int targetWidth: parent.width - (2 * anchors.leftMargin)
  32     property alias menuWidth: menu.width
  33     property bool manualBack: false
  34     signal clicked
  35
  36     height: menu.height
  37     width: expanded ? targetWidth : menu.width
  38     color: expanded ? "black" : width == menu.width ? "transparent" : "black"
  39     border.color: expanded ? "gray" : width == menu.width ? "transparent" : "gray"
  40     radius: 20
  41
  42     Behavior on width {
  43         PropertyAnimation { duration: 100 }
  44     }
  45
  46     ToolIcon {
  47         property bool __isMenu: true
  48         id: menu
  49         anchors.verticalCenter: parent.verticalCenter
  50         iconSource: "image://theme/icon-m-toolbar-back-white"
  51         onClicked: {
  52             if (tools.manualBack) {
  53                 tools.clicked()
  54                 return
  55             }
  56
  57             if (!expanded) {
  58                 expanded = true
  59             } else if (Layout.stack.length == 1) {
  60                 expanded = false
  61             } else {
  62                 Layout.pop()
  63             }
  64         }
  65
  66         anchors.left: parent.left
  67         rotation: 180
  68     }
  69
  70     onExpandedChanged: {
  71         if (tools.expanded) {
  72             tools.push(tools.items)
  73         } else {
  74             tools.pop()
  75         }
  76     }
  77
  78     onWidthChanged: Layout.layout()
  79     onTargetWidthChanged: Layout.layout()
  80
  81     function push(items) {
  82         return Layout.push(items)
  83     }
  84
  85     function pop() {
  86         return Layout.pop()
  87     }
  88
  89     state: "collapsed"
  90     states: [
  91         State {
  92             name: "expanded"
  93             when: tools.expanded
  94         },
  95         State {
  96             name: "collapsed"
  97             when: !tools.expanded
  98         }
  99     ]
 100
 101     transitions: [
 102         Transition {
 103             from: "expanded"
 104             to: "collapsed"
 105
 106             PropertyAnimation {
 107                 property: "rotation"
 108                 target: menu
 109                 from: 0
 110                 to: 180
 111                 duration: 500
 112             }
 113         },
 114         Transition {
 115             from: "collapsed"
 116             to: "expanded"
 117             PropertyAnimation {
 118                 property: "rotation"
 119                 target: menu
 120                 from: 180
 121                 to: 360
 122                 duration: 500
 123             }
 124         }
 125     ]
 126 }