From 0e60d1d098db5df4a843313357fc3f7d847f4d55 Mon Sep 17 00:00:00 2001 From: matt1432 Date: Wed, 27 Dec 2023 23:13:49 -0500 Subject: [PATCH] refactor(ags cursorbox): make hovering more consistent and fix clear button --- .../config/ags/js/bar/buttons/workspaces.js | 2 +- devices/wim/config/ags/js/misc/cursorbox.js | 74 ++++++++++--------- .../wim/config/ags/js/notifications/center.js | 48 ++++++------ .../ags/js/quick-settings/button-grid.js | 5 +- .../ags/scss/widgets/notification-center.scss | 22 +++--- .../config/ags/scss/widgets/traybuttons.scss | 2 +- 6 files changed, 82 insertions(+), 71 deletions(-) diff --git a/devices/wim/config/ags/js/bar/buttons/workspaces.js b/devices/wim/config/ags/js/bar/buttons/workspaces.js index 9e6ad5b..e9851c9 100644 --- a/devices/wim/config/ags/js/bar/buttons/workspaces.js +++ b/devices/wim/config/ags/js/bar/buttons/workspaces.js @@ -86,7 +86,7 @@ export default () => { /** @type Array */ // @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); diff --git a/devices/wim/config/ags/js/misc/cursorbox.js b/devices/wim/config/ags/js/misc/cursorbox.js index dd6e944..a2820c8 100644 --- a/devices/wim/config/ags/js/misc/cursorbox.js +++ b/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 wrapper = EventBox({ - cursor: 'pointer', + const cursorBox = EventBox({ + ...props, 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) => { - self.cursor = Disabled.value ? - 'not-allowed' : - 'pointer'; - }); - - widget = EventBox({ - ...props, - sensitive: Disabled.bind().transform((v) => !v), - - on_primary_click_release: () => { + on_primary_click_release: (self) => { // Every click, do a one shot connect to // CanRun to wait for location of click const id = CanRun.connect('changed', () => { - if (CanRun.value) { - on_primary_click_release(wrapper); + if (CanRun.value && !Disabled.value) { + 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); - - widget.hook(gesture, () => { + cursorBox.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() || - y > widget.get_allocated_height() + x > cursorBox.get_allocated_width() || + y > cursorBox.get_allocated_height() ); }, 'end'); - return wrapper; + return cursorBox; }; diff --git a/devices/wim/config/ags/js/notifications/center.js b/devices/wim/config/ags/js/notifications/center.js index e2a70f7..9e75935 100644 --- a/devices/wim/config/ags/js/notifications/center.js +++ b/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({ - sensitive: HasNotifs.bind(), + class_name: 'clear', - on_primary_click_release: () => { - Notifications.clear(); - timeout(1000, () => App.closeWindow('notification-center')); - }, + on_primary_click_release: () => { + Notifications.clear(); + timeout(1000, () => App.closeWindow('notification-center')); + }, - child: Box({ + setup: (self) => { + self.hook(HasNotifs, () => { + self.attribute.disabled?.setValue(!HasNotifs.value); + }); + }, - children: [ - Label('Clear '), + child: Box({ - Icon({ - setup: (self) => { - self.hook(Notifications, () => { - self.icon = Notifications.notifications.length > 0 ? - 'user-trash-full-symbolic' : - 'user-trash-symbolic'; - }); - }, - }), - ], - }), + children: [ + Label('Clear '), + + Icon({ + setup: (self) => { + self.hook(Notifications, () => { + self.icon = Notifications.notifications.length > 0 ? + 'user-trash-full-symbolic' : + 'user-trash-symbolic'; + }); + }, + }), + ], }), }); diff --git a/devices/wim/config/ags/js/quick-settings/button-grid.js b/devices/wim/config/ags/js/quick-settings/button-grid.js index 70828ea..d28373b 100644 --- a/devices/wim/config/ags/js/quick-settings/button-grid.js +++ b/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]; diff --git a/devices/wim/config/ags/scss/widgets/notification-center.scss b/devices/wim/config/ags/scss/widgets/notification-center.scss index c503d53..0b51f73 100644 --- a/devices/wim/config/ags/scss/widgets/notification-center.scss +++ b/devices/wim/config/ags/scss/widgets/notification-center.scss @@ -20,22 +20,24 @@ font-size: 22px; } - button { - all: unset; - transition: 200ms; - border-radius: 9px; - color: #eee; - background-color: #664C90; - box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03); - padding: 4.5px 9px; + .clear { + box { + all: unset; + transition: 200ms; + border-radius: 9px; + color: #eee; + background-color: #664C90; + 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); diff --git a/devices/wim/config/ags/scss/widgets/traybuttons.scss b/devices/wim/config/ags/scss/widgets/traybuttons.scss index 4b9eebd..35d555d 100644 --- a/devices/wim/config/ags/scss/widgets/traybuttons.scss +++ b/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;