New GUI
[ubi] / qml / ubi / SystemBar.qml
index 1124e06..23258f1 100644 (file)
@@ -1,30 +1,59 @@
-import QtQuick 1.0
+import QtQuick 1.0 // to target S60 5th Edition or Maemo 5
 import "components"
 import "UIConstants.js" as Const
 
-/* copyright (C) 2010-2012 Stuart Howarth */
-
 Item {
     id: root
 
-    height: 60
-    anchors { left: parent.left; right: parent.right; top: parent.top }
+    height: Const.SYSTEM_BAR_HEIGHT
+    anchors { left: parent.left; right: parent.right; bottom: parent.bottom }
+    state: "active"
 
     signal clicked()
+    signal clickedOnMask()
 
-    Rectangle {
-        width: parent.width
-        height: Const.SYSTEM_BAR_HEIGHT
-        color: "black"
+    /*Shadow {
+        id: shadow
+        y:0
+        visible: false
+    }*/
+
+    /*Rectangle {
+        id: bor
+        //color: Const.WARM_GREY_COLOR
+        color: Const.TRANSPARENT
+        height: 1; width: root.width
+        anchors.top: shadow.bottom
+    }*/
+
+    /*Rectangle {
+        id: box
+        width: root.width
+        height: root.height
+        anchors.top: shadow.bottom
+        color: Const.TRANSPARENT
+        //color: Const.COOL_GREY_COLOR
+    }*/
+
+    Row {
+        id: box
+        y: 3
+        Repeater {
+            model: root.width
+            Image {
+                id: img
+                source: "images/bg.png"
+            }
+        }
     }
 
     Shadow {
-        y: Const.SYSTEM_BAR_HEIGHT
+        anchors.bottom: box.top
     }
 
     Row {
         y: 12
-        anchors.horizontalCenter: parent.horizontalCenter
+        anchors {horizontalCenter: parent.horizontalCenter; verticalCenter: parent.verticalCenter}
         spacing: Const.DEFAULT_MARGIN
 
         Text {
@@ -34,19 +63,19 @@ Item {
             text: pageStack.currentPage.title
         }
 
-        Image {
+        /*Image {
             source: mouse.pressed? "images/menu-arrow-grey.png" : "images/menu-arrow.png"
             anchors.verticalCenter: title.verticalCenter
             visible: !taskBar.isEmpty && !progressIcon.visible
             width: 18
             height: 14
-        }
+        }*/
 
         Image {
             id: progressIcon
             source: "images/progress-small.png"
             anchors.verticalCenter: title.verticalCenter
-            visible: taskBar.isActiveDownloads
+            visible: downloadDialog.isActiveDownloads
             width: 40
             height: 40
 
@@ -92,23 +121,49 @@ Item {
         opacity: 0.5
     }*/
 
-    ToolIcon {
+    /*ToolIcon {
         id: minimizeButton
 
         width: 80
         anchors { verticalCenter: parent.verticalCenter; left: parent.left }
         iconSource: "images/minimize.png"
         onClicked: Utils.minimizeWindow()
+    }*/
+
+    Button {
+        id: minimizeButton
+        iconSource: pageStack.index > 0 ?  "images/back.png" : "images/close.png"
+        anchors { verticalCenter: parent.verticalCenter; left: parent.left; margins: Const.DEFAULT_MARGIN }
+        onButtonClicked: pageStack.index > 0 ? pageStack.pop() : Qt.quit()
     }
 
-    ToolIcon {
-        id: backButton
+    /*Button {
+        id: switchButton
+        label: "s"
+        anchors { verticalCenter: parent.verticalCenter; left: minimizeButton.right; margins: Const.DEFAULT_MARGIN }
+        onButtonClicked: {
+            tip.show("ala ma kota, a kot ma Ale bardzo czesto i bardzo dobrze, oooo, tralalal!");
+        }
+    }*/
 
-        width: 80
-        anchors { verticalCenter: parent.verticalCenter; right: parent.right }
-        iconSource: pageStack.index > 0 ?  "images/back.png" : "images/close.png"
-        onClicked: pageStack.index > 0 ? pageStack.pop() : Qt.quit()
-        onPressAndHold: if (pageStack.index > 0) pageStack.clear()
+    Button {
+        id: downloadButton
+        iconSource: "images/upload.png"
+        anchors { verticalCenter: parent.verticalCenter; right: menuButton.left; margins: Const.DEFAULT_MARGIN }
+        onButtonClicked: downloadDialog.open()
+        opacity: downloadDialog.isActiveDownloads ? 1 : 0
+
+        transitions: Transition {
+            NumberAnimation { properties: "opacity"; duration: 600; easing.type: Easing.InOutQuad }
+        }
+    }
+
+    Button {
+        id: menuButton
+        iconSource: "images/options.png"
+        anchors { verticalCenter: parent.verticalCenter; right: parent.right; margins: Const.DEFAULT_MARGIN }
+        onButtonClicked: pageStack.currentPage.taskMenu.open()
+        visible: pageStack.currentPage.taskMenu!=undefined
     }
 
     MouseArea {
@@ -116,6 +171,32 @@ Item {
         z: -1
     }
 
+    Rectangle {
+        id: mask
+        anchors.fill: parent
+        color: "black"
+
+        MouseArea {
+            anchors.fill: parent
+            onClicked: root.clickedOnMask()
+        }
+    }
+
+    states: [
+        State {
+            name: "active"
+            PropertyChanges { target: mask; opacity: 0 }
+        },
+        State {
+            name: "inactive"
+            PropertyChanges { target: mask; opacity: 0.6 }
+        }
+    ]
+
+    transitions: Transition {
+        NumberAnimation { properties: "opacity"; easing.type: Easing.InOutQuad }
+    }
+
 }