neiam /gitgud-plasmoid

import QtQuick
import org.kde.kirigami as Kirigami

import "Status.js" as Status

// A single status dot. Running pulses; queued (and waiting, blocked) is
// a hollow ring, so the two in-flight states read differently at panel
// size. Needs-approval is a ring with a dot in it: pending colour, but
// its own mark, since it waits on a person rather than a runner.
Item {
    id: circle

    property string status: "unknown"
    property bool highlighted: false

    readonly property string category: Status.category(status)
    readonly property color statusColor: Status.color(status, Kirigami.Theme)

    implicitWidth: Kirigami.Units.iconSizes.small
    implicitHeight: implicitWidth

    Rectangle {
        id: halo
        anchors.centerIn: parent
        width: parent.width
        height: width
        radius: width / 2
        color: "transparent"
        border.color: circle.statusColor
        border.width: 1
        opacity: 0
        visible: circle.category === "running"

        SequentialAnimation on opacity {
            running: halo.visible
            loops: Animation.Infinite
            NumberAnimation { from: 0.8; to: 0; duration: 1200; easing.type: Easing.OutQuad }
        }
        SequentialAnimation on scale {
            running: halo.visible
            loops: Animation.Infinite
            NumberAnimation { from: 0.7; to: 1.3; duration: 1200; easing.type: Easing.OutQuad }
        }
    }

    Rectangle {
        anchors.centerIn: parent
        width: parent.width * (circle.highlighted ? 0.85 : 0.7)
        height: width
        radius: width / 2
        color: circle.category === "queued" ? "transparent" : circle.statusColor
        border.color: circle.statusColor
        border.width: circle.category === "queued" ? Math.max(2, width / 5) : 0

        Behavior on width { NumberAnimation { duration: Kirigami.Units.shortDuration } }
        Behavior on color { ColorAnimation { duration: Kirigami.Units.longDuration } }
    }

    Rectangle {
        visible: circle.status === "awaiting_approval"
        anchors.centerIn: parent
        width: parent.width * 0.25
        height: width
        radius: width / 2
        color: circle.statusColor
    }
}