init waffles

2025-11-10 20:45:38 +01:00
parent f98c422254
commit 58980959aa
18 changed files with 463 additions and 14 deletions
@@ -0,0 +1,78 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import qs.modules.common
+import qs.modules.common.functions
+import qs.modules.waffle.looks
+
+Button {
+    id: root
+
+    Layout.fillHeight: true
+    topInset: 4
+    bottomInset: 4
+    
+    property color borderColor: ColorUtils.transparentize(Looks.colors.bg1Border, (root.hovered && !root.down) ? Looks.fluentContentTransparency : 1)
+    Behavior on borderColor {
+        animation: Looks.transition.color.createObject(this)
+    }
+    onBorderColorChanged: {
+        borderCanvas.requestPaint();
+    }
+
+    background: Rectangle {
+        id: background
+        color: {
+            if (root.down) {
+                return Looks.colors.bg1Active
+            } else if (root.hovered) {
+                return Looks.colors.bg1Hover
+            } else {
+                return ColorUtils.transparentize(Looks.colors.bg1)
+            }
+        }
+        radius: Looks.radius.medium
+        Behavior on color {
+            animation: Looks.transition.color.createObject(this)
+        }
+        
+        // Top 1px border with color 
+        Canvas {
+            id: borderCanvas
+            anchors.fill: parent
+            onPaint: {
+                var ctx = getContext("2d");
+                ctx.clearRect(0, 0, width, height);
+
+                var borderColor = root.borderColor;
+
+                var r = background.radius;
+                var fadeLength = Math.max(1, r);
+                var fadeLengthPercent = fadeLength / width;
+
+                // Compute normalized stops
+                var leftFadeStop = fadeLengthPercent;
+                var rightFadeStop = 1 - fadeLengthPercent;
+
+                var grad = ctx.createLinearGradient(0, 0, width, 0);
+                grad.addColorStop(0, Qt.rgba(borderColor.r, borderColor.g, borderColor.b, 0));
+                grad.addColorStop(leftFadeStop, borderColor);
+                grad.addColorStop(rightFadeStop, borderColor);
+                grad.addColorStop(1, Qt.rgba(borderColor.r, borderColor.g, borderColor.b, 0));
+
+                ctx.strokeStyle = grad;
+                ctx.lineWidth = 1;
+
+                ctx.beginPath();
+                ctx.moveTo(r, 0.5);
+                ctx.lineTo(width - r, 0.5);
+                // Top-right curve
+                ctx.arcTo(width, 0.5, width, r + 0.5, r);
+                // Top-left curve
+                ctx.moveTo(width - r, 0.5);
+                ctx.arcTo(0, 0.5, 0, r + 0.5, r);
+                ctx.stroke();
+            }
+        }
+    }
+}