rope/nixos
1
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

quickshell: wrap concave corners in clipping Items

Browse source 
Canvas at fixed 8x8 inside a clip Item that grows with
calContent.height — corners reveal progressively with the
slide animation instead of breaking on dynamic resize.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
rope 2026-05-26 15:08:11 +01:00
parent 36b02fb888
commit 3d79c226ed
1 changed files with 37 additions and 33 deletions
Download patch file Download diff file Expand all files Collapse all files

70
settings/hyprland.nix
View file

@ -856,53 +856,57 @@ in
} }
// Concave corner — left // Concave corner — left
Canvas { Item {
id: cornerLeft
anchors.right: calContent.left anchors.right: calContent.left
anchors.top: parent.top anchors.top: parent.top
width: 8 width: 8
height: Math.min(8, calContent.height) height: Math.min(8, calContent.height)
visible: calContent.height > 0
clip: true clip: true
onPaint: { visible: calContent.height > 0
var ctx = getContext("2d"); Canvas {
var r = width; anchors.top: parent.top
ctx.clearRect(0, 0, width, height); width: 8
ctx.fillStyle = "#D1${c.base00}"; height: 8
// Concave: filled at top+right, empty curve at bottom-left onPaint: {
// Arc centered at bottom-left (0, r) var ctx = getContext("2d");
ctx.beginPath(); var r = 8;
ctx.moveTo(0, 0); ctx.clearRect(0, 0, r, r);
ctx.lineTo(r, 0); ctx.fillStyle = "#D1${c.base00}";
ctx.lineTo(r, r); ctx.beginPath();
ctx.arc(0, r, r, 0, -Math.PI / 2, true); ctx.moveTo(0, 0);
ctx.closePath(); ctx.lineTo(r, 0);
ctx.fill(); ctx.lineTo(r, r);
ctx.arc(0, r, r, 0, -Math.PI / 2, true);
ctx.closePath();
ctx.fill();
}
} }
} }
// Concave corner — right // Concave corner — right
Canvas { Item {
id: cornerRight
anchors.left: calContent.right anchors.left: calContent.right
anchors.top: parent.top anchors.top: parent.top
width: 8 width: 8
height: Math.min(8, calContent.height) height: Math.min(8, calContent.height)
visible: calContent.height > 0
clip: true clip: true
onPaint: { visible: calContent.height > 0
var ctx = getContext("2d"); Canvas {
var r = width; anchors.top: parent.top
ctx.clearRect(0, 0, width, height); width: 8
ctx.fillStyle = "#D1${c.base00}"; height: 8
// Concave: filled at top+left, empty curve at bottom-right onPaint: {
// Arc centered at bottom-right (r, r) var ctx = getContext("2d");
ctx.beginPath(); var r = 8;
ctx.moveTo(0, 0); ctx.clearRect(0, 0, r, r);
ctx.lineTo(r, 0); ctx.fillStyle = "#D1${c.base00}";
ctx.arc(r, r, r, -Math.PI / 2, Math.PI, true); ctx.beginPath();
ctx.closePath(); ctx.moveTo(0, 0);
ctx.fill(); ctx.lineTo(r, 0);
ctx.arc(r, r, r, -Math.PI / 2, Math.PI, true);
ctx.closePath();
ctx.fill();
}
} }
} }