From 2bd7b363924e283cce8513663bc9d7dea1ff82db Mon Sep 17 00:00:00 2001 From: matt1432 Date: Mon, 11 Sep 2023 14:18:22 -0400 Subject: [PATCH] style(ags): make it easier on my eyes --- config/ags/config.js | 18 ++-- config/ags/js/notifications/center.js | 117 +++++++++++++------------- config/ags/js/notifications/popup.js | 86 +++++++++---------- 3 files changed, 111 insertions(+), 110 deletions(-) diff --git a/config/ags/config.js b/config/ags/config.js index 5396a81..1f6040e 100644 --- a/config/ags/config.js +++ b/config/ags/config.js @@ -14,12 +14,12 @@ exec(`sassc ${scss} ${css}`); exec(`bash -c "$AGS_PATH/startup.sh"`); export default { - style: css, - windows: [ - Powermenu, - Bar, - Closer, - NotificationCenter, - NotificationsPopupList, - ] -} + style: css, + windows: [ + Powermenu, + Bar, + Closer, + NotificationCenter, + NotificationsPopupList, + ], +}; diff --git a/config/ags/js/notifications/center.js b/config/ags/js/notifications/center.js index 377c6c5..7e3e631 100644 --- a/config/ags/js/notifications/center.js +++ b/config/ags/js/notifications/center.js @@ -3,61 +3,62 @@ const { Notifications } = ags.Service; const { Button, Label, Box, Icon, Scrollable, Window } = ags.Widget; const ClearButton = () => Button({ - onClicked: Notifications.clear, - connections: [[Notifications, button => { - button.sensitive = Notifications.notifications.length > 0; - }]], - child: Box({ - children: [ - Label('Clear '), - Icon({ - connections: [[Notifications, icon => { - icon.icon = Notifications.notifications.length > 0 - ? 'user-trash-full-symbolic' : 'user-trash-symbolic'; - }]], - }), - ], - }), + onClicked: Notifications.clear, + connections: [[Notifications, button => { + button.sensitive = Notifications.notifications.length > 0; + }]], + child: Box({ + children: [ + Label('Clear '), + Icon({ + connections: [[Notifications, icon => { + icon.icon = Notifications.notifications.length > 0 + ? 'user-trash-full-symbolic' : 'user-trash-symbolic'; + }]], + }), + ], + }), }); const Header = () => Box({ - className: 'header', - children: [ - Label({ label: 'Notifications', hexpand: true, xalign: 0 }), - ClearButton(), - ], + className: 'header', + children: [ + Label({ label: 'Notifications', hexpand: true, xalign: 0 }), + ClearButton(), + ], }); const NotificationList = () => Box({ - vertical: true, - vexpand: true, - connections: [[Notifications, box => { - box.children = Notifications.notifications - .reverse() - .map(n => Notification(n)); + vertical: true, + vexpand: true, + connections: [[Notifications, box => { + box.children = Notifications.notifications + .reverse() + .map(n => Notification(n)); - box.visible = Notifications.notifications.length > 0; - }]], + box.visible = Notifications.notifications.length > 0; + }]], }); const Placeholder = () => Box({ - className: 'placeholder', - vertical: true, - valign: 'center', - halign: 'center', - vexpand: true, - hexpand: true, - children: [ - Icon('notifications-disabled-symbolic'), - Label('Your inbox is empty'), - ], - connections: [[Notifications, box => { - box.visible = Notifications.notifications.length === 0; - }]], + className: 'placeholder', + vertical: true, + valign: 'center', + halign: 'center', + vexpand: true, + hexpand: true, + children: [ + Icon('notification-disabled-symbolic'), + Label('Your inbox is empty'), + ], + connections: [[Notifications, box => { + box.visible = Notifications.notifications.length === 0; + }]], }); export const NotificationCenter = Window({ name: 'notification-center', + popup: true, layer: 'overlay', anchor: 'top right', className: 'dashboard', @@ -65,23 +66,23 @@ export const NotificationCenter = Window({ className: 'notifications', vertical: true, children: [ - Header(), - Box({ - className: 'notification-wallpaper-box', - children: [Scrollable({ - className: 'notification-list-box', - hscroll: 'never', - vscroll: 'automatic', - child: Box({ - className: 'notification-list', - vertical: true, - children: [ - NotificationList(), - Placeholder(), - ], - }), - })], - }), + Header(), + Box({ + className: 'notification-wallpaper-box', + children: [Scrollable({ + className: 'notification-list-box', + hscroll: 'never', + vscroll: 'automatic', + child: Box({ + className: 'notification-list', + vertical: true, + children: [ + NotificationList(), + Placeholder(), + ], + }), + })], + }), ], }), }); diff --git a/config/ags/js/notifications/popup.js b/config/ags/js/notifications/popup.js index 75b69f3..a8f5f65 100644 --- a/config/ags/js/notifications/popup.js +++ b/config/ags/js/notifications/popup.js @@ -4,56 +4,56 @@ const { Box, Revealer, Window } = ags.Widget; const { timeout } = ags.Utils; const Popups = () => Box({ - vertical: true, - properties: [ - ['map', new Map()], - ['dismiss', (box, id, force = false) => { - if (!id || !box._map.has(id)) - return; + vertical: true, + properties: [ + ['map', new Map()], + ['dismiss', (box, id, force = false) => { + if (!id || !box._map.has(id)) + return; - if (box._map.get(id)._hovered && !force) - return; + if (box._map.get(id)._hovered && !force) + return; - if (box._map.size - 1 === 0) - box.get_parent().reveal_child = false; + if (box._map.size - 1 === 0) + box.get_parent().reveal_child = false; - timeout(200, () => { - box._map.get(id)?.destroy(); - box._map.delete(id); - }); - }], - ['notify', (box, id) => { - if (!id || Notifications.dnd) - return; + timeout(200, () => { + box._map.get(id)?.destroy(); + box._map.delete(id); + }); + }], + ['notify', (box, id) => { + if (!id || Notifications.dnd) + return; - box._map.delete(id); - box._map.set(id, Notification(Notifications.getNotification(id))); - box.children = Array.from(box._map.values()).reverse(); - timeout(10, () => { - box.get_parent().revealChild = true; - }); - }], - ], - connections: [ - [Notifications, (box, id) => box._notify(box, id), 'notified'], - [Notifications, (box, id) => box._dismiss(box, id), 'dismissed'], - [Notifications, (box, id) => box._dismiss(box, id, true), 'closed'], - ], + box._map.delete(id); + box._map.set(id, Notification(Notifications.getNotification(id))); + box.children = Array.from(box._map.values()).reverse(); + timeout(10, () => { + box.get_parent().revealChild = true; + }); + }], + ], + connections: [ + [Notifications, (box, id) => box._notify(box, id), 'notified'], + [Notifications, (box, id) => box._dismiss(box, id), 'dismissed'], + [Notifications, (box, id) => box._dismiss(box, id, true), 'closed'], + ], }); -const PopupList = ({ transition = 'slide_down' } = {}) => Box({ - className: 'notifications-popup-list', - style: 'padding: 1px', - children: [ - Revealer({ - transition, - child: Popups(), - }), - ], +const PopupList = ({ transition = 'slide_right' } = {}) => Box({ + className: 'notifications-popup-list', + style: 'padding: 1px', + children: [ + Revealer({ + transition, + child: Popups(), + }), + ], }); export const NotificationsPopupList = Window({ - name: `notifications`, - anchor: 'top', - child: PopupList(), + name: `notifications`, + anchor: 'top left', + child: PopupList(), });