Modularized notification toast and menu components.
This commit is contained in:
56
modules/menus/notifications/controls/index.js
Normal file
56
modules/menus/notifications/controls/index.js
Normal 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 };
|
||||
@@ -1,12 +1,9 @@
|
||||
import PopupWindow from "../PopupWindow.js";
|
||||
const notifs = await Service.import("notifications");
|
||||
import icons from "../../icons/index.js";
|
||||
import GLib from "gi://GLib";
|
||||
import { Controls } from "./controls/index.js";
|
||||
import { NotificationCard } from "./notification/index.js";
|
||||
|
||||
export default () => {
|
||||
const time = (time, format = "%I:%M %p") =>
|
||||
GLib.DateTime.new_from_unix_local(time).format(format);
|
||||
|
||||
return PopupWindow({
|
||||
name: "notificationsmenu",
|
||||
visible: false,
|
||||
@@ -23,316 +20,7 @@ export default () => {
|
||||
vertical: true,
|
||||
hexpand: false,
|
||||
vexpand: false,
|
||||
children: [
|
||||
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",
|
||||
}),
|
||||
}),
|
||||
],
|
||||
});
|
||||
}));
|
||||
});
|
||||
},
|
||||
}),
|
||||
],
|
||||
children: [Controls(notifs), NotificationCard(notifs)],
|
||||
}),
|
||||
],
|
||||
}),
|
||||
|
||||
45
modules/menus/notifications/notification/actions/index.js
Normal file
45
modules/menus/notifications/notification/actions/index.js
Normal 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
23
modules/menus/notifications/notification/body/index.js
Normal 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
12
modules/menus/notifications/notification/close/index.js
Normal 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
32
modules/menus/notifications/notification/header/icon.js
Normal 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
48
modules/menus/notifications/notification/header/index.js
Normal 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
22
modules/menus/notifications/notification/image/index.js
Normal 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
59
modules/menus/notifications/notification/index.js
Normal 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 };
|
||||
@@ -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
5
modules/menus/notifications/utils.js
Normal 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
43
modules/notifications/actions/index.js
Normal 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
23
modules/notifications/body/index.js
Normal 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
12
modules/notifications/close/index.js
Normal 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
32
modules/notifications/header/icon.js
Normal 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
49
modules/notifications/header/index.js
Normal 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
22
modules/notifications/image/index.js
Normal 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 };
|
||||
@@ -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),
|
||||
],
|
||||
});
|
||||
}));
|
||||
|
||||
@@ -32,7 +32,7 @@
|
||||
}
|
||||
.menu-section-container.playback {
|
||||
margin-top: 0em;
|
||||
margin-bottom: 1.35em;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
.menu-section-container.input {
|
||||
margin-top: 0em;
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
.menu-items-container.bluetooth {
|
||||
font-size: 1.3em;
|
||||
.menu-section-container {
|
||||
margin: 1.35em 0em;
|
||||
margin: 1em 0em;
|
||||
}
|
||||
|
||||
.menu-label-container {
|
||||
|
||||
@@ -74,7 +74,7 @@
|
||||
}
|
||||
.clock-content-period {
|
||||
font-size: 1.75em;
|
||||
margin-bottom: 1.3em;
|
||||
margin-bottom: 1.35em;
|
||||
margin-right: -0.875em;
|
||||
color: $teal;
|
||||
}
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
min-height: 18em;
|
||||
|
||||
.menu-section-container {
|
||||
margin: 1.3em 0em;
|
||||
margin: 1em 0em;
|
||||
}
|
||||
|
||||
.menu-items-section {
|
||||
|
||||
@@ -104,7 +104,7 @@ tooltip label {
|
||||
}
|
||||
|
||||
.menu-section-container {
|
||||
margin: 1.35em 0em;
|
||||
margin: 1em 0em;
|
||||
|
||||
.menu-label {
|
||||
color: $text;
|
||||
@@ -117,7 +117,7 @@ tooltip label {
|
||||
border-radius: 0.4em;
|
||||
border-bottom-left-radius: 0em;
|
||||
border-bottom-right-radius: 0em;
|
||||
margin: 0em 1.35em ;
|
||||
margin: 0em 1em ;
|
||||
min-height: 2em;
|
||||
}
|
||||
|
||||
@@ -130,7 +130,7 @@ tooltip label {
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
margin-top: 1.35em;
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
.menu-items-section {
|
||||
@@ -139,7 +139,7 @@ tooltip label {
|
||||
border-top-left-radius: 0em;
|
||||
border-top-right-radius: 0em;
|
||||
padding: 0.9em;
|
||||
margin: 0em 1.35em;
|
||||
margin: 0em 1em;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
|
||||
.notification-card-container.menu {
|
||||
margin: 0em;
|
||||
min-width: 28.6em;
|
||||
min-width: 30.5em;
|
||||
min-height: 48em;
|
||||
background: $crust;
|
||||
border: 0.13em solid $surface0;
|
||||
@@ -14,14 +14,14 @@
|
||||
}
|
||||
|
||||
.menu-content-container.notifications {
|
||||
margin: 1.35em;
|
||||
margin: 1em;
|
||||
margin-bottom: 0em;
|
||||
min-height: 4em;
|
||||
}
|
||||
|
||||
.notification-menu-controls {
|
||||
background: $base;
|
||||
margin: 1em 1.3em;
|
||||
margin: 1em 1em;
|
||||
margin-bottom: 0.5em;
|
||||
border-radius: 0.4em;
|
||||
padding: 0.4em 0.75em;
|
||||
@@ -29,7 +29,7 @@
|
||||
|
||||
.notification-card.menu {
|
||||
background: $base;
|
||||
min-width: 23.5em;
|
||||
min-width: 26.2em;
|
||||
border: 0.15em solid $base;
|
||||
border-radius: 0em;
|
||||
border-bottom-left-radius: 0.4em;
|
||||
@@ -40,7 +40,7 @@
|
||||
.notification-card-content-container {
|
||||
margin-bottom: 0.65em;
|
||||
&:last-child {
|
||||
margin-bottom: 1.3em;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
}
|
||||
.notification-card-content {
|
||||
@@ -92,3 +92,18 @@
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -21,7 +21,6 @@
|
||||
padding: 1px;
|
||||
}
|
||||
|
||||
|
||||
.notification-card-image-container {
|
||||
margin: 0.65em 0.65em;
|
||||
border-radius: 0.4em;
|
||||
@@ -84,6 +83,8 @@
|
||||
|
||||
.notification-icon {
|
||||
margin-bottom: 0.4em;
|
||||
min-width: 1em;
|
||||
min-height: 1em;
|
||||
font-size: 1.3em;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,13 +1,11 @@
|
||||
#!/bin/bash
|
||||
|
||||
outputDir="$HOME/Pictures/Screenshots/"
|
||||
|
||||
outputFile="snapshot_$(date +%Y-%m-%d_%H-%M-%S).png"
|
||||
outputPath="$outputDir/$outputFile"
|
||||
mkdir -p "$outputDir"
|
||||
|
||||
grimblast copysave area "$outputPath"
|
||||
|
||||
if grimblast copysave area "$outputPath"; then
|
||||
recentFile=$(ls -t "$outputDir"/snapshot_*.png | head -n 1)
|
||||
notify-send "Grimblast" "Your snapshot has been saved." \
|
||||
-i video-x-generic \
|
||||
@@ -16,3 +14,4 @@ notify-send "Grimblast" "Your snapshot has been saved." \
|
||||
-u normal \
|
||||
--action="scriptAction:-dolphin $outputDir=Directory" \
|
||||
--action="scriptAction:-xdg-open $recentFile=View"
|
||||
fi
|
||||
|
||||
41
style.css
41
style.css
@@ -523,7 +523,7 @@ tooltip label {
|
||||
}
|
||||
|
||||
.menu-section-container {
|
||||
margin: 1.35em 0em;
|
||||
margin: 1em 0em;
|
||||
}
|
||||
.menu-section-container .menu-label {
|
||||
color: #cdd6f4;
|
||||
@@ -535,7 +535,7 @@ tooltip label {
|
||||
border-radius: 0.4em;
|
||||
border-bottom-left-radius: 0em;
|
||||
border-bottom-right-radius: 0em;
|
||||
margin: 0em 1.35em;
|
||||
margin: 0em 1em;
|
||||
min-height: 2em;
|
||||
}
|
||||
.menu-section-container:first-child {
|
||||
@@ -545,7 +545,7 @@ tooltip label {
|
||||
margin-top: 0em;
|
||||
}
|
||||
.menu-section-container:nth-child(2) {
|
||||
margin-top: 1.35em;
|
||||
margin-top: 1em;
|
||||
}
|
||||
.menu-section-container .menu-items-section {
|
||||
background: #1e1e2e;
|
||||
@@ -553,7 +553,7 @@ tooltip label {
|
||||
border-top-left-radius: 0em;
|
||||
border-top-right-radius: 0em;
|
||||
padding: 0.9em;
|
||||
margin: 0em 1.35em;
|
||||
margin: 0em 1em;
|
||||
}
|
||||
|
||||
.menu-active {
|
||||
@@ -878,7 +878,7 @@ window#powermenu .powermenu.box {
|
||||
|
||||
.menu-section-container.playback {
|
||||
margin-top: 0em;
|
||||
margin-bottom: 1.35em;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.menu-section-container.input {
|
||||
@@ -968,7 +968,7 @@ window#powermenu .powermenu.box {
|
||||
font-size: 1.3em;
|
||||
}
|
||||
.menu-items-container.bluetooth .menu-section-container {
|
||||
margin: 1.35em 0em;
|
||||
margin: 1em 0em;
|
||||
}
|
||||
.menu-items-container.bluetooth .menu-label-container .menu-label {
|
||||
color: #89dceb;
|
||||
@@ -1032,7 +1032,7 @@ window#powermenu .powermenu.box {
|
||||
min-height: 18em;
|
||||
}
|
||||
.menu-items-container.media .menu-section-container {
|
||||
margin: 1.3em 0em;
|
||||
margin: 1em 0em;
|
||||
}
|
||||
.menu-items-container.media .menu-items-section {
|
||||
border-radius: 0.4em;
|
||||
@@ -1113,7 +1113,7 @@ window#powermenu .powermenu.box {
|
||||
|
||||
.notification-card-container.menu {
|
||||
margin: 0em;
|
||||
min-width: 28.6em;
|
||||
min-width: 30.5em;
|
||||
min-height: 48em;
|
||||
background: #11111b;
|
||||
border: 0.13em solid #313244;
|
||||
@@ -1124,20 +1124,20 @@ window#powermenu .powermenu.box {
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
.notification-card-container.menu .menu-content-container.notifications {
|
||||
margin: 1.35em;
|
||||
margin: 1em;
|
||||
margin-bottom: 0em;
|
||||
min-height: 4em;
|
||||
}
|
||||
.notification-card-container.menu .notification-menu-controls {
|
||||
background: #1e1e2e;
|
||||
margin: 1em 1.3em;
|
||||
margin: 1em 1em;
|
||||
margin-bottom: 0.5em;
|
||||
border-radius: 0.4em;
|
||||
padding: 0.4em 0.75em;
|
||||
}
|
||||
.notification-card-container.menu .notification-card.menu {
|
||||
background: #1e1e2e;
|
||||
min-width: 23.5em;
|
||||
min-width: 26.2em;
|
||||
border: 0.15em solid #1e1e2e;
|
||||
border-radius: 0em;
|
||||
border-bottom-left-radius: 0.4em;
|
||||
@@ -1148,7 +1148,7 @@ window#powermenu .powermenu.box {
|
||||
margin-bottom: 0.65em;
|
||||
}
|
||||
.notification-card-container.menu .notification-card-content-container:last-child {
|
||||
margin-bottom: 1.3em;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
.notification-card-container.menu .notification-card-content {
|
||||
margin-bottom: 0.25em;
|
||||
@@ -1189,6 +1189,19 @@ window#powermenu .powermenu.box {
|
||||
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 {
|
||||
margin-top: 0em;
|
||||
min-width: 27em;
|
||||
@@ -1258,7 +1271,7 @@ window#powermenu .powermenu.box {
|
||||
}
|
||||
.clock-content-items .clock-content-period {
|
||||
font-size: 1.75em;
|
||||
margin-bottom: 1.3em;
|
||||
margin-bottom: 1.35em;
|
||||
margin-right: -0.875em;
|
||||
color: #94e2d5;
|
||||
}
|
||||
@@ -1740,6 +1753,8 @@ window#powermenu .powermenu.box {
|
||||
|
||||
.notification-icon {
|
||||
margin-bottom: 0.4em;
|
||||
min-width: 1em;
|
||||
min-height: 1em;
|
||||
font-size: 1.3em;
|
||||
}
|
||||
|
||||
|
||||
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user