vinzenz/nova-shell
0
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

bar: offset content below gradient, fade gradient to bar bottom

Browse source
This commit is contained in:
Damocles 2026-04-12 20:26:25 +02:00
parent c13a719145
commit 971e44aaf1
1 changed files with 24 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

31
modules/Bar.qml
View file

@ -31,7 +31,7 @@ PanelWindow {
anchors.top: parent.top anchors.top: parent.top
anchors.left: parent.left anchors.left: parent.left
anchors.right: parent.right anchors.right: parent.right
height: Math.max(M.Theme.screenRadius + 2, 4) height: parent.height
onPaint: { onPaint: {
const ctx = getContext("2d"); const ctx = getContext("2d");
@ -42,21 +42,37 @@ PanelWindow {
ctx.clearRect(0, 0, w, height); ctx.clearRect(0, 0, w, height);
// Opaque backing behind the stroke so it's not transparent // Vertical fade from stroke color into bar background
ctx.fillStyle = M.Theme.base00.toString(); const h = height;
const vGrad = ctx.createLinearGradient(0, 0, 0, h);
const hGrad = ctx.createLinearGradient(0, 0, w, 0);
hGrad.addColorStop(0, M.Theme.base0C.toString());
hGrad.addColorStop(1, M.Theme.base09.toString());
// Draw the fade: full opacity at top, transparent at bottom
ctx.globalAlpha = 0.15;
ctx.fillStyle = hGrad;
ctx.beginPath(); ctx.beginPath();
if (r > lw) { if (r > 0) {
ctx.moveTo(0, r); ctx.moveTo(0, r);
ctx.arc(r, r, r, Math.PI, -Math.PI / 2); ctx.arc(r, r, r, Math.PI, -Math.PI / 2);
ctx.lineTo(w - r, 0); ctx.lineTo(w - r, 0);
ctx.arc(w - r, r, r, -Math.PI / 2, 0); ctx.arc(w - r, r, r, -Math.PI / 2, 0);
ctx.lineTo(w, lw); ctx.lineTo(w, h);
ctx.lineTo(0, lw); ctx.lineTo(0, h);
} else { } else {
ctx.rect(0, 0, w, lw); ctx.rect(0, 0, w, h);
} }
ctx.fill(); ctx.fill();
// Fade out towards bottom
ctx.globalAlpha = 1;
const fadeGrad = ctx.createLinearGradient(0, lw, 0, h);
fadeGrad.addColorStop(0, "transparent");
fadeGrad.addColorStop(1, M.Theme.base00.toString());
ctx.fillStyle = fadeGrad;
ctx.fillRect(0, lw, w, h - lw);
// Gradient stroke // Gradient stroke
const grad = ctx.createLinearGradient(0, 0, w, 0); const grad = ctx.createLinearGradient(0, 0, w, 0);
grad.addColorStop(0, M.Theme.base0C.toString()); grad.addColorStop(0, M.Theme.base0C.toString());
@ -80,6 +96,7 @@ PanelWindow {
Item { Item {
anchors.fill: parent anchors.fill: parent
anchors.topMargin: 3
anchors.leftMargin: Math.max(M.Theme.barPadding, M.Theme.screenRadius) anchors.leftMargin: Math.max(M.Theme.barPadding, M.Theme.screenRadius)
anchors.rightMargin: Math.max(M.Theme.barPadding, M.Theme.screenRadius) anchors.rightMargin: Math.max(M.Theme.barPadding, M.Theme.screenRadius)