wip

widgets/CachingImage.qml

@@ -0,0 +1,14 @@
+import "root:/services"
+import QtQuick
+
+Image {
+    id: root
+
+    property string path
+    property bool loadOriginal
+    readonly property Thumbnailer.Thumbnail thumbnail: Thumbnailer.go(this)
+
+    source: thumbnail.path ? `file://${thumbnail.path}` : ""
+    asynchronous: true
+    fillMode: Image.PreserveAspectCrop
+}

widgets/Colouriser.qml

@@ -0,0 +1,15 @@
+import "root:/config"
+import QtQuick
+import QtQuick.Effects
+
+MultiEffect {
+    colorization: 1
+
+    Behavior on colorizationColor {
+        ColorAnimation {
+            duration: Appearance.anim.durations.normal
+            easing.type: Easing.BezierSpline
+            easing.bezierCurve: Appearance.anim.curves.standard
+        }
+    }
+}

widgets/CustomShortcut.qml

@@ -0,0 +1,5 @@
+import Quickshell.Hyprland
+
+GlobalShortcut {
+    appid: "caelestia"
+}

widgets/MaterialIcon.qml

@@ -0,0 +1,11 @@
+import "root:/config"
+
+StyledText {
+    property real fill
+
+    font.family: Appearance.font.family.material
+    font.pointSize: Appearance.font.size.larger
+    font.variableAxes: ({
+            FILL: fill.toFixed(1)
+        })
+}

widgets/StateLayer.qml

@@ -0,0 +1,43 @@
+import "root:/widgets"
+import "root:/services"
+import "root:/config"
+import QtQuick
+
+StyledRect {
+    id: root
+
+    readonly property alias hovered: mouse.hovered
+    readonly property alias pressed: mouse.pressed
+    property bool disabled
+
+    function onClicked(event: MouseEvent): void {
+    }
+
+    anchors.fill: parent
+
+    color: Colours.palette.m3onSurface
+    opacity: disabled ? 0 : mouse.pressed ? 0.1 : mouse.hovered ? 0.08 : 0
+
+    MouseArea {
+        id: mouse
+
+        property bool hovered
+
+        anchors.fill: parent
+        cursorShape: root.disabled ? undefined : Qt.PointingHandCursor
+        hoverEnabled: true
+
+        onEntered: hovered = true
+        onExited: hovered = false
+
+        onClicked: event => !root.disabled && root.onClicked(event)
+    }
+
+    Behavior on opacity {
+        NumberAnimation {
+            duration: Appearance.anim.durations.small
+            easing.type: Easing.BezierSpline
+            easing.bezierCurve: Appearance.anim.curves.standard
+        }
+    }
+}

widgets/StyledClippingRect.qml

@@ -0,0 +1,17 @@
+import "root:/config"
+import Quickshell.Widgets
+import QtQuick
+
+ClippingRectangle {
+    id: root
+
+    color: "transparent"
+
+    Behavior on color {
+        ColorAnimation {
+            duration: Appearance.anim.durations.normal
+            easing.type: Easing.BezierSpline
+            easing.bezierCurve: Appearance.anim.curves.standard
+        }
+    }
+}

widgets/StyledRect.qml

@@ -0,0 +1,16 @@
+import "root:/config"
+import QtQuick
+
+Rectangle {
+    id: root
+
+    color: "transparent"
+
+    Behavior on color {
+        ColorAnimation {
+            duration: Appearance.anim.durations.normal
+            easing.type: Easing.BezierSpline
+            easing.bezierCurve: Appearance.anim.curves.standard
+        }
+    }
+}

widgets/StyledScrollBar.qml

