feat(ags): make use of exclusive ignore

devices/wim/config/ags/config.js

@@ -1,17 +1,18 @@
 import App      from 'resource:///com/github/Aylur/ags/app.js';
 import { exec } from 'resource:///com/github/Aylur/ags/utils.js';
 
-import Setup         from './js/setup.js';
+import Setup       from './js/setup.js';
-import OSD           from './js/osd/main.js';
+import AppLauncher from './js/applauncher/main.js';
-import Powermenu     from './js/powermenu.js';
+import Bar         from './js/bar/main.js';
-import * as Bar      from './js/bar/main.js';
+import BgFade      from './js/misc/background-fade.js';
-import NotifCenter   from './js/notifications/center.js';
+import Calendar    from './js/date.js';
-import NotifPopups   from './js/notifications/popup.js';
+import Corners     from './js/corners/main.js';
-import Calendar      from './js/date.js';
+import NotifCenter from './js/notifications/center.js';
-import QuickSettings from './js/quick-settings/main.js';
+import NotifPopups from './js/notifications/popup.js';
-import Overview      from './js/overview/main.js';
+import OSD         from './js/osd/main.js';
-import AppLauncher   from './js/applauncher/main.js';
+import Overview    from './js/overview/main.js';
-import * as Corners  from './js/screen-corners.js';
+import Powermenu   from './js/powermenu.js';
+import QSettings   from './js/quick-settings/main.js';
 
 const scss = App.configDir + '/scss/main.scss';
 const css  = App.configDir + '/style.css';
@@ -36,15 +37,14 @@ export default {
         AppLauncher(),
         Calendar(),
         NotifCenter(),
+        OSD(),
         Overview(),
         Powermenu(),
-        QuickSettings(),
+        QSettings(),
 
-        Bar.Bar(),
+        Bar(),
-        Bar.BgGradient(),
+        BgFade(),
-        Corners.Bottomleft(),
+        ...Corners(),
-        Corners.Bottomright(),
-        OSD(),
         NotifPopups(),
     ],
 };

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

@@ -1,98 +1,83 @@
-import App         from 'resource:///com/github/Aylur/ags/app.js';
 import Hyprland    from 'resource:///com/github/Aylur/ags/service/hyprland.js';
 import Variable    from 'resource:///com/github/Aylur/ags/variable.js';
 
-import { Box, EventBox, Overlay, Revealer } from 'resource:///com/github/Aylur/ags/widget.js';
+import { Box, EventBox, Revealer } from 'resource:///com/github/Aylur/ags/widget.js';
 import { timeout } from 'resource:///com/github/Aylur/ags/utils.js';
 
-import { RoundedCorner } from '../screen-corners.js';
-
 const Revealed = Variable(true);
 const Hovering = Variable(false);
-const wStyle = 'background: rgba(0, 0, 0, 0.5);';
 
 
 Hyprland.connect('changed', () => {
     const workspace = Hyprland.getWorkspace(Hyprland.active.workspace.id);
-    if (workspace)
+    Revealed.value = workspace?.hasfullscreen;
-        Revealed.value = workspace.hasfullscreen;
 });
 Hyprland.connect('fullscreen', (_, fullscreen) => Revealed.value = fullscreen);
 
