quickshell: fix border timing, add rounded corner outlines

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
rope 2026-05-27 15:58:46 +01:00
parent 17b85a13bb
commit 8843bfc830

View file

@ -656,7 +656,7 @@ in
id: barBorderLeft id: barBorderLeft
x: 0; y: 30 x: 0; y: 30
width: { width: {
if (!activeDropdown || !activeDropdown.visible) return bar.width; if (!activeDropdown || activeDropdown.dropdownHeight <= 0) return bar.width;
if (activeDropdown.alignRight) if (activeDropdown.alignRight)
return activeDropdown.x + activeDropdown.width - activeDropdown.fullWidth - 8; return activeDropdown.x + activeDropdown.width - activeDropdown.fullWidth - 8;
return activeDropdown.x + 8; return activeDropdown.x + 8;
@ -668,7 +668,7 @@ in
// Bar bottom border right segment (after dropdown gap) // Bar bottom border right segment (after dropdown gap)
Rectangle { Rectangle {
id: barBorderRight id: barBorderRight
visible: activeDropdown && activeDropdown.visible && !activeDropdown.alignRight visible: activeDropdown && activeDropdown.dropdownHeight > 0 && !activeDropdown.alignRight
x: activeDropdown ? activeDropdown.x + 8 + activeDropdown.fullWidth : 0 x: activeDropdown ? activeDropdown.x + 8 + activeDropdown.fullWidth : 0
y: 30 y: 30
width: activeDropdown ? bar.width - x : 0 width: activeDropdown ? bar.width - x : 0
@ -1217,6 +1217,7 @@ in
property real fullHeight: 200 property real fullHeight: 200
property int autoCloseMs: 1500 property int autoCloseMs: 1500
property bool alignRight: false property bool alignRight: false
property real dropdownHeight: _dropdownRect.height
default property alias content: dropdownContent.data default property alias content: dropdownContent.data
function animateClose() { function animateClose() {
@ -1343,36 +1344,38 @@ in
bottomRightRadius: dropdown.alignRight ? 0 : 8 bottomRightRadius: dropdown.alignRight ? 0 : 8
clip: true clip: true
// Left border // Border outline (sides + bottom with rounded corners)
Rectangle { Canvas {
anchors.left: parent.left id: _dropdownBorder
anchors.top: parent.top anchors.fill: parent
anchors.bottom: parent.bottom onPaint: {
anchors.bottomMargin: 8 var ctx = getContext("2d");
width: 1 var w = width, h = height, r = 8;
color: Theme.base03 ctx.clearRect(0, 0, w, h);
} if (h < 1) return;
ctx.strokeStyle = Theme.base03;
// Right border (only for centered dropdowns) ctx.lineWidth = 1;
Rectangle { ctx.beginPath();
visible: !dropdown.alignRight // Start below the top ear, go down left side
anchors.right: parent.right ctx.moveTo(0.5, r);
anchors.top: parent.top ctx.lineTo(0.5, h - r);
anchors.bottom: parent.bottom // Bottom-left curve
anchors.bottomMargin: 8 ctx.arc(r + 0.5, h - r - 0.5, r, Math.PI, Math.PI / 2, true);
width: 1 // Bottom edge
color: Theme.base03 if (dropdown.alignRight) {
} ctx.lineTo(w, h - 0.5);
} else {
// Bottom border ctx.lineTo(w - r - 0.5, h - 0.5);
Rectangle { // Bottom-right curve
anchors.bottom: parent.bottom ctx.arc(w - r - 0.5, h - r - 0.5, r, Math.PI / 2, 0, true);
anchors.left: parent.left // Right side up (stop at ear height)
anchors.right: parent.right ctx.lineTo(w - 0.5, r);
anchors.leftMargin: 8 }
anchors.rightMargin: dropdown.alignRight ? 0 : 8 ctx.stroke();
height: 1 }
color: Theme.base03 // Repaint when size changes
onWidthChanged: requestPaint()
onHeightChanged: requestPaint()
} }
Behavior on height { Behavior on height {