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         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                         }
  60                         else if (Layout.stack.length == 1) {
  61                                 expanded = false;
  62                         }
  63                         else {
  64                                 Layout.pop();
  65                         }
  66                 }
  67
  68                 anchors.left: parent.left
  69                 rotation: 180
  70         }
  71
  72         onExpandedChanged: {
  73                 if (tools.expanded) {
  74                         tools.push(tools.items);
  75                 }
  76                 else {
  77                         tools.pop();
  78                 }
  79         }
  80
  81         onWidthChanged: Layout.layout();
  82         onTargetWidthChanged: Layout.layout();
  83
  84         function push(items) {
  85                 return Layout.push(items);
  86         }
  87
  88         function pop() {
  89                 return Layout.pop();
  90         }
  91
  92         state: "collapsed"
  93         states: [
  94         State {
  95                 name: "expanded"
  96                 when: tools.expanded
  97         },
  98         State {
  99                 name: "collapsed"
 100                 when: !tools.expanded
 101         }
 102         ]
 103
 104         transitions: [
 105         Transition {
 106                 from: "expanded"
 107                 to: "collapsed"
 108
 109                 PropertyAnimation {
 110                         property: "rotation"
 111                         target: menu
 112                         from: 0
 113                         to: 180
 114                         duration: 500
 115                 }
 116         },
 117         Transition {
 118                 from: "collapsed"
 119                 to: "expanded"
 120                 PropertyAnimation {
 121                         property: "rotation"
 122                         target: menu
 123                         from: 180
 124                         to: 360
 125                         duration: 500
 126                 }
 127         }
 128         ]
 129 }