waffles: notif center: calendar header and focus

dots/.config/quickshell/ii/modules/waffle/looks/BodyRectangle.qml

@@ -0,0 +1,14 @@
+import QtQuick
+import QtQuick.Layouts
+import Quickshell
+import qs
+import qs.services
+import qs.modules.common
+import qs.modules.common.functions
+import qs.modules.waffle.looks
+
+Rectangle {
+    Layout.fillHeight: true
+    Layout.fillWidth: true
+    color: Looks.colors.bgPanelBody
+}

dots/.config/quickshell/ii/modules/waffle/looks/FooterMoreButton.qml

@@ -0,0 +1,23 @@
+pragma ComponentBehavior: Bound
+import QtQuick
+import qs.modules.waffle.looks
+
+WButton {
+    id: root
+    implicitHeight: 40
+    implicitWidth: contentItem.implicitWidth + 30
+    color: "transparent"
+
+    contentItem: Item {
+        id: contentItem
+        anchors.centerIn: parent
+        implicitWidth: buttonText.implicitWidth
+
+        WText {
+            id: buttonText
+            anchors.centerIn: parent
+            color: root.pressed ? Looks.colors.fg : Looks.colors.fg1
+            text: root.text
+        }
+    }
+}

dots/.config/quickshell/ii/modules/waffle/looks/FooterRectangle.qml

@@ -0,0 +1,17 @@
+import QtQuick
+import QtQuick.Layouts
+import Quickshell
+import qs
+import qs.services
+import qs.modules.common
+import qs.modules.common.functions
+import qs.modules.waffle.looks
+
+Rectangle {
+    Layout.fillHeight: false
+    Layout.fillWidth: true
+    color: "transparent"
+
+    implicitWidth: 358
+    implicitHeight: 47
+}

dots/.config/quickshell/ii/modules/waffle/looks/Looks.qml

