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

56
modules/menus/notifications/controls/index.js Normal file
View File

@@ -0,0 +1,56 @@
const Controls = (notifs) => {
return Widget.Box({
class_name: "notification-menu-controls",
expand: false,
vertical: false,
children: [
Widget.Box({
class_name: "menu-label-container notifications",
hpack: "start",
vpack: "center",
expand: true,
children: [
Widget.Label({
class_name: "menu-label notifications",
label: "Notifications",
}),
],
}),
Widget.Box({
hpack: "end",
vpack: "center",
expand: false,
children: [
Widget.Switch({
class_name: "menu-switch notifications",
active: notifs.bind("dnd").as((dnd) => !dnd),
on_activate: ({ active }) => {
notifs.dnd = !active;
},
}),
Widget.Box({
children: [
Widget.Separator({
hpack: "center",
vexpand: true,
vertical: true,
class_name: "menu-separator notification-controls",
}),
Widget.Button({
class_name: "clear-notifications-button",
tooltip_text: "Clear Notifications",
on_primary_click: () => notifs.clear(),
child: Widget.Label({
class_name: "clear-notifications-label",
label: "",
}),
}),
],
}),
],
}),
],
});
};
export { Controls };

318
modules/menus/notifications/index.js
View File

@@ -1,12 +1,9 @@
import PopupWindow from "../PopupWindow.js"; import PopupWindow from "../PopupWindow.js";
const notifs = await Service.import("notifications"); const notifs = await Service.import("notifications");
import icons from "../../icons/index.js"; import { Controls } from "./controls/index.js";
import GLib from "gi://GLib"; import { NotificationCard } from "./notification/index.js";
export default () => { export default () => {
const time = (time, format = "%I:%M %p") =>
GLib.DateTime.new_from_unix_local(time).format(format);
return PopupWindow({ return PopupWindow({
name: "notificationsmenu", name: "notificationsmenu",
visible: false, visible: false,
@@ -23,316 +20,7 @@ export default () => {
vertical: true, vertical: true,
hexpand: false, hexpand: false,
vexpand: false, vexpand: false,
children: [ children: [Controls(notifs), NotificationCard(notifs)],
Widget.Box({
class_name: "notification-menu-controls",
expand: false,
vertical: false,
children: [
Widget.Box({
class_name: "menu-label-container notifications",
hpack: "start",
vpack: "center",
expand: true,
children: [
Widget.Label({
class_name: "menu-label notifications",
label: "Notifications",
}),
],
}),
Widget.Box({
hpack: "end",
vpack: "center",
expand: false,
children: [
Widget.Switch({
class_name: "menu-switch notifications",
active: notifs.bind("dnd").as((dnd) => !dnd),
on_activate: ({ active }) => {
notifs.dnd = !active;
},
}),
Widget.Box({
children: [
Widget.Separator({
hpack: "center",
vexpand: true,
vertical: true,
class_name: "menu-separator notification-controls",
}),
Widget.Button({
class_name: "clear-notifications-button",
tooltip_text: "Clear Notifications",
on_primary_click: () => notifs.clear(),
child: Widget.Label({
class_name: "clear-notifications-label",
label: "",
}),
}),
],
}),
],
}),
],
}),
Widget.Box({
class_name: "menu-content-container notifications",
hpack: "center",
vexpand: true,
spacing: 0,
vertical: 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 menu",
hpack: "center",
vpack: "center",
vexpand: false,
child: Widget.Box({
hpack: "center",
vexpand: false,
class_name: "notification-card-image menu",
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 menu",
hexpand: true,
vpack: "end",
children: notif.actions.map((action) => {
return Widget.Button({
hexpand: true,
class_name: "notification-action-buttons menu",
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 menu",
hexpand: true,
max_width_chars: 15,
truncate: "end",
wrap: true,
label: action.label,
}),
],
}),
});
}),
}),
];
}
return [
Widget.Box({
class_name: "spacer",
}),
];
};
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 menu",
icon,
}),
});
};
const sortedNotifications = notifs.notifications.sort(
(a, b) => b.time - a.time,
);
if (notifs.notifications.length <= 0) {
return (self.children = [
Widget.Box({
class_name: "notification-label-container",
vpack: "fill",
hpack: "center",
expand: true,
child: Widget.Box({
vpack: "center",
vertical: true,
expand: true,
children: [
Widget.Label({
vpack: "center",
class_name: "placeholder-label dim bell",
label: notifs.bind("dnd").as(dnd => dnd ? "󰂛" : "󰂚"),
}),
Widget.Label({
vpack: "start",
class_name: "placehold-label dim message",
label: "You're all caught up :)",
}),
],
}),
}),
]);
}
return (self.children = sortedNotifications.map((notif) => {
return Widget.Box({
class_name: "notification-card-content-container",
children: [
Widget.Box({
class_name: "notification-card menu",
vpack: "start",
hexpand: true,
vexpand: false,
children: [
...imageContainer(notif),
Widget.Box({
vpack: "center",
vertical: true,
hexpand: true,
class_name: `notification-card-content ${!notifHasImg(notif) ? "noimg" : " menu"}`,
children: [
Widget.Box({
vertical: false,
hexpand: true,
children: [
Widget.Box({
class_name:
"notification-card-header menu",
hpack: "start",
children: [NotificationIcon(notif)],
}),
Widget.Box({
class_name:
"notification-card-header menu",
hexpand: true,
vpack: "start",
children: [
Widget.Label({
class_name:
"notification-card-header-label menu",
hpack: "start",
hexpand: true,
vexpand: true,
max_width_chars: !notifHasImg(notif)
? 34
: 26,
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 menu",
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 menu",
label: notif["body"],
}),
],
}),
...actionsContainer(notif),
],
}),
],
}),
Widget.Button({
class_name: "close-notification-button menu",
on_primary_click: () => {
notifs.CloseNotification(notif.id);
},
child: Widget.Label({
label: "󰅜",
hpack: "center",
}),
}),
],
});
}));
});
},
}),
],
}), }),
], ],
}), }),

