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

feat(ags): add some animations to notif center

Browse source
This commit is contained in:
matt1432 2023-09-14 01:15:33 -04:00
parent cd0b8cf39f
commit a3d93f5548
3 changed files with 20 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
config/ags/js/notifications/center.js
View file

@ -1,5 +1,5 @@
const { Notifications } = ags.Service;
const { Button, Label, Box, Icon, Scrollable, Window } = ags.Widget;
const { Button, Label, Box, Icon, Scrollable, Window, Revealer } = ags.Widget;
import Notification from './base.js';
import { EventBox } from '../misc/cursorbox.js'
@ -42,7 +42,12 @@ const NotificationList = () => Box({
}]],
});
const Placeholder = () => Box({
const Placeholder = () => Revealer({
transition: 'crossfade',
connections: [[Notifications, box => {
box.revealChild = Notifications.notifications.length === 0;
}]],
child: Box({
className: 'placeholder',
vertical: true,
valign: 'center',
@ -53,9 +58,7 @@ const Placeholder = () => Box({
Icon('notification-disabled-symbolic'),
Label('Your inbox is empty'),
],
connections: [[Notifications, box => {
box.visible = Notifications.notifications.length === 0;
}]],
}),
});
export const NotificationCenter = Window({

4
config/ags/scss/widgets/notification.scss
View file

@ -52,7 +52,7 @@ $background-color_10: rgba(238, 238, 238, 0.5);
.actions {
button {
all: unset;
transition: 200ms;
transition: all 500ms;
border-radius: 9px;
background-color: $background-color_3;
box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
@ -117,7 +117,7 @@ $background-color_10: rgba(238, 238, 238, 0.5);
}
button.close-button {
all: unset;
transition: 200ms;
transition: all 500ms;
border-radius: 9px;
background-color: $background-color_5;
background-image: none;

4
config/ags/style.css
View file

@ -292,7 +292,7 @@ tooltip {
.notification .actions button {
all: unset;
transition: 200ms;
transition: all 500ms;
border-radius: 9px;
background-color: rgba(238, 238, 238, 0.06);
box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
@ -344,7 +344,7 @@ tooltip {
.notification button.close-button {
all: unset;
transition: 200ms;
transition: all 500ms;
border-radius: 9px;
background-color: transparent;
background-image: none;