@@ -0,0 +1,34 @@
+import "root:/services"
+import "root:/config"
+import QtQuick
+import QtQuick.Controls
+
+ScrollBar {
+    id: root
+
+    contentItem: StyledRect {
+        implicitWidth: 6
+        opacity: root.pressed ? 1 : root.policy === ScrollBar.AlwaysOn || (root.active && root.size < 1) ? 0.8 : 0
+        radius: Appearance.rounding.full
+        color: Colours.palette.m3secondary
+
+        Behavior on opacity {
+            NumberAnimation {
+                duration: Appearance.anim.durations.normal
+                easing.type: Easing.BezierSpline
+                easing.bezierCurve: Appearance.anim.curves.standard
+            }
+        }
+    }
+
+    MouseArea {
+        z: -1
+        anchors.fill: parent
+        onWheel: event => {
+            if (event.angleDelta.y > 0)
+                root.decrease();
+            else if (event.angleDelta.y < 0)
+                root.increase();
+        }
+    }
+}

widgets/StyledText.qml

@@ -0,0 +1,52 @@
+pragma ComponentBehavior: Bound
+
+import "root:/services"
+import "root:/config"
+import QtQuick
+
+Text {
+    id: root
+
+    property bool animate: false
+    property string animateProp: "scale"
+    property real animateFrom: 0
+    property real animateTo: 1
+    property int animateDuration: Appearance.anim.durations.normal
+
+    renderType: Text.NativeRendering
+    textFormat: Text.PlainText
+    color: Colours.palette.m3onSurface
+    font.family: Appearance.font.family.sans
+    font.pointSize: Appearance.font.size.smaller
+
+    Behavior on color {
+        ColorAnimation {
+            duration: Appearance.anim.durations.normal
+            easing.type: Easing.BezierSpline
+            easing.bezierCurve: Appearance.anim.curves.standard
+        }
+    }
+
+    Behavior on text {
+        enabled: root.animate
+
+        SequentialAnimation {
+            Anim {
+                to: root.animateFrom
+                easing.bezierCurve: Appearance.anim.curves.standardAccel
+            }
+            PropertyAction {}
+            Anim {
+                to: root.animateTo
+                easing.bezierCurve: Appearance.anim.curves.standardDecel
+            }
+        }
+    }
+
+    component Anim: NumberAnimation {
+        target: root
+        property: root.animateProp
+        duration: root.animateDuration / 2
+        easing.type: Easing.BezierSpline
+    }
+}

widgets/StyledTextField.qml

@@ -0,0 +1,68 @@
+pragma ComponentBehavior: Bound
+
+import "root:/services"
+import "root:/config"
+import QtQuick
+import QtQuick.Controls
+
+TextField {
+    id: root
+
+    color: Colours.palette.m3onSurface
+    placeholderTextColor: Colours.palette.m3outline
+    font.family: Appearance.font.family.sans
+    font.pointSize: Appearance.font.size.smaller
+
+    cursorDelegate: StyledRect {
+        id: cursor
+
+        property bool disableBlink
+
+        implicitWidth: 2
+        color: Colours.palette.m3primary
+        radius: Appearance.rounding.normal
+        onXChanged: {
+            opacity = 1;
+            disableBlink = true;
+            enableBlink.start();
+        }
+
+        Timer {
+            id: enableBlink
+
+            interval: 100
+            onTriggered: cursor.disableBlink = false
+        }
+
+        Timer {
+            running: root.cursorVisible && !cursor.disableBlink
+            repeat: true
+            interval: 500
+            onTriggered: parent.opacity = parent.opacity === 1 ? 0 : 1
+        }
+
+        Behavior on opacity {
+            NumberAnimation {
+                duration: Appearance.anim.durations.small
+                easing.type: Easing.BezierSpline
+                easing.bezierCurve: Appearance.anim.curves.standard
+            }
+        }
+    }
+
+    Behavior on color {
+        ColorAnimation {
+            duration: Appearance.anim.durations.normal
+            easing.type: Easing.BezierSpline
+            easing.bezierCurve: Appearance.anim.curves.standard
+        }
+    }
+
+    Behavior on placeholderTextColor {
+        ColorAnimation {
+            duration: Appearance.anim.durations.normal
+            easing.type: Easing.BezierSpline
+            easing.bezierCurve: Appearance.anim.curves.standard
+        }
+    }
+}