45
modules/menus/notifications/notification/actions/index.js Normal file
View File

@@ -0,0 +1,45 @@
const Actions = (notif, notifs) => {
if (notif.actions !== undefined && notif.actions.length > 0) {
return Widget.Box({
class_name: "notification-card-actions menu",
hexpand: true,
vpack: "end",
children: notif.actions.map((action) => {
return Widget.Button({
hexpand: true,
class_name: "notification-action-buttons menu",
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 menu",
hexpand: true,
max_width_chars: 15,
truncate: "end",
wrap: true,
label: action.label,
}),
],
}),
});
}),
});
}
return Widget.Box({
class_name: "spacer",
});
};
export { Actions };

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

@@ -0,0 +1,23 @@
import { notifHasImg } from "../../utils.js";
export const Body = (notif) => {
return Widget.Box({
vpack: "start",
hexpand: true,
class_name: "notification-card-body menu",
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 menu",
label: notif["body"],
}),
],
});
};

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

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

32
modules/menus/notifications/notification/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 menu",
icon,
}),
});
};
export { NotificationIcon };

48
modules/menus/notifications/notification/header/index.js Normal file
View File

@@ -0,0 +1,48 @@
import GLib from "gi://GLib";
import { NotificationIcon } from "./icon.js";
import { notifHasImg } from "../../utils.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 menu",
hpack: "start",
children: [NotificationIcon(notif)],
}),
Widget.Box({
class_name: "notification-card-header menu",
hexpand: true,
vpack: "start",
children: [
Widget.Label({
class_name: "notification-card-header-label menu",
hpack: "start",
hexpand: true,
vexpand: true,
max_width_chars: !notifHasImg(notif) ? 34 : 22,
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/menus/notifications/notification/image/index.js Normal file
View File

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

59
modules/menus/notifications/notification/index.js Normal file
View File

@@ -0,0 +1,59 @@
import { notifHasImg } from "../utils.js";
import { Header } from "./header/index.js";
import { Actions } from "./actions/index.js";
import { Image } from "./image/index.js";
import { Placeholder } from "./placeholder/index.js";
import { Body } from "./body/index.js";
import { CloseButton } from "./close/index.js";
const NotificationCard = (notifs) => {
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,
);
if (notifs.notifications.length <= 0) {
return (self.children = [Placeholder(notifs)]);
}
return (self.children = sortedNotifications.map((notif) => {
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),
],
});
}));
});
},
});
};
export { NotificationCard };

