LESA/custum-hyprpanel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Modularized notification toast and menu components.

Browse Source
This commit is contained in:
Jas Singh
2024-07-13 14:43:13 -07:00
parent db118a0746
commit 04ed432b32
28 changed files with 591 additions and 530 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
modules/notifications/actions/index.js Normal file
View File

@@ -0,0 +1,43 @@
const Action = (notif, notifs) => {
if (notif.actions !== undefined && notif.actions.length > 0) {
return Widget.Box({
class_name: "notification-card-actions",
hexpand: true,
vpack: "end",
children: notif.actions.map((action) => {
return Widget.Button({
hexpand: true,
class_name: "notification-action-buttons",
on_primary_click: () => {
if (action.id.includes("scriptAction:-")) {
Utils.execAsync(
`${action.id.replace("scriptAction:-", "")}`,
).catch((err) => console.error(err));
notifs.CloseNotification(notif.id);
} else {
notif.invoke(action.id);
}
},
child: Widget.Box({
hpack: "center",
hexpand: true,
children: [
Widget.Label({
class_name: "notification-action-buttons-label",
hexpand: true,
label: action.label,
max_width_chars: 15,
truncate: "end",
wrap: true,
}),
],
}),
});
}),
});
}
return Widget.Box();
};
export { Action };

23
modules/notifications/body/index.js Normal file
View File

@@ -0,0 +1,23 @@
import { notifHasImg } from "../../menus/notifications/utils.js";
export const Body = (notif) => {
return Widget.Box({
vpack: "start",
hexpand: true,
class_name: "notification-card-body",
children: [
Widget.Label({
hexpand: true,
use_markup: true,
xalign: 0,
justification: "left",
truncate: "end",
lines: 2,
max_width_chars: !notifHasImg(notif) ? 35 : 28,
wrap: true,
class_name: "notification-card-body-label",
label: notif["body"],
}),
],
});
};

12
modules/notifications/close/index.js Normal file
View File

@@ -0,0 +1,12 @@
export const CloseButton = (notif, notifs) => {
return Widget.Button({
class_name: "close-notification-button",
on_primary_click: () => {
notifs.CloseNotification(notif.id);
},
child: Widget.Label({
label: "󰅜",
hpack: "center",
}),
});
};

32
modules/notifications/header/icon.js Normal file
View File

@@ -0,0 +1,32 @@
import icons from "../../icons/index.js";
const NotificationIcon = ({ app_entry, app_icon, app_name }) => {
let icon = icons.fallback.notification;
if (
Utils.lookUpIcon(app_name) ||
Utils.lookUpIcon(app_name.toLowerCase() || "")
)
icon = Utils.lookUpIcon(app_name)
? app_name
: Utils.lookUpIcon(app_name.toLowerCase())
? app_name.toLowerCase()
: "";
if (Utils.lookUpIcon(app_icon) && icon === "") icon = app_icon;
if (Utils.lookUpIcon(app_entry || "") && icon === "") icon = app_entry || "";
return Widget.Box({
css: `
min-width: 2rem;
min-height: 2rem;
`,
child: Widget.Icon({
class_name: "notification-icon",
icon,
}),
});
};
export { NotificationIcon };

49
modules/notifications/header/index.js Normal file
View File

@@ -0,0 +1,49 @@
import GLib from "gi://GLib";
import { notifHasImg } from "../../menus/notifications/utils.js";
import { NotificationIcon } from "./icon.js";
const time = (time, format = "%I:%M %p") =>
GLib.DateTime.new_from_unix_local(time).format(format);
export const Header = (notif) => {
return Widget.Box({
vertical: false,
hexpand: true,
children: [
Widget.Box({
class_name: "notification-card-header",
hpack: "start",
children: [NotificationIcon(notif)],
}),
Widget.Box({
class_name: "notification-card-header",
hexpand: true,
hpack: "start",
vpack: "start",
children: [
Widget.Label({
class_name: "notification-card-header-label",
hpack: "start",
hexpand: true,
vexpand: true,
max_width_chars: !notifHasImg(notif) ? 30 : 19,
truncate: "end",
wrap: true,
label: notif["summary"],
}),
],
}),
Widget.Box({
class_name: "notification-card-header menu",
hpack: "end",
vpack: "start",
hexpand: true,
child: Widget.Label({
vexpand: true,
class_name: "notification-time",
label: time(notif.time),
}),
}),
],
});
};

22
modules/notifications/image/index.js Normal file
View File

@@ -0,0 +1,22 @@
import { notifHasImg } from "../../menus/notifications/utils.js";
const Image = (notif) => {
if (notifHasImg(notif)) {
return Widget.Box({
class_name: "notification-card-image-container",
hpack: "center",
vpack: "center",
vexpand: false,
child: Widget.Box({
hpack: "center",
vexpand: false,
class_name: "notification-card-image",
css: `background-image: url("${notif.image}")`,
}),
});
}
return Widget.Box();
};
export { Image };

