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

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

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

@ -1,5 +1,5 @@
const { Notifications } = ags.Service; 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 Notification from './base.js';
import { EventBox } from '../misc/cursorbox.js' import { EventBox } from '../misc/cursorbox.js'
@ -42,20 +42,23 @@ const NotificationList = () => Box({
}]], }]],
}); });
const Placeholder = () => Box({ const Placeholder = () => Revealer({
className: 'placeholder', transition: 'crossfade',
vertical: true,
valign: 'center',
halign: 'center',
vexpand: true,
hexpand: true,
children: [
Icon('notification-disabled-symbolic'),
Label('Your inbox is empty'),
],
connections: [[Notifications, box => { connections: [[Notifications, box => {
box.visible = Notifications.notifications.length === 0; box.revealChild = Notifications.notifications.length === 0;
}]], }]],
child: Box({
className: 'placeholder',
vertical: true,
valign: 'center',
halign: 'center',
vexpand: true,
hexpand: true,
children: [
Icon('notification-disabled-symbolic'),
Label('Your inbox is empty'),
],
}),
}); });
export const NotificationCenter = Window({ 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 { .actions {
button { button {
all: unset; all: unset;
transition: 200ms; transition: all 500ms;
border-radius: 9px; border-radius: 9px;
background-color: $background-color_3; background-color: $background-color_3;
box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03); 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 { button.close-button {
all: unset; all: unset;
transition: 200ms; transition: all 500ms;
border-radius: 9px; border-radius: 9px;
background-color: $background-color_5; background-color: $background-color_5;
background-image: none; background-image: none;

4
config/ags/style.css
View file

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