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

refactor(ags notifs): clarify code

Browse source
This commit is contained in:
matt1432 2023-11-01 15:29:47 -04:00
parent 0f02a0494e
commit b5f16fcfcb
4 changed files with 53 additions and 57 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
devices/wim/config/ags/js/media-player/gesture.js
View file

@ -38,7 +38,7 @@ export default ({
const playerBox = overlay.list().at(-1); const playerBox = overlay.list().at(-1);
// Sliding right // Slide right
if (offset >= 0) { if (offset >= 0) {
playerBox.setStyle(` playerBox.setStyle(`
margin-left: ${offset}px; margin-left: ${offset}px;
@ -47,7 +47,7 @@ export default ({
`); `);
} }
// Sliding left // Slide left
else { else {
offset = Math.abs(offset); offset = Math.abs(offset);
playerBox.setStyle(` playerBox.setStyle(`

6
devices/wim/config/ags/js/notifications/center.js
View file

@ -12,13 +12,13 @@ const ClearButton = () => EventBox({
child: Button({ child: Button({
onPrimaryClickRelease: button => { onPrimaryClickRelease: button => {
button._popups.children.forEach(ch => { button._popups.children.forEach(ch => {
ch.child.setStyle(ch.child._leftAnim1); ch.child.setStyle(ch.child._slideLeft);
ch.sensitive = false; ch.sensitive = false;
}); });
button._notifList.children.forEach(ch => { button._notifList.children.forEach(ch => {
if (ch.child) { if (ch.child) {
ch.child.setStyle(ch.child._rightAnim1); ch.child.setStyle(ch.child._slideRight);
ch.sensitive = false; ch.sensitive = false;
} }
timeout(500, () => { timeout(500, () => {
@ -94,7 +94,7 @@ const NotificationList = Box({
[Notifications, (box, id) => { [Notifications, (box, id) => {
for (const ch of box.children) { for (const ch of box.children) {
if (ch._id == id) { if (ch._id == id) {
ch.child.setStyle(ch.child._rightAnim1); ch.child.setStyle(ch.child._slideRight);
ch.sensitive = false; ch.sensitive = false;
timeout(500, () => box.remove(ch)); timeout(500, () => box.remove(ch));
return; return;

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

@ -36,52 +36,55 @@ export default ({
const gesture = Gtk.GestureDrag.new(widget); const gesture = Gtk.GestureDrag.new(widget);
const leftAnim1 = `transition: margin 0.5s ease, opacity 0.5s ease; const TRANSITION = 'transition: margin 0.5s ease, opacity 0.5s ease;';
margin-left: -${Number(maxOffset + endMargin)}px; const SQUEEZED = 'margin-bottom: -70px; margin-top: -70px;';
margin-right: ${Number(maxOffset + endMargin)}px; const MAX_LEFT = `
opacity: 0;`; margin-left: -${Number(maxOffset + endMargin)}px;
margin-right: ${Number(maxOffset + endMargin)}px;
`;
const MAX_RIGHT = `
margin-left: ${Number(maxOffset + endMargin)}px;
margin-right: -${Number(maxOffset + endMargin)}px;
`;
const leftAnim2 = `transition: margin 0.5s ease, opacity 0.5s ease; const slideLeft = `${TRANSITION} ${MAX_LEFT} opacity: 0;`;
margin-left: -${Number(maxOffset + endMargin)}px; const squeezeLeft = `${TRANSITION} ${MAX_LEFT} ${SQUEEZED} opacity: 0;`;
margin-right: ${Number(maxOffset + endMargin)}px; const slideRight = `${TRANSITION} ${MAX_RIGHT} opacity: 0;`;
margin-bottom: -70px; margin-top: -70px; opacity: 0;`; const squeezeRight = `${TRANSITION} ${MAX_RIGHT} ${SQUEEZED} opacity: 0;`;
const rightAnim1 = `transition: margin 0.5s ease, opacity 0.5s ease;
margin-left: ${Number(maxOffset + endMargin)}px;
margin-right: -${Number(maxOffset + endMargin)}px;
opacity: 0;`;
const rightAnim2 = `transition: margin 0.5s ease, opacity 0.5s ease;
margin-left: ${Number(maxOffset + endMargin)}px;
margin-right: -${Number(maxOffset + endMargin)}px;
margin-bottom: -70px; margin-top: -70px; opacity: 0;`;
widget.add(Box({ widget.add(Box({
properties: [ properties: [
['leftAnim1', leftAnim1], ['slideLeft', slideLeft],
['leftAnim2', leftAnim2], ['squeezeLeft', squeezeLeft],
['rightAnim1', rightAnim1], ['slideRight', slideRight],
['rightAnim2', rightAnim2], ['squeezeRight', squeezeRight],
['ready', false], ['ready', false],
], ],
children: [ children: [
...children, ...children,
child, child,
], ],
style: leftAnim2, style: squeezeLeft,
connections: [ connections: [
[gesture, self => { [gesture, self => {
var offset = gesture.get_offset()[1]; var offset = gesture.get_offset()[1];
// Slide right
if (offset >= 0) { if (offset >= 0) {
self.setStyle(`margin-left: ${Number(offset + startMargin)}px; self.setStyle(`
margin-right: -${Number(offset + startMargin)}px;`); margin-left: ${Number(offset + startMargin)}px;
margin-right: -${Number(offset + startMargin)}px;
`);
} }
// Slide left
else { else {
offset = Math.abs(offset); offset = Math.abs(offset);
self.setStyle(`margin-right: ${Number(offset + startMargin)}px; self.setStyle(`
margin-left: -${Number(offset + startMargin)}px;`); margin-right: ${Number(offset + startMargin)}px;
margin-left: -${Number(offset + startMargin)}px;
`);
} }
self.get_parent()._dragging = Math.abs(offset) > 10; self.get_parent()._dragging = Math.abs(offset) > 10;
@ -91,51 +94,44 @@ export default ({
}, 'drag-update'], }, 'drag-update'],
[gesture, self => { [gesture, self => {
// ?
if (!self._ready) { if (!self._ready) {
self.setStyle(`transition: margin 0.5s ease, opacity 0.5s ease; self.setStyle(slideLeft);
margin-left: -${Number(maxOffset + endMargin)}px;
margin-right: ${Number(maxOffset + endMargin)}px;
margin-bottom: 0px; margin-top: 0px; opacity: 0;`);
timeout(500, () => { timeout(500, () => self.setStyle(`${TRANSITION} margin: unset; opacity: 1;`));
self.setStyle(`transition: margin 0.5s ease, opacity 0.5s ease;
margin-left: ${startMargin}px;
margin-right: ${startMargin}px;
margin-bottom: unset; margin-top: unset;
opacity: 1;`);
});
timeout(1000, () => self._ready = true); timeout(1000, () => self._ready = true);
return; return;
} }
const offset = gesture.get_offset()[1]; const offset = gesture.get_offset()[1];
// If crosses threshold after letting go, slide away
if (Math.abs(offset) > maxOffset) { if (Math.abs(offset) > maxOffset) {
// Slide away right
if (offset > 0) { if (offset > 0) {
self.setStyle(rightAnim1); // Disable inputs during animation
widget.sensitive = false; widget.sensitive = false;
timeout(500, () => {
self.setStyle(rightAnim2); self.setStyle(slideRight);
}); timeout(500, () => self.setStyle(squeezeRight));
} }
// Slide away left
else { else {
self.setStyle(leftAnim1); // Disable inputs during animation
widget.sensitive = false; widget.sensitive = false;
timeout(500, () => {
self.setStyle(leftAnim2); self.setStyle(slideLeft);
}); timeout(500, () => self.setStyle(squeezeLeft));
} }
timeout(1000, () => { timeout(1000, () => {
command(); command();
self.destroy(); self.destroy();
}); });
} }
else { else {
self.setStyle(`transition: margin 0.5s ease, opacity 0.5s ease; self.setStyle(`${TRANSITION} margin: unset; opacity: 1;`);
margin-left: ${startMargin}px;
margin-right: ${startMargin}px;
margin-bottom: unset; margin-top: unset;
opacity: 1;`);
if (widget.window) if (widget.window)
widget.window.set_cursor(Gdk.Cursor.new_from_name(display, 'grab')); widget.window.set_cursor(Gdk.Cursor.new_from_name(display, 'grab'));

2
devices/wim/config/ags/js/notifications/popup.js
View file

@ -53,7 +53,7 @@ const Popups = () => Box({
box._map.get(id).interval = interval(4500, () => { box._map.get(id).interval = interval(4500, () => {
const notif = box._map.get(id); const notif = box._map.get(id);
if (!notif._hovered) { if (!notif._hovered) {
notif.child.setStyle(notif.child._leftAnim1); notif.child.setStyle(notif.child._slideLeft);
if (notif.interval) { if (notif.interval) {
timeout(500, () => notif.destroy()); timeout(500, () => notif.destroy());