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