27
modules/menus/notifications/notification/placeholder/index.js Normal file
View File

@@ -0,0 +1,27 @@
const Placeholder = (notifs) => {
return Widget.Box({
class_name: "notification-label-container",
vpack: "fill",
hpack: "center",
expand: true,
child: Widget.Box({
vpack: "center",
vertical: true,
expand: true,
children: [
Widget.Label({
vpack: "center",
class_name: "placeholder-label dim bell",
label: notifs.bind("dnd").as((dnd) => (dnd ? "󰂛" : "󰂚")),
}),
Widget.Label({
vpack: "start",
class_name: "placehold-label dim message",
label: "You're all caught up :)",
}),
],
}),
});
};
export { Placeholder };

5
modules/menus/notifications/utils.js Normal file
View File

@@ -0,0 +1,5 @@
const notifHasImg = (notif) => {
return notif.image !== undefined && notif.image.length;
};
export { notifHasImg };

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"); const notifs = await Service.import("notifications");
import GLib from "gi://GLib"; import { notifHasImg } from "../menus/notifications/utils.js";
import icons from "../icons/index.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 () => { export default () => {
notifs.popupTimeout = 7000; notifs.popupTimeout = 7000;
const time = (time, format = "%I:%M %p") =>
GLib.DateTime.new_from_unix_local(time).format(format);
return Widget.Window({ return Widget.Window({
name: "notifications-window", name: "notifications-window",
class_name: "notifications-window", class_name: "notifications-window",
@@ -21,189 +22,21 @@ export default () => {
hexpand: true, hexpand: true,
setup: (self) => { setup: (self) => {
self.hook(notifs, () => { 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 (self.children = notifs.popups.map((notif) => {
return Widget.Box({ return Widget.Box({
class_name: "notification-card", class_name: "notification-card",
vpack: "start", vpack: "start",
hexpand: true, hexpand: true,
children: [ children: [
...imageContainer(notif), Image(notif),
Widget.Box({ Widget.Box({
vpack: "start", vpack: "start",
vertical: true, vertical: true,
hexpand: true, hexpand: true,
class_name: `notification-card-content ${!notifHasImg(notif) ? "noimg" : ""}`, class_name: `notification-card-content ${!notifHasImg(notif) ? "noimg" : ""}`,
children: [ children: [Header(notif), Body(notif), Action(notif, notifs)],
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",
}),
}), }),
CloseButton(notif, notifs),
], ],
}); });
})); }));

2
scss/menus/audiomenu.scss
View File

@@ -32,7 +32,7 @@
} }
.menu-section-container.playback { .menu-section-container.playback {
margin-top: 0em; margin-top: 0em;
margin-bottom: 1.35em; margin-bottom: 1em;
} }
.menu-section-container.input { .menu-section-container.input {
margin-top: 0em; margin-top: 0em;

2
scss/menus/bluetooth.scss
View File

@@ -3,7 +3,7 @@
.menu-items-container.bluetooth { .menu-items-container.bluetooth {
font-size: 1.3em; font-size: 1.3em;
.menu-section-container { .menu-section-container {
margin: 1.35em 0em; margin: 1em 0em;
} }
.menu-label-container { .menu-label-container {

2
scss/menus/calendar.scss
View File

@@ -74,7 +74,7 @@
} }
.clock-content-period { .clock-content-period {
font-size: 1.75em; font-size: 1.75em;
margin-bottom: 1.3em; margin-bottom: 1.35em;
margin-right: -0.875em; margin-right: -0.875em;
color: $teal; color: $teal;
} }

2
scss/menus/media.scss
View File

@@ -5,7 +5,7 @@
min-height: 18em; min-height: 18em;
.menu-section-container { .menu-section-container {
margin: 1.3em 0em; margin: 1em 0em;
} }
.menu-items-section { .menu-items-section {

8
scss/menus/menu.scss
View File

@@ -104,7 +104,7 @@ tooltip label {
} }
.menu-section-container { .menu-section-container {
margin: 1.35em 0em; margin: 1em 0em;
.menu-label { .menu-label {
color: $text; color: $text;
@@ -117,7 +117,7 @@ tooltip label {
border-radius: 0.4em; border-radius: 0.4em;
border-bottom-left-radius: 0em; border-bottom-left-radius: 0em;
border-bottom-right-radius: 0em; border-bottom-right-radius: 0em;
margin: 0em 1.35em ; margin: 0em 1em ;
min-height: 2em; min-height: 2em;
} }
@@ -130,7 +130,7 @@ tooltip label {
} }
&:nth-child(2) { &:nth-child(2) {
margin-top: 1.35em; margin-top: 1em;
} }
.menu-items-section { .menu-items-section {
@@ -139,7 +139,7 @@ tooltip label {
border-top-left-radius: 0em; border-top-left-radius: 0em;
border-top-right-radius: 0em; border-top-right-radius: 0em;
padding: 0.9em; padding: 0.9em;
margin: 0em 1.35em; margin: 0em 1em;
} }
} }

25
scss/menus/notifications.scss
View File

@@ -2,7 +2,7 @@
.notification-card-container.menu { .notification-card-container.menu {
margin: 0em; margin: 0em;
min-width: 28.6em; min-width: 30.5em;
min-height: 48em; min-height: 48em;
background: $crust; background: $crust;
border: 0.13em solid $surface0; border: 0.13em solid $surface0;
@@ -14,14 +14,14 @@
} }
.menu-content-container.notifications { .menu-content-container.notifications {
margin: 1.35em; margin: 1em;
margin-bottom: 0em; margin-bottom: 0em;
min-height: 4em; min-height: 4em;
} }
.notification-menu-controls { .notification-menu-controls {
background: $base; background: $base;
margin: 1em 1.3em; margin: 1em 1em;
margin-bottom: 0.5em; margin-bottom: 0.5em;
border-radius: 0.4em; border-radius: 0.4em;
padding: 0.4em 0.75em; padding: 0.4em 0.75em;
@@ -29,7 +29,7 @@
.notification-card.menu { .notification-card.menu {
background: $base; background: $base;
min-width: 23.5em; min-width: 26.2em;
border: 0.15em solid $base; border: 0.15em solid $base;
border-radius: 0em; border-radius: 0em;
border-bottom-left-radius: 0.4em; border-bottom-left-radius: 0.4em;
@@ -40,7 +40,7 @@
.notification-card-content-container { .notification-card-content-container {
margin-bottom: 0.65em; margin-bottom: 0.65em;
&:last-child { &:last-child {
margin-bottom: 1.3em; margin-bottom: 1em;
} }
} }
.notification-card-content { .notification-card-content {
@@ -92,3 +92,18 @@
font-size: 1.5em; font-size: 1.5em;
} }
} }
.close-notification-button.menu {
background: $red;
color: $crust;
min-width: 2.1em;
border-radius: 0rem 0.35em 0.35em 0em;
label {
font-size: 1.5em;
}
&:hover {
background: $maroon;
}
}

3
scss/notifications/popups.scss
View File

@@ -21,7 +21,6 @@
padding: 1px; padding: 1px;
} }
.notification-card-image-container { .notification-card-image-container {
margin: 0.65em 0.65em; margin: 0.65em 0.65em;
border-radius: 0.4em; border-radius: 0.4em;
@@ -84,6 +83,8 @@
.notification-icon { .notification-icon {
margin-bottom: 0.4em; margin-bottom: 0.4em;
min-width: 1em;
min-height: 1em;
font-size: 1.3em; font-size: 1.3em;
} }

9
services/snapshot.sh
View File

@@ -1,18 +1,17 @@
#!/bin/bash #!/bin/bash
outputDir="$HOME/Pictures/Screenshots/" outputDir="$HOME/Pictures/Screenshots/"
outputFile="snapshot_$(date +%Y-%m-%d_%H-%M-%S).png" outputFile="snapshot_$(date +%Y-%m-%d_%H-%M-%S).png"
outputPath="$outputDir/$outputFile" outputPath="$outputDir/$outputFile"
mkdir -p "$outputDir" mkdir -p "$outputDir"
grimblast copysave area "$outputPath" if grimblast copysave area "$outputPath"; then
recentFile=$(ls -t "$outputDir"/snapshot_*.png | head -n 1)
recentFile=$(ls -t "$outputDir"/snapshot_*.png | head -n 1) notify-send "Grimblast" "Your snapshot has been saved." \
notify-send "Grimblast" "Your snapshot has been saved." \
-i video-x-generic \ -i video-x-generic \
-a "Grimblast" \ -a "Grimblast" \
-t 7000 \ -t 7000 \
-u normal \ -u normal \
--action="scriptAction:-dolphin $outputDir=Directory" \ --action="scriptAction:-dolphin $outputDir=Directory" \
--action="scriptAction:-xdg-open $recentFile=View" --action="scriptAction:-xdg-open $recentFile=View"
fi

41
style.css
View File

@@ -523,7 +523,7 @@ tooltip label {
} }
.menu-section-container { .menu-section-container {
margin: 1.35em 0em; margin: 1em 0em;
} }
.menu-section-container .menu-label { .menu-section-container .menu-label {
color: #cdd6f4; color: #cdd6f4;
@@ -535,7 +535,7 @@ tooltip label {
border-radius: 0.4em; border-radius: 0.4em;
border-bottom-left-radius: 0em; border-bottom-left-radius: 0em;
border-bottom-right-radius: 0em; border-bottom-right-radius: 0em;
margin: 0em 1.35em; margin: 0em 1em;
min-height: 2em; min-height: 2em;
} }
.menu-section-container:first-child { .menu-section-container:first-child {
@@ -545,7 +545,7 @@ tooltip label {
margin-top: 0em; margin-top: 0em;
} }
.menu-section-container:nth-child(2) { .menu-section-container:nth-child(2) {
margin-top: 1.35em; margin-top: 1em;
} }
.menu-section-container .menu-items-section { .menu-section-container .menu-items-section {
background: #1e1e2e; background: #1e1e2e;
@@ -553,7 +553,7 @@ tooltip label {
border-top-left-radius: 0em; border-top-left-radius: 0em;
border-top-right-radius: 0em; border-top-right-radius: 0em;
padding: 0.9em; padding: 0.9em;
margin: 0em 1.35em; margin: 0em 1em;
} }
.menu-active { .menu-active {
@@ -878,7 +878,7 @@ window#powermenu .powermenu.box {
.menu-section-container.playback { .menu-section-container.playback {
margin-top: 0em; margin-top: 0em;
margin-bottom: 1.35em; margin-bottom: 1em;
} }
.menu-section-container.input { .menu-section-container.input {
@@ -968,7 +968,7 @@ window#powermenu .powermenu.box {
font-size: 1.3em; font-size: 1.3em;
} }
.menu-items-container.bluetooth .menu-section-container { .menu-items-container.bluetooth .menu-section-container {
margin: 1.35em 0em; margin: 1em 0em;
} }
.menu-items-container.bluetooth .menu-label-container .menu-label { .menu-items-container.bluetooth .menu-label-container .menu-label {
color: #89dceb; color: #89dceb;
@@ -1032,7 +1032,7 @@ window#powermenu .powermenu.box {
min-height: 18em; min-height: 18em;
} }
.menu-items-container.media .menu-section-container { .menu-items-container.media .menu-section-container {
margin: 1.3em 0em; margin: 1em 0em;
} }
.menu-items-container.media .menu-items-section { .menu-items-container.media .menu-items-section {
border-radius: 0.4em; border-radius: 0.4em;
@@ -1113,7 +1113,7 @@ window#powermenu .powermenu.box {
.notification-card-container.menu { .notification-card-container.menu {
margin: 0em; margin: 0em;
min-width: 28.6em; min-width: 30.5em;
min-height: 48em; min-height: 48em;
background: #11111b; background: #11111b;
border: 0.13em solid #313244; border: 0.13em solid #313244;
@@ -1124,20 +1124,20 @@ window#powermenu .powermenu.box {
margin-right: 0.5em; margin-right: 0.5em;
} }
.notification-card-container.menu .menu-content-container.notifications { .notification-card-container.menu .menu-content-container.notifications {
margin: 1.35em; margin: 1em;
margin-bottom: 0em; margin-bottom: 0em;
min-height: 4em; min-height: 4em;
} }
.notification-card-container.menu .notification-menu-controls { .notification-card-container.menu .notification-menu-controls {
background: #1e1e2e; background: #1e1e2e;
margin: 1em 1.3em; margin: 1em 1em;
margin-bottom: 0.5em; margin-bottom: 0.5em;
border-radius: 0.4em; border-radius: 0.4em;
padding: 0.4em 0.75em; padding: 0.4em 0.75em;
} }
.notification-card-container.menu .notification-card.menu { .notification-card-container.menu .notification-card.menu {
background: #1e1e2e; background: #1e1e2e;
min-width: 23.5em; min-width: 26.2em;
border: 0.15em solid #1e1e2e; border: 0.15em solid #1e1e2e;
border-radius: 0em; border-radius: 0em;
border-bottom-left-radius: 0.4em; border-bottom-left-radius: 0.4em;
@@ -1148,7 +1148,7 @@ window#powermenu .powermenu.box {
margin-bottom: 0.65em; margin-bottom: 0.65em;
} }
.notification-card-container.menu .notification-card-content-container:last-child { .notification-card-container.menu .notification-card-content-container:last-child {
margin-bottom: 1.3em; margin-bottom: 1em;
} }
.notification-card-container.menu .notification-card-content { .notification-card-container.menu .notification-card-content {
margin-bottom: 0.25em; margin-bottom: 0.25em;
@@ -1189,6 +1189,19 @@ window#powermenu .powermenu.box {
font-size: 1.5em; font-size: 1.5em;
} }
.close-notification-button.menu {
background: #f38ba8;
color: #11111b;
min-width: 2.1em;
border-radius: 0rem 0.35em 0.35em 0em;
}
.close-notification-button.menu label {
font-size: 1.5em;
}
.close-notification-button.menu:hover {
background: #eba0ac;
}
.calendar-content-container { .calendar-content-container {
margin-top: 0em; margin-top: 0em;
min-width: 27em; min-width: 27em;
@@ -1258,7 +1271,7 @@ window#powermenu .powermenu.box {
} }
.clock-content-items .clock-content-period { .clock-content-items .clock-content-period {
font-size: 1.75em; font-size: 1.75em;
margin-bottom: 1.3em; margin-bottom: 1.35em;
margin-right: -0.875em; margin-right: -0.875em;
color: #94e2d5; color: #94e2d5;
} }
@@ -1740,6 +1753,8 @@ window#powermenu .powermenu.box {
.notification-icon { .notification-icon {
margin-bottom: 0.4em; margin-bottom: 0.4em;
min-width: 1em;
min-height: 1em;
font-size: 1.3em; font-size: 1.3em;
} }

2
style.css.map
View File

File diff suppressed because one or more lines are too long