feat(ags): use new widget prop cursor
This commit is contained in:
parent
6603902687
commit
c5859fa87b
9 changed files with 173 additions and 193 deletions
|
@ -2,9 +2,6 @@ import Mpris from 'resource:///com/github/Aylur/ags/service/mpris.js';
|
|||
import { Button, Icon, Label, Stack, Slider, CenterBox, Box } from 'resource:///com/github/Aylur/ags/widget.js';
|
||||
import { execAsync, lookUpIcon, readFileAsync } from 'resource:///com/github/Aylur/ags/utils.js';
|
||||
|
||||
import Gdk from 'gi://Gdk';
|
||||
const display = Gdk.Display.get_default();
|
||||
|
||||
import Separator from '../misc/separator.js';
|
||||
import EventBox from '../misc/cursorbox.js';
|
||||
|
||||
|
@ -148,24 +145,18 @@ export const PlayerIcon = (player, { symbolic = true, ...props } = {}) => {
|
|||
});
|
||||
};
|
||||
|
||||
export const PositionSlider = (player, props) => EventBox({
|
||||
child: Slider({
|
||||
export const PositionSlider = (player, props) => Slider({
|
||||
...props,
|
||||
className: 'position-slider',
|
||||
cursor: 'pointer',
|
||||
vpack: 'center',
|
||||
hexpand: true,
|
||||
drawValue: false,
|
||||
onChange: ({ value }) => {
|
||||
player.position = player.length * value;
|
||||
},
|
||||
properties: [['update', slider => {
|
||||
if (slider.dragging) {
|
||||
slider.get_parent().window.set_cursor(Gdk.Cursor
|
||||
.new_from_name(display, 'grabbing'));
|
||||
}
|
||||
else {
|
||||
slider.get_parent()?.window?.set_cursor(Gdk.Cursor
|
||||
.new_from_name(display, 'pointer'));
|
||||
|
||||
if (!slider.dragging) {
|
||||
slider.visible = player.length > 0;
|
||||
if (player.length > 0)
|
||||
slider.value = player.position / player.length;
|
||||
|
@ -185,17 +176,19 @@ export const PositionSlider = (player, props) => EventBox({
|
|||
`);
|
||||
}
|
||||
}],
|
||||
|
||||
['button-press-event', s => { s.cursor = 'grabbing'; }],
|
||||
['button-release-event', s => { s.cursor = 'pointer'; }],
|
||||
],
|
||||
}),
|
||||
});
|
||||
|
||||
const PlayerButton = ({ player, items, onClick, prop }) => Button({
|
||||
const PlayerButton = ({ player, items, onClick, prop }) => EventBox({
|
||||
child: Button({
|
||||
child: Stack({ items }),
|
||||
onPrimaryClickRelease: () => player[onClick](),
|
||||
properties: [['hovered', false]],
|
||||
onHover: self => {
|
||||
self._hovered = true;
|
||||
self.window.set_cursor(Gdk.Cursor.new_from_name(display, 'pointer'));
|
||||
|
||||
if (prop == 'playBackStatus') {
|
||||
items.forEach(item => {
|
||||
|
@ -212,7 +205,6 @@ const PlayerButton = ({ player, items, onClick, prop }) => Button({
|
|||
},
|
||||
onHoverLost: self => {
|
||||
self._hovered = false;
|
||||
self.window.set_cursor(null);
|
||||
if (prop == 'playBackStatus') {
|
||||
items.forEach(item => {
|
||||
item[1].setCss(`
|
||||
|
@ -266,6 +258,7 @@ const PlayerButton = ({ player, items, onClick, prop }) => Button({
|
|||
}
|
||||
}],
|
||||
],
|
||||
}),
|
||||
});
|
||||
|
||||
export const ShuffleButton = player => PlayerButton({
|
||||
|
|
|
@ -2,16 +2,11 @@ import Variable from 'resource:///com/github/Aylur/ags/variable.js';
|
|||
import { Button, EventBox } from 'resource:///com/github/Aylur/ags/widget.js';
|
||||
|
||||
import Gtk from 'gi://Gtk';
|
||||
import Gdk from 'gi://Gdk';
|
||||
const display = Gdk.Display.get_default();
|
||||
|
||||
|
||||
// TODO: wrap in another EventBox for disabled cursor
|
||||
export default ({
|
||||
isButton = false,
|
||||
reset = true,
|
||||
onHover = () => {},
|
||||
onHoverLost = () => {},
|
||||
onPrimaryClickRelease = () => {},
|
||||
...props
|
||||
}) => {
|
||||
|
@ -21,6 +16,7 @@ export default ({
|
|||
|
||||
const properties = {
|
||||
...props,
|
||||
cursor: 'pointer',
|
||||
onPrimaryClickRelease: self => {
|
||||
// Every click, do a one shot connect to
|
||||
// CanRun to wait for location of click
|
||||
|
@ -31,21 +27,6 @@ export default ({
|
|||
CanRun.disconnect(id);
|
||||
});
|
||||
},
|
||||
onHover: self => {
|
||||
if (!self.child.sensitive || !self.sensitive)
|
||||
self.window.set_cursor(Gdk.Cursor.new_from_name(display, 'not-allowed'));
|
||||
|
||||
else
|
||||
self.window.set_cursor(Gdk.Cursor.new_from_name(display, 'pointer'));
|
||||
|
||||
onHover(self);
|
||||
},
|
||||
onHoverLost: self => {
|
||||
if (reset)
|
||||
self.window.set_cursor(null);
|
||||
|
||||
onHoverLost(self);
|
||||
},
|
||||
};
|
||||
|
||||
let widget;
|
||||
|
|
|
@ -179,7 +179,6 @@ export const Notification = ({
|
|||
label: setTime(notif.time),
|
||||
}),
|
||||
EventBox({
|
||||
reset: false,
|
||||
child: Button({
|
||||
className: 'close-button',
|
||||
vpack: 'start',
|
||||
|
|
|
@ -5,8 +5,6 @@ import { timeout } from 'resource:///com/github/Aylur/ags/utils.js';
|
|||
import { HasNotifs } from './base.js';
|
||||
|
||||
import Gtk from 'gi://Gtk';
|
||||
import Gdk from 'gi://Gdk';
|
||||
const display = Gdk.Display.get_default();
|
||||
|
||||
|
||||
export default ({
|
||||
|
@ -20,13 +18,12 @@ export default ({
|
|||
}) => {
|
||||
const widget = EventBox({
|
||||
...props,
|
||||
cursor: 'grab',
|
||||
onHover: self => {
|
||||
self.window.set_cursor(Gdk.Cursor.new_from_name(display, 'grab'));
|
||||
if (!self._hovered)
|
||||
self._hovered = true;
|
||||
},
|
||||
onHoverLost: self => {
|
||||
self.window.set_cursor(null);
|
||||
if (self._hovered)
|
||||
self._hovered = false;
|
||||
},
|
||||
|
@ -85,9 +82,11 @@ export default ({
|
|||
// When dragging
|
||||
[gesture, self => {
|
||||
var offset = gesture.get_offset()[1];
|
||||
if (offset === 0)
|
||||
return;
|
||||
|
||||
// Slide right
|
||||
if (offset >= 0) {
|
||||
if (offset > 0) {
|
||||
self.setCss(`
|
||||
margin-top: 0px; margin-bottom: 0px; opacity: 1; transition: none;
|
||||
margin-left: ${Number(offset + startMargin)}px;
|
||||
|
@ -107,7 +106,7 @@ export default ({
|
|||
|
||||
// Put a threshold on if a click is actually dragging
|
||||
widget._dragging = Math.abs(offset) > 10;
|
||||
widget.window?.set_cursor(Gdk.Cursor.new_from_name(display, 'grabbing'));
|
||||
widget.cursor = 'grabbing';
|
||||
}, 'drag-update'],
|
||||
|
||||
|
||||
|
@ -137,8 +136,7 @@ export default ({
|
|||
}
|
||||
else {
|
||||
self.setCss(defaultStyle);
|
||||
widget.window?.set_cursor(Gdk.Cursor.new_from_name(display, 'grab'));
|
||||
|
||||
widget.cursor = 'grab',
|
||||
widget._dragging = false;
|
||||
}
|
||||
}, 'drag-end'],
|
||||
|
|
|
@ -7,7 +7,13 @@ import PopupWindow from '../misc/popup.js';
|
|||
import ToggleButton from './toggle-button.js';
|
||||
|
||||
|
||||
const QuickSettingsWidget = () => Box({
|
||||
const QuickSettingsWidget = () => {
|
||||
const rev = Revealer({
|
||||
transition: 'slide_down',
|
||||
child: Player(),
|
||||
});
|
||||
|
||||
return Box({
|
||||
className: 'qs-container',
|
||||
vertical: true,
|
||||
children: [
|
||||
|
@ -31,18 +37,16 @@ const QuickSettingsWidget = () => Box({
|
|||
|
||||
SliderBox(),
|
||||
|
||||
ToggleButton(),
|
||||
ToggleButton(rev),
|
||||
|
||||
],
|
||||
}),
|
||||
|
||||
Revealer({
|
||||
transition: 'slide_down',
|
||||
child: Player(),
|
||||
}),
|
||||
rev,
|
||||
|
||||
],
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
export default () => PopupWindow({
|
||||
name: 'quick-settings',
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
import Audio from 'resource:///com/github/Aylur/ags/service/audio.js';
|
||||
import { Box, Slider, Icon, EventBox } from 'resource:///com/github/Aylur/ags/widget.js';
|
||||
import { Box, Slider, Icon } from 'resource:///com/github/Aylur/ags/widget.js';
|
||||
|
||||
import { SpeakerIcon } from '../misc/audio-icons.js';
|
||||
|
||||
|
@ -22,10 +22,16 @@ export default () => Box({
|
|||
}),
|
||||
|
||||
Slider({
|
||||
connections: [[Audio, slider => {
|
||||
if (Audio.speaker)
|
||||
slider.value = Audio.speaker.volume;
|
||||
}, 'speaker-changed']],
|
||||
cursor: 'pointer',
|
||||
vpack: 'center',
|
||||
connections: [
|
||||
[Audio, slider => {
|
||||
slider.value = Audio.speaker?.volume;
|
||||
}, 'speaker-changed'],
|
||||
|
||||
['button-press-event', s => { s.cursor = 'grabbing'; }],
|
||||
['button-release-event', s => { s.cursor = 'pointer'; }],
|
||||
],
|
||||
onChange: ({ value }) => Audio.speaker.volume = value,
|
||||
max: 0.999,
|
||||
draw_value: false,
|
||||
|
@ -43,23 +49,20 @@ export default () => Box({
|
|||
icon: 'display-brightness-symbolic',
|
||||
}),
|
||||
|
||||
EventBox({
|
||||
onHover: box => box.child._canChange = false,
|
||||
onHoverLost: box => box.child._canChange = true,
|
||||
child: Slider({
|
||||
properties: [
|
||||
['canChange', true],
|
||||
],
|
||||
onChange: ({ value }) => {
|
||||
Brightness.screen = value;
|
||||
},
|
||||
connections: [[Brightness, slider => {
|
||||
if (slider._canChange)
|
||||
Slider({
|
||||
cursor: 'pointer',
|
||||
vpack: 'center',
|
||||
onChange: ({ value }) => Brightness.screen = value,
|
||||
connections: [
|
||||
[Brightness, slider => {
|
||||
slider.value = Brightness.screen;
|
||||
}, 'screen']],
|
||||
}, 'screen'],
|
||||
|
||||
['button-press-event', s => { s.cursor = 'grabbing'; }],
|
||||
['button-release-event', s => { s.cursor = 'pointer'; }],
|
||||
],
|
||||
draw_value: false,
|
||||
}),
|
||||
}),
|
||||
],
|
||||
}),
|
||||
|
||||
|
|
|
@ -1,12 +1,11 @@
|
|||
import App from 'resource:///com/github/Aylur/ags/app.js';
|
||||
import Mpris from 'resource:///com/github/Aylur/ags/service/mpris.js';
|
||||
import { Icon, ToggleButton } from 'resource:///com/github/Aylur/ags/widget.js';
|
||||
|
||||
import EventBox from '../misc/cursorbox.js';
|
||||
import { CenterBox, Icon, ToggleButton } from 'resource:///com/github/Aylur/ags/widget.js';
|
||||
|
||||
|
||||
export default () => EventBox({
|
||||
child: ToggleButton({
|
||||
export default rev => CenterBox({
|
||||
center_widget: ToggleButton({
|
||||
cursor: 'pointer',
|
||||
setup: self => {
|
||||
// Open at startup if there are players
|
||||
const id = Mpris.connect('changed', () => {
|
||||
|
@ -16,8 +15,6 @@ export default () => EventBox({
|
|||
},
|
||||
|
||||
connections: [['toggled', self => {
|
||||
const rev = self.get_parent().get_parent().get_parent().children[1];
|
||||
|
||||
if (self.get_active()) {
|
||||
self.get_children()[0]
|
||||
.setCss('-gtk-icon-transform: rotate(0deg);');
|
||||
|
@ -36,4 +33,6 @@ export default () => EventBox({
|
|||
css: '-gtk-icon-transform: rotate(180deg);',
|
||||
}),
|
||||
}),
|
||||
start_widget: null,
|
||||
end_widget: null,
|
||||
});
|
||||
|
|
|
@ -132,8 +132,10 @@
|
|||
margin-right: -20px;
|
||||
}
|
||||
|
||||
scale {
|
||||
.slider {
|
||||
min-height: 55px;
|
||||
|
||||
scale {
|
||||
min-width: 400px;
|
||||
margin-left: 18px;
|
||||
margin-right: 20px;
|
||||
|
@ -163,4 +165,5 @@
|
|||
transition: background-color 0.5s ease-in-out;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
BIN
flake.lock
BIN
flake.lock
Binary file not shown.
Loading…
Reference in a new issue