fix(ags): use hover events and Gdk cursor method
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
aa2fc21258
commit
e7a0fe416f
7 changed files with 249 additions and 63 deletions
|
@ -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);
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
|
@ -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;
|
||||||
|
}
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
|
@ -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'),
|
||||||
|
|
|
@ -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);
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
}),
|
}),
|
||||||
|
|
|
@ -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);
|
||||||
|
});
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
|
@ -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);
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
}),
|
}),
|
||||||
|
|
|
@ -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);',
|
||||||
}),
|
}),
|
||||||
|
|
Loading…
Reference in a new issue