notification changes

2026-02-04 14:11:30 +01:00
parent 29606e363a
commit 76e008007e
57 changed files with 4537 additions and 202 deletions
@@ -0,0 +1,246 @@
+pragma ComponentBehavior: Bound
+
+import qs.Components
+import qs.Config
+import qs.Helpers
+import qs.Modules
+import Quickshell
+import Quickshell.Widgets
+import QtQuick
+import QtQuick.Controls
+
+Item {
+    id: root
+
+    required property real nonAnimWidth
+    required property PersistentProperties state
+    readonly property alias count: bar.count
+
+    implicitHeight: bar.implicitHeight + indicator.implicitHeight + indicator.anchors.topMargin + separator.implicitHeight
+
+    TabBar {
+        id: bar
+
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.top: parent.top
+
+        currentIndex: root.state.currentTab
+        background: null
+
+        onCurrentIndexChanged: root.state.currentTab = currentIndex
+
+        Tab {
+            iconName: "dashboard"
+            text: qsTr("Dashboard")
+        }
+
+        Tab {
+            iconName: "queue_music"
+            text: qsTr("Media")
+        }
+
+        Tab {
+            iconName: "speed"
+            text: qsTr("Performance")
+        }
+
+        Tab {
+            iconName: "cloud"
+            text: qsTr("Weather")
+        }
+
+        // Tab {
+        //     iconName: "workspaces"
+        //     text: qsTr("Workspaces")
+        // }
+    }
+
+    Item {
+        id: indicator
+
+        anchors.top: bar.bottom
+
+        implicitWidth: bar.currentItem.implicitWidth
+        implicitHeight: 40
+
+        x: {
+            const tab = bar.currentItem;
+            const width = (root.nonAnimWidth - bar.spacing * (bar.count - 1)) / bar.count;
+            return width * tab.TabBar.index + (width - tab.implicitWidth) / 2;
+        }
+
+        clip: true
+
+        CustomRect {
+            anchors.top: parent.top
+            anchors.left: parent.left
+            anchors.right: parent.right
+            implicitHeight: parent.implicitHeight * 2
+
+            color: DynamicColors.palette.m3primary
+            radius: 1000
+        }
+
+        Behavior on x {
+            Anim {}
+        }
+
+        Behavior on implicitWidth {
+            Anim {}
+        }
+    }
+
+    CustomRect {
+        id: separator
+
+        anchors.top: indicator.bottom
+        anchors.left: parent.left
+        anchors.right: parent.right
+
+        implicitHeight: 1
+        color: DynamicColors.palette.m3outlineVariant
+    }
+
+    component Tab: TabButton {
+        id: tab
+
+        required property string iconName
+        readonly property bool current: TabBar.tabBar.currentItem === this
+
+        background: null
+
+        contentItem: CustomMouseArea {
+            id: mouse
+
+            implicitWidth: Math.max(icon.width, label.width)
+            implicitHeight: icon.height + label.height
+
+            cursorShape: Qt.PointingHandCursor
+
+            onPressed: event => {
+                root.state.currentTab = tab.TabBar.index;
+
+                const stateY = stateWrapper.y;
+                rippleAnim.x = event.x;
+                rippleAnim.y = event.y - stateY;
+
+                const dist = (ox, oy) => ox * ox + oy * oy;
+                rippleAnim.radius = Math.sqrt(Math.max(dist(event.x, event.y + stateY), dist(event.x, stateWrapper.height - event.y), dist(width - event.x, event.y + stateY), dist(width - event.x, stateWrapper.height - event.y)));
+
+                rippleAnim.restart();
+            }
+
+            function onWheel(event: WheelEvent): void {
+                if (event.angleDelta.y < 0)
+                    root.state.currentTab = Math.min(root.state.currentTab + 1, bar.count - 1);
+                else if (event.angleDelta.y > 0)
+                    root.state.currentTab = Math.max(root.state.currentTab - 1, 0);
+            }
+
+            SequentialAnimation {
+                id: rippleAnim
+
+                property real x
+                property real y
+                property real radius
+
+                PropertyAction {
+                    target: ripple
+                    property: "x"
+                    value: rippleAnim.x
+                }
+                PropertyAction {
+                    target: ripple
+                    property: "y"
+                    value: rippleAnim.y
+                }
+                PropertyAction {
+                    target: ripple
+                    property: "opacity"
+                    value: 0.08
+                }
+                Anim {
+                    target: ripple
+                    properties: "implicitWidth,implicitHeight"
+                    from: 0
+                    to: rippleAnim.radius * 2
+					duration: MaterialEasing.expressiveEffectsTime
+                    easing.bezierCurve: MaterialEasing.expressiveEffects
+                }
+                Anim {
+                    target: ripple
+                    property: "opacity"
+                    to: 0
+                    easing.type: Easing.BezierSpline
+					duration: MaterialEasing.expressiveEffectsTime
+                    easing.bezierCurve: MaterialEasing.expressiveEffects
+                }
+            }
+
+            ClippingRectangle {
+                id: stateWrapper
+
+                anchors.left: parent.left
+                anchors.right: parent.right
+                anchors.verticalCenter: parent.verticalCenter
+                implicitHeight: parent.height + 8 * 2
+
+                color: "transparent"
+                radius: 8
+
+                CustomRect {
+                    id: stateLayer
+
+                    anchors.fill: parent
+
+                    color: tab.current ? DynamicColors.palette.m3primary : DynamicColors.palette.m3onSurface
+                    opacity: mouse.pressed ? 0.1 : tab.hovered ? 0.08 : 0
+
+                    Behavior on opacity {
+                        Anim {}
+                    }
+                }
+
+                CustomRect {
+                    id: ripple
+
+                    radius: 1000
+                    color: tab.current ? DynamicColors.palette.m3primary : DynamicColors.palette.m3onSurface
+                    opacity: 0
+
+                    transform: Translate {
+                        x: -ripple.width / 2
+                        y: -ripple.height / 2
+                    }
+                }
+            }
+
+            MaterialIcon {
+                id: icon
+
+                anchors.horizontalCenter: parent.horizontalCenter
+                anchors.bottom: label.top
+
+                text: tab.iconName
+                color: tab.current ? DynamicColors.palette.m3primary : DynamicColors.palette.m3onSurfaceVariant
+                fill: tab.current ? 1 : 0
+                font.pointSize: 18
+
+                Behavior on fill {
+                    Anim {}
+                }
+            }
+
+            CustomText {
+                id: label
+
+                anchors.horizontalCenter: parent.horizontalCenter
+                anchors.bottom: parent.bottom
+
+                text: tab.text
+                color: tab.current ? DynamicColors.palette.m3primary : DynamicColors.palette.m3onSurfaceVariant
+            }
+        }
+    }
+}