app/resources/qml/Components/FancyButton.qml

/*
    blueROCK - for digital rock
    Copyright (C) 2019  Dorian Zedler

    This program is free software: you can redistribute it and/or modify
    it under the terms of the GNU General Public License as published by
    the Free Software Foundation, either version 3 of the License, or
    (at your option) any later version.

    This program is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU General Public License for more details.

    You should have received a copy of the GNU General Public License
    along with this program.  If not, see <http://www.gnu.org/licenses/>.
*/

import QtQuick 2.9
import QtQuick.Controls 2.4
import QtGraphicalEffects 1.0
import QtQuick.Controls.Material 2.12
import QtQuick.Controls.Material.impl 2.12

MouseArea {
    id: control

    property string image
    property color backgroundColor: "white"
    property color textColor: "black"
    property real imageScale: 1.3
    property double glowRadius: 0.001
    property double glowSpread: 0.2
    property bool glowVisible: true
    property double glowScale: 0.92
    property double glowOpacity: 1

    Behavior on backgroundColor {
        ColorAnimation {
            duration: 200
        }
    }

    Item {
        id: controlBackgroundContainer

        anchors.fill: parent

        opacity: 1

        RectangularGlow {
            id: effect
            glowRadius: control.glowRadius
            spread: control.glowSpread
            color: "black"

            visible: control.glowVisible

            cornerRadius: controlBackground.radius
            anchors.fill: controlBackground
            scale: control.glowScale
            opacity: control.glowOpacity
        }

        Rectangle {
            id: controlBackground

            anchors.fill: parent

            radius: height * 0.2

            color: Material.dialogColor //control.down ? Qt.darker(control.backgroundColor, 1.03) : control.backgroundColor

            Image {
                id: buttonIcon
                source: control.image

                anchors.centerIn: parent
                height: parent.height * 0.5
                width: height

                mipmap: true

                fillMode: Image.PreserveAspectFit

                scale: control.imageScale
            }

            Ripple {
                id: ripple
                visible: true
                clipRadius: controlBackground.radius
                clip: true
                width: parent.width
                height: parent.height
                pressed: control.pressed
                anchor: control
                active: control.pressed || control.visualFocus || control.containsMouse
                color: control.Material.rippleColor

                layer.enabled: true
                layer.effect: OpacityMask {
                    maskSource: Item {
                        width: ripple.width
                        height: ripple.height
                        Rectangle {
                            anchors.fill: parent
                            radius: controlBackground.radius
                        }
                    }
                }
            }
        }
    }
}