fix(ags): use hover events and Gdk cursor method
All checks were successful
Discord / discord commits (push) Has been skipped

This commit is contained in:
matt1432 2024-01-11 10:25:53 -05:00
parent aa2fc21258
commit e7a0fe416f
7 changed files with 249 additions and 63 deletions

View file

@ -174,13 +174,15 @@ export const PlayerIcon = (player, overlay) => {
}); });
}; };
const { Gdk } = imports.gi;
const display = Gdk.Display.get_default();
/** /**
* @param {Player} player * @param {Player} player
* @param {Variable} colors * @param {Variable} colors
*/ */
export const PositionSlider = (player, colors) => Slider({ export const PositionSlider = (player, colors) => Slider({
class_name: 'position-slider', class_name: 'position-slider',
cursor: 'pointer',
vpack: 'center', vpack: 'center',
hexpand: true, hexpand: true,
draw_value: false, draw_value: false,
@ -214,11 +216,36 @@ export const PositionSlider = (player, colors) => Slider({
`); `);
} }
}) })
// OnClick
.on('button-press-event', () => { .on('button-press-event', () => {
self.cursor = 'grabbing'; self.window.set_cursor(Gdk.Cursor.new_from_name(
display,
'grabbing',
));
}) })
// OnRelease
.on('button-release-event', () => { .on('button-release-event', () => {
self.cursor = 'pointer'; self.window.set_cursor(Gdk.Cursor.new_from_name(
display,
'pointer',
));
})
// OnHover
.on('enter-notify-event', () => {
self.window.set_cursor(Gdk.Cursor.new_from_name(
display,
'pointer',
));
self.toggleClassName('hover', true);
})
// OnHoverLost
.on('leave-notify-event', () => {
self.window.set_cursor(null);
self.toggleClassName('hover', false);
}); });
}, },
}); });

View file

@ -5,7 +5,8 @@ import { timeout } from 'resource:///com/github/Aylur/ags/utils.js';
import { HasNotifs } from './base.js'; import { HasNotifs } from './base.js';
const { Gtk } = imports.gi; const { Gdk, Gtk } = imports.gi;
const display = Gdk.Display.get_default();
const MAX_OFFSET = 200; const MAX_OFFSET = 200;
const OFFSCREEN = 300; const OFFSCREEN = 300;
@ -45,19 +46,45 @@ export default ({
}) => { }) => {
const widget = EventBox({ const widget = EventBox({
...props, ...props,
cursor: 'grab',
setup: (self) => { setup: (self) => {
self self
.on('leave-notify-event', () => { // OnClick
if (self.attribute.hovered) { .on('button-press-event', () => {
self.attribute.hovered = false; self.window.set_cursor(Gdk.Cursor.new_from_name(
} display,
'grabbing',
));
}) })
// OnRelease
.on('button-release-event', () => {
self.window.set_cursor(Gdk.Cursor.new_from_name(
display,
'grab',
));
})
// OnHover
.on('enter-notify-event', () => { .on('enter-notify-event', () => {
self.window.set_cursor(Gdk.Cursor.new_from_name(
display,
'grab',
));
self.toggleClassName('hover', true);
if (!self.attribute.hovered) { if (!self.attribute.hovered) {
self.attribute.hovered = true; self.attribute.hovered = true;
} }
})
// OnHoverLost
.on('leave-notify-event', () => {
self.window.set_cursor(null);
self.toggleClassName('hover', false);
if (self.attribute.hovered) {
self.attribute.hovered = false;
}
}); });
}, },

View file

@ -1,5 +1,8 @@
import { Box, CenterBox, Label, ToggleButton } from 'resource:///com/github/Aylur/ags/widget.js'; import { Box, CenterBox, Label, ToggleButton } from 'resource:///com/github/Aylur/ags/widget.js';
const { Gdk } = imports.gi;
const display = Gdk.Display.get_default();
import Separator from '../misc/separator.js'; import Separator from '../misc/separator.js';
import RoundedCorner from '../corners/screen-corners.js'; import RoundedCorner from '../corners/screen-corners.js';
import Key from './keys.js'; import Key from './keys.js';
@ -34,21 +37,38 @@ export default (window) => Box({
children: [ children: [
ToggleButton({ ToggleButton({
cursor: 'pointer',
class_name: 'button', class_name: 'button',
active: true, active: true,
vpack: 'center', vpack: 'center',
setup: (self) => { setup: (self) => {
self.on('toggled', () => { self
self.toggleClassName( .on('toggled', () => {
'toggled', self.toggleClassName(
self.get_active(), 'toggled',
); self.get_active(),
window.exclusivity = self.get_active() ? );
'exclusive' : window.exclusivity = self.get_active() ?
'normal'; 'exclusive' :
}); 'normal';
})
// OnHover
.on('enter-notify-event', () => {
self.window.set_cursor(
Gdk.Cursor.new_from_name(
display,
'pointer',
),
);
self.toggleClassName('hover', true);
})
// OnHoverLost
.on('leave-notify-event', () => {
self.window.set_cursor(null);
self.toggleClassName('hover', false);
});
}, },
child: Label('Exclusive'), child: Label('Exclusive'),

View file

@ -4,7 +4,8 @@ import Brightness from '../../services/brightness.js';
import { Box, EventBox, Label } from 'resource:///com/github/Aylur/ags/widget.js'; import { Box, EventBox, Label } from 'resource:///com/github/Aylur/ags/widget.js';
import { execAsync } from 'resource:///com/github/Aylur/ags/utils.js'; import { execAsync } from 'resource:///com/github/Aylur/ags/utils.js';
const { Gtk } = imports.gi; const { Gdk, Gtk } = imports.gi;
const display = Gdk.Display.get_default();
import Separator from '../misc/separator.js'; import Separator from '../misc/separator.js';
@ -78,7 +79,6 @@ const ModKey = (key) => {
} }
const button = EventBox({ const button = EventBox({
cursor: 'pointer',
class_name: 'key', class_name: 'key',
on_primary_click_release: (self) => { on_primary_click_release: (self) => {
@ -92,13 +92,29 @@ const ModKey = (key) => {
}, },
setup: (self) => { setup: (self) => {
self.hook(NormalClick, () => { self
Mod.value = false; .hook(NormalClick, () => {
Mod.value = false;
// @ts-expect-error // @ts-expect-error
self.child.toggleClassName('active', false); self.child.toggleClassName('active', false);
execAsync(`ydotool key ${key.keycode}:0`); execAsync(`ydotool key ${key.keycode}:0`);
}); })
// OnHover
.on('enter-notify-event', () => {
self.window.set_cursor(Gdk.Cursor.new_from_name(
display,
'pointer',
));
self.toggleClassName('hover', true);
})
// OnHoverLost
.on('leave-notify-event', () => {
self.window.set_cursor(null);
self.toggleClassName('hover', false);
});
}, },
child: Label({ child: Label({
class_name: `mod ${key.label}`, class_name: `mod ${key.label}`,
@ -117,7 +133,6 @@ const ModKey = (key) => {
/** @param {Object} key */ /** @param {Object} key */
const RegularKey = (key) => { const RegularKey = (key) => {
const widget = EventBox({ const widget = EventBox({
cursor: 'pointer',
class_name: 'key', class_name: 'key',
child: Label({ child: Label({
@ -157,6 +172,21 @@ const RegularKey = (key) => {
self.toggleClassName('altgr', AltGr.value); self.toggleClassName('altgr', AltGr.value);
self.label = AltGr.value ? key.labelAltGr : key.label; self.label = AltGr.value ? key.labelAltGr : key.label;
})
// OnHover
.on('enter-notify-event', () => {
self.window.set_cursor(Gdk.Cursor.new_from_name(
display,
'pointer',
));
self.toggleClassName('hover', true);
})
// OnHoverLost
.on('leave-notify-event', () => {
self.window.set_cursor(null);
self.toggleClassName('hover', false);
}); });
}, },
}), }),

View file

@ -8,6 +8,7 @@ const { Gtk, Gdk } = imports.gi;
import { updateClients } from './clients.js'; import { updateClients } from './clients.js';
const TARGET = [Gtk.TargetEntry.new('text/plain', Gtk.TargetFlags.SAME_APP, 0)]; const TARGET = [Gtk.TargetEntry.new('text/plain', Gtk.TargetFlags.SAME_APP, 0)];
const display = Gdk.Display.get_default();
/** /**
* @typedef {import('types/widgets/button').default} Button * @typedef {import('types/widgets/button').default} Button
@ -80,8 +81,6 @@ export const WindowButton = ({
}) => Button({ }) => Button({
...props, ...props,
cursor: 'pointer',
setup: (self) => { setup: (self) => {
self.drag_source_set( self.drag_source_set(
Gdk.ModifierType.BUTTON1_MASK, Gdk.ModifierType.BUTTON1_MASK,
@ -89,20 +88,39 @@ export const WindowButton = ({
Gdk.DragAction.COPY, Gdk.DragAction.COPY,
); );
self.on('drag-data-get', (_w, _c, data) => { self
data.set_text(address, address.length); .on('drag-data-get', (_w, _c, data) => {
}); data.set_text(address, address.length);
})
self.on('drag-begin', (_, context) => { .on('drag-begin', (_, context) => {
Gtk.drag_set_icon_surface(context, createSurfaceFromWidget(self)); Gtk.drag_set_icon_surface(
// @ts-expect-error context,
self.get_parent()?.set_reveal_child(false); createSurfaceFromWidget(self),
}); );
// @ts-expect-error
self.get_parent()?.set_reveal_child(false);
})
self.on('drag-end', () => { .on('drag-end', () => {
self.get_parent()?.destroy(); self.get_parent()?.destroy();
updateClients(mainBox); updateClients(mainBox);
}); })
// OnHover
.on('enter-notify-event', () => {
self.window.set_cursor(Gdk.Cursor.new_from_name(
display,
'pointer',
));
self.toggleClassName('hover', true);
})
// OnHoverLost
.on('leave-notify-event', () => {
self.window.set_cursor(null);
self.toggleClassName('hover', false);
});
}, },
}); });

View file

@ -2,6 +2,9 @@ import Audio from 'resource:///com/github/Aylur/ags/service/audio.js';
import { Box, Slider, Icon } from 'resource:///com/github/Aylur/ags/widget.js'; import { Box, Slider, Icon } from 'resource:///com/github/Aylur/ags/widget.js';
const { Gdk } = imports.gi;
const display = Gdk.Display.get_default();
import Brightness from '../../services/brightness.js'; import Brightness from '../../services/brightness.js';
import { SpeakerIcon } from '../misc/audio-icons.js'; import { SpeakerIcon } from '../misc/audio-icons.js';
@ -25,7 +28,6 @@ export default () => Box({
}), }),
Slider({ Slider({
cursor: 'pointer',
vpack: 'center', vpack: 'center',
max: 0.999, max: 0.999,
draw_value: false, draw_value: false,
@ -42,12 +44,35 @@ export default () => Box({
self.value = Audio.speaker?.volume || 0; self.value = Audio.speaker?.volume || 0;
}, 'speaker-changed') }, 'speaker-changed')
// OnClick
.on('button-press-event', () => { .on('button-press-event', () => {
self.cursor = 'grabbing'; self.window.set_cursor(Gdk.Cursor.new_from_name(
display,
'grabbing',
));
}) })
// OnRelease
.on('button-release-event', () => { .on('button-release-event', () => {
self.cursor = 'pointer'; self.window.set_cursor(Gdk.Cursor.new_from_name(
display,
'pointer',
));
})
// OnHover
.on('enter-notify-event', () => {
self.window.set_cursor(Gdk.Cursor.new_from_name(
display,
'pointer',
));
self.toggleClassName('hover', true);
})
// OnHoverLost
.on('leave-notify-event', () => {
self.window.set_cursor(null);
self.toggleClassName('hover', false);
}); });
}, },
}), }),
@ -66,7 +91,6 @@ export default () => Box({
}), }),
Slider({ Slider({
cursor: 'pointer',
vpack: 'center', vpack: 'center',
draw_value: false, draw_value: false,
@ -80,12 +104,35 @@ export default () => Box({
self.value = Brightness.screen; self.value = Brightness.screen;
}, 'screen') }, 'screen')
// OnClick
.on('button-press-event', () => { .on('button-press-event', () => {
self.cursor = 'grabbing'; self.window.set_cursor(Gdk.Cursor.new_from_name(
display,
'grabbing',
));
}) })
// OnRelease
.on('button-release-event', () => { .on('button-release-event', () => {
self.cursor = 'pointer'; self.window.set_cursor(Gdk.Cursor.new_from_name(
display,
'pointer',
));
})
// OnHover
.on('enter-notify-event', () => {
self.window.set_cursor(Gdk.Cursor.new_from_name(
display,
'pointer',
));
self.toggleClassName('hover', true);
})
// OnHoverLost
.on('leave-notify-event', () => {
self.window.set_cursor(null);
self.toggleClassName('hover', false);
}); });
}, },
}), }),

View file

@ -3,12 +3,13 @@ import Mpris from 'resource:///com/github/Aylur/ags/service/mpris.js';
import { CenterBox, Icon, ToggleButton } from 'resource:///com/github/Aylur/ags/widget.js'; import { CenterBox, Icon, ToggleButton } from 'resource:///com/github/Aylur/ags/widget.js';
const { Gdk } = imports.gi;
const display = Gdk.Display.get_default();
/** @param {import('types/widgets/revealer').default} rev */ /** @param {import('types/widgets/revealer').default} rev */
export default (rev) => CenterBox({ export default (rev) => CenterBox({
center_widget: ToggleButton({ center_widget: ToggleButton({
cursor: 'pointer',
setup: (self) => { setup: (self) => {
// Open at startup if there are players // Open at startup if there are players
const id = Mpris.connect('changed', () => { const id = Mpris.connect('changed', () => {
@ -16,24 +17,40 @@ export default (rev) => CenterBox({
Mpris.disconnect(id); Mpris.disconnect(id);
}); });
self.on('toggled', () => { self
if (self.get_active()) { .on('toggled', () => {
self.child if (self.get_active()) {
self.child
// @ts-expect-error // @ts-expect-error
?.setCss('-gtk-icon-transform: rotate(0deg);'); ?.setCss('-gtk-icon-transform: rotate(0deg);');
rev.reveal_child = true; rev.reveal_child = true;
} }
else { else {
self.child self.child
// @ts-expect-error // @ts-expect-error
?.setCss('-gtk-icon-transform: rotate(180deg);'); ?.setCss('-gtk-icon-transform: rotate(180deg);');
rev.reveal_child = false; rev.reveal_child = false;
} }
}); })
// OnHover
.on('enter-notify-event', () => {
self.window.set_cursor(Gdk.Cursor.new_from_name(
display,
'pointer',
));
self.toggleClassName('hover', true);
})
// OnHoverLost
.on('leave-notify-event', () => {
self.window.set_cursor(null);
self.toggleClassName('hover', false);
});
}, },
child: Icon({ child: Icon({
icon: `${App.configDir }/icons/down-large.svg`, icon: `${App.configDir}/icons/down-large.svg`,
class_name: 'arrow', class_name: 'arrow',
css: '-gtk-icon-transform: rotate(180deg);', css: '-gtk-icon-transform: rotate(180deg);',
}), }),