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         Component.onCompleted: {
  78                 if (tools.expanded) {
  79                         tools.push(tools.items);
  80                 }
  81         }
  82
  83         function push(items) {
  84                 return Layout.push(items);
  85         }
  86
  87         function pop() {
  88                 return Layout.pop();
  89         }
  90
  91         state: "collapsed"
  92         states: [
  93         State {
  94                 name: "expanded"
  95                 when: tools.expanded
  96         },
  97         State {
  98                 name: "collapsed"
  99                 when: !tools.expanded
 100         }
 101         ]
 102
 103         transitions: [
 104         Transition {
 105                 from: "expanded"
 106                 to: "collapsed"
 107
 108                 PropertyAnimation {
 109                         property: "rotation"
 110                         target: menu
 111                         from: 0
 112                         to: 180
 113                         duration: 500
 114                 }
 115         },
 116         Transition {
 117                 from: "collapsed"
 118                 to: "expanded"
 119                 PropertyAnimation {
 120                         property: "rotation"
 121                         target: menu
 122                         from: 180
 123                         to: 360
 124                         duration: 500
 125                 }
 126         }
 127         ]
 128 }