quickshell and hyprland additions

2026-04-11 09:36:46 +00:00 · 2026-03-15 13:56:00 +02:00
parent c9c27d1554
commit 1ad06b82a6
509 changed files with 68371 additions and 19 deletions
--- a/.config/quickshell/nucleus-shell/modules/components/StyledTextField.qml
+++ b/.config/quickshell/nucleus-shell/modules/components/StyledTextField.qml
@@ -0,0 +1,195 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Effects
+import qs.config
+import qs.modules.functions
+
+TextField {
+    id: control
+
+    property string icon: ""
+    property color iconColor: Appearance.m3colors.m3onSurfaceVariant
+    property string placeholder: ""
+    property real iconSize: Metrics.iconSize(24)
+    property alias radius: bg.radius
+    property bool outline: true
+    property alias topLeftRadius: bg.topLeftRadius
+    property alias topRightRadius: bg.topRightRadius
+    property alias bottomLeftRadius: bg.bottomLeftRadius
+    property alias bottomRightRadius: bg.bottomRightRadius
+    property color backgroundColor: filled ? Appearance.m3colors.m3surfaceContainerHigh : "transparent"
+    property int fieldPadding: Metrics.padding(20)
+    property int iconSpacing: Metrics.spacing(14)
+    property int iconMargin: Metrics.margin(20)
+    property bool filled: true
+    property bool highlight: true
+
+    width: parent ? parent.width - 40 : 300
+    placeholderText: placeholder
+    leftPadding: icon !== "" ? iconSize + iconSpacing + iconMargin : fieldPadding
+    padding: fieldPadding
+    verticalAlignment: TextInput.AlignVCenter
+    color: Appearance.m3colors.m3onSurface
+    placeholderTextColor: Appearance.m3colors.m3onSurfaceVariant
+    font.family: "Outfit"
+    font.pixelSize: Metrics.fontSize(14)
+    cursorVisible: control.focus
+
+    MaterialSymbol {
+        icon: control.icon
+        anchors.left: parent.left
+        anchors.leftMargin: icon !== "" ? iconMargin : 0
+        anchors.verticalCenter: parent.verticalCenter
+        font.pixelSize: control.iconSize
+        color: control.iconColor
+        visible: control.icon !== ""
+
+        Behavior on color {
+            ColorAnimation {
+                duration: Metrics.chronoDuration("small")
+                easing.type: Appearance.animation.easing
+            }
+
+        }
+
+    }
+
+    cursorDelegate: Rectangle {
+        width: 2
+        color: Appearance.m3colors.m3primary
+        visible: control.focus
+
+        SequentialAnimation on opacity {
+            loops: Animation.Infinite
+            running: control.focus && Config.runtime.appearance.animations.enabled
+
+            NumberAnimation {
+                from: 1
+                to: 0
+                duration: Metrics.chronoDuration("lrage") * 2
+            }
+
+            NumberAnimation {
+                from: 0
+                to: 1
+                duration: Metrics.chronoDuration("lrage") * 2
+            }
+
+        }
+
+    }
+
+    background: Item {
+        Rectangle {
+            id: bg
+
+            anchors.fill: parent
+            radius: Metrics.radius("unsharpenmore")
+            color: control.backgroundColor
+
+            Rectangle {
+                anchors.fill: parent
+                radius: parent.radius
+                color: {
+                    if (control.activeFocus && control.highlight)
+                        return ColorUtils.transparentize(Appearance.m3colors.m3primary, 0.8);
+
+                    if (control.hovered && control.highlight)
+                        return ColorUtils.transparentize(Appearance.m3colors.m3onSurface, 0.9);
+
+                    return "transparent";
+                }
+
+                Behavior on color {
+                    enabled: Config.runtime.appearance.animations.enabled
+
+                    ColorAnimation {
+                        duration: Metrics.chronoDuration("small")
+                        easing.type: Appearance.animation.easing
+                    }
+
+                }
+
+            }
+
+        }
+
+        Rectangle {
+            id: indicator
+
+            anchors.left: parent.left
+            anchors.right: parent.right
+            anchors.bottom: parent.bottom
+            height: control.activeFocus ? 2 : 1
+            color: {
+                if (control.activeFocus)
+                    return Appearance.m3colors.m3primary;
+
+                if (control.hovered)
+                    return Appearance.m3colors.m3onSurface;
+
+                return Appearance.m3colors.m3onSurface;
+            }
+            visible: filled
+
+            Behavior on height {
+                enabled: Config.runtime.appearance.animations.enabled
+                NumberAnimation {
+                    duration: Metrics.chronoDuration("small")
+                    easing.type: Appearance.animation.easing
+                }
+
+            }
+
+            Behavior on color {
+                enabled: Config.runtime.appearance.animations.enabled
+                ColorAnimation {
+                    duration: Metrics.chronoDuration("small")
+                    easing.type: Appearance.animation.easing
+                }
+
+            }
+
+        }
+
+        Rectangle {
+            id: outline
+
+            anchors.fill: parent
+            radius: bg.radius
+            color: "transparent"
+            border.width: control.activeFocus ? 2 : 1
+            border.color: {
+                if (control.activeFocus)
+                    return Appearance.m3colors.m3primary;
+
+                if (control.hovered)
+                    return Appearance.m3colors.m3onSurface;
+
+                return Appearance.m3colors.m3outline;
+            }
+            visible: !filled && control.outline
+
+            Behavior on border.width {
+                enabled: Config.runtime.appearance.animations.enabled
+                NumberAnimation {
+                    duration: Metrics.chronoDuration("small")
+                    easing.type: Appearance.animation.easing
+                }
+
+            }
+
+            Behavior on border.color {
+                enabled: Config.runtime.appearance.animations.enabled
+                ColorAnimation {
+                    duration: Metrics.chronoDuration("small")
+                    easing.type: Appearance.animation.easing
+                }
+
+            }
+
+        }
+
+    }
+
+}