GfA-Browser/Menu/MenuButton.qml

import QtQuick 2.5
import QtQuick.Controls 1.4
import Qt.labs.controls 1.0
import QtQuick.Controls.Styles 1.3
import QtGraphicalEffects 1.0
import ApplicationLauncher 1.0

Button {
    property double buttGreyed: 0.0 //Saturation -1.0 greyed ... 0.0 colored
    property int imgBorder: 20 // in percent of parent.height defaults to 20%
    property string menuQML // next UI to goto
    property string menuImage // Image name
//    property string menuText // Text to display in Button Box
    property alias menuText: menTXT.text

    signal itemClicked

    width: parent.width
    height: parent.height

    Image {
        id: idIMG
        anchors.centerIn: parent

        fillMode: Image.PreserveAspectFit
        source: menuImage
        sourceSize.height: parent.height - parent.width * (parent.imgBorder / 100.0)
        sourceSize.width: parent.width - parent.width * (parent.imgBorder / 100.0)

        Text {
            id: menTXT
            anchors.bottom: parent.bottom
            anchors.bottomMargin: 3
            x: 2
            width: parent.width - 2 * x
            color: "white"
            font.pixelSize: (parent.height * 0.21) / 2
            wrapMode: Text.WordWrap
            text: menuText
        }
    }

    HueSaturation {
        id: idSaturation
        anchors.fill: idIMG
        source: idIMG
        hue: 0.0
        saturation: buttGreyed
        lightness: 0.0
    }

    background: Rectangle {
        border.width: 0.0
    }

    onClicked: {
        sysinfo.beep();
        itemClicked();
    }
}