Merge branch 'main' into main

Author: TakuyaYagam1

CMakeLists.txt

@@ -75,10 +75,12 @@ endif()
 if("m3shapes" IN_LIST ENABLE_MODULES)
     message(STATUS "Fetching M3Shapes module")
     include(FetchContent)
+    set(M3SHAPES_REV eb93964ab8583ae21c3a0bb9897f96ef9a1b5377)
     FetchContent_Declare(
         m3shapes_external
         GIT_REPOSITORY https://github.com/soramanew/m3shapes.git
-        GIT_TAG        356825d31f16052a782735cce264331cba0cb71b
+        GIT_TAG        ${M3SHAPES_REV}
+        SOURCE_DIR     "${CMAKE_BINARY_DIR}/_deps/m3shapes-${M3SHAPES_REV}"
     )
     FetchContent_MakeAvailable(m3shapes_external)
     message(STATUS "Done fetching M3Shapes module")

README.md

@@ -434,7 +434,7 @@ For example, to disable the bar on DP-1:
             "maxWindowIcons": 5,
             "activeTrail": false,
             "perMonitorWorkspaces": true,
-            "label": "  ",
+            "label": "  ",
             "occupiedLabel": "󰮯",
             "activeLabel": "󰮯",
             "capitalisation": "preserve",

components/controls/Menu.qml

@@ -94,6 +94,12 @@ MouseArea {
             }
         }
 
+        MouseArea {
+            anchors.fill: parent
+            hoverEnabled: true
+            onWheel: e => e.accepted = true
+        }
+
         StyledRect {
             anchors.fill: parent
             radius: parent.radius

flake.lock

@@ -16,7 +16,7 @@
     };
 
     m3shapes = {
-      url = "github:soramanew/m3shapes/356825d31f16052a782735cce264331cba0cb71b";
+      url = "github:soramanew/m3shapes/eb93964ab8583ae21c3a0bb9897f96ef9a1b5377";
       flake = false;
     };
   };

flake.nix