@@ -20,7 +20,7 @@ Singleton {
     property real backgroundTransparency: 0.13
     property real panelBackgroundTransparency: 0.12
     property real panelLayerTransparency: root.dark ? 0.9 : 0.7
-    property real contentTransparency: root.dark ? 0.9 : 0.5
+    property real contentTransparency: root.dark ? 0.87 : 0.5
     function applyBackgroundTransparency(col) {
         return ColorUtils.applyAlpha(col, 1 - root.backgroundTransparency)
     }
@@ -41,8 +41,8 @@ Singleton {
         property color bg1Border: '#d7d7d7'
         property color bg2: "#FBFBFB"
         property color bg2Base: "#FBFBFB"
-        property color bg2Hover: "#FDFDFD"
-        property color bg2Active: "#FDFDFD"
+        property color bg2Hover: '#ffffff'
+        property color bg2Active: '#eeeeee'
         property color bg2Border: '#cdcdcd'
         property color subfg: "#5C5C5C"
         property color fg: "#000000"

dots/.config/quickshell/ii/modules/waffle/looks/WBarAttachedPanelContent.qml

@@ -1,3 +1,4 @@
+pragma ComponentBehavior: Bound
 import QtQuick
 import QtQuick.Layouts
 import Qt5Compat.GraphicalEffects
@@ -10,11 +11,13 @@ import qs.modules.waffle.looks
 Item {
     id: root
 
-    signal closed()
+    signal closed
 
     required property Item contentItem
     property real visualMargin: 12
     property int closeAnimDuration: 150
+    property bool revealFromSides: false
+    property bool revealFromLeft: true
 
     function close() {
         closeAnim.start();
@@ -25,16 +28,25 @@ Item {
     implicitHeight: contentItem.implicitHeight + visualMargin * 2
     implicitWidth: contentItem.implicitWidth + visualMargin * 2
 
+    focus: true
+    Keys.onPressed: event => { // Esc to close
+        if (event.key === Qt.Key_Escape) {
+            content.close();
+        }
+    }
+
     Item {
         id: panelContent
         anchors {
-            left: parent.left
-            right: parent.right
-            top: root.barAtBottom ? undefined : parent.top
-            bottom: root.barAtBottom ? parent.bottom : undefined
+            left: (root.revealFromSides && !root.revealFromLeft) ? undefined : parent.left
+            right: (root.revealFromSides && root.revealFromLeft) ? undefined : parent.right
+            top: (!root.revealFromSides && root.barAtBottom) ? undefined : parent.top
+            bottom: (!root.revealFromSides && !root.barAtBottom) ? undefined : parent.bottom
             // Opening anim
-            bottomMargin: root.barAtBottom ? sourceEdgeMargin : root.visualMargin
-            topMargin: root.barAtBottom ? root.visualMargin : sourceEdgeMargin
+            bottomMargin: (!root.revealFromSides && root.barAtBottom) ? sourceEdgeMargin : root.visualMargin
+            topMargin: (!root.revealFromSides && !root.barAtBottom) ? sourceEdgeMargin : root.visualMargin
+            leftMargin: (root.revealFromSides && root.revealFromLeft) ? sideEdgeMargin : root.visualMargin
+            rightMargin: (root.revealFromSides && !root.revealFromLeft) ? sideEdgeMargin : root.visualMargin
         }
 
         Component.onCompleted: {
@@ -42,24 +54,22 @@ Item {
         }
 
         property real sourceEdgeMargin: -(implicitHeight + root.visualMargin)
-        PropertyAnimation {
+        property real sideEdgeMargin: -(implicitWidth + root.visualMargin)
+        OpenAnim {
             id: openAnim
-            target: panelContent
-            property: "sourceEdgeMargin"
-            to: root.visualMargin
-            duration: 200
-            easing.type: Easing.BezierSpline
-            easing.bezierCurve: Looks.transition.easing.bezierCurve.easeIn
+            properties: "sourceEdgeMargin, sideEdgeMargin"
         }
         SequentialAnimation {
             id: closeAnim
-            PropertyAnimation {
-                target: panelContent
-                property: "sourceEdgeMargin"
-                to: -(implicitHeight + root.visualMargin)
-                duration: root.closeAnimDuration
-                easing.type: Easing.BezierSpline
-                easing.bezierCurve: Looks.transition.easing.bezierCurve.easeOut
+            ParallelAnimation {
+                CloseAnim {
+                    property: "sourceEdgeMargin"
+                    to: -(implicitHeight + root.visualMargin)
+                }
+                CloseAnim {
+                    property: "sideEdgeMargin"
+                    to: -(implicitWidth + root.visualMargin)
+                }
             }
             ScriptAction {
                 script: {
@@ -70,5 +80,19 @@ Item {
         implicitWidth: root.contentItem.implicitWidth
         implicitHeight: root.contentItem.implicitHeight
         children: [root.contentItem]
-    }    
+    }
+
+    component OpenAnim: PropertyAnimation {
+        target: panelContent
+        to: root.visualMargin
+        duration: 200
+        easing.type: Easing.BezierSpline
+        easing.bezierCurve: Looks.transition.easing.bezierCurve.easeIn
+    }
+    component CloseAnim: PropertyAnimation {
+        target: panelContent
+        duration: root.closeAnimDuration
+        easing.type: Easing.BezierSpline
+        easing.bezierCurve: Looks.transition.easing.bezierCurve.easeOut
+    }
 }

dots/.config/quickshell/ii/modules/waffle/looks/WBorderedButton.qml

@@ -0,0 +1,18 @@
+import QtQuick
+import QtQuick.Controls
+import Quickshell
+import qs.modules.common
+import qs.modules.common.functions
+import qs.modules.waffle.looks
+
+WButton {
+    id: root
+
+    colBackground: Looks.colors.bg2
+    colBackgroundHover: Looks.colors.bg2Hover
+    colBackgroundActive: Looks.colors.bg2Active
+    border.color: Looks.colors.bg2Border
+    border.width: root.pressed ? 2 : 1
+
+    
+}

dots/.config/quickshell/ii/modules/waffle/looks/WPane.qml

@@ -15,8 +15,8 @@ Item {
     property alias border: borderRect
     property alias borderColor: borderRect.border.color
 
-    implicitWidth: contentItem.implicitWidth
-    implicitHeight: contentItem.implicitHeight
+    implicitWidth: borderRect.implicitWidth
+    implicitHeight: borderRect.implicitHeight
 
     WRectangularShadow {
         target: borderRect

dots/.config/quickshell/ii/modules/waffle/looks/WPanelPageColumn.qml

@@ -0,0 +1,6 @@
+import QtQuick
+import QtQuick.Layouts
+
+ColumnLayout {
+    spacing: 0
+}

dots/.config/quickshell/ii/modules/waffle/looks/WPanelSeparator.qml

@@ -0,0 +1,10 @@
+import QtQuick
+import QtQuick.Layouts
+import qs.modules.waffle.looks
+
+Rectangle {
+    Layout.fillHeight: false
+    Layout.fillWidth: true
+    color: Looks.colors.bgPanelSeparator
+    implicitHeight: 1
+}