refactor(ags cursorbox): make hovering more consistent and fix clear button
All checks were successful
Discord / discord commits (push) Has been skipped
All checks were successful
Discord / discord commits (push) Has been skipped
This commit is contained in:
parent
ecc3d84f8b
commit
0e60d1d098
6 changed files with 82 additions and 71 deletions
|
@ -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);
|
||||
|
|
|
@ -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;
|
||||
};
|
||||
|
|
|
@ -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';
|
||||
});
|
||||
},
|
||||
}),
|
||||
],
|
||||
}),
|
||||
});
|
||||
|
||||
|
|
|
@ -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];
|
||||
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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;
|
||||
|
|
Loading…
Reference in a new issue