matt1432/nixos-configs
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(agsV2): add screen corners
All checks were successful
Discord / discord commits (push) Has been skipped
Details

Browse source
This commit is contained in:
matt1432 2024-10-12 16:48:23 -04:00
parent 9e8f4c76d6
commit 80d40d399f
3 changed files with 151 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
nixosModules/ags/v2/app.ts
View file

@ -4,6 +4,7 @@ import style from './style.scss';
import Bar from './widgets/bar/wim';
import BgFade from './widgets/bg-fade/main';
import Corners from './widgets/corners/main';
App.start({
@ -12,5 +13,6 @@ App.start({
main: () => {
Bar();
BgFade();
Corners();
},
});

68
nixosModules/ags/v2/widgets/corners/main.tsx Normal file
View file

@ -0,0 +1,68 @@
import { Astal } from 'astal';
import RoundedCorner from './screen-corners';
const TopLeft = () => (
<window
name="cornertl"
layer={Astal.Layer.OVERLAY}
exclusivity={Astal.Exclusivity.IGNORE}
anchor={
Astal.WindowAnchor.TOP | Astal.WindowAnchor.LEFT
}
clickThrough={true}
>
{RoundedCorner('topleft')}
</window>
);
const TopRight = () => (
<window
name="cornertr"
layer={Astal.Layer.OVERLAY}
exclusivity={Astal.Exclusivity.IGNORE}
anchor={
Astal.WindowAnchor.TOP | Astal.WindowAnchor.RIGHT
}
clickThrough={true}
>
{RoundedCorner('topright')}
</window>
);
const BottomLeft = () => (
<window
name="cornerbl"
layer={Astal.Layer.OVERLAY}
exclusivity={Astal.Exclusivity.IGNORE}
anchor={
Astal.WindowAnchor.BOTTOM | Astal.WindowAnchor.LEFT
}
clickThrough={true}
>
{RoundedCorner('bottomleft')}
</window>
);
const BottomRight = () => (
<window
name="cornerbr"
layer={Astal.Layer.OVERLAY}
exclusivity={Astal.Exclusivity.IGNORE}
anchor={
Astal.WindowAnchor.BOTTOM | Astal.WindowAnchor.RIGHT
}
clickThrough={true}
>
{RoundedCorner('bottomright')}
</window>
);
export default () => [
TopLeft(),
TopRight(),
BottomLeft(),
BottomRight(),
];

81
nixosModules/ags/v2/widgets/corners/screen-corners.tsx Normal file
View file

@ -0,0 +1,81 @@
import { Gtk } from 'astal';
import Cairo from 'cairo';
export default (
place = 'top left',
css = 'background-color: black;',
) => (
<box
halign={place.includes('left') ? Gtk.Align.START : Gtk.Align.END}
valign={place.includes('top') ? Gtk.Align.START : Gtk.Align.END}
css={`
padding: 1px; margin:
${place.includes('top') ? '-1px' : '0'}
${place.includes('right') ? '-1px' : '0'}
${place.includes('bottom') ? '-1px' : '0'}
${place.includes('left') ? '-1px' : '0'};
`}
>
<drawingarea
css={`
border-radius: 18px;
border-width: 0.068rem;
${css}
`}
setup={(widget) => {
const styleContext = widget.get_style_context();
let radius = styleContext.get_property('border-radius', Gtk.StateFlags.NORMAL) as number;
widget.set_size_request(radius, radius);
widget.connect('draw', (_, cairoContext: Cairo.Context) => {
const bgColor = styleContext.get_background_color(Gtk.StateFlags.NORMAL);
const borderColor = styleContext.get_color(Gtk.StateFlags.NORMAL);
const borderWidth = styleContext.get_border(Gtk.StateFlags.NORMAL).left;
radius = styleContext.get_property('border-radius', Gtk.StateFlags.NORMAL) as number;
widget.set_size_request(radius, radius);
switch (place) {
case 'topleft':
cairoContext.arc(radius, radius, radius, Math.PI, 3 * Math.PI / 2);
cairoContext.lineTo(0, 0);
break;
case 'topright':
cairoContext.arc(0, radius, radius, 3 * Math.PI / 2, 2 * Math.PI);
cairoContext.lineTo(radius, 0);
break;
case 'bottomleft':
cairoContext.arc(radius, 0, radius, Math.PI / 2, Math.PI);
cairoContext.lineTo(0, radius);
break;
case 'bottomright':
cairoContext.arc(0, 0, radius, 0, Math.PI / 2);
cairoContext.lineTo(radius, radius);
break;
}
cairoContext.closePath();
cairoContext.setSourceRGBA(bgColor.red, bgColor.green, bgColor.blue, bgColor.alpha);
cairoContext.fill();
cairoContext.setLineWidth(borderWidth);
cairoContext.setSourceRGBA(
borderColor.red,
borderColor.green,
borderColor.blue,
borderColor.alpha,
);
cairoContext.stroke();
});
}}
/>
</box>
);