Added pagination to the notifications menu and a configurable limit to the amount of notifications spawned. (#199)
* Added notification pagination and pagination configuration options. fixes #171 * Added skip to end buttons * Update theme * Removed unused theme parts * Update pager colors * Theme auto-generator * Update label color in options for pager. * Updated themes * Added option to change footer background for notifications menu. * Changes to the Displayed Total options now update the menu. Bugfix
This commit is contained in:
@@ -6,54 +6,63 @@ import { Image } from "./image/index.js";
|
||||
import { Placeholder } from "./placeholder/index.js";
|
||||
import { Body } from "./body/index.js";
|
||||
import { CloseButton } from "./close/index.js";
|
||||
import options from "options.js";
|
||||
import { Variable } from "types/variable.js";
|
||||
|
||||
const NotificationCard = (notifs: Notifications) => {
|
||||
return Widget.Box({
|
||||
class_name: "menu-content-container notifications",
|
||||
hpack: "center",
|
||||
vexpand: true,
|
||||
spacing: 0,
|
||||
vertical: true,
|
||||
setup: (self) => {
|
||||
self.hook(notifs, () => {
|
||||
const sortedNotifications = notifs.notifications.sort(
|
||||
(a, b) => b.time - a.time,
|
||||
);
|
||||
const { displayedTotal } = options.notifications;
|
||||
|
||||
if (notifs.notifications.length <= 0) {
|
||||
return (self.children = [Placeholder(notifs)]);
|
||||
}
|
||||
const NotificationCard = (notifs: Notifications, curPage: Variable<number>) => {
|
||||
return Widget.Scrollable({
|
||||
vscroll: "automatic",
|
||||
child: Widget.Box({
|
||||
class_name: "menu-content-container notifications",
|
||||
hpack: "center",
|
||||
vexpand: true,
|
||||
spacing: 0,
|
||||
vertical: true,
|
||||
setup: (self) => {
|
||||
Utils.merge([notifs.bind("notifications"), curPage.bind("value"), displayedTotal.bind("value")], (notifications, currentPage, dispTotal) => {
|
||||
const sortedNotifications = notifications.sort(
|
||||
(a, b) => b.time - a.time,
|
||||
);
|
||||
|
||||
return (self.children = sortedNotifications.map((notif: Notification) => {
|
||||
return Widget.Box({
|
||||
class_name: "notification-card-content-container",
|
||||
children: [
|
||||
Widget.Box({
|
||||
class_name: "notification-card menu",
|
||||
vpack: "start",
|
||||
hexpand: true,
|
||||
vexpand: false,
|
||||
children: [
|
||||
Image(notif),
|
||||
Widget.Box({
|
||||
vpack: "center",
|
||||
vertical: true,
|
||||
hexpand: true,
|
||||
class_name: `notification-card-content ${!notifHasImg(notif) ? "noimg" : " menu"}`,
|
||||
children: [
|
||||
Header(notif),
|
||||
Body(notif),
|
||||
Actions(notif, notifs),
|
||||
],
|
||||
}),
|
||||
],
|
||||
}),
|
||||
CloseButton(notif, notifs),
|
||||
],
|
||||
});
|
||||
}));
|
||||
});
|
||||
},
|
||||
if (notifications.length <= 0) {
|
||||
return (self.children = [Placeholder(notifs)]);
|
||||
}
|
||||
|
||||
const pageStart = (currentPage - 1) * dispTotal;
|
||||
const pageEnd = currentPage * dispTotal;
|
||||
return (self.children = sortedNotifications.slice(pageStart, pageEnd).map((notif: Notification) => {
|
||||
return Widget.Box({
|
||||
class_name: "notification-card-content-container",
|
||||
children: [
|
||||
Widget.Box({
|
||||
class_name: "notification-card menu",
|
||||
vpack: "start",
|
||||
hexpand: true,
|
||||
vexpand: false,
|
||||
children: [
|
||||
Image(notif),
|
||||
Widget.Box({
|
||||
vpack: "center",
|
||||
vertical: true,
|
||||
hexpand: true,
|
||||
class_name: `notification-card-content ${!notifHasImg(notif) ? "noimg" : " menu"}`,
|
||||
children: [
|
||||
Header(notif),
|
||||
Body(notif),
|
||||
Actions(notif, notifs),
|
||||
],
|
||||
}),
|
||||
],
|
||||
}),
|
||||
CloseButton(notif, notifs),
|
||||
],
|
||||
});
|
||||
}));
|
||||
});
|
||||
},
|
||||
})
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
Reference in New Issue
Block a user