vcs.maemo.org Git - ubi/blob - qml/ubi/components/ButtonResizable.qml

   1 import QtQuick 1.0 // to target S60 5th Edition or Maemo 5
   2 import "../UIConstants.js" as Const
   3
   4 Item {
   5     id: root
   6     property alias text: textbox.text
   7     property bool disabled: false
   8     property int fontSize: 30
   9     property string iconSource
  10
  11     state: mouseArea.pressed && !root.disabled ? "pressed" : "unpressed"
  12
  13     signal clicked(string label)
  14
  15     Rectangle {
  16         id: shadow
  17         width: box.width
  18         height: box.height
  19         color: Const.SHADOW_COLOR;
  20         radius: 10
  21     }
  22
  23     Rectangle {
  24         id: box
  25         color: root.disabled ? Const.COOL_GREY_COLOR : "black"
  26         height: root.height
  27         width: root.width
  28         radius: 10
  29     }
  30
  31     Rectangle {
  32         width: box.width
  33         height: box.height
  34         x: box.x
  35         y: box.y
  36         color: Const.WARM_GREY_COLOR
  37         radius: 10
  38         visible: root.state == "pressed"
  39     }
  40
  41     Image {
  42         id: icon
  43         width: 40
  44         height: 40
  45         anchors.centerIn: box
  46         source: root.iconSource == "" ? "" : "../" + root.iconSource
  47         sourceSize.width: width
  48         sourceSize.height: height
  49     }
  50
  51     Text {
  52         id: textbox
  53         font.pixelSize: root.fontSize
  54         elide: Text.ElideRight
  55         color: root.disabled ? "gray" : "white"
  56         anchors.left: box.left; anchors.right: box.right
  57         anchors.margins: Const.DEFAULT_MARGIN
  58         anchors.verticalCenter: box.verticalCenter
  59     }
  60
  61     MouseArea {
  62         id: mouseArea
  63         width: box.width
  64         height: box.height
  65         onClicked: root.clicked(root.label)
  66         enabled: !root.disabled
  67     }
  68
  69     states: [
  70         State {
  71             name: "unpressed"
  72             PropertyChanges {target: shadow; x: Const.SHADOW_OFFSET}
  73             PropertyChanges {target: shadow; y: Const.SHADOW_OFFSET}
  74             PropertyChanges {target: box; x: 0}
  75             PropertyChanges {target: box; y: 0}
  76         },
  77         State {
  78             name: "pressed"
  79             PropertyChanges {target: shadow; x: Const.SHADOW_OFFSET}
  80             PropertyChanges {target: shadow; y: Const.SHADOW_OFFSET}
  81             PropertyChanges {target: box; x: Const.SHADOW_OFFSET}
  82             PropertyChanges {target: box; y: Const.SHADOW_OFFSET}
  83         }
  84     ]
  85 }
  86
  87
  88