From b5f16fcfcbbc0ef1071fe4da9acb01b96cbc969d Mon Sep 17 00:00:00 2001 From: matt1432 Date: Wed, 1 Nov 2023 15:29:47 -0400 Subject: [PATCH] refactor(ags notifs): clarify code --- .../wim/config/ags/js/media-player/gesture.js | 4 +- .../wim/config/ags/js/notifications/center.js | 6 +- .../config/ags/js/notifications/gesture.js | 98 +++++++++---------- .../wim/config/ags/js/notifications/popup.js | 2 +- 4 files changed, 53 insertions(+), 57 deletions(-) diff --git a/devices/wim/config/ags/js/media-player/gesture.js b/devices/wim/config/ags/js/media-player/gesture.js index 489b40c..3d68721 100644 --- a/devices/wim/config/ags/js/media-player/gesture.js +++ b/devices/wim/config/ags/js/media-player/gesture.js @@ -38,7 +38,7 @@ export default ({ const playerBox = overlay.list().at(-1); - // Sliding right + // Slide right if (offset >= 0) { playerBox.setStyle(` margin-left: ${offset}px; @@ -47,7 +47,7 @@ export default ({ `); } - // Sliding left + // Slide left else { offset = Math.abs(offset); playerBox.setStyle(` diff --git a/devices/wim/config/ags/js/notifications/center.js b/devices/wim/config/ags/js/notifications/center.js index 43283ef..0a7bcc1 100644 --- a/devices/wim/config/ags/js/notifications/center.js +++ b/devices/wim/config/ags/js/notifications/center.js @@ -12,13 +12,13 @@ const ClearButton = () => EventBox({ child: Button({ onPrimaryClickRelease: button => { button._popups.children.forEach(ch => { - ch.child.setStyle(ch.child._leftAnim1); + ch.child.setStyle(ch.child._slideLeft); ch.sensitive = false; }); button._notifList.children.forEach(ch => { if (ch.child) { - ch.child.setStyle(ch.child._rightAnim1); + ch.child.setStyle(ch.child._slideRight); ch.sensitive = false; } timeout(500, () => { @@ -94,7 +94,7 @@ const NotificationList = Box({ [Notifications, (box, id) => { for (const ch of box.children) { if (ch._id == id) { - ch.child.setStyle(ch.child._rightAnim1); + ch.child.setStyle(ch.child._slideRight); ch.sensitive = false; timeout(500, () => box.remove(ch)); return; diff --git a/devices/wim/config/ags/js/notifications/gesture.js b/devices/wim/config/ags/js/notifications/gesture.js index 7502aab..73cfd1b 100644 --- a/devices/wim/config/ags/js/notifications/gesture.js +++ b/devices/wim/config/ags/js/notifications/gesture.js @@ -36,52 +36,55 @@ export default ({ const gesture = Gtk.GestureDrag.new(widget); - const leftAnim1 = `transition: margin 0.5s ease, opacity 0.5s ease; - margin-left: -${Number(maxOffset + endMargin)}px; - margin-right: ${Number(maxOffset + endMargin)}px; - opacity: 0;`; + const TRANSITION = 'transition: margin 0.5s ease, opacity 0.5s ease;'; + const SQUEEZED = 'margin-bottom: -70px; margin-top: -70px;'; + const MAX_LEFT = ` + 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; - margin-left: -${Number(maxOffset + endMargin)}px; - margin-right: ${Number(maxOffset + endMargin)}px; - margin-bottom: -70px; margin-top: -70px; 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;`; + const slideLeft = `${TRANSITION} ${MAX_LEFT} opacity: 0;`; + const squeezeLeft = `${TRANSITION} ${MAX_LEFT} ${SQUEEZED} opacity: 0;`; + const slideRight = `${TRANSITION} ${MAX_RIGHT} opacity: 0;`; + const squeezeRight = `${TRANSITION} ${MAX_RIGHT} ${SQUEEZED} opacity: 0;`; widget.add(Box({ properties: [ - ['leftAnim1', leftAnim1], - ['leftAnim2', leftAnim2], - ['rightAnim1', rightAnim1], - ['rightAnim2', rightAnim2], + ['slideLeft', slideLeft], + ['squeezeLeft', squeezeLeft], + ['slideRight', slideRight], + ['squeezeRight', squeezeRight], ['ready', false], ], children: [ ...children, child, ], - style: leftAnim2, + style: squeezeLeft, connections: [ [gesture, self => { var offset = gesture.get_offset()[1]; + // Slide right if (offset >= 0) { - self.setStyle(`margin-left: ${Number(offset + startMargin)}px; - margin-right: -${Number(offset + startMargin)}px;`); + self.setStyle(` + margin-left: ${Number(offset + startMargin)}px; + margin-right: -${Number(offset + startMargin)}px; + `); } + + // Slide left else { offset = Math.abs(offset); - self.setStyle(`margin-right: ${Number(offset + startMargin)}px; - margin-left: -${Number(offset + startMargin)}px;`); + self.setStyle(` + margin-right: ${Number(offset + startMargin)}px; + margin-left: -${Number(offset + startMargin)}px; + `); } self.get_parent()._dragging = Math.abs(offset) > 10; @@ -91,51 +94,44 @@ export default ({ }, 'drag-update'], [gesture, self => { + // ? if (!self._ready) { - self.setStyle(`transition: margin 0.5s ease, opacity 0.5s ease; - margin-left: -${Number(maxOffset + endMargin)}px; - margin-right: ${Number(maxOffset + endMargin)}px; - margin-bottom: 0px; margin-top: 0px; opacity: 0;`); + self.setStyle(slideLeft); - timeout(500, () => { - 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(500, () => self.setStyle(`${TRANSITION} margin: unset; opacity: 1;`)); timeout(1000, () => self._ready = true); return; } const offset = gesture.get_offset()[1]; + // If crosses threshold after letting go, slide away if (Math.abs(offset) > maxOffset) { + // Slide away right if (offset > 0) { - self.setStyle(rightAnim1); + // Disable inputs during animation widget.sensitive = false; - timeout(500, () => { - self.setStyle(rightAnim2); - }); + + self.setStyle(slideRight); + timeout(500, () => self.setStyle(squeezeRight)); } + + // Slide away left else { - self.setStyle(leftAnim1); + // Disable inputs during animation widget.sensitive = false; - timeout(500, () => { - self.setStyle(leftAnim2); - }); + + self.setStyle(slideLeft); + timeout(500, () => self.setStyle(squeezeLeft)); } + timeout(1000, () => { command(); self.destroy(); }); } else { - 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;`); + self.setStyle(`${TRANSITION} margin: unset; opacity: 1;`); if (widget.window) widget.window.set_cursor(Gdk.Cursor.new_from_name(display, 'grab')); diff --git a/devices/wim/config/ags/js/notifications/popup.js b/devices/wim/config/ags/js/notifications/popup.js index c3d7497..5a5a1ab 100644 --- a/devices/wim/config/ags/js/notifications/popup.js +++ b/devices/wim/config/ags/js/notifications/popup.js @@ -53,7 +53,7 @@ const Popups = () => Box({ box._map.get(id).interval = interval(4500, () => { const notif = box._map.get(id); if (!notif._hovered) { - notif.child.setStyle(notif.child._leftAnim1); + notif.child.setStyle(notif.child._slideLeft); if (notif.interval) { timeout(500, () => notif.destroy());