vcs.maemo.org Git - ubi/blob - qml/ubi/components/ButtonGlass.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         visible: false
  26     }
  27
  28     Rectangle {
  29         id: box
  30         color: root.disabled ? Const.COOL_GREY_COLOR : "black"
  31         height: root.iconSource=="" ? textbox.height+20 : icon.height+20
  32         //width: textbox.width<100 ? 120 : textbox.width+20
  33         width: root.iconSource=="" ? textbox.width+30 : icon.width+30
  34         radius: 10
  35         visible: false
  36     }
  37
  38     Image {
  39         source: root.state != "pressed" ?
  40                     "../images/pushbutton_normal.png" :
  41                     "../images/pushbutton_disabled.png"
  42     }
  43
  44     Rectangle {
  45         width: box.width
  46         height: box.height
  47         x: box.x
  48         y: box.y
  49         color: Const.WARM_GREY_COLOR
  50         radius: 10
  51         //visible: root.state == "pressed"
  52         visible: false
  53         //border.color: "black"
  54         //border.width: Const.SHADOW_OFFSET
  55     }
  56
  57     Image {
  58         id: icon
  59         //width: 30
  60         //height: 30
  61         anchors.centerIn: box
  62         source: root.iconSource == "" ? "" : "../" + root.iconSource
  63         sourceSize.width: width
  64         sourceSize.height: height
  65     }
  66
  67     onLabelChanged: {
  68         if(root.label.length>root.maxSize) {
  69             //console.log("root.label: "+root.label)
  70             //console.log("root.label.length: "+root.label.length)
  71             //console.log("root.maxSize: "+root.maxSize)
  72             textbox.text = root.label.substring(0,root.maxSize-3)+"...";
  73         } else {
  74             textbox.text = root.label;
  75         }
  76     }
  77
  78     Text {
  79         id: textbox
  80         font.pixelSize: root.fontSize
  81         color: root.disabled ? "gray" : "white"
  82         anchors.centerIn: box
  83         visible: root.iconSource == ""
  84     }
  85
  86     MouseArea {
  87         id: mouseArea
  88         width: box.width
  89         height: box.height
  90         onClicked: root.buttonClicked(root.label)
  91         enabled: !root.disabled
  92     }
  93
  94     states: [
  95         State {
  96             name: "unpressed"
  97             PropertyChanges {target: shadow; x: Const.SHADOW_OFFSET}
  98             PropertyChanges {target: shadow; y: Const.SHADOW_OFFSET}
  99             PropertyChanges {target: box; x: 0}
 100             PropertyChanges {target: box; y: 0}
 101         },
 102         State {
 103             name: "pressed"
 104             PropertyChanges {target: shadow; x: Const.SHADOW_OFFSET}
 105             PropertyChanges {target: shadow; y: Const.SHADOW_OFFSET}
 106             PropertyChanges {target: box; x: Const.SHADOW_OFFSET}
 107             PropertyChanges {target: box; y: Const.SHADOW_OFFSET}
 108         }
 109     ]
 110 }
 111
 112
 113