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:
parent
4f2053b584
commit
fd8a52cee8
1 changed files with 14 additions and 10 deletions
|
|
@ -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()
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue