matt1432/nixos-configs
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(ags): use new widget prop cursor

Browse source
This commit is contained in:
matt1432 2023-11-16 15:02:00 -05:00
parent 6603902687
commit c5859fa87b
9 changed files with 173 additions and 193 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

167
devices/wim/config/ags/js/media-player/mpris.js
View file

@ -2,11 +2,8 @@ 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 { 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 { 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 Separator from '../misc/separator.js';
import EventBox from '../misc/cursorbox.js'; import EventBox from '../misc/cursorbox.js';
const icons = { const icons = {
mpris: { mpris: {
@ -148,58 +145,54 @@ export const PlayerIcon = (player, { symbolic = true, ...props } = {}) => {
}); });
}; };
export const PositionSlider = (player, props) => EventBox({ export const PositionSlider = (player, props) => Slider({
child: Slider({ ...props,
...props, className: 'position-slider',
className: 'position-slider', cursor: 'pointer',
hexpand: true, vpack: 'center',
drawValue: false, hexpand: true,
onChange: ({ value }) => { drawValue: false,
player.position = player.length * value; onChange: ({ value }) => {
}, player.position = player.length * value;
properties: [['update', slider => { },
if (slider.dragging) { properties: [['update', slider => {
slider.get_parent().window.set_cursor(Gdk.Cursor if (!slider.dragging) {
.new_from_name(display, 'grabbing')); slider.visible = player.length > 0;
if (player.length > 0)
slider.value = player.position / player.length;
}
}]],
connections: [
[player, s => s._update(s), 'position'],
[1000, s => s._update(s)],
[player.colors, s => {
const c = player.colors.value;
if (player.colors.value) {
s.setCss(`
highlight { background-color: ${c.buttonAccent}; }
slider { background-color: ${c.buttonAccent}; }
slider:hover { background-color: ${c.hoverAccent}; }
trough { background-color: ${c.buttonText}; }
`);
} }
else { }],
slider.get_parent()?.window?.set_cursor(Gdk.Cursor
.new_from_name(display, 'pointer'));
slider.visible = player.length > 0; ['button-press-event', s => { s.cursor = 'grabbing'; }],
if (player.length > 0) ['button-release-event', s => { s.cursor = 'pointer'; }],
slider.value = player.position / player.length; ],
}
}]],
connections: [
[player, s => s._update(s), 'position'],
[1000, s => s._update(s)],
[player.colors, s => {
const c = player.colors.value;
if (player.colors.value) {
s.setCss(`
highlight { background-color: ${c.buttonAccent}; }
slider { background-color: ${c.buttonAccent}; }
slider:hover { background-color: ${c.hoverAccent}; }
trough { background-color: ${c.buttonText}; }
`);
}
}],
],
}),
}); });
const PlayerButton = ({ player, items, onClick, prop }) => Button({ const PlayerButton = ({ player, items, onClick, prop }) => EventBox({
child: Stack({ items }), child: Button({
onPrimaryClickRelease: () => player[onClick](), child: Stack({ items }),
properties: [['hovered', false]], onPrimaryClickRelease: () => player[onClick](),
onHover: self => { properties: [['hovered', false]],
self._hovered = true; onHover: self => {
self.window.set_cursor(Gdk.Cursor.new_from_name(display, 'pointer')); self._hovered = true;
if (prop == 'playBackStatus') { if (prop == 'playBackStatus') {
items.forEach(item => { items.forEach(item => {
item[1].setCss(` item[1].setCss(`
background-color: ${player.colors.value.hoverAccent}; background-color: ${player.colors.value.hoverAccent};
color: ${player.colors.value.buttonText}; color: ${player.colors.value.buttonText};
min-height: 40px; min-height: 40px;
@ -207,37 +200,36 @@ const PlayerButton = ({ player, items, onClick, prop }) => Button({
margin-bottom: 1px; margin-bottom: 1px;
margin-right: 1px; margin-right: 1px;
`); `);
}); });
} }
}, },
onHoverLost: self => { onHoverLost: self => {
self._hovered = false; self._hovered = false;
self.window.set_cursor(null); if (prop == 'playBackStatus') {
if (prop == 'playBackStatus') { items.forEach(item => {
items.forEach(item => { item[1].setCss(`
item[1].setCss(`
background-color: ${player.colors.value.buttonAccent}; background-color: ${player.colors.value.buttonAccent};
color: ${player.colors.value.buttonText}; color: ${player.colors.value.buttonText};
min-height: 42px; min-height: 42px;
min-width: 38px; min-width: 38px;
`); `);
}); });
} }
}, },
connections: [ connections: [
[player, button => { [player, button => {
button.child.shown = `${player[prop]}`; button.child.shown = `${player[prop]}`;
}], }],
[player.colors, button => { [player.colors, button => {
if (!Mpris.players.find(p => player === p)) if (!Mpris.players.find(p => player === p))
return; return;
if (player.colors.value) { if (player.colors.value) {
if (prop == 'playBackStatus') { if (prop == 'playBackStatus') {
if (button._hovered) { if (button._hovered) {
items.forEach(item => { items.forEach(item => {
item[1].setCss(` item[1].setCss(`
background-color: ${player.colors.value.hoverAccent}; background-color: ${player.colors.value.hoverAccent};
color: ${player.colors.value.buttonText}; color: ${player.colors.value.buttonText};
min-height: 40px; min-height: 40px;
@ -245,27 +237,28 @@ const PlayerButton = ({ player, items, onClick, prop }) => Button({
margin-bottom: 1px; margin-bottom: 1px;
margin-right: 1px; margin-right: 1px;
`); `);
}); });
} }
else { else {
items.forEach(item => { items.forEach(item => {
item[1].setCss(` item[1].setCss(`
background-color: ${player.colors.value.buttonAccent}; background-color: ${player.colors.value.buttonAccent};
color: ${player.colors.value.buttonText}; color: ${player.colors.value.buttonText};
min-height: 42px; min-height: 42px;
min-width: 38px;`); min-width: 38px;`);
}); });
}
} }
} else {
else { button.setCss(`
button.setCss(`
* { color: ${player.colors.value.buttonAccent}; } * { color: ${player.colors.value.buttonAccent}; }
*:hover { color: ${player.colors.value.hoverAccent}; } *:hover { color: ${player.colors.value.hoverAccent}; }
`); `);
}
} }
} }],
}], ],
], }),
}); });
export const ShuffleButton = player => PlayerButton({ export const ShuffleButton = player => PlayerButton({

21
devices/wim/config/ags/js/misc/cursorbox.js
View file

@ -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 { Button, EventBox } from 'resource:///com/github/Aylur/ags/widget.js';
import Gtk from 'gi://Gtk'; import Gtk from 'gi://Gtk';
import Gdk from 'gi://Gdk';
const display = Gdk.Display.get_default();
// TODO: wrap in another EventBox for disabled cursor // TODO: wrap in another EventBox for disabled cursor
export default ({ export default ({
isButton = false, isButton = false,
reset = true,
onHover = () => {},
onHoverLost = () => {},
onPrimaryClickRelease = () => {}, onPrimaryClickRelease = () => {},
...props ...props
}) => { }) => {
@ -21,6 +16,7 @@ export default ({
const properties = { const properties = {
...props, ...props,
cursor: 'pointer',
onPrimaryClickRelease: self => { onPrimaryClickRelease: self => {
// Every click, do a one shot connect to // Every click, do a one shot connect to
// CanRun to wait for location of click // CanRun to wait for location of click
@ -31,21 +27,6 @@ export default ({
CanRun.disconnect(id); 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; let widget;

1
devices/wim/config/ags/js/notifications/base.js
View file

@ -179,7 +179,6 @@ export const Notification = ({
label: setTime(notif.time), label: setTime(notif.time),
}), }),
EventBox({ EventBox({
reset: false,
child: Button({ child: Button({
className: 'close-button', className: 'close-button',
vpack: 'start', vpack: 'start',

14
devices/wim/config/ags/js/notifications/gesture.js
View file

@ -5,8 +5,6 @@ import { timeout } from 'resource:///com/github/Aylur/ags/utils.js';
import { HasNotifs } from './base.js'; import { HasNotifs } from './base.js';
import Gtk from 'gi://Gtk'; import Gtk from 'gi://Gtk';
import Gdk from 'gi://Gdk';
const display = Gdk.Display.get_default();
export default ({ export default ({
@ -20,13 +18,12 @@ export default ({
}) => { }) => {
const widget = EventBox({ const widget = EventBox({
...props, ...props,
cursor: 'grab',
onHover: self => { onHover: self => {
self.window.set_cursor(Gdk.Cursor.new_from_name(display, 'grab'));
if (!self._hovered) if (!self._hovered)
self._hovered = true; self._hovered = true;
}, },
onHoverLost: self => { onHoverLost: self => {
self.window.set_cursor(null);
if (self._hovered) if (self._hovered)
self._hovered = false; self._hovered = false;
}, },
@ -85,9 +82,11 @@ export default ({
// When dragging // When dragging
[gesture, self => { [gesture, self => {
var offset = gesture.get_offset()[1]; var offset = gesture.get_offset()[1];
if (offset === 0)
return;
// Slide right // Slide right
if (offset >= 0) { if (offset > 0) {
self.setCss(` self.setCss(`
margin-top: 0px; margin-bottom: 0px; opacity: 1; transition: none; margin-top: 0px; margin-bottom: 0px; opacity: 1; transition: none;
margin-left: ${Number(offset + startMargin)}px; margin-left: ${Number(offset + startMargin)}px;
@ -107,7 +106,7 @@ export default ({
// Put a threshold on if a click is actually dragging // Put a threshold on if a click is actually dragging
widget._dragging = Math.abs(offset) > 10; widget._dragging = Math.abs(offset) > 10;
widget.window?.set_cursor(Gdk.Cursor.new_from_name(display, 'grabbing')); widget.cursor = 'grabbing';
}, 'drag-update'], }, 'drag-update'],
@ -137,8 +136,7 @@ export default ({
} }
else { else {
self.setCss(defaultStyle); self.setCss(defaultStyle);
widget.window?.set_cursor(Gdk.Cursor.new_from_name(display, 'grab')); widget.cursor = 'grab',
widget._dragging = false; widget._dragging = false;
} }
}, 'drag-end'], }, 'drag-end'],

54
devices/wim/config/ags/js/quick-settings/main.js
View file

@ -7,42 +7,46 @@ import PopupWindow from '../misc/popup.js';
import ToggleButton from './toggle-button.js'; import ToggleButton from './toggle-button.js';
const QuickSettingsWidget = () => Box({ const QuickSettingsWidget = () => {
className: 'qs-container', const rev = Revealer({
vertical: true, transition: 'slide_down',
children: [ child: Player(),
});
Box({ return Box({
className: 'quick-settings', className: 'qs-container',
vertical: true, vertical: true,
children: [ children: [
Label({ Box({
label: 'Control Center', className: 'quick-settings',
className: 'title', vertical: true,
hpack: 'start', children: [
css: `
Label({
label: 'Control Center',
className: 'title',
hpack: 'start',
css: `
margin-left: 20px; margin-left: 20px;
margin-bottom: 30px; margin-bottom: 30px;
`, `,
}), }),
ButtonGrid(), ButtonGrid(),
SliderBox(), SliderBox(),
ToggleButton(), ToggleButton(rev),
], ],
}), }),
Revealer({ rev,
transition: 'slide_down',
child: Player(),
}),
], ],
}); });
};
export default () => PopupWindow({ export default () => PopupWindow({
name: 'quick-settings', name: 'quick-settings',

45
devices/wim/config/ags/js/quick-settings/slider-box.js
View file

@ -1,5 +1,5 @@
import Audio from 'resource:///com/github/Aylur/ags/service/audio.js'; 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'; import { SpeakerIcon } from '../misc/audio-icons.js';
@ -22,10 +22,16 @@ export default () => Box({
}), }),
Slider({ Slider({
connections: [[Audio, slider => { cursor: 'pointer',
if (Audio.speaker) vpack: 'center',
slider.value = Audio.speaker.volume; connections: [
}, 'speaker-changed']], [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, onChange: ({ value }) => Audio.speaker.volume = value,
max: 0.999, max: 0.999,
draw_value: false, draw_value: false,
@ -43,22 +49,19 @@ export default () => Box({
icon: 'display-brightness-symbolic', icon: 'display-brightness-symbolic',
}), }),
EventBox({ Slider({
onHover: box => box.child._canChange = false, cursor: 'pointer',
onHoverLost: box => box.child._canChange = true, vpack: 'center',
child: Slider({ onChange: ({ value }) => Brightness.screen = value,
properties: [ connections: [
['canChange', true], [Brightness, slider => {
], slider.value = Brightness.screen;
onChange: ({ value }) => { }, 'screen'],
Brightness.screen = value;
}, ['button-press-event', s => { s.cursor = 'grabbing'; }],
connections: [[Brightness, slider => { ['button-release-event', s => { s.cursor = 'pointer'; }],
if (slider._canChange) ],
slider.value = Brightness.screen; draw_value: false,
}, 'screen']],
draw_value: false,
}),
}), }),
], ],
}), }),

13
devices/wim/config/ags/js/quick-settings/toggle-button.js
View file

@ -1,12 +1,11 @@
import App from 'resource:///com/github/Aylur/ags/app.js'; import App from 'resource:///com/github/Aylur/ags/app.js';
import Mpris from 'resource:///com/github/Aylur/ags/service/mpris.js'; import Mpris from 'resource:///com/github/Aylur/ags/service/mpris.js';
import { Icon, ToggleButton } from 'resource:///com/github/Aylur/ags/widget.js'; import { CenterBox, Icon, ToggleButton } from 'resource:///com/github/Aylur/ags/widget.js';
import EventBox from '../misc/cursorbox.js';
export default () => EventBox({ export default rev => CenterBox({
child: 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,8 +15,6 @@ export default () => EventBox({
}, },
connections: [['toggled', self => { connections: [['toggled', self => {
const rev = self.get_parent().get_parent().get_parent().children[1];
if (self.get_active()) { if (self.get_active()) {
self.get_children()[0] self.get_children()[0]
.setCss('-gtk-icon-transform: rotate(0deg);'); .setCss('-gtk-icon-transform: rotate(0deg);');
@ -36,4 +33,6 @@ export default () => EventBox({
css: '-gtk-icon-transform: rotate(180deg);', css: '-gtk-icon-transform: rotate(180deg);',
}), }),
}), }),
start_widget: null,
end_widget: null,
}); });

51
devices/wim/config/ags/scss/widgets/quick-settings.scss
View file

@ -132,35 +132,38 @@
margin-right: -20px; margin-right: -20px;
} }
scale { .slider {
min-height: 55px; min-height: 55px;
min-width: 400px;
margin-left: 18px;
margin-right: 20px;
highlight { scale {
margin: 0; min-width: 400px;
background-color: #79659f; margin-left: 18px;
border-radius: 2em; margin-right: 20px;
}
trough { highlight {
background-color: #363847; margin: 0;
border-radius: 2em; background-color: #79659f;
} border-radius: 2em;
}
slider { trough {
margin: -4px; background-color: #363847;
min-width: 20px; border-radius: 2em;
min-height: 20px; }
background: #3e4153;
border-radius: 100%;
transition: background-color 0.5s ease-in-out;
}
slider:hover { slider {
background-color: #303240; margin: -4px;
transition: background-color 0.5s ease-in-out; min-width: 20px;
min-height: 20px;
background: #3e4153;
border-radius: 100%;
transition: background-color 0.5s ease-in-out;
}
slider:hover {
background-color: #303240;
transition: background-color 0.5s ease-in-out;
}
} }
} }
} }

BIN
flake.lock
View file

Binary file not shown.