quickshell: meet ear curve tapers with inset bar strip and extended side borders

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
rope 2026-06-11 19:28:02 +01:00
parent 4f2053b584
commit fd8a52cee8

View file

@ -469,8 +469,11 @@ in
// Bar bottom border left segment (up to gap) // Bar bottom border left segment (up to gap)
Rectangle { Rectangle {
id: barBorderLeft id: barBorderLeft
x: 0; y: 30 // Inset (inside the bar) so it lines up with the inset ear
width: bar.hasGap ? bar.gapLeft : bar.width // and dropdown borders; overlaps 8px into the gap to meet
// the ear curve's tapered start.
x: 0; y: 30 - Theme.borderWidth
width: bar.hasGap ? bar.gapLeft + 8 : bar.width
height: Theme.borderWidth height: Theme.borderWidth
color: Theme.base03 color: Theme.base03
} }
@ -479,8 +482,8 @@ in
Rectangle { Rectangle {
id: barBorderRight id: barBorderRight
visible: bar.hasGap && !bar.gapAlignRight visible: bar.hasGap && !bar.gapAlignRight
x: bar.gapRight x: bar.gapRight - 8
y: 30 y: 30 - Theme.borderWidth
width: bar.width - x width: bar.width - x
height: Theme.borderWidth height: Theme.borderWidth
color: Theme.base03 color: Theme.base03
@ -1135,8 +1138,9 @@ in
ctx.strokeStyle = Theme.base03; ctx.strokeStyle = Theme.base03;
ctx.lineWidth = b; ctx.lineWidth = b;
ctx.beginPath(); ctx.beginPath();
// Start below the top ear, go down left side // Start just under the bar the ear band tapers
ctx.moveTo(o, r); // through the first few px and this fills behind it
ctx.moveTo(o, b);
ctx.lineTo(o, h - r); ctx.lineTo(o, h - r);
// Bottom-left curve arc centered on the corner circle so // Bottom-left curve arc centered on the corner circle so
// the stroke's outer edge matches the bg corner exactly // the stroke's outer edge matches the bg corner exactly
@ -1149,8 +1153,8 @@ in
ctx.lineTo(w - r - o, h - o); ctx.lineTo(w - r - o, h - o);
// Bottom-right curve // Bottom-right curve
ctx.arc(w - r, h - r, r - o, Math.PI / 2, 0, true); ctx.arc(w - r, h - r, r - o, Math.PI / 2, 0, true);
// Right side up (stop at ear height) // Right side up to just under the bar
ctx.lineTo(w - o, r); ctx.lineTo(w - o, b);
} }
ctx.stroke(); ctx.stroke();
} }
@ -2435,12 +2439,12 @@ in
ctx.strokeStyle = Theme.base03; ctx.strokeStyle = Theme.base03;
ctx.lineWidth = b; ctx.lineWidth = b;
ctx.beginPath(); ctx.beginPath();
ctx.moveTo(o, r); ctx.moveTo(o, b);
ctx.lineTo(o, h - r); ctx.lineTo(o, h - r);
ctx.arc(r, h - r, r - o, Math.PI, Math.PI / 2, true); ctx.arc(r, h - r, r - o, Math.PI, Math.PI / 2, true);
ctx.lineTo(w - r - o, h - o); ctx.lineTo(w - r - o, h - o);
ctx.arc(w - r, h - r, r - o, Math.PI / 2, 0, true); ctx.arc(w - r, h - r, r - o, Math.PI / 2, 0, true);
ctx.lineTo(w - o, r); ctx.lineTo(w - o, b);
ctx.stroke(); ctx.stroke();
} }
onWidthChanged: requestPaint() onWidthChanged: requestPaint()