meewords/qml/MeeWords/MyButton.qml

import QtQuick 1.1
import com.nokia.meego 1.0

Rectangle {
    id: button
    property alias text: txtButton.text
    property alias iconSource: imgButton.source
    property bool indicator: true
    property int fontSize: 26
    property string color: "lightgray"
    property bool isGlow: true
    signal clicked


    radius: 20
    border.color: "gray"
    border.width: 2
    smooth: true

    Behavior on scale { NumberAnimation {duration: 200} }

    Text {
        id: txtButton
        //anchors.centerIn: parent
        anchors.left: imgButton.right
        anchors.leftMargin: 0.1*button.width
        anchors.verticalCenter: parent.verticalCenter
        font.pixelSize: button.fontSize
        font.bold: true
        color: button.enabled ? "black" : "gray"
    }

    Image {
        id: imgButton
        smooth: true
        anchors.left: parent.left
        anchors.leftMargin: 0.07*button.width
        anchors.verticalCenter: parent.verticalCenter
        visible: imgButton.source !=""
        z: 1
        /*BusyIndicator {
            id: busyIndicator
            opacity: 0
            anchors.centerIn: parent
            platformStyle: BusyIndicatorStyle { size: "large" }
            running:  true
            scale: 0.94
            smooth: true
            visible: button.indicator
        }*/
        Image {
            id: imgGlow
            opacity: 0
            anchors.centerIn: parent
            smooth: true
            source: "images/glow80.png"
            visible: isGlow
            z:0
        }
    }

    Gradient {
        id: gr1
        GradientStop { color: button.color; position: 0 }
        GradientStop { color: "transparent"; position: 0.5 }
        GradientStop { color: button.color; position: 1 }
    }
    Gradient {
        id: gr2
        GradientStop { color: button.color; position: 0 }
        GradientStop { color: "transparent"; position: 1 }
    }
    gradient: gr2

    MouseArea {
        id: maButton
        anchors.fill: parent
        onClicked: {
            button.clicked()
        }
        onPressedChanged: {
            if( pressed ) {
                button.gradient = gr1
                button.scale = 0.96
                txtButton.style = Text.Outline;
                txtButton.styleColor = "yellow"
                //busyIndicator.opacity = 1
                imgGlow.opacity = 0.7
            } else {
                button.gradient = gr2
                button.scale = 1
                txtButton.style = Text.Normal;
                //busyIndicator.opacity = 0
                imgGlow.opacity = 0
            }
        }
    }
}