widgets/StyledWindow.qml

@@ -0,0 +1,11 @@
+import "root:/utils"
+import "root:/config"
+import Quickshell
+import Quickshell.Wayland
+
+PanelWindow {
+    required property string name
+
+    WlrLayershell.namespace: `caelestia-${name}`
+    color: "transparent"
+}

widgets/VerticalSlider.qml

@@ -0,0 +1,136 @@
+import "root:/widgets"
+import "root:/services"
+import "root:/config"
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Effects
+
+Slider {
+    id: root
+
+    required property string icon
+    property real oldValue
+
+    orientation: Qt.Vertical
+
+    background: StyledRect {
+        color: Colours.alpha(Colours.palette.m3surfaceContainer, true)
+        radius: Appearance.rounding.full
+
+        StyledRect {
+            anchors.left: parent.left
+            anchors.right: parent.right
+
+            y: root.handle.y
+            implicitHeight: parent.height - y
+
+            color: Colours.alpha(Colours.palette.m3secondary, true)
+            radius: Appearance.rounding.full
+        }
+    }
+
+    handle: Item {
+        id: handle
+
+        property bool moving
+
+        y: root.visualPosition * (root.availableHeight - height)
+        implicitWidth: root.width
+        implicitHeight: root.width
+
+        RectangularShadow {
+            anchors.fill: parent
+            radius: rect.radius
+            color: Colours.palette.m3shadow
+            blur: 5
+            spread: 0
+        }
+
+        StyledRect {
+            id: rect
+
+            anchors.fill: parent
+
+            color: Colours.alpha(Colours.palette.m3inverseSurface, true)
+            radius: Appearance.rounding.full
+
+            MouseArea {
+                anchors.fill: parent
+                cursorShape: Qt.PointingHandCursor
+                onPressed: event => event.accepted = false
+            }
+
+            MaterialIcon {
+                id: icon
+
+                property bool moving: handle.moving
+
+                function update(): void {
+                    animate = !moving;
+                    text = moving ? Qt.binding(() => Math.round(root.value * 100)) : Qt.binding(() => root.icon);
+                    font.pointSize = moving ? Appearance.font.size.small : Appearance.font.size.normal;
+                    font.family = moving ? Appearance.font.family.sans : Appearance.font.family.material;
+                }
+
+                animate: true
+                text: root.icon
+                color: Colours.palette.m3inverseOnSurface
+                anchors.centerIn: parent
+
+                Behavior on moving {
+                    SequentialAnimation {
+                        NumberAnimation {
+                            target: icon
+                            property: "scale"
+                            from: 1
+                            to: 0
+                            duration: Appearance.anim.durations.normal / 2
+                            easing.type: Easing.BezierSpline
+                            easing.bezierCurve: Appearance.anim.curves.standardAccel
+                        }
+                        ScriptAction {
+                            script: icon.update()
+                        }
+                        NumberAnimation {
+                            target: icon
+                            property: "scale"
+                            from: 0
+                            to: 1
+                            duration: Appearance.anim.durations.normal / 2
+                            easing.type: Easing.BezierSpline
+                            easing.bezierCurve: Appearance.anim.curves.standardDecel
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    onPressedChanged: handle.moving = pressed
+
+    onValueChanged: {
+        if (Math.abs(value - oldValue) < 0.01)
+            return;
+        oldValue = value;
+        handle.moving = true;
+        stateChangeDelay.restart();
+    }
+
+    Timer {
+        id: stateChangeDelay
+
+        interval: 500
+        onTriggered: {
+            if (!root.pressed)
+                handle.moving = false;
+        }
+    }
+
+    Behavior on value {
+        NumberAnimation {
+            duration: Appearance.anim.durations.large
+            easing.type: Easing.BezierSpline
+            easing.bezierCurve: Appearance.anim.curves.standard
+        }
+    }
+}