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,81 +1,95 @@
 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({
-  style: 'min-height: 1px',
+  overlays: [
-  vertical: true,
+    RoundedCorner('topleft', {
-  children: [
+      className: 'corner',
-    Widget.Revealer({
-      transition: 'slide_down',
-      setup: self => self.revealChild = true,
-      properties: [
-        ['timeouts', []],
-      ],
-      connections: [[Hyprland, self => {
-        Utils.execAsync('hyprctl activewindow -j')
-          .then(result => {
-            let client = JSON.parse(result);
-            if (client.fullscreen !== Revealed.value) {
-              Revealed.value = client.fullscreen;
-
-              if (Revealed.value) {
-                setTimeout(() => {
-                  if (Revealed.value)
-                    self.revealChild = false
-                }, 2000);
-              }
-              else {
-                self.revealChild = true;
-              }
-            }
-          }).catch(print);
-      }]],
-
-      child: Gesture({
-        onHover: () => Hovering.value = true,
-        onHoverLost: self => {
-          Hovering.value = false;
-          if (Revealed.value) {
-            setTimeout(() => {
-              if (!Hovering.value) {
-                self.get_parent().get_parent().children[1].revealChild = true;
-                self.get_parent().revealChild = false;
-              }
-            }, 2000);
-          }
-        },
-        ...params,
-      }),
     }),
 
-    Widget.Revealer({
+    RoundedCorner('topright', {
-      connections: [[Revealed, self => {
+      className: 'corner',
-        if (Revealed.value) {
-          setTimeout(() => {
-            if (Revealed.value)
-              self.revealChild = true;
-          }, 2000);
-        }
-        else {
-          self.revealChild = false;
-        }
-      }]],
-      child: EventBox({
-        onHover: self => {
-          Hovering.value = true;
-          self.get_parent().get_parent().children[0].revealChild = true;
-          self.get_parent().revealChild = false;
-        },
-        child: Box({
-          style: 'min-height: 50px;',
-        }),
-      }),
     }),
   ],
+
+  child: Box({
+    style: 'min-height: 1px',
+    hexpand: true,
+    vertical: true,
+    children: [
+      Widget.Revealer({
+        transition: 'slide_down',
+        setup: self => self.revealChild = true,
+        properties: [
+          ['timeouts', []],
+        ],
+        connections: [[Hyprland, self => {
+          Utils.execAsync('hyprctl activewindow -j')
+            .then(result => {
+              let client = JSON.parse(result);
+              if (client.fullscreen !== Revealed.value) {
+                Revealed.value = client.fullscreen;
+
+                if (Revealed.value) {
+                  setTimeout(() => {
+                    if (Revealed.value)
+                      self.revealChild = false
+                  }, 2000);
+                }
+                else {
+                  self.revealChild = true;
+                }
+              }
+            }).catch(print);
+        }]],
+
+        child: Gesture({
+          onHover: () => Hovering.value = true,
+          onHoverLost: self => {
+            Hovering.value = false;
+            if (Revealed.value) {
+              setTimeout(() => {
+                if (!Hovering.value) {
+                  self.get_parent().get_parent().children[1].revealChild = true;
+                  self.get_parent().revealChild = false;
+                }
+              }, 2000);
+            }
+          },
+          ...params,
+        }),
+      }),
+
+      Widget.Revealer({
+        connections: [[Revealed, self => {
+          if (Revealed.value) {
+            setTimeout(() => {
+              if (Revealed.value)
+                self.revealChild = true;
+            }, 2000);
+          }
+          else {
+            self.revealChild = false;
+          }
+        }]],
+        child: EventBox({
+          onHover: self => {
+            Hovering.value = true;
+            self.get_parent().get_parent().children[0].revealChild = true;
+            self.get_parent().revealChild = false;
+          },
+          child: Box({
+            style: 'min-height: 50px;',
+          }),
+        }),
+      }),
+    ],
+  }),
 });

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; }