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