vcs.maemo.org Git - ubi/blob - qml/ubi/components/Button.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 string label
   7     property bool disabled: false
   8     property int fontSize: 30
   9     property int maxSize: 27
  10     property string iconSource
  11
  12     state: mouseArea.pressed && !root.disabled ? "pressed" : "unpressed"
  13
  14     width: box.width
  15     height: box.height
  16
  17     signal buttonClicked(string label)
  18
  19     Rectangle {
  20         id: shadow
  21         width: box.width
  22         height: box.height
  23         color: Const.SHADOW_COLOR;
  24         radius: 10
  25     }
  26
  27     Rectangle {
  28         id: box
  29         color: root.disabled ? Const.COOL_GREY_COLOR : "black"
  30         height: root.iconSource=="" ? textbox.height+20 : icon.height+20
  31         width: root.iconSource=="" ? textbox.width+30 : icon.width+30
  32         radius: 10
  33     }
  34
  35     Rectangle {
  36         width: box.width
  37         height: box.height
  38         x: box.x
  39         y: box.y
  40         color: Const.WARM_GREY_COLOR
  41         radius: 10
  42         visible: root.state == "pressed"
  43     }
  44
  45     Image {
  46         id: icon
  47         //width: 30
  48         //height: 30
  49         anchors.centerIn: box
  50         source: root.iconSource == "" ? "" : "../" + root.iconSource
  51         sourceSize.width: width
  52         sourceSize.height: height
  53     }
  54
  55     onLabelChanged: {
  56         if(root.label.length>root.maxSize) {
  57             textbox.text = root.label.substring(0,root.maxSize-3)+"...";
  58         } else {
  59             textbox.text = root.label;
  60         }
  61     }
  62
  63     Text {
  64         id: textbox
  65         font.pixelSize: root.fontSize
  66         color: root.disabled ? "gray" : "white"
  67         anchors.centerIn: box
  68         visible: root.iconSource == ""
  69     }
  70
  71     MouseArea {
  72         id: mouseArea
  73         width: box.width
  74         height: box.height
  75         onClicked: root.buttonClicked(root.label)
  76         enabled: !root.disabled
  77     }
  78
  79     states: [
  80         State {
  81             name: "unpressed"
  82             PropertyChanges {target: shadow; x: Const.SHADOW_OFFSET}
  83             PropertyChanges {target: shadow; y: Const.SHADOW_OFFSET}
  84             PropertyChanges {target: box; x: 0}
  85             PropertyChanges {target: box; y: 0}
  86         },
  87         State {
  88             name: "pressed"
  89             PropertyChanges {target: shadow; x: Const.SHADOW_OFFSET}
  90             PropertyChanges {target: shadow; y: Const.SHADOW_OFFSET}
  91             PropertyChanges {target: box; x: Const.SHADOW_OFFSET}
  92             PropertyChanges {target: box; y: Const.SHADOW_OFFSET}
  93         }
  94     ]
  95 }
  96
  97
  98