-export default props => Overlay({
+export default props => Box({
-    overlays: [
+    css: 'min-height: 1px',
-        RoundedCorner('topleft',  { className: 'corner' }),
+    hexpand: true,
-        RoundedCorner('topright', { className: 'corner' }),
+    vertical: true,
+    children: [
+        Revealer({
+            transition: 'slide_down',
+            revealChild: true,
+
+            properties: [['timeouts', []]],
+            connections: [[Revealed, self => {
+                if (Revealed.value) {
+                    timeout(2000, () => {
+                        if (Revealed.value)
+                            self.revealChild = false;
+                    });
+                }
+                else {
+                    self.revealChild = true;
+                }
+            }]],
+
+            child: EventBox({
+                onHover: () => Hovering.value = true,
+                onHoverLost: self => {
+                    Hovering.value = false;
+                    if (Revealed.value) {
+                        timeout(2000, () => {
+                            if (!Hovering.value) {
+                                // Replace bar with transparent eventbox
+                                self.get_parent().get_parent().children[1].revealChild = true;
+                                self.get_parent().revealChild = false;
+                            }
+                        });
+                    }
+                },
+                ...props,
+            }),
+        }),
+
+        Revealer({
+            connections: [[Revealed, self => {
+                if (Revealed.value) {
+                    timeout(2000, () => {
+                        if (Revealed.value)
+                            self.revealChild = true;
+                    });
+                }
+                else {
+                    self.revealChild = false;
+                }
+            }]],
+            child: EventBox({
+                onHover: self => {
+                    Hovering.value = true;
+
+                    // Replace eventbox with bar
+                    self.get_parent().get_parent().children[0].revealChild = true;
+                    self.get_parent().revealChild = false;
+                },
+                child: Box({
+                    css: 'min-height: 5px;',
+                }),
+            }),
+        }),
     ],
-
-    child: Box({
-        css: 'min-height: 1px',
-        hexpand: true,
-        vertical: true,
-        children: [
-            Revealer({
-                transition: 'slide_down',
-                setup: self => self.revealChild = true,
-
-                properties: [['timeouts', []]],
-                connections: [[Revealed, self => {
-                    App.getWindow('bar').setCss(Revealed.value ? '' : wStyle);
-                    App.getWindow('bg-gradient').visible = !Revealed.value;
-
-                    if (Revealed.value) {
-                        timeout(2000, () => {
-                            if (Revealed.value)
-                                self.revealChild = false;
-                        });
-                    }
-                    else {
-                        self.revealChild = true;
-                    }
-                }]],
-
-                child: EventBox({
-                    onHover: () => Hovering.value = true,
-                    onHoverLost: self => {
-                        Hovering.value = false;
-                        if (Revealed.value) {
-                            timeout(2000, () => {
-                                if (!Hovering.value) {
-                                    // Replace bar with transparent eventbox
-                                    self.get_parent().get_parent().children[1].revealChild = true;
-                                    self.get_parent().revealChild = false;
-                                }
-                            });
-                        }
-                    },
-                    ...props,
-                }),
-            }),
-
-            Revealer({
-                connections: [[Revealed, self => {
-                    if (Revealed.value) {
-                        timeout(2000, () => {
-                            if (Revealed.value)
-                                self.revealChild = true;
-                        });
-                    }
-                    else {
-                        self.revealChild = false;
-                    }
-                }]],
-                child: EventBox({
-                    onHover: self => {
-                        Hovering.value = true;
-
-                        // Replace eventbox with bar
-                        self.get_parent().get_parent().children[0].revealChild = true;
-                        self.get_parent().revealChild = false;
-                    },
-                    child: Box({
-                        css: 'min-height: 5px;',
-                    }),
-                }),
-            }),
-        ],
-    }),
 });

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

@@ -12,23 +12,12 @@ import SysTray        from './systray.js';
 import Battery        from './battery.js';
 import Brightness     from './brightness.js';
 import Audio          from './audio.js';
-import Revealer       from './fullscreen.js';
 import KeyboardLayout from './keyboard-layout.js';
 
+import Revealer from './fullscreen.js';
 
-export const BgGradient = () => Window({
-    name: 'bg-gradient',
-    layer: 'background',
-    anchor: ['top', 'bottom', 'left', 'right'],
-    css: `
-        background-image: -gtk-gradient (linear,
-                          left top, left bottom,
-                          from(rgba(0, 0, 0, 0.5)),
-                          to(rgba(0, 0, 0, 0)));
-    `,
-});
 
-export const Bar = () => Window({
+export default () => Window({
     name: 'bar',
     layer: 'overlay',
     anchor: ['top', 'left', 'right'],

devices/wim/config/ags/js/corners/main.js

@@ -0,0 +1,45 @@
+import { Window } from 'resource:///com/github/Aylur/ags/widget.js';
+
+import RoundedCorner from './screen-corners.js';
+
+
+const TopLeft = () => Window({
+    name: 'cornertl',
+    layer: 'overlay',
+    exclusivity: 'ignore',
+    anchor: ['top', 'left'],
+    visible: true,
+    child: RoundedCorner('topleft'),
+});
+const TopRight = () => Window({
+    name: 'cornertr',
+    layer: 'overlay',
+    exclusivity: 'ignore',
+    anchor: ['top', 'right'],
+    visible: true,
+    child: RoundedCorner('topright'),
+});
+const BottomLeft = () => Window({
+    name: 'cornerbl',
+    layer: 'overlay',
+    exclusivity: 'ignore',
+    anchor: ['bottom', 'left'],
+    visible: true,
+    child: RoundedCorner('bottomleft'),
+});
+const BottomRight = () => Window({
+    name: 'cornerbr',
+    layer: 'overlay',
+    exclusivity: 'ignore',
+    anchor: ['bottom', 'right'],
+    visible: true,
+    child: RoundedCorner('bottomright'),
+});
+
+
+export default () => [
+    TopLeft(),
+    TopRight(),
+    BottomLeft(),
+    BottomRight(),
+];

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

@@ -1,8 +1,8 @@
-import { Box, DrawingArea, Window } from 'resource:///com/github/Aylur/ags/widget.js';
+import { Box, DrawingArea } from 'resource:///com/github/Aylur/ags/widget.js';
 import Gtk from 'gi://Gtk';
 const Lang = imports.lang;
 
-export const RoundedCorner = (place, props) => Box({
+export default place => Box({
     hpack: place.includes('left') ? 'start' : 'end',
     vpack: place.includes('top')  ? 'start' : 'end',
     css: `
@@ -13,7 +13,11 @@ export const RoundedCorner = (place, props) => Box({
             ${place.includes('left')   ? '-1px' : '0'};
         `,
     child: DrawingArea({
-        ...props,
+        css: `
+            background-color: black;
+            border-radius: 18px;
+            border-width: 0.068rem;
+        `,
         setup: widget => {
             const r = widget.get_style_context()
                 .get_property('border-radius', Gtk.StateFlags.NORMAL);
@@ -69,32 +73,3 @@ export const RoundedCorner = (place, props) => Box({
         },
     }),
 });
-
-export const Topleft = () => Window({
-    name: 'cornertl',
-    layer: 'overlay',
-    anchor: ['top', 'left'],
-    visible: true,
-    child: RoundedCorner('topleft', { className: 'corner' }),
-});
-export const Topright = () => Window({
-    name: 'cornertr',
-    layer: 'overlay',
-    anchor: ['top', 'right'],
-    visible: true,
-    child: RoundedCorner('topright', { className: 'corner' }),
-});
-export const Bottomleft = () => Window({
-    name: 'cornerbl',
-    layer: 'overlay',
-    anchor: ['bottom', 'left'],
-    visible: true,
-    child: RoundedCorner('bottomleft', { className: 'corner' }),
-});
-export const Bottomright = () => Window({
-    name: 'cornerbr',
-    layer: 'overlay',
-    anchor: ['bottom', 'right'],
-    visible: true,
-    child: RoundedCorner('bottomright', { className: 'corner' }),
-});

devices/wim/config/ags/js/misc/background-fade.js

@@ -0,0 +1,15 @@
+import { Window } from 'resource:///com/github/Aylur/ags/widget.js';
+
+
+export default () => Window({
+    name: 'bg-gradient',
+    layer: 'background',
+    exclusivity: 'ignore',
+    anchor: ['top', 'bottom', 'left', 'right'],
+    css: `
+        background-image: -gtk-gradient (linear,
+                          left top, left bottom,
+                          from(rgba(0, 0, 0, 0.5)),
+                          to(rgba(0, 0, 0, 0)));
+    `,
+});

devices/wim/config/ags/scss/main.scss

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

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

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