refactor(ags cursorbox): make hovering more consistent and fix clear button

devices/wim/config/ags/js/bar/buttons/workspaces.js

@@ -86,7 +86,7 @@ export default () => {
 
         /** @type Array<Revealer> */
         // @ts-expect-error
-        const indicators = self?.get_parent()?.child.child.child.children;
+        const indicators = self?.get_parent()?.child.child.children;
 
         const currentIndex = indicators
             .findIndex((w) => w.attribute.id === currentId);

devices/wim/config/ags/js/misc/cursorbox.js

@@ -2,7 +2,8 @@ import Variable from 'resource:///com/github/Aylur/ags/variable.js';
 
 import { EventBox } from 'resource:///com/github/Aylur/ags/widget.js';
 
-const { Gtk } = imports.gi;
+const { Gtk, Gdk } = imports.gi;
+const display = Gdk.Display.get_default();
 
 /**
  * @typedef {import('types/widgets/eventbox').EventBoxProps} EventBoxProps
@@ -12,11 +13,15 @@ const { Gtk } = imports.gi;
 
 /** @param {EventBoxProps & {
  *      on_primary_click_release?: function(EventBox):void
+ *      on_hover?: function(EventBox):void
+ *      on_hover_lost?: function(EventBox):void
  * }} o
  */
 export default ({
-    attribute,
     on_primary_click_release = () => {/**/},
+    on_hover = () => {/**/},
+    on_hover_lost = () => {/**/},
+    attribute,
     ...props
 }) => {
     // Make this variable to know if the function should
@@ -24,52 +29,53 @@ export default ({
     const CanRun = Variable(true);
     const Disabled = Variable(false);
 
-    let widget = EventBox();
+    const cursorBox = EventBox({
-
+        ...props,
-    const wrapper = EventBox({
-        cursor: 'pointer',
 
         attribute: {
             ...attribute,
-
             disabled: Disabled,
-
-            get_child: () => widget.child,
-
-            /** @param {import('types/widgets/box').default} new_child */
-            set_child: (new_child) => {
-                widget.child = new_child;
-            },
         },
 
-    }).hook(Disabled, (self) => {
+        on_primary_click_release: (self) => {
-        self.cursor = Disabled.value ?
-            'not-allowed' :
-            'pointer';
-    });
-
-    widget = EventBox({
-        ...props,
-        sensitive: Disabled.bind().transform((v) => !v),
-
-        on_primary_click_release: () => {
             // Every click, do a one shot connect to
             // CanRun to wait for location of click
             const id = CanRun.connect('changed', () => {
-                if (CanRun.value) {
+                if (CanRun.value && !Disabled.value) {
-                    on_primary_click_release(wrapper);
+                    on_primary_click_release(self);
                 }
 
                 CanRun.disconnect(id);
             });
         },
+
+    // OnHover
+    }).on('enter-notify-event', (self) => {
+        on_hover(self);
+
+        self.window.set_cursor(Gdk.Cursor.new_from_name(
+            display,
+            Disabled.value ?
+                'not-allowed' :
+                'pointer',
+        ));
+        self.toggleClassName('hover', true);
+
+    // OnHoverLost
+    }).on('leave-notify-event', (self) => {
+        on_hover_lost(self);
+
+        self.window.set_cursor(null);
+        self.toggleClassName('hover', false);
+
+    // Disabled class
+    }).hook(Disabled, (self) => {
+        self.toggleClassName('disabled', Disabled.value);
     });
 
-    wrapper.child = widget;
+    const gesture = Gtk.GestureLongPress.new(cursorBox);
 
-    const gesture = Gtk.GestureLongPress.new(widget);
+    cursorBox.hook(gesture, () => {
-
-    widget.hook(gesture, () => {
         const pointer = gesture.get_point(null);
         const x = pointer[1];
         const y = pointer[2];
@@ -79,10 +85,10 @@ export default ({
         }
 
         CanRun.value = !(
-            x > widget.get_allocated_width() ||
+            x > cursorBox.get_allocated_width() ||
-            y > widget.get_allocated_height()
+            y > cursorBox.get_allocated_height()
         );
     }, 'end');
 
-    return wrapper;
+    return cursorBox;
 };

devices/wim/config/ags/js/notifications/center.js

@@ -1,7 +1,7 @@
 import App from 'resource:///com/github/Aylur/ags/app.js';
 import Notifications from 'resource:///com/github/Aylur/ags/service/notifications.js';
 
-import { Button, Label, Box, Icon, Scrollable, Revealer } from 'resource:///com/github/Aylur/ags/widget.js';
+import { Label, Box, Icon, Scrollable, Revealer } from 'resource:///com/github/Aylur/ags/widget.js';
 import { timeout } from 'resource:///com/github/Aylur/ags/utils.js';
 
 import { Notification, HasNotifs } from './base.js';
@@ -69,33 +69,35 @@ const NotificationList = () => Box({
     },
 });
 
-// TODO: use cursorbox feature for this
-// Needs to be wrapped to still have onHover when disabled
 const ClearButton = () => CursorBox({
-    child: Button({
+    class_name: 'clear',
-        sensitive: HasNotifs.bind(),
 
-        on_primary_click_release: () => {
+    on_primary_click_release: () => {
-            Notifications.clear();
+        Notifications.clear();
-            timeout(1000, () => App.closeWindow('notification-center'));
+        timeout(1000, () => App.closeWindow('notification-center'));
-        },
+    },
 
-        child: Box({
+    setup: (self) => {
+        self.hook(HasNotifs, () => {
+            self.attribute.disabled?.setValue(!HasNotifs.value);
+        });
+    },
 
-            children: [
+    child: Box({
-                Label('Clear '),
 
-                Icon({
+        children: [
-                    setup: (self) => {
+            Label('Clear '),
-                        self.hook(Notifications, () => {
+
-                            self.icon = Notifications.notifications.length > 0 ?
+            Icon({
-                                'user-trash-full-symbolic' :
+                setup: (self) => {
-                                'user-trash-symbolic';
+                    self.hook(Notifications, () => {
-                        });
+                        self.icon = Notifications.notifications.length > 0 ?
-                    },
+                            'user-trash-full-symbolic' :
-                }),
+                            'user-trash-symbolic';
-            ],
+                    });
-        }),
+                },
+            }),
+        ],
     }),
 });
 

devices/wim/config/ags/js/quick-settings/button-grid.js

@@ -140,8 +140,9 @@ const GridButton = ({
                             if (menu) {
                                 const rowMenu =
                                     self.get_parent()
-                                        ?.get_parent()?.get_parent()
+                                        ?.get_parent()
-                                        ?.get_parent()?.get_parent()
+                                        ?.get_parent()
+                                        ?.get_parent()
                                         // @ts-expect-error
                                         ?.children[1];
 

devices/wim/config/ags/scss/widgets/notification-center.scss

@@ -20,22 +20,24 @@
       font-size: 22px;
     }
 
-    button {
+    .clear {
-      all: unset;
+      box {
-      transition: 200ms;
+        all: unset;
-      border-radius: 9px;
+        transition: 200ms;
-      color: #eee;
+        border-radius: 9px;
-      background-color: #664C90;
+        color: #eee;
-      box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
+        background-color: #664C90;
-      padding: 4.5px 9px;
+        box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
+        padding: 4.5px 9px;
+      }
 
-      &:hover {
+      &.hover box {
         box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
         background-color: rgba(238, 238, 238, 0.154);
         color: #f1f1f1;
       }
 
-      &:disabled {
+      &.disabled box {
         box-shadow: none;
         background-color: rgba(#664C90, 0.3);
         color: rgba(238, 238, 238, 0.3);

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

@@ -48,7 +48,7 @@
               border 0.5s ease-in-out;
 }
 
-.toggle-on:hover, .toggle-off:hover {
+.toggle-on.hover, .toggle-off.hover {
   background-color: rgba(127, 132, 156, 0.4);
   transition: background-color 0.5s ease-in-out,
               border 0.5s ease-in-out;