git.maemo.org Git - ubi/blob - qml/ubi/SystemBar.qml

   1 import QtQuick 1.0 // to target S60 5th Edition or Maemo 5
   2 import "components"
   3 import "UIConstants.js" as Const
   4
   5 Item {
   6     id: root
   7
   8     height: Const.SYSTEM_BAR_HEIGHT
   9     anchors { left: parent.left; right: parent.right; bottom: parent.bottom }
  10     state: "active"
  11
  12     signal clicked()
  13     signal clickedOnMask()
  14
  15     /*Shadow {
  16         id: shadow
  17         y:0
  18         visible: false
  19     }*/
  20
  21     /*Rectangle {
  22         id: bor
  23         color: Const.WARM_GREY_COLOR
  24         //color: Const.TRANSPARENT
  25         height: 2; width: root.width
  26         anchors.top: box.top
  27     }*/
  28
  29     Rectangle {
  30         id: box
  31         width: root.width
  32         height: root.height
  33         y:3
  34         color: Const.TRANSPARENT
  35         //color: Const.COOL_GREY_COLOR
  36         gradient: Gradient {
  37             GradientStop {position: 0.0; color: "#333333"}
  38             GradientStop {position: 1.0; color: "#151515"}
  39         }
  40     }
  41
  42     /*Row {
  43         id: box
  44         y: 3
  45         Repeater {
  46             model: root.width
  47             Image {
  48                 id: img
  49                 source: "images/bg.png"
  50             }
  51         }
  52     }*/
  53
  54     Shadow {
  55         anchors.bottom: box.top
  56     }
  57
  58     Row {
  59         y: 12
  60         anchors {horizontalCenter: parent.horizontalCenter; verticalCenter: parent.verticalCenter}
  61         spacing: Const.DEFAULT_MARGIN
  62
  63         Text {
  64             id: title
  65             font.pixelSize: 30
  66             color: "white"
  67             text: pageStack.currentPage.title
  68         }
  69
  70         /*Image {
  71             source: mouse.pressed? "images/menu-arrow-grey.png" : "images/menu-arrow.png"
  72             anchors.verticalCenter: title.verticalCenter
  73             visible: !taskBar.isEmpty && !progressIcon.visible
  74             width: 18
  75             height: 14
  76         }*/
  77
  78         Image {
  79             id: progressIcon
  80             source: "images/progress-small.png"
  81             anchors.verticalCenter: title.verticalCenter
  82             visible: downloadDialog.isActiveDownloads
  83             width: 40
  84             height: 40
  85
  86             NumberAnimation {
  87                 id: animationIcon
  88                 target: progressIcon
  89                 properties: "rotation"
  90                 from: 0
  91                 to: 360
  92                 duration: 500
  93                 loops: Animation.Infinite
  94
  95                 Component.onCompleted: animationIcon.start();
  96             }
  97         }
  98     }
  99
 100     MouseArea {
 101         id: mouse
 102         height: root.height
 103         width: root.height - 2*80
 104         anchors.horizontalCenter: root.horizontalCenter
 105         onClicked: root.clicked()
 106     }
 107
 108     /*Rectangle {
 109         id: leftSeparator
 110
 111         width: 1
 112         height: 40
 113         anchors { left: parent.left; leftMargin: 80; verticalCenter: parent.verticalCenter }
 114         color: "white"
 115         opacity: 0.5
 116     }
 117
 118     Rectangle {
 119         id: rightSeparator
 120
 121         width: 1
 122         height: 40
 123         anchors { right: parent.right; rightMargin: 80; verticalCenter: parent.verticalCenter }
 124         color: "white"
 125         opacity: 0.5
 126     }*/
 127
 128     /*ToolIcon {
 129         id: minimizeButton
 130
 131         width: 80
 132         anchors { verticalCenter: parent.verticalCenter; left: parent.left }
 133         iconSource: "images/minimize.png"
 134         onClicked: Utils.minimizeWindow()
 135     }*/
 136
 137     Button {
 138         id: minimizeButton
 139         iconSource: pageStack.index > 0 ?  "images/back.png" : "images/close.png"
 140         anchors { verticalCenter: parent.verticalCenter; left: parent.left; margins: Const.DEFAULT_MARGIN }
 141         onButtonClicked: pageStack.index > 0 ? pageStack.pop() : Qt.quit()
 142     }
 143
 144     /*Button {
 145         id: switchButton
 146         label: "s"
 147         anchors { verticalCenter: parent.verticalCenter; left: minimizeButton.right; margins: Const.DEFAULT_MARGIN }
 148         onButtonClicked: {
 149             tip.show("ala ma kota, a kot ma Ale bardzo czesto i bardzo dobrze, oooo, tralalal!");
 150         }
 151     }*/
 152
 153     Button {
 154         id: downloadButton
 155         iconSource: "images/upload.png"
 156         anchors { verticalCenter: parent.verticalCenter; right: menuButton.left; margins: Const.DEFAULT_MARGIN }
 157         onButtonClicked: downloadDialog.open()
 158         opacity: downloadDialog.isActiveDownloads ? 1 : 0
 159
 160         transitions: Transition {
 161             NumberAnimation { properties: "opacity"; duration: 600; easing.type: Easing.InOutQuad }
 162         }
 163     }
 164
 165     Button {
 166         id: menuButton
 167         iconSource: "images/options.png"
 168         anchors { verticalCenter: parent.verticalCenter; right: parent.right; margins: Const.DEFAULT_MARGIN }
 169         onButtonClicked: pageStack.currentPage.taskMenu.open()
 170         visible: pageStack.currentPage.taskMenu!=undefined
 171     }
 172
 173     MouseArea {
 174         anchors.fill: parent
 175         z: -1
 176     }
 177
 178     Rectangle {
 179         id: mask
 180         anchors.fill: parent
 181         color: "black"
 182
 183         MouseArea {
 184             anchors.fill: parent
 185             onClicked: root.clickedOnMask()
 186         }
 187     }
 188
 189     states: [
 190         State {
 191             name: "active"
 192             PropertyChanges { target: mask; opacity: 0 }
 193         },
 194         State {
 195             name: "inactive"
 196             PropertyChanges { target: mask; opacity: 0.6 }
 197         }
 198     ]
 199
 200     transitions: Transition {
 201         NumberAnimation { properties: "opacity"; easing.type: Easing.InOutQuad }
 202     }
 203
 204 }
 205
 206
 207
 208