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

Add notification history container

Browse Source
This commit is contained in:
Jas Singh
2024-06-24 02:02:02 -07:00
parent f162af8a41
commit ee461f2ee0
6 changed files with 236 additions and 188 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
modules/menus/PopupWindow.js
View File

@@ -15,7 +15,7 @@ const PopupRevealer = (
Widget.Revealer({ Widget.Revealer({
transition, transition,
child: Widget.Box({ child: Widget.Box({
class_name: "window-content", class_name: `window-content ${name}`,
child, child,
}), }),
transitionDuration: 200, transitionDuration: 200,

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

@@ -1,49 +1,44 @@
import PopupWindow from "../PopupWindow.js";
const notifs = await Service.import("notifications"); const notifs = await Service.import("notifications");
import icons from "../../icons/index.js"; import icons from "../../icons/index.js";
export default () => { export default () => {
notifs.popupTimeout = 5000; notifs.popupTimeout = 5000;
return Widget.Window({ return PopupWindow({
name: "notificationsmenu", name: "notificationsmenu",
class_name: "notifications-menu",
layer: "top",
anchor: ["top", "right"],
monitor: 2,
keymode: "on-demand",
exclusivity: "ignore",
setup: (w) =>
w.keybind("Escape", () => App.closeWindow("notificationsmenu")),
visible: false, visible: false,
transition: "crossfade",
layout: "top-right",
child: Widget.Box({ child: Widget.Box({
class_name: "notification-menu-content", class_name: "notification-menu-content",
css: "padding: 1px; margin: -1px;", css: "padding: 1px; margin: -1px;",
child: Widget.Revealer({ vexpand: false,
transitionDuration: 350, children: [
reveal_child: false, Widget.Box({
transition: "crossfade",
setup: (self) =>
self.hook(App, (_, wname, visible) => {
if (wname === "notificationsmenu") self.reveal_child = visible;
}),
child: Widget.Box({
class_name: "notification-card-container menu", class_name: "notification-card-container menu",
spacing: 0,
vertical: true, vertical: true,
hexpand: true, hexpand: true,
vexpand: false,
child: Widget.Box({
vexpand: false,
spacing: 0,
vertical: true,
setup: (self) => { setup: (self) => {
self.hook(notifs, () => { self.hook(notifs, () => {
const imageContainer = (notif) => { const imageContainer = (notif) => {
if (notif.image !== undefined) { if (notif.image !== undefined) {
return [ return [
Widget.Box({ Widget.Box({
class_name: "notification-card-image-container", class_name: "notification-card-image-container menu",
hpack: "center", hpack: "center",
vpack: "center", vpack: "center",
vexpand: false, vexpand: false,
child: Widget.Box({ child: Widget.Box({
hpack: "center", hpack: "center",
vexpand: false, vexpand: false,
class_name: "notification-card-image", class_name: "notification-card-image menu",
css: `background-image: url("${notif.image}")`, css: `background-image: url("${notif.image}")`,
}), }),
}), }),
@@ -57,13 +52,13 @@ export default () => {
if (notif.actions !== undefined && notif.actions.length > 0) { if (notif.actions !== undefined && notif.actions.length > 0) {
return [ return [
Widget.Box({ Widget.Box({
class_name: "notification-card-actions", class_name: "notification-card-actions menu",
hexpand: true, hexpand: true,
vpack: "end", vpack: "end",
children: notif.actions.map((action) => { children: notif.actions.map((action) => {
return Widget.Button({ return Widget.Button({
hexpand: true, hexpand: true,
class_name: "notification-action-buttons", class_name: "notification-action-buttons menu",
on_primary_click: () => { on_primary_click: () => {
notif.invoke(action.id); notif.invoke(action.id);
}, },
@@ -72,7 +67,8 @@ export default () => {
hexpand: true, hexpand: true,
children: [ children: [
Widget.Label({ Widget.Label({
class_name: "notification-action-buttons-label", class_name:
"notification-action-buttons-label menu",
hexpand: true, hexpand: true,
label: action.label, label: action.label,
}), }),
@@ -87,7 +83,11 @@ export default () => {
return []; return [];
}; };
const NotificationIcon = ({ app_entry, app_icon, app_name }) => { const NotificationIcon = ({
app_entry,
app_icon,
app_name,
}) => {
let icon = icons.fallback.notification; let icon = icons.fallback.notification;
if ( if (
@@ -100,7 +100,8 @@ export default () => {
? app_name.toLowerCase() ? app_name.toLowerCase()
: ""; : "";
if (Utils.lookUpIcon(app_icon) && icon === "") icon = app_icon; if (Utils.lookUpIcon(app_icon) && icon === "")
icon = app_icon;
if (Utils.lookUpIcon(app_entry || "") && icon === "") if (Utils.lookUpIcon(app_entry || "") && icon === "")
icon = app_entry || ""; icon = app_entry || "";
@@ -111,15 +112,19 @@ export default () => {
min-height: 2rem; min-height: 2rem;
`, `,
child: Widget.Icon({ child: Widget.Icon({
class_name: "notification-icon", class_name: "notification-icon menu",
icon, icon,
}), }),
}); });
}; };
return (self.children = notifs.notifications.map((notif) => { const sortedNotifications = notifs.notifications.sort(
(a, b) => b.time - a.time,
);
return (self.children = sortedNotifications.map((notif) => {
return Widget.Box({ return Widget.Box({
class_name: "notification-card", class_name: "notification-card menu",
vpack: "start", vpack: "start",
hexpand: true, hexpand: true,
children: [ children: [
@@ -128,19 +133,20 @@ export default () => {
vpack: "start", vpack: "start",
vertical: true, vertical: true,
hexpand: true, hexpand: true,
class_name: `notification-card-content ${notif.image === undefined ? "noimg" : ""}`, class_name: `notification-card-content ${notif.image === undefined ? "noimg" : " menu"}`,
children: [ children: [
Widget.Box({ Widget.Box({
vertical: false, vertical: false,
hexpand: true, hexpand: true,
children: [ children: [
Widget.Box({ Widget.Box({
class_name: "notification-card-header", class_name: "notification-card-header menu",
hexpand: true, hexpand: true,
vpack: "start", vpack: "start",
children: [ children: [
Widget.Label({ Widget.Label({
class_name: "notification-card-header-label", class_name:
"notification-card-header-label menu",
hpack: "start", hpack: "start",
hexpand: true, hexpand: true,
vexpand: true, vexpand: true,
@@ -153,7 +159,7 @@ export default () => {
], ],
}), }),
Widget.Box({ Widget.Box({
class_name: "notification-card-header", class_name: "notification-card-header menu",
hexpand: true, hexpand: true,
hpack: "end", hpack: "end",
children: [NotificationIcon(notif)], children: [NotificationIcon(notif)],
@@ -163,7 +169,7 @@ export default () => {
Widget.Box({ Widget.Box({
vpack: "start", vpack: "start",
hexpand: true, hexpand: true,
class_name: "notification-card-body", class_name: "notification-card-body menu",
children: [ children: [
Widget.Label({ Widget.Label({
hexpand: true, hexpand: true,
@@ -175,7 +181,7 @@ export default () => {
max_width_chars: max_width_chars:
notif.image === undefined ? 35 : 28, notif.image === undefined ? 35 : 28,
wrap: true, wrap: true,
class_name: "notification-card-body-label", class_name: "notification-card-body-label menu",
label: notif["body"], label: notif["body"],
}), }),
], ],
@@ -184,7 +190,7 @@ export default () => {
], ],
}), }),
Widget.Button({ Widget.Button({
class_name: "close-notification-button", class_name: "close-notification-button menu",
on_primary_click: () => { on_primary_click: () => {
notifs.CloseNotification(notif.id); notifs.CloseNotification(notif.id);
}, },
@@ -200,6 +206,7 @@ export default () => {
}, },
}), }),
}), }),
],
}), }),
}); });
}; };

37
scss/menus/notifications.scss
View File

@@ -1,13 +1,36 @@
@import "../colors"; @import "../colors";
.notification-card-container.menu { .notification-card-container.menu {
min-width: 30rem; min-width: 28em;
min-height: 50rem; min-height: 15em;
background: $mantle; background: $base;
border: 0.25rem solid $surface0; border: 0.2em solid $surface0;
border-radius: 0.4rem; border-radius: 0.4em;
}
.notification-card-container-scroll.menu {
// background-color: $pink;
} }
.notification-menu-content { .window-content.notificationsmenu {
margin: 40rem; margin-top: -0.4em;
margin-right: 0.6em;
}
.notification-card.menu {
border: 0em;
border-bottom: 0.25em solid $surface0;
border-radius: 0em;
margin: 0rem;
&:first-child {
border-top: 0rem;
}
&:last-child {
border-bottom: 0rem;
}
&:not(:first-child) {
margin: 0rem;
}
} }

3
scss/notifications/popups.scss
View File

@@ -7,7 +7,8 @@
color: $text; color: $text;
background: $mantle; background: $mantle;
margin-right: 0.4rem; margin-right: 0.4rem;
border: 0.15rem solid $surface0; min-width: 28rem; border: 0.15rem solid $surface0;
min-width: 28rem;
min-height: 6rem; min-height: 6rem;
border-radius: 0.4rem; border-radius: 0.4rem;

31
style.css
View File

@@ -1038,15 +1038,32 @@ image {
box-shadow: none; box-shadow: none;
} }
.notification-card-container.menu { .notification-card-container.menu {
min-width: 30rem; min-width: 28em;
min-height: 50rem; min-height: 15em;
background: #181825; background: #1e1e2e;
border: 0.25rem solid #313244; border: 0.2em solid #313244;
border-radius: 0.4rem; border-radius: 0.4em;
} }
.notification-menu-content { .window-content.notificationsmenu {
margin: 40rem; margin-top: -0.4em;
margin-right: 0.6em;
}
.notification-card.menu {
border: 0em;
border-bottom: 0.25em solid #313244;
border-radius: 0em;
margin: 0rem;
}
.notification-card.menu:first-child {
border-top: 0rem;
}
.notification-card.menu:last-child {
border-bottom: 0rem;
}
.notification-card.menu:not(:first-child) {
margin: 0rem;
} }
.notification-card-container { .notification-card-container {

2
style.css.map
View File

File diff suppressed because one or more lines are too long