185
modules/notifications/index.js
View File

@@ -1,13 +1,14 @@
const notifs = await Service.import("notifications");
import GLib from "gi://GLib";
import icons from "../icons/index.js";
import { notifHasImg } from "../menus/notifications/utils.js";
import { Image } from "./image/index.js";
import { Action } from "./actions/index.js";
import { Header } from "./header/index.js";
import { Body } from "./body/index.js";
import { CloseButton } from "./close/index.js";
export default () => {
notifs.popupTimeout = 7000;
const time = (time, format = "%I:%M %p") =>
GLib.DateTime.new_from_unix_local(time).format(format);
return Widget.Window({
name: "notifications-window",
class_name: "notifications-window",
@@ -21,189 +22,21 @@ export default () => {
hexpand: true,
setup: (self) => {
self.hook(notifs, () => {
const notifHasImg = (notif) => {
return notif.image !== undefined && notif.image.length;
};
const imageContainer = (notif) => {
if (notifHasImg(notif)) {
return [
Widget.Box({
class_name: "notification-card-image-container",
hpack: "center",
vpack: "center",
vexpand: false,
child: Widget.Box({
hpack: "center",
vexpand: false,
class_name: "notification-card-image",
css: `background-image: url("${notif.image}")`,
}),
}),
];
}
return [];
};
const actionsContainer = (notif) => {
if (notif.actions !== undefined && notif.actions.length > 0) {
return [
Widget.Box({
class_name: "notification-card-actions",
hexpand: true,
vpack: "end",
children: notif.actions.map((action) => {
return Widget.Button({
hexpand: true,
class_name: "notification-action-buttons",
on_primary_click: () => {
if (action.id.includes("scriptAction:-")) {
Utils.execAsync(
`${action.id.replace("scriptAction:-", "")}`,
).catch((err) => console.error(err));
notifs.CloseNotification(notif.id);
} else {
notif.invoke(action.id);
}
},
child: Widget.Box({
hpack: "center",
hexpand: true,
children: [
Widget.Label({
class_name: "notification-action-buttons-label",
hexpand: true,
label: action.label,
max_width_chars: 15,
truncate: "end",
wrap: true,
}),
],
}),
});
}),
}),
];
}
return [];
};
const NotificationIcon = ({ app_entry, app_icon, app_name }) => {
let icon = icons.fallback.notification;
if (
Utils.lookUpIcon(app_name) ||
Utils.lookUpIcon(app_name.toLowerCase() || "")
)
icon = Utils.lookUpIcon(app_name)
? app_name
: Utils.lookUpIcon(app_name.toLowerCase())
? app_name.toLowerCase()
: "";
if (Utils.lookUpIcon(app_icon) && icon === "") icon = app_icon;
if (Utils.lookUpIcon(app_entry || "") && icon === "")
icon = app_entry || "";
return Widget.Box({
css: `
min-width: 2rem;
min-height: 2rem;
`,
child: Widget.Icon({
class_name: "notification-icon",
icon,
}),
});
};
return (self.children = notifs.popups.map((notif) => {
return Widget.Box({
class_name: "notification-card",
vpack: "start",
hexpand: true,
children: [
...imageContainer(notif),
Image(notif),
Widget.Box({
vpack: "start",
vertical: true,
hexpand: true,
class_name: `notification-card-content ${!notifHasImg(notif) ? "noimg" : ""}`,
children: [
Widget.Box({
vertical: false,
hexpand: true,
children: [
Widget.Box({
class_name: "notification-card-header",
hpack: "start",
children: [NotificationIcon(notif)],
}),
Widget.Box({
class_name: "notification-card-header",
hexpand: true,
hpack: "start",
vpack: "start",
children: [
Widget.Label({
class_name: "notification-card-header-label",
hpack: "start",
hexpand: true,
vexpand: true,
max_width_chars: !notifHasImg(notif) ? 30 : 23,
truncate: "end",
wrap: true,
label: notif["summary"],
}),
],
}),
Widget.Box({
class_name: "notification-card-header menu",
hpack: "end",
vpack: "start",
hexpand: true,
child: Widget.Label({
vexpand: true,
class_name: "notification-time",
label: time(notif.time),
}),
}),
],
}),
Widget.Box({
vpack: "start",
hexpand: true,
class_name: "notification-card-body",
children: [
Widget.Label({
hexpand: true,
use_markup: true,
xalign: 0,
justification: "left",
truncate: "end",
lines: 2,
max_width_chars: !notifHasImg(notif) ? 35 : 28,
wrap: true,
class_name: "notification-card-body-label",
label: notif["body"],
}),
],
}),
...actionsContainer(notif),
],
}),
Widget.Button({
class_name: "close-notification-button",
on_primary_click: () => {
notifs.CloseNotification(notif.id);
},
child: Widget.Label({
label: "󰅜",
hpack: "center",
}),
children: [Header(notif), Body(notif), Action(notif, notifs)],
}),
CloseButton(notif, notifs),
],
});
}));