ConsoleEmulatorAddProbes/ui/emulator/elements/ProbeButton.qml

import QtQuick 2.0
import QtQuick.Controls 2.13
import QtGraphicalEffects 1.13

import "qrc:/theme"
import "qrc:/const"
import "qrc:/emulator/components"

import de.skycoder42.QtMvvm.Core 1.0
import de.skycoder42.QtMvvm.Quick 1.0
import com.example.consoleemulator 1.0

Button {
    id: button

    width: Const.macroButton
    height: Const.macroButton * 2
    implicitWidth: width
    implicitHeight: height
    //=========================================
    property var name
    property var nameLed: name + "Led"

    MvvmBinding {
        viewModel: mainView.viewModel
        viewProperty: "down"
        viewModelProperty: name
        type: MvvmBinding.OneWayToViewModel
    }

    MvvmBinding {
        viewModel: mainView.viewModel
        viewProperty: "colorMode"
        viewModelProperty: nameLed
    }

    //=========================================
    property var image: ""
    property var radius: Math.min(width / 2, height / 2)
    property var timeToPress: 100
    property var border: 6

    property var colorMode: 0 // 0->None; 1->White; 2->Green; 3->Yellow
    property color lightColor: getColor()
    property color lightGlow: getColorGlow()

    signal pressed
    signal released

    onPressed: {
        button.down = true
    }
    onReleased: {
        button.down = false
    }

    function getColor() {
        switch (colorMode) {
        case (0):
            return Theme.current.none
        case (1):
            return Theme.current.white
        case (2):
            return Theme.current.green
        case (3):
            return Theme.current.yellow
        }
    }

    function getColorGlow() {
        switch (colorMode) {
        case (0):
            return Theme.current.noneGlow
        case (1):
            return Theme.current.whiteGlow
        case (2):
            return Theme.current.greenGlow
        case (3):
            return Theme.current.yellowGlow
        }
    }

    contentItem: Item {
        id: content
        anchors.fill: parent
        z: 1

        Item {
            property var factor: button.state
                                 == "Pressed" ? Const.imageScalePressed : Const.imageScale
            property var elevator: button.state == "Pressed" ? 3 : 0

            anchors.horizontalCenter: parent.horizontalCenter
            y: (parent.height * (1 - factor)) / 2 + elevator
            width: parent.width * factor
            height: parent.height * factor

            Behavior on y {
                NumberAnimation {
                    duration: timeToPress
                    easing.type: Easing.InOutQuad
                }
            }

            Behavior on width {
                NumberAnimation {
                    duration: timeToPress
                    easing.type: Easing.InOutQuad
                }
            }

            Behavior on height {
                NumberAnimation {
                    duration: timeToPress
                    easing.type: Easing.InOutQuad
                }
            }

            Image {
                id: img
                anchors.fill: parent
                source: image
                fillMode: Image.PreserveAspectFit
                antialiasing: true
                smooth: true
            }

            ColorOverlay {
                anchors.fill: img
                source: img
                color: button.state == "Pressed" ? Theme.current.textSelected : Theme.current.text
                antialiasing: true
                smooth: true
            }
        }
    }

    background: Item {
        width: parent.width
        height: parent.height

        Rectangle {
            id: backLightGlow
            property var diffusion: Theme.current.glowRaduis
            width: backLight.width + diffusion
            height: backLight.height + diffusion
            radius: width / 2
            anchors.horizontalCenter: backLight.horizontalCenter
            y: -diffusion / 4
            color: Theme.current.background
            border {
                width: diffusion / 2
                color: Theme.current.background
            }
        }

        Rectangle {
            anchors.fill: backLightGlow

            color: "transparent"
            layer.enabled: true
            layer.effect: OpacityMask {
                maskSource: backLightGlow
            }

            Rectangle {
                width: parent.width
                height: parent.height
                radius: parent.radius
                color: "transparent"

                RadialGradient {
                    anchors.fill: parent
                    gradient: Gradient {
                        GradientStop {
                            position: 0.0
                            color: lightGlow
                        }
                        GradientStop {
                            position: 0.5 * (backLight.width - backLightGlow.diffusion
                                             / backLightGlow.width)
                            color: lightGlow
                        }
                        GradientStop {
                            position: 0.5
                            color: "transparent"
                        }
                        GradientStop {
                            position: 1.0
                            color: "transparent"
                        }
                    }
                }
            }
        }

        Rectangle {
            id: backLight
            width: parent.width + 4
            height: parent.height + 4
            radius: width / 2
            color: lightColor
            anchors.top: parent.top
            anchors.horizontalCenter: parent.horizontalCenter
        }

        Rectangle {
            id: background
            anchors.fill: parent
            radius: button.radius
            color: Theme.current.button

            Behavior on color {
                ColorAnimation {
                    duration: timeToPress
                    easing.type: Easing.InOutQuad
                }
            }
        }

        Item {
            id: coloredRing
            width: parent.width
            height: parent.height

            Rectangle {
                id: lightRing
                width: parent.width
                height: parent.height
                radius: width / 2
                color: "transparent"
                border {
                    color: background.color
                    width: button.border
                }
            }

            Item {
                id: borderGrad
                implicitWidth: parent.width
                implicitHeight: parent.height
                anchors.fill: parent

                layer.enabled: true
                layer.effect: OpacityMask {
                    maskSource: lightRing
                }

                Rectangle {
                    width: parent.width
                    height: parent.height
                    color: background.color

                    LinearGradient {
                        id: linGrad
                        anchors.fill: parent
                        start: Qt.point(0, parent.height)
                        end: Qt.point(0, 0)
                        gradient: Gradient {
                            GradientStop {
                                id: buttonDown
                                position: 0
                                color: Theme.current.shadow

                                Behavior on color {
                                    ColorAnimation {
                                        duration: timeToPress
                                        easing.type: Easing.InOutQuad
                                    }
                                }
                            }

                            GradientStop {
                                id: buttonUp
                                position: 1
                                color: Theme.current.light

                                Behavior on color {
                                    ColorAnimation {
                                        duration: timeToPress
                                        easing.type: Easing.InOutQuad
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }

        MouseArea {
            hoverEnabled: true
            anchors.fill: background
            onEntered: {
                button.state = "Hovering"
            }

            onExited: {
                button.state = ""
            }

            onPressed: {
                button.state = "Pressed"
                button.pressed()
            }

            onReleased: {
                button.released()
                if (containsMouse)
                    button.state = "Hovering"
                else
                    button.state = ""
            }
        }
    }

    Item {
        id: hoverLight
        implicitWidth: parent.width
        implicitHeight: parent.height
        anchors.fill: parent

        layer.enabled: true
        layer.effect: OpacityMask {
            maskSource: background
        }

        Rectangle {
            id: hoverGlow
            width: 2 * parent.width
            height: parent.height
            x: -2 * parent.width
            color: "transparent"

            HoverGlow {}
        }
    }

    states: [
        State {
            name: "Hovering"
            PropertyChanges {
                target: hoverGlow
                x: 0
            }
        },

        State {
            name: "Pressed"
            PropertyChanges {
                target: background
                color: Theme.current.buttonSelected
            }

            PropertyChanges {
                target: buttonUp
                color: Theme.current.shadow
            }

            PropertyChanges {
                target: buttonDown
                color: Theme.current.light
            }
        }
    ]

    transitions: [
        Transition {
            from: ""
            to: "Hovering"
            NumberAnimation {
                properties: "x"
                duration: 500
                easing.type: Easing.OutQuad
            }
        }
    ]
}