waffles: add action center window

2025-11-16 23:52:07 +01:00
parent 71e0538cf5
commit 2d65af70ad
14 changed files with 321 additions and 43 deletions
@@ -17,10 +17,12 @@ Singleton {

    property real backgroundTransparency: 0.17
    property real contentTransparency: 0.25
-    property real shadowTransparency: 0.6
    colors: QtObject {
        id: colors
-        property color ambientShadow: ColorUtils.transparentize("#000000", 0.4)
+        property color ambientShadow: ColorUtils.transparentize("#000000", 0.75)
+        property color bgPanelFooter: root.dark ? "#1C1C1C" : "#EEEEEE"
+        property color bgPanelBody: root.dark ? "#242424" : "#F2F2F2"
+        property color bgPanelSeparator: root.dark ? "#191919" : "#E0E0E0"
        property color bg0: root.dark ? "#1C1C1C" : "#EEEEEE"
        property color bg0Border: root.dark ? "#404040" : "#BEBEBE"
        property color bg1: root.dark ? "#2C2C2C" : "#F7F7F7"
@@ -0,0 +1,25 @@
+pragma ComponentBehavior: Bound
+import QtQuick
+import QtQuick.Controls
+import Quickshell
+import Quickshell.Hyprland
+import qs.modules.common
+import qs.modules.common.functions
+import qs.modules.waffle.looks
+
+Rectangle {
+    id: root
+
+    required property var target
+    z: 0
+
+    anchors {
+        fill: target
+        margins: -border.width
+    }
+
+    border.color: Looks.colors.ambientShadow
+    border.width: 1
+    color: "transparent"
+    radius: target.radius + border.width
+}
@@ -0,0 +1,79 @@
+import QtQuick
+import QtQuick.Layouts
+import Quickshell
+import qs
+import qs.services
+import qs.modules.common
+import qs.modules.waffle.looks
+
+Item {
+    id: root
+
+    signal closed()
+
+    property alias border: borderRect
+    required default property Item contentItem
+    property real visualMargin: 12
+
+    function close() {
+        closeAnim.start();
+    }
+
+    readonly property bool barAtBottom: Config.options.waffles.bar.bottom
+
+    implicitHeight: borderRect.implicitHeight
+    implicitWidth: borderRect.implicitWidth
+
+    Rectangle {
+        id: borderRect
+
+        color: "transparent"
+        radius: Looks.radius.large
+        border.color: Looks.colors.bg2Border
+        border.width: 1
+        implicitWidth: contentItem.implicitWidth + border.width * 2
+        implicitHeight: contentItem.implicitHeight + border.width * 2
+        children: [root.contentItem]
+
+        anchors {
+            left: parent.left
+            right: parent.right
+            top: root.barAtBottom ? undefined : parent.top
+            bottom: root.barAtBottom ? parent.bottom : undefined
+            // Opening anim
+            bottomMargin: root.barAtBottom ? sourceEdgeMargin : 0
+            topMargin: root.barAtBottom ? 0 : sourceEdgeMargin
+        }
+
+        Component.onCompleted: {
+            openAnim.start();
+        }
+
+        property real sourceEdgeMargin: -(implicitHeight + root.visualMargin)
+        PropertyAnimation {
+            id: openAnim
+            target: borderRect
+            property: "sourceEdgeMargin"
+            to: 0
+            duration: 200
+            easing.type: Easing.BezierSpline
+            easing.bezierCurve: Looks.transition.easing.bezierCurve.easeIn
+        }
+        SequentialAnimation {
+            id: closeAnim
+            PropertyAnimation {
+                target: borderRect
+                property: "sourceEdgeMargin"
+                to: -(implicitHeight + root.visualMargin)
+                duration: 150
+                easing.type: Easing.BezierSpline
+                easing.bezierCurve: Looks.transition.easing.bezierCurve.easeOut
+            }
+            ScriptAction {
+                script: {
+                    root.closed();
+                }
+            }
+        }
+    }
+}
@@ -0,0 +1,32 @@
+import QtQuick
+import QtQuick.Controls
+import Quickshell
+import qs.modules.common
+import qs.modules.common.functions
+import qs.modules.waffle.looks
+
+Button {
+    id: root
+
+    implicitHeight: 36
+
+    property color colBackground: ColorUtils.transparentize(Looks.colors.bg1)
+    property color colBackgroundHover: Looks.colors.bg1Hover
+    property color colBackgroundActive: Looks.colors.bg1Active
+    property color color
+    property color colForeground: Looks.colors.fg
+    color: {
+        if (root.down) {
+            return root.colBackgroundActive
+        } else if ((root.hovered && !root.down) || root.checked) {
+            return root.colBackgroundHover
+        } else {
+            return root.colBackground
+        }
+    }
+
+    background: Rectangle {
+        radius: Looks.radius.medium
+        color: root.color
+    }
+}
@@ -27,17 +27,8 @@ PopupToolTip {
        implicitWidth: realContent.implicitWidth + 2 * 2
        implicitHeight: realContent.implicitHeight + 2 * 2

-        Rectangle {
-            id: ambientShadow
-            z: 0
-            anchors {
-                fill: realContent
-                margins: -border.width
-            }
-            border.color: ColorUtils.transparentize(Looks.colors.ambientShadow, Looks.shadowTransparency)
-            border.width: 1
-            color: "transparent"
-            radius: realContent.radius + border.width
+        WAmbientShadow {
+            target: realContent
        }
        
        Rectangle {