Rect: use IRect with color animation

8 files changed, 27 insertions, 14 deletions

diff --git a/bar/ActiveWindow.qml b/bar/ActiveWindow.qml
index dff75be..c5cd117 100644
--- a/bar/ActiveWindow.qml
+++ b/bar/ActiveWindow.qml
@@ -7,7 +7,7 @@ import qs.components
 import qs.config
 
 // TODO use a item wrapping loader for opacity Behavior
-Rectangle {
+IRect {
     id: root
     // hyprland toplevel isn't shown immediately...
     property var toplevel: ToplevelManager.activeToplevel
@@ -15,7 +15,6 @@ Rectangle {
 
     property var activated: toplevel?.activated || false
 
-    // use IRect
     implicitWidth: activated ? rowLayout.implicitWidth + General.rectMargin * 4 : 0
     implicitHeight: rowLayout.implicitHeight + General.rectMargin * 2
     anchors.centerIn: parent
diff --git a/bar/Bar.qml b/bar/Bar.qml
index 4dac781..87ab667 100644
--- a/bar/Bar.qml
+++ b/bar/Bar.qml
@@ -21,7 +21,7 @@ Scope {
             }
             implicitHeight: child.implicitHeight + Bar.topMargin * 2
 
-            Rectangle {
+            IRect {
                 id: child
                 radius: Bar.borderRadius
                 implicitHeight: Bar.height
@@ -39,12 +39,19 @@ Scope {
 
                 color: "transparent"
 
-                Rectangle {
+                IRect {
                     anchors.left: parent.left
                     width: leftRow.width + leftRow.anchors.leftMargin - leftSpacer.width
                     height: leftRow.height
                     color: Qt.rgba(WallustColors.background.r, WallustColors.background.g, WallustColors.background.b, Bar.bgTransparency)
                     radius: Bar.moduleRadius
+
+                    Behavior on color {
+                        ColorAnimation {
+                            duration: General.animationDuration
+                            easing.type: Easing.InOutQuad
+                        }
+                    }
                 }
 
                 RowLayout {
@@ -81,12 +88,19 @@ Scope {
                     }
                 }
 
-                Rectangle {
+                IRect {
                     anchors.right: parent.right
                     width: rightRow.width + rightRow.anchors.rightMargin - rightSpacer.width
                     height: rightRow.height
                     color: Qt.rgba(WallustColors.background.r, WallustColors.background.g, WallustColors.background.b, Bar.bgTransparency)
                     radius: Bar.moduleRadius
+
+                    Behavior on color {
+                        ColorAnimation {
+                            duration: General.animationDuration
+                            easing.type: Easing.InOutQuad
+                        }
+                    }
                 }
 
                 RowLayout {
diff --git a/bar/Mpris.qml b/bar/Mpris.qml
index aa4ef3f..3f388b4 100644
--- a/bar/Mpris.qml
+++ b/bar/Mpris.qml
@@ -33,7 +33,7 @@ Item {
     height: Bar.height + General.rectMargin / 1.5
     opacity: activePlayer ? 1 : 0
 
-    Rectangle {
+    IRect {
         id: rect
         anchors.verticalCenter: parent.verticalCenter
         implicitWidth: layout.width + General.rectMargin * 4
@@ -50,13 +50,13 @@ Item {
             from: 0
             to: activePlayer?.length || 0
             value: activePlayer?.position || 0
-            background: Rectangle {
+            background: IRect {
                 anchors.fill: parent
                 color: WallustColors.color4
                 radius: Style.rounding.smaller
             }
             contentItem: Item {
-                Rectangle {
+                IRect {
                     width: pBar.visualPosition * parent.width
                     height: parent.height
                     color: Qt.rgba(WallustColors.color12.r, WallustColors.color12.g, WallustColors.color12.b, WallustColors.color4.a * 2)
diff --git a/bar/Network.qml b/bar/Network.qml
index af6c58e..f4178f2 100644
--- a/bar/Network.qml
+++ b/bar/Network.qml
@@ -20,7 +20,7 @@ Item {
     implicitWidth: container.implicitWidth
     implicitHeight: container.implicitHeight - General.rectMargin
 
-    Rectangle {
+    IRect {
         id: container
         anchors {
             fill: parent
diff --git a/bar/Power.qml b/bar/Power.qml
index fc79d32..089fb0e 100644
--- a/bar/Power.qml
+++ b/bar/Power.qml
@@ -15,7 +15,7 @@ Item {
 
     property bool collapsed: true
 
-    Rectangle {
+    IRect {
         id: container
 
         anchors {
diff --git a/bar/Resources.qml b/bar/Resources.qml
index 607c704..548698f 100644
--- a/bar/Resources.qml
+++ b/bar/Resources.qml
@@ -9,7 +9,7 @@ Item {
     implicitWidth: container.implicitWidth
     implicitHeight: container.implicitHeight
 
-    Rectangle {
+    IRect {
         id: container
         implicitWidth: layout.implicitWidth + Config.General.rectMargin * 2
         implicitHeight: Config.Bar.height - Config.General.rectMargin
diff --git a/bar/TimeDate.qml b/bar/TimeDate.qml
index cb01823..ede12ee 100644
--- a/bar/TimeDate.qml
+++ b/bar/TimeDate.qml
@@ -13,7 +13,7 @@ Item {
 
     implicitWidth: container.implicitWidth
     implicitHeight: container.implicitHeight - General.rectMargin
-    Rectangle {
+    IRect {
         id: container
         anchors {
             fill: parent
diff --git a/bar/Workspace.qml b/bar/Workspace.qml
index e62910e..22fef12 100644
--- a/bar/Workspace.qml
+++ b/bar/Workspace.qml
@@ -53,7 +53,7 @@ Item {
             }
         }
     }
-    Rectangle {
+    IRect {
         id: activeRect
         x: activeRectX
         anchors.verticalCenter: layout.verticalCenter
@@ -89,7 +89,7 @@ Item {
             id: repeater
             model: Bar.workspaces
 
-            Rectangle {
+            IRect {
                 property var st: getWorkspaceStats(index)
                 property bool active: st?.isActive || false