@@ -189,7 +189,11 @@ Item {
 
                         StyledText {
                             Layout.alignment: Qt.AlignHCenter
-                            text: GlobalConfig.services.useFahrenheit ? forecastItem.modelData.maxTempF + "°" + " / " + forecastItem.modelData.minTempF + "°" : forecastItem.modelData.maxTempC + "°" + " / " + forecastItem.modelData.minTempC + "°"
+                            text: {
+                                const min = Weather.formatTemp(forecastItem.modelData.minTempC).slice(0, -1);
+                                const max = Weather.formatTemp(forecastItem.modelData.maxTempC).slice(0, -1);
+                                return `${min} / ${max}`;
+                            }
                             font: Tokens.font.body.builders.small.weight(Font.DemiBold).build()
                             color: Colours.palette.m3tertiary
                         }

modules/dashboard/WeatherTab.qml

@@ -41,6 +41,7 @@ ColumnLayout {
 
     PasswordInput {
         Layout.alignment: Qt.AlignHCenter
+        centerScale: Math.max(0.8, root.centerScale)
         centerWidth: root.centerWidth
         lock: root.lock
     }

modules/lock/Center.qml

@@ -2,6 +2,7 @@ pragma ComponentBehavior: Bound
 
 import QtQuick
 import Quickshell
+import M3Shapes
 import Caelestia.Config
 import qs.components
 import qs.services
@@ -10,9 +11,19 @@ import qs.modules.lock
 Item {
     id: root
 
+    required property real centerScale
     required property Pam pam
     readonly property alias placeholder: placeholder
+    readonly property alias placeholderWidth: nonAnimPlaceholder.width
     property string buffer
+    readonly property list<int> shapeQueue: {
+        const shapes = [MaterialShape.Slanted, MaterialShape.Arch, MaterialShape.Fan, MaterialShape.Arrow, MaterialShape.SemiCircle, MaterialShape.Triangle, MaterialShape.Diamond, MaterialShape.ClamShell, MaterialShape.Pentagon, MaterialShape.Gem, MaterialShape.Sunny, MaterialShape.VerySunny, MaterialShape.Cookie4Sided, MaterialShape.Ghostish, MaterialShape.SoftBurst];
+        for (let i = shapes.length - 1; i > 0; i--) {
+            const j = Math.floor(Math.random() * (i + 1));
+            [shapes[i], shapes[j]] = [shapes[j], shapes[i]];
+        }
+        return shapes;
+    }
 
     clip: true
 
@@ -31,22 +42,30 @@ Item {
         target: root.pam
     }
 
-    StyledText {
-        id: placeholder
-
-        anchors.centerIn: parent
+    TextMetrics {
+        id: nonAnimPlaceholder
 
         text: {
             if (root.pam.passwd.active)
                 return qsTr("Loading...");
             if (root.pam.state === "max")
-                return qsTr("You have reached the maximum number of tries");
+                return qsTr("Max tries reached");
             return qsTr("Enter your password");
         }
+        font: placeholder.font
+    }
+
+    StyledText {
+        id: placeholder
+
+        anchors.centerIn: parent
+        anchors.verticalCenterOffset: 1
+
+        text: nonAnimPlaceholder.text
 
         animate: true
         color: root.pam.passwd.active ? Colours.palette.m3secondary : Colours.palette.m3outline
-        font: Tokens.font.mono.medium
+        font: Tokens.font.body.builders.medium.scale(root.centerScale).width(110).build()
 
         opacity: root.buffer ? 0 : 1
 
@@ -60,7 +79,12 @@ Item {
     ListView {
         id: charList
 
-        readonly property int fullWidth: count * (implicitHeight + spacing) - spacing
+        readonly property int fullWidth: {
+            let w = (count - 1) * spacing;
+            for (let i = 0; i < count; i++)
+                w += ((itemAtIndex(i) as CharItem)?.nonAnimWidthScale ?? 1) * implicitHeight;
+            return w + implicitHeight; // Extra padding at ends
+        }
 
         function bindImWidth(): void {
             imWidthBehavior.enabled = false;
@@ -82,68 +106,129 @@ Item {
             values: root.buffer.split("")
         }
 
-        delegate: StyledRect {
-            id: ch
+        delegate: CharItem {}
+
+        Behavior on implicitWidth {
+            id: imWidthBehavior
+
+            Anim {}
+        }
+    }
+
+    component CharItem: Item {
+        id: char
+
+        required property int index
+        property real nonAnimWidthScale: 1
+
+        implicitHeight: charList.implicitHeight
+
+        ListView.onRemove: {
+            initAnim.stop();
+            removeAnim.start();
+        }
 
-            implicitWidth: implicitHeight
-            implicitHeight: charList.implicitHeight
+        MaterialShape {
+            id: charShape
 
+            anchors.centerIn: parent
+            implicitSize: charList.implicitHeight * 1.5
+            shape: root.shapeQueue[char.index % root.shapeQueue.length] ?? MaterialShape.Circle
             color: Colours.palette.m3onSurface
-            radius: Tokens.rounding.medium / 2
 
-            opacity: 0
-            scale: 0
-            Component.onCompleted: {
-                opacity = 1;
-                scale = 1;
+            Behavior on color {
+                CAnim {}
+            }
+
+            SequentialAnimation {
+                id: initAnim
+
+                running: true
+
+                ParallelAnimation {
+                    Anim {
+                        target: charShape
+                        property: "opacity"
+                        from: 0
+                        to: 1
+                        type: Anim.DefaultEffects
+                    }
+                    Anim {
+                        target: charShape
+                        property: "scale"
+                        from: 0
+                        to: 1
+                        type: Anim.FastSpatial
+                    }
+                    Anim {
+                        target: char
+                        property: "implicitWidth"
+                        from: charList.implicitHeight
+                        to: charList.implicitHeight * 1.3
+                        type: Anim.DefaultEffects
+                    }
+                    PropertyAction {
+                        target: char
+                        property: "nonAnimWidthScale"
+                        value: 1.5
+                    }
+                }
+                PauseAnimation {
+                    duration: 180 * Tokens.anim.durations.scale
+                }
+                PropertyAction {
+                    target: charShape
+                    property: "shape"
+                    value: MaterialShape.Circle
+                }
+                ParallelAnimation {
+                    Anim {
+                        target: charShape
+                        property: "scale"
+                        to: 2 / 3
+                        type: Anim.FastSpatial
+                    }
+                    Anim {
+                        target: char
+                        property: "implicitWidth"
+                        to: charList.implicitHeight
+                        type: Anim.DefaultEffects
+                    }
+                    PropertyAction {
+                        target: char
+                        property: "nonAnimWidthScale"
+                        value: 1
+                    }
+                }
             }
-            ListView.onRemove: removeAnim.start()
 
             SequentialAnimation {
                 id: removeAnim
 
                 PropertyAction {
-                    target: ch
+                    target: char
                     property: "ListView.delayRemove"
                     value: true
                 }
                 ParallelAnimation {
                     Anim {
                         type: Anim.DefaultEffects
-                        target: ch
+                        target: charShape
                         property: "opacity"
                         to: 0
                     }
                     Anim {
-                        target: ch
+                        target: charShape
                         property: "scale"
                         to: 0.5
                     }
                 }
                 PropertyAction {
-                    target: ch
+                    target: char
                     property: "ListView.delayRemove"
                     value: false
                 }
             }
-
-            Behavior on opacity {
-                Anim {
-                    type: Anim.DefaultEffects
-                }
-            }
-
-            Behavior on scale {
-                Anim {
-                    type: Anim.FastSpatial
-                }
-            }
-        }
-
-        Behavior on implicitWidth {
-            id: imWidthBehavior
-
-            Anim {}
         }
     }
 }