status-desktop/ui/shared/status/StatusRoundButton.qml

import QtQuick 2.13
import QtQuick.Controls 2.13
import QtGraphicalEffects 1.13
import QtQml 2.14

import utils 1.0
import "../../shared"
import "./core"

RoundButton {
    property string type: "primary"
    property string size: "large"
    property int pressedIconRotation: 0
    property alias iconX: iconImg.x
    id: control

    font.pixelSize: 15
    font.weight: Font.Medium

    implicitWidth: {
        switch(size) {
            case "large":
                return 44
            case "medium":
                return 40
            case "small":
                return 32
            default:
                return 44
        }
    }
    implicitHeight: implicitWidth
    enabled: state === "default" || state === "pressed"
    rotation: 0
    state: "default"
    states: [
        State {
            name: "default"
            PropertyChanges {
                target: iconColorOverlay
                visible: true
                rotation: 0
            }
            PropertyChanges {
                target: loadingIndicator
                active: false
            }
        },
        State {
            name: "pressed"
            PropertyChanges {
                target: iconColorOverlay
                rotation: control.pressedIconRotation
                visible: true
            }
            PropertyChanges {
                target: loadingIndicator
                active: false
            }
        },
        State {
            name: "pending"
            PropertyChanges {
                target: loadingIndicator
                active: true
            }
            PropertyChanges {
                target: iconColorOverlay
                visible: false
            }
        }
    ]

    transitions: [
        Transition {
            from: "default"
            to: "pressed"

            RotationAnimation {
                duration: 150
                direction: RotationAnimation.Clockwise
                easing.type: Easing.InCubic
            }
        },

        Transition {
            from: "pressed"
            to: "default"
            RotationAnimation {
                duration: 150
                direction: RotationAnimation.Counterclockwise
                easing.type: Easing.OutCubic
            }
        }
    ]

    icon.height: {
        switch(size) {
            case "large":
                return 20
            case "medium":
                return 14
            case "small":
                return 12
            default:
                return 20
        }
    }
    icon.width: {
        switch(size) {
            case "large":
                return 20
            case "medium":
                return 14
            case "small":
                return 12
            default:
                return 20
        }
    }
    icon.color: type === "secondary" ?
        !enabled ?
          Style.current.roundedButtonSecondaryDisabledForegroundColor :
          Style.current.roundedButtonSecondaryForegroundColor
        :
        !enabled ?
          Style.current.roundedButtonDisabledForegroundColor :
          Style.current.roundedButtonForegroundColor

    onIconChanged: {
      icon.source = icon.name ? Style.svg(icon.name) : ""
    }

    background: Rectangle {
        anchors.fill: parent
        opacity: hovered && size === "large" && type !== "secondary" ? 0.2 : 1
        color: {
            if (size === "medium" || size === "small" || type === "secondary") {
                return !enabled ? Style.current.roundedButtonSecondaryDisabledBackgroundColor :
                  hovered ? (control.type === "warn" ? Style.current.red : Style.current.roundedButtonSecondaryHoveredBackgroundColor) :
                  (control.type === "warn" ? Style.current.lightRed : Style.current.roundedButtonSecondaryBackgroundColor)
            }
            return !enabled ?
              Style.current.roundedButtonDisabledBackgroundColor : 
              hovered ? (control.type === "warn" ? Style.current.red : Style.current.buttonHoveredBackgroundColor) :
                        (control.type === "warn" ? Style.current.lightRed : Style.current.roundedButtonBackgroundColor)
        }
        radius: parent.width / 2
    }

    contentItem: Item {
        anchors.fill: parent

        SVGImage {
            id: iconImg
            visible: false
            source: control.icon.source
            height: control.icon.height
            width: control.icon.width
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.verticalCenter: parent.verticalCenter
            fillMode: Image.PreserveAspectFit
        }

        Component {
            id: loadingComponent
            StatusLoadingIndicator {
                color: control.size === "medium" || control.size === "small" ?
                  Style.current.roundedButtonSecondaryDisabledForegroundColor :
                  Style.current.roundedButtonDisabledForegroundColor
            }
        }

        Loader {
            id: loadingIndicator
            sourceComponent: loadingComponent
            height: size === "small" ? 14 : 18
            width: loadingIndicator.height
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.verticalCenter: parent.verticalCenter
        }


        ColorOverlay {
            id: iconColorOverlay
            anchors.fill: iconImg
            source: iconImg
            color: {
                if (type === "secondary") {
                    return !control.enabled ? 
                        Style.current.roundedButtonSecondaryDisabledForegroundColor : 
                        (control.type === "warn" ? Style.current.danger : Style.current.roundedButtonSecondaryForegroundColor)
                }
                return !control.enabled ?
                    Style.current.roundedButtonDisabledForegroundColor :
                   (control.type === "warn" ? Style.current.danger :  Style.current.roundedButtonForegroundColor)
            }
            antialiasing: true
        }
    }

    MouseArea {
        hoverEnabled: true
        cursorShape: Qt.PointingHandCursor
        anchors.fill: parent
        onPressed: mouse.accepted = false
    }
}