feat(ags): use new widget prop cursor

devices/wim/config/ags/js/media-player/mpris.js

@@ -2,9 +2,6 @@ import Mpris from 'resource:///com/github/Aylur/ags/service/mpris.js';
 import { Button, Icon, Label, Stack, Slider, CenterBox, Box } from 'resource:///com/github/Aylur/ags/widget.js';
 import { execAsync, lookUpIcon, readFileAsync } from 'resource:///com/github/Aylur/ags/utils.js';
 
-import Gdk from 'gi://Gdk';
-const display = Gdk.Display.get_default();
-
 import Separator from '../misc/separator.js';
 import EventBox from '../misc/cursorbox.js';
 
@@ -148,24 +145,18 @@ export const PlayerIcon = (player, { symbolic = true, ...props } = {}) => {
     });
 };
 
-export const PositionSlider = (player, props) => EventBox({
+export const PositionSlider = (player, props) => Slider({
-    child: Slider({
     ...props,
     className: 'position-slider',
+    cursor: 'pointer',
+    vpack: 'center',
     hexpand: true,
     drawValue: false,
     onChange: ({ value }) => {
         player.position = player.length * value;
     },
     properties: [['update', slider => {
-            if (slider.dragging) {
+        if (!slider.dragging) {
-                slider.get_parent().window.set_cursor(Gdk.Cursor
-                    .new_from_name(display, 'grabbing'));
-            }
-            else {
-                slider.get_parent()?.window?.set_cursor(Gdk.Cursor
-                    .new_from_name(display, 'pointer'));
-
             slider.visible = player.length > 0;
             if (player.length > 0)
                 slider.value = player.position / player.length;
@@ -185,17 +176,19 @@ export const PositionSlider = (player, props) => EventBox({
                 `);
             }
         }],
+
+        ['button-press-event', s => { s.cursor = 'grabbing'; }],
+        ['button-release-event', s => { s.cursor = 'pointer'; }],
     ],
-    }),
 });
 
-const PlayerButton = ({ player, items, onClick, prop }) => Button({
+const PlayerButton = ({ player, items, onClick, prop }) => EventBox({
+    child: Button({
         child: Stack({ items }),
         onPrimaryClickRelease: () => player[onClick](),
         properties: [['hovered', false]],
         onHover: self => {
             self._hovered = true;
-        self.window.set_cursor(Gdk.Cursor.new_from_name(display, 'pointer'));
 
             if (prop == 'playBackStatus') {
                 items.forEach(item => {
@@ -212,7 +205,6 @@ const PlayerButton = ({ player, items, onClick, prop }) => Button({
         },
         onHoverLost: self => {
             self._hovered = false;
-        self.window.set_cursor(null);
             if (prop == 'playBackStatus') {
                 items.forEach(item => {
                     item[1].setCss(`
@@ -266,6 +258,7 @@ const PlayerButton = ({ player, items, onClick, prop }) => Button({
                 }
             }],
         ],
+    }),
 });
 
 export const ShuffleButton = player => PlayerButton({

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

@@ -2,16 +2,11 @@ import Variable from 'resource:///com/github/Aylur/ags/variable.js';
 import { Button, EventBox } from 'resource:///com/github/Aylur/ags/widget.js';
 
 import Gtk from 'gi://Gtk';
-import Gdk from 'gi://Gdk';
-const display = Gdk.Display.get_default();
 
 
 // TODO: wrap in another EventBox for disabled cursor
 export default ({
     isButton = false,
-    reset = true,
-    onHover = () => {},
-    onHoverLost = () => {},
     onPrimaryClickRelease = () => {},
     ...props
 }) => {
@@ -21,6 +16,7 @@ export default ({
 
     const properties = {
         ...props,
+        cursor: 'pointer',
         onPrimaryClickRelease: self => {
             // Every click, do a one shot connect to
             // CanRun to wait for location of click
@@ -31,21 +27,6 @@ export default ({
                 CanRun.disconnect(id);
             });
         },
-        onHover: self => {
-            if (!self.child.sensitive || !self.sensitive)
-                self.window.set_cursor(Gdk.Cursor.new_from_name(display, 'not-allowed'));
-
-            else
-                self.window.set_cursor(Gdk.Cursor.new_from_name(display, 'pointer'));
-
-            onHover(self);
-        },
-        onHoverLost: self => {
-            if (reset)
-                self.window.set_cursor(null);
-
-            onHoverLost(self);
-        },
     };
 
     let widget;

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

@@ -179,7 +179,6 @@ export const Notification = ({
                                             label: setTime(notif.time),
                                         }),
                                         EventBox({
-                                            reset: false,
                                             child: Button({
                                                 className: 'close-button',
                                                 vpack: 'start',

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

@@ -5,8 +5,6 @@ import { timeout } from 'resource:///com/github/Aylur/ags/utils.js';
 import { HasNotifs } from './base.js';
 
 import Gtk from 'gi://Gtk';
-import Gdk from 'gi://Gdk';
-const display = Gdk.Display.get_default();
 
 
 export default ({
@@ -20,13 +18,12 @@ export default ({
 }) => {
     const widget = EventBox({
         ...props,
+        cursor: 'grab',
         onHover: self => {
-            self.window.set_cursor(Gdk.Cursor.new_from_name(display, 'grab'));
             if (!self._hovered)
                 self._hovered = true;
         },
         onHoverLost: self => {
-            self.window.set_cursor(null);
             if (self._hovered)
                 self._hovered = false;
         },
@@ -85,9 +82,11 @@ export default ({
             // When dragging
             [gesture, self => {
                 var offset = gesture.get_offset()[1];
+                if (offset === 0)
+                    return;
 
                 // Slide right
-                if (offset >= 0) {
+                if (offset > 0) {
                     self.setCss(`
                         margin-top: 0px; margin-bottom: 0px; opacity: 1; transition: none;
                         margin-left:   ${Number(offset + startMargin)}px;
@@ -107,7 +106,7 @@ export default ({
 
                 // Put a threshold on if a click is actually dragging
                 widget._dragging = Math.abs(offset) > 10;
-                widget.window?.set_cursor(Gdk.Cursor.new_from_name(display, 'grabbing'));
+                widget.cursor = 'grabbing';
             }, 'drag-update'],
 
 
@@ -137,8 +136,7 @@ export default ({
                 }
                 else {
                     self.setCss(defaultStyle);
-                    widget.window?.set_cursor(Gdk.Cursor.new_from_name(display, 'grab'));
+                    widget.cursor = 'grab',
-
                     widget._dragging = false;
                 }
             }, 'drag-end'],

devices/wim/config/ags/js/quick-settings/main.js

@@ -7,7 +7,13 @@ import PopupWindow  from '../misc/popup.js';
 import ToggleButton from './toggle-button.js';
 
 
-const QuickSettingsWidget = () => Box({
+const QuickSettingsWidget = () => {
+    const rev = Revealer({
+        transition: 'slide_down',
+        child: Player(),
+    });
+
+    return Box({
         className: 'qs-container',
         vertical: true,
         children: [
@@ -31,18 +37,16 @@ const QuickSettingsWidget = () => Box({
 
                     SliderBox(),
 
-                ToggleButton(),
+                    ToggleButton(rev),
 
                 ],
             }),
 
-        Revealer({
+            rev,
-            transition: 'slide_down',
-            child: Player(),
-        }),
 
         ],
     });
+};
 
 export default () => PopupWindow({
     name: 'quick-settings',

devices/wim/config/ags/js/quick-settings/slider-box.js

@@ -1,5 +1,5 @@
 import Audio from 'resource:///com/github/Aylur/ags/service/audio.js';
-import { Box, Slider, Icon, EventBox } from 'resource:///com/github/Aylur/ags/widget.js';
+import { Box, Slider, Icon } from 'resource:///com/github/Aylur/ags/widget.js';
 
 import { SpeakerIcon } from '../misc/audio-icons.js';
 
@@ -22,10 +22,16 @@ export default () => Box({
                 }),
 
                 Slider({
-                    connections: [[Audio, slider => {
+                    cursor: 'pointer',
-                        if (Audio.speaker)
+                    vpack: 'center',
-                            slider.value = Audio.speaker.volume;
+                    connections: [
-                    }, 'speaker-changed']],
+                        [Audio, slider => {
+                            slider.value = Audio.speaker?.volume;
+                        }, 'speaker-changed'],
+
+                        ['button-press-event', s => { s.cursor = 'grabbing'; }],
+                        ['button-release-event', s => { s.cursor = 'pointer'; }],
+                    ],
                     onChange: ({ value }) => Audio.speaker.volume = value,
                     max: 0.999,
                     draw_value: false,
@@ -43,23 +49,20 @@ export default () => Box({
                     icon: 'display-brightness-symbolic',
                 }),
 
-                EventBox({
+                Slider({
-                    onHover: box => box.child._canChange = false,
+                    cursor: 'pointer',
-                    onHoverLost: box => box.child._canChange = true,
+                    vpack: 'center',
-                    child: Slider({
+                    onChange: ({ value }) => Brightness.screen = value,
-                        properties: [
+                    connections: [
-                            ['canChange', true],
+                        [Brightness, slider => {
-                        ],
-                        onChange: ({ value }) => {
-                            Brightness.screen = value;
-                        },
-                        connections: [[Brightness, slider => {
-                            if (slider._canChange)
                             slider.value = Brightness.screen;
-                        }, 'screen']],
+                        }, 'screen'],
+
+                        ['button-press-event', s => { s.cursor = 'grabbing'; }],
+                        ['button-release-event', s => { s.cursor = 'pointer'; }],
+                    ],
                     draw_value: false,
                 }),
-                }),
             ],
         }),
 

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

@@ -1,12 +1,11 @@
 import App   from 'resource:///com/github/Aylur/ags/app.js';
 import Mpris from 'resource:///com/github/Aylur/ags/service/mpris.js';
-import { Icon, ToggleButton } from 'resource:///com/github/Aylur/ags/widget.js';
+import { CenterBox, Icon, ToggleButton } from 'resource:///com/github/Aylur/ags/widget.js';
-
-import EventBox from '../misc/cursorbox.js';
 
 
-export default () => EventBox({
+export default rev => CenterBox({
-    child: ToggleButton({
+    center_widget: ToggleButton({
+        cursor: 'pointer',
         setup: self => {
             // Open at startup if there are players
             const id = Mpris.connect('changed', () => {
@@ -16,8 +15,6 @@ export default () => EventBox({
         },
 
         connections: [['toggled', self => {
-            const rev = self.get_parent().get_parent().get_parent().children[1];
-
             if (self.get_active()) {
                 self.get_children()[0]
                     .setCss('-gtk-icon-transform: rotate(0deg);');
@@ -36,4 +33,6 @@ export default () => EventBox({
             css: '-gtk-icon-transform: rotate(180deg);',
         }),
     }),
+    start_widget: null,
+    end_widget: null,
 });

devices/wim/config/ags/scss/widgets/quick-settings.scss

@@ -132,8 +132,10 @@
     margin-right: -20px;
   }
 
-  scale {
+  .slider {
     min-height: 55px;
+
+    scale {
       min-width: 400px;
       margin-left: 18px;
       margin-right: 20px;
@@ -164,3 +166,4 @@
       }
     }
   }
+}