overte-thingvellir/interface/resources/qml/hifi/simplifiedUI/simplifiedControls/Button.qml

//
//  Button.qml
//
//  Created by Zach Fox on 2019-05-08
//  Copyright 2019 High Fidelity, Inc.
//  Copyright 2024 Overte e.V.
//
//  Distributed under the Apache License, Version 2.0.
//  See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
//

import QtQuick 2.10
import QtQuick.Controls 2.3 as Original
import stylesUit 1.0 as HifiStylesUit
import "../simplifiedConstants" as SimplifiedConstants
import TabletScriptingInterface 1.0

Original.Button {
    id: root
    // The two properties below are used when calling showTemporaryText()
    property string originalText: ""
    property string temporaryText: ""

    SimplifiedConstants.SimplifiedConstants {
        id: simplifiedUI
    }

    hoverEnabled: true
    width: simplifiedUI.sizes.controls.button.width
    height: simplifiedUI.sizes.controls.button.height

    onHoveredChanged: {
        if (hovered && enabled) {
            Tablet.playSound(TabletEnums.ButtonHover);
        }
    }

    onFocusChanged: {
        if (focus && enabled) {
            Tablet.playSound(TabletEnums.ButtonHover);
        }
    }

    onClicked: {
        if (enabled) {
            Tablet.playSound(TabletEnums.ButtonClick);
        }
    }

    background: Rectangle {
        implicitWidth: root.width
        implicitHeight: root.height
        color: {
            if (root.enabled) {
                if (root.hovered) {
                    simplifiedUI.colors.controls.button.background.enabled
                } else if (root.down) {
                    simplifiedUI.colors.controls.button.background.active
                } else {
                    simplifiedUI.colors.controls.button.background.enabled
                }
            } else {
                simplifiedUI.colors.controls.button.background.disabled
            }
        }

        border.width: simplifiedUI.sizes.controls.button.borderWidth
        border.color: root.enabled ? simplifiedUI.colors.controls.button.border.enabled : simplifiedUI.colors.controls.button.border.disabled

        Item {
            clip: true
            visible: root.enabled
            anchors.centerIn: parent
            width: parent.width - parent.border.width * 2
            height: parent.height - parent.border.width * 2

            Rectangle {
                z: -1
                clip: true
                width: root.down ? parent.width * 1.5 : (root.hovered ? parent.width * 9 / 10 : 0)
                height: parent.height
                anchors.horizontalCenter: parent.horizontalCenter
                anchors.horizontalCenterOffset: -14
                color: simplifiedUI.colors.controls.button.background.active
                Behavior on width {
                    enabled: true
                    SmoothedAnimation { velocity: 400 }
                }
                transform: Matrix4x4 {
                    property real a: Math.PI / 4
                    matrix: Qt.matrix4x4(1, Math.tan(a), 0, 0,
                                        0,            1, 0, 0,
                                        0,            0, 1, 0,
                                        0,            0, 0, 1)
                }
            }
        }
    }

    contentItem:  Text {
        id: buttonText
        //topPadding: -2 // Necessary for proper alignment using Graphik Medium
        wrapMode: Text.Wrap
        color: enabled ? simplifiedUI.colors.controls.button.text.enabled : simplifiedUI.colors.controls.button.text.disabled
        verticalAlignment: Text.AlignVCenter
        horizontalAlignment: Text.AlignHCenter
        text: root.text
    }

    Timer {
        id: showTemporaryTextTimer
        interval: 1500
        repeat: false
        running: false

        onTriggered: {
            buttonText.text = root.originalText;
            root.originalText = "";
        }
    }

    function showTemporaryText() {
        if (root.temporaryText === "") {
            return;
        }

        if (showTemporaryTextTimer.running) {
            showTemporaryTextTimer.restart();
            return;
        }

        root.originalText = buttonText.text;
        buttonText.text = root.temporaryText;
        showTemporaryTextTimer.start();
    }
}