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 {Variable} colors
*/
export const PositionSlider = (player, colors) => Slider({
class_name: 'position-slider',
cursor: 'pointer',
vpack: 'center',
hexpand: true,
draw_value: false,
@ -214,11 +216,36 @@ export const PositionSlider = (player, colors) => Slider({
`);
}
})
// OnClick
.on('button-press-event', () => {
self.cursor = 'grabbing';
self.window.set_cursor(Gdk.Cursor.new_from_name(
display,
'grabbing',
));
})
// OnRelease
.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';
const { Gtk } = imports.gi;
const { Gdk, Gtk } = imports.gi;
const display = Gdk.Display.get_default();
const MAX_OFFSET = 200;
const OFFSCREEN = 300;
@ -45,19 +46,45 @@ export default ({
}) => {
const widget = EventBox({
...props,
cursor: 'grab',
setup: (self) => {
self
.on('leave-notify-event', () => {
if (self.attribute.hovered) {
self.attribute.hovered = false;
}
// OnClick
.on('button-press-event', () => {
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', () => {
self.window.set_cursor(Gdk.Cursor.new_from_name(
display,
'grab',
));
self.toggleClassName('hover', true);
if (!self.attribute.hovered) {
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';
const { Gdk } = imports.gi;
const display = Gdk.Display.get_default();
import Separator from '../misc/separator.js';
import RoundedCorner from '../corners/screen-corners.js';
import Key from './keys.js';
@ -34,21 +37,38 @@ export default (window) => Box({
children: [
ToggleButton({
cursor: 'pointer',
class_name: 'button',
active: true,
vpack: 'center',
setup: (self) => {
self.on('toggled', () => {
self.toggleClassName(
'toggled',
self.get_active(),
);
window.exclusivity = self.get_active() ?
'exclusive' :
'normal';
});
self
.on('toggled', () => {
self.toggleClassName(
'toggled',
self.get_active(),
);
window.exclusivity = self.get_active() ?
'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'),

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 { 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';
@ -78,7 +79,6 @@ const ModKey = (key) => {
}
const button = EventBox({
cursor: 'pointer',
class_name: 'key',
on_primary_click_release: (self) => {
@ -92,13 +92,29 @@ const ModKey = (key) => {
},
setup: (self) => {
self.hook(NormalClick, () => {
Mod.value = false;
self
.hook(NormalClick, () => {
Mod.value = false;
// @ts-expect-error
self.child.toggleClassName('active', false);
execAsync(`ydotool key ${key.keycode}:0`);
});
// @ts-expect-error
self.child.toggleClassName('active', false);
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({
class_name: `mod ${key.label}`,
@ -117,7 +133,6 @@ const ModKey = (key) => {
/** @param {Object} key */
const RegularKey = (key) => {
const widget = EventBox({
cursor: 'pointer',
class_name: 'key',
child: Label({
@ -157,6 +172,21 @@ const RegularKey = (key) => {
self.toggleClassName('altgr', AltGr.value);
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';
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
@ -80,8 +81,6 @@ export const WindowButton = ({
}) => Button({
...props,
cursor: 'pointer',
setup: (self) => {
self.drag_source_set(
Gdk.ModifierType.BUTTON1_MASK,
@ -89,20 +88,39 @@ export const WindowButton = ({
Gdk.DragAction.COPY,
);
self.on('drag-data-get', (_w, _c, data) => {
data.set_text(address, address.length);
});
self
.on('drag-data-get', (_w, _c, data) => {
data.set_text(address, address.length);
})
self.on('drag-begin', (_, context) => {
Gtk.drag_set_icon_surface(context, createSurfaceFromWidget(self));
// @ts-expect-error
self.get_parent()?.set_reveal_child(false);
});
.on('drag-begin', (_, context) => {
Gtk.drag_set_icon_surface(
context,
createSurfaceFromWidget(self),
);
// @ts-expect-error
self.get_parent()?.set_reveal_child(false);
})
self.on('drag-end', () => {
self.get_parent()?.destroy();
.on('drag-end', () => {
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';
const { Gdk } = imports.gi;
const display = Gdk.Display.get_default();
import Brightness from '../../services/brightness.js';
import { SpeakerIcon } from '../misc/audio-icons.js';
@ -25,7 +28,6 @@ export default () => Box({
}),
Slider({
cursor: 'pointer',
vpack: 'center',
max: 0.999,
draw_value: false,
@ -42,12 +44,35 @@ export default () => Box({
self.value = Audio.speaker?.volume || 0;
}, 'speaker-changed')
// OnClick
.on('button-press-event', () => {
self.cursor = 'grabbing';
self.window.set_cursor(Gdk.Cursor.new_from_name(
display,
'grabbing',
));
})
// OnRelease
.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({
cursor: 'pointer',
vpack: 'center',
draw_value: false,
@ -80,12 +104,35 @@ export default () => Box({
self.value = Brightness.screen;
}, 'screen')
// OnClick
.on('button-press-event', () => {
self.cursor = 'grabbing';
self.window.set_cursor(Gdk.Cursor.new_from_name(
display,
'grabbing',
));
})
// OnRelease
.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';
const { Gdk } = imports.gi;
const display = Gdk.Display.get_default();
/** @param {import('types/widgets/revealer').default} rev */
export default (rev) => CenterBox({
center_widget: ToggleButton({
cursor: 'pointer',
setup: (self) => {
// Open at startup if there are players
const id = Mpris.connect('changed', () => {
@ -16,24 +17,40 @@ export default (rev) => CenterBox({
Mpris.disconnect(id);
});
self.on('toggled', () => {
if (self.get_active()) {
self.child
self
.on('toggled', () => {
if (self.get_active()) {
self.child
// @ts-expect-error
?.setCss('-gtk-icon-transform: rotate(0deg);');
rev.reveal_child = true;
}
else {
self.child
?.setCss('-gtk-icon-transform: rotate(0deg);');
rev.reveal_child = true;
}
else {
self.child
// @ts-expect-error
?.setCss('-gtk-icon-transform: rotate(180deg);');
rev.reveal_child = false;
}
});
?.setCss('-gtk-icon-transform: rotate(180deg);');
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({
icon: `${App.configDir }/icons/down-large.svg`,
icon: `${App.configDir}/icons/down-large.svg`,
class_name: 'arrow',
css: '-gtk-icon-transform: rotate(180deg);',
}),