feat(ags): add screen corners

hosts/wim/config/ags/config.js

@@ -8,6 +8,7 @@ import { Calendar }               from './js/date.js';
 import { QuickSettings }          from './js/quick-settings/main.js';
 import Overview                   from './js/overview/main.js';
 import AppLauncher                from './js/applauncher/main.js';
+import * as Corners               from './js/screen-corners.js';
 
 import { Closer, closeAll }       from './js/misc/closer.js';
 globalThis.closeAll = () => closeAll();
@@ -43,5 +44,7 @@ export default {
     QuickSettings,
     Overview,
     AppLauncher,
+    Corners.Bottomleft(),
+    Corners.Bottomright(),
   ],
 };

hosts/wim/config/ags/js/bar/fullscreen.js

@@ -1,14 +1,27 @@
 import { Widget, Hyprland, Utils, Variable } from '../../imports.js';
-const { Box, EventBox } = Widget;
+const { Box, EventBox, Overlay } = Widget;
 
 const Revealed = Variable(true);
 const Hovering = Variable(false);
 
 import { Gesture } from './gesture.js';
+import { RoundedCorner }    from '../screen-corners.js';
 
 
-export const Revealer = params => Box({
+export const Revealer = params => Overlay({
+  overlays: [
+    RoundedCorner('topleft', {
+      className: 'corner',
+    }),
+
+    RoundedCorner('topright', {
+      className: 'corner',
+    }),
+  ],
+
+  child: Box({
     style: 'min-height: 1px',
+    hexpand: true,
     vertical: true,
     children: [
       Widget.Revealer({
@@ -78,4 +91,5 @@ export const Revealer = params => Box({
         }),
       }),
     ],
+  }),
 });

hosts/wim/config/ags/js/bar/main.js

@@ -25,7 +25,6 @@ export const Bar = Window({
   child: Revealer({
     child: CenterBox({
       className: 'transparent',
-      halign: 'fill',
       style: 'margin: 5px',
       vertical: false,
 

hosts/wim/config/ags/js/misc/closer.js

@@ -5,6 +5,10 @@ const ALWAYS_OPEN = [
   'closer',
   'bar',
   'notifications',
+  'cornertl',
+  'cornertr',
+  'cornerbl',
+  'cornerbr'
 ];
 
 

hosts/wim/config/ags/js/screen-corners.js

@@ -0,0 +1,83 @@
+import { Widget } from '../imports.js';
+const { Gtk } = imports.gi;
+const Lang = imports.lang;
+
+export const RoundedCorner = (place, props) => Widget({
+    ...props,
+    type: Gtk.DrawingArea,
+    halign: place.includes('left') ? 'start' : 'end',
+    valign: place.includes('top') ? 'start' : 'end',
+    setup: widget => {
+        const r = widget.get_style_context().get_property('border-radius', Gtk.StateFlags.NORMAL);
+        widget.set_size_request(r, r);
+        widget.connect('draw', Lang.bind(widget, (widget, cr) => {
+            const c = widget.get_style_context().get_property('background-color', Gtk.StateFlags.NORMAL);
+            const r = widget.get_style_context().get_property('border-radius', Gtk.StateFlags.NORMAL);
+            const borderColor = widget.get_style_context().get_property('color', Gtk.StateFlags.NORMAL);
+            const borderWidth = widget.get_style_context().get_border(Gtk.StateFlags.NORMAL).left; // ur going to write border-width: something anyway
+            widget.set_size_request(r, r);
+
+            switch (place) {
+                case 'topleft':
+                    cr.arc(r, r, r, Math.PI, 3 * Math.PI / 2);
+                    cr.lineTo(0, 0);
+                    break;
+
+                case 'topright':
+                    cr.arc(0, r, r, 3 * Math.PI / 2, 2 * Math.PI);
+                    cr.lineTo(r, 0);
+                    break;
+
+                case 'bottomleft':
+                    cr.arc(r, 0, r, Math.PI / 2, Math.PI);
+                    cr.lineTo(0, r);
+                    break;
+
+                case 'bottomright':
+                    cr.arc(0, 0, r, 0, Math.PI / 2);
+                    cr.lineTo(r, r);
+                    break;
+            }
+
+            cr.closePath();
+            cr.setSourceRGBA(c.red, c.green, c.blue, c.alpha);
+            cr.fill();
+            cr.setLineWidth(borderWidth);
+            cr.setSourceRGBA(borderColor.red, borderColor.green, borderColor.blue, borderColor.alpha);
+            cr.stroke();
+        }));
+    },
+});
+
+export const Topleft = () => Widget.Window({
+    name: 'cornertl',
+    layer: 'overlay',
+    anchor: ['top', 'left'],
+    exclusive: false,
+    visible: true,
+    child: RoundedCorner('topleft', { className: 'corner', }),
+});
+export const Topright = () => Widget.Window({
+    name: 'cornertr',
+    layer: 'overlay',
+    anchor: ['top', 'right'],
+    exclusive: false,
+    visible: true,
+    child: RoundedCorner('topright', { className: 'corner', }),
+});
+export const Bottomleft = () => Widget.Window({
+    name: 'cornerbl',
+    layer: 'overlay',
+    anchor: ['bottom', 'left'],
+    exclusive: false,
+    visible: true,
+    child: RoundedCorner('bottomleft', { className: 'corner', }),
+});
+export const Bottomright = () => Widget.Window({
+    name: 'cornerbr',
+    layer: 'overlay',
+    anchor: ['bottom', 'right'],
+    exclusive: false,
+    visible: true,
+    child: RoundedCorner('bottomright', { className: 'corner', }),
+});

hosts/wim/config/ags/scss/main.scss

@@ -20,3 +20,4 @@ undershoot {
 @import "./widgets/player.scss";
 @import "./widgets/overview.scss";
 @import "./widgets/applauncher.scss";
+@import "./widgets/corners.scss";

hosts/wim/config/ags/scss/widgets/corners.scss

@@ -0,0 +1,5 @@
+.corner {
+    background-color: black;
+    border-radius: 21px; //Hard code because Hyprland rounding is in px
+    border-width: 0.068rem;
+}

hosts/wim/config/ags/style.css

@@ -764,3 +764,8 @@ calendar:indeterminate {
     .applauncher .app image {
       transition: 200ms;
       margin-right: 9px; }
+
+.corner {
+  background-color: black;
+  border-radius: 21px;
+  border-width: 0.068rem; }