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