refactor(ags cursorbox): make hovering more consistent and fix clear button
All checks were successful
Discord / discord commits (push) Has been skipped

This commit is contained in:
matt1432 2023-12-27 23:13:49 -05:00
parent ecc3d84f8b
commit 0e60d1d098
6 changed files with 82 additions and 71 deletions

View file

@ -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);

View file

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

View file

@ -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';
});
},
}),
],
}),
});

View file

@ -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];

View file

@ -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);

View file

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