Finish notifications menu
This commit is contained in:
Jas Singh
@@ -1,9 +1,6 @@
|
||||
const notifs = await Service.import("notifications");
|
||||
|
||||
export const Notifications = () => {
|
||||
notifs.connect("changed", () => {
|
||||
console.log(JSON.stringify(notifs, null, 2));
|
||||
});
|
||||
return {
|
||||
component: Widget.Box({
|
||||
hpack: "start",
|
||||
|
||||
@@ -9,9 +9,9 @@ const filterTitle = (windowtitle) => {
|
||||
["org.kde.dolphin", " Dolphin"],
|
||||
["plex", " Plex"],
|
||||
["steam", " Steam"],
|
||||
["", " Desktop"],
|
||||
["spotify", " Spotify"],
|
||||
["obsidian", " Obsidian"],
|
||||
["^$", " Desktop"],
|
||||
["(.+)", ` ${windowtitle.class.charAt(0).toUpperCase() + windowtitle.class.slice(1)}`],
|
||||
];
|
||||
|
||||
|
||||
@@ -1,132 +1,152 @@
|
||||
export const Padding = (name) => Widget.EventBox({
|
||||
export const Padding = (name, opts = {}) =>
|
||||
Widget.EventBox({
|
||||
class_name: opts?.className || "",
|
||||
hexpand: true,
|
||||
vexpand: true,
|
||||
vexpand: typeof opts?.vexpand === "boolean" ? opts.vexpand : true,
|
||||
can_focus: false,
|
||||
child: Widget.Box(),
|
||||
setup: w => w.on("button-press-event", () => App.toggleWindow(name)),
|
||||
})
|
||||
setup: (w) => w.on("button-press-event", () => App.toggleWindow(name)),
|
||||
});
|
||||
|
||||
const PopupRevealer = (
|
||||
name,
|
||||
child,
|
||||
transition = "slide_down",
|
||||
) => Widget.Box(
|
||||
const PopupRevealer = (name, child, transition = "slide_down") =>
|
||||
Widget.Box(
|
||||
{ css: "padding: 1px;" },
|
||||
Widget.Revealer({
|
||||
transition,
|
||||
child: Widget.Box({
|
||||
class_name: `window-content ${name}`,
|
||||
child,
|
||||
}),
|
||||
transitionDuration: 200,
|
||||
setup: self => self.hook(App, (_, wname, visible) => {
|
||||
if (wname === name)
|
||||
self.reveal_child = visible
|
||||
transition,
|
||||
child: Widget.Box({
|
||||
class_name: `window-content ${name}-window`,
|
||||
child,
|
||||
}),
|
||||
transitionDuration: 200,
|
||||
setup: (self) =>
|
||||
self.hook(App, (_, wname, visible) => {
|
||||
if (wname === name) self.reveal_child = visible;
|
||||
}),
|
||||
}),
|
||||
)
|
||||
);
|
||||
|
||||
const Layout = (name, child, transition) => ({
|
||||
"center": () => Widget.CenterBox({},
|
||||
center: () =>
|
||||
Widget.CenterBox(
|
||||
{},
|
||||
Padding(name),
|
||||
Widget.CenterBox(
|
||||
{ vertical: true },
|
||||
Padding(name),
|
||||
Widget.CenterBox(
|
||||
{ vertical: true },
|
||||
Padding(name),
|
||||
PopupRevealer(name, child, transition),
|
||||
Padding(name),
|
||||
),
|
||||
PopupRevealer(name, child, transition),
|
||||
Padding(name),
|
||||
),
|
||||
Padding(name),
|
||||
),
|
||||
"top": () => Widget.CenterBox({},
|
||||
Padding(name),
|
||||
Widget.Box(
|
||||
{ vertical: true },
|
||||
PopupRevealer(name, child, transition),
|
||||
Padding(name),
|
||||
),
|
||||
top: () =>
|
||||
Widget.CenterBox(
|
||||
{},
|
||||
Padding(name),
|
||||
Widget.Box(
|
||||
{ vertical: true },
|
||||
PopupRevealer(name, child, transition),
|
||||
Padding(name),
|
||||
),
|
||||
Padding(name),
|
||||
),
|
||||
"top-right": () => Widget.Box({},
|
||||
"top-right": () =>
|
||||
Widget.Box(
|
||||
{},
|
||||
Padding(name),
|
||||
Widget.Box(
|
||||
{
|
||||
hexpand: false,
|
||||
vertical: true,
|
||||
},
|
||||
Padding(name, {
|
||||
vexpand: false,
|
||||
className: "top-right-event-box_top",
|
||||
}),
|
||||
PopupRevealer(name, child, transition),
|
||||
Padding(name),
|
||||
Widget.Box(
|
||||
{
|
||||
hexpand: false,
|
||||
vertical: true,
|
||||
},
|
||||
PopupRevealer(name, child, transition),
|
||||
Padding(name),
|
||||
),
|
||||
),
|
||||
),
|
||||
"top-center": () => Widget.Box({},
|
||||
Padding(name),
|
||||
Widget.Box(
|
||||
{
|
||||
hexpand: false,
|
||||
vertical: true,
|
||||
},
|
||||
PopupRevealer(name, child, transition),
|
||||
Padding(name),
|
||||
),
|
||||
"top-center": () =>
|
||||
Widget.Box(
|
||||
{},
|
||||
Padding(name),
|
||||
Widget.Box(
|
||||
{
|
||||
hexpand: false,
|
||||
vertical: true,
|
||||
},
|
||||
PopupRevealer(name, child, transition),
|
||||
Padding(name),
|
||||
),
|
||||
Padding(name),
|
||||
),
|
||||
"top-left": () => Widget.Box({},
|
||||
Widget.Box(
|
||||
{
|
||||
hexpand: false,
|
||||
vertical: true,
|
||||
},
|
||||
PopupRevealer(name, child, transition),
|
||||
Padding(name),
|
||||
),
|
||||
"top-left": () =>
|
||||
Widget.Box(
|
||||
{},
|
||||
Widget.Box(
|
||||
{
|
||||
hexpand: false,
|
||||
vertical: true,
|
||||
},
|
||||
PopupRevealer(name, child, transition),
|
||||
Padding(name),
|
||||
),
|
||||
Padding(name),
|
||||
),
|
||||
"bottom-left": () => Widget.Box({},
|
||||
Widget.Box(
|
||||
{
|
||||
hexpand: false,
|
||||
vertical: true,
|
||||
},
|
||||
Padding(name),
|
||||
PopupRevealer(name, child, transition),
|
||||
),
|
||||
"bottom-left": () =>
|
||||
Widget.Box(
|
||||
{},
|
||||
Widget.Box(
|
||||
{
|
||||
hexpand: false,
|
||||
vertical: true,
|
||||
},
|
||||
Padding(name),
|
||||
PopupRevealer(name, child, transition),
|
||||
),
|
||||
Padding(name),
|
||||
),
|
||||
"bottom-center": () => Widget.Box({},
|
||||
Padding(name),
|
||||
Widget.Box(
|
||||
{
|
||||
hexpand: false,
|
||||
vertical: true,
|
||||
},
|
||||
Padding(name),
|
||||
PopupRevealer(name, child, transition),
|
||||
),
|
||||
"bottom-center": () =>
|
||||
Widget.Box(
|
||||
{},
|
||||
Padding(name),
|
||||
Widget.Box(
|
||||
{
|
||||
hexpand: false,
|
||||
vertical: true,
|
||||
},
|
||||
Padding(name),
|
||||
PopupRevealer(name, child, transition),
|
||||
),
|
||||
Padding(name),
|
||||
),
|
||||
"bottom-right": () => Widget.Box({},
|
||||
"bottom-right": () =>
|
||||
Widget.Box(
|
||||
{},
|
||||
Padding(name),
|
||||
Widget.Box(
|
||||
{
|
||||
hexpand: false,
|
||||
vertical: true,
|
||||
},
|
||||
Padding(name),
|
||||
Widget.Box(
|
||||
{
|
||||
hexpand: false,
|
||||
vertical: true,
|
||||
},
|
||||
Padding(name),
|
||||
PopupRevealer(name, child, transition),
|
||||
),
|
||||
PopupRevealer(name, child, transition),
|
||||
),
|
||||
),
|
||||
})
|
||||
});
|
||||
|
||||
export default ({
|
||||
name,
|
||||
child,
|
||||
layout = "center",
|
||||
transition,
|
||||
exclusivity = "ignore",
|
||||
...props
|
||||
}) => Widget.Window({
|
||||
name,
|
||||
child,
|
||||
layout = "center",
|
||||
transition,
|
||||
exclusivity = "ignore",
|
||||
...props
|
||||
}) =>
|
||||
Widget.Window({
|
||||
name,
|
||||
class_names: [name, "popup-window"],
|
||||
setup: w => w.keybind("Escape", () => App.closeWindow(name)),
|
||||
setup: (w) => w.keybind("Escape", () => App.closeWindow(name)),
|
||||
visible: false,
|
||||
keymode: "on-demand",
|
||||
exclusivity,
|
||||
@@ -134,4 +154,4 @@ export default ({
|
||||
anchor: ["top", "bottom", "right", "left"],
|
||||
child: Layout(name, child, transition)[layout](),
|
||||
...props,
|
||||
})
|
||||
});
|
||||
|
||||
@@ -131,8 +131,6 @@ export default () => {
|
||||
});
|
||||
};
|
||||
|
||||
console.log(JSON.stringify(btDevices, null, 2));
|
||||
|
||||
return btDevices.length === 0 ? noDevices() : deviceList();
|
||||
};
|
||||
|
||||
|
||||
@@ -40,7 +40,6 @@ export default () => {
|
||||
vertical: true,
|
||||
setup: (self) => {
|
||||
self.hook(network, () => {
|
||||
// console.log(JSON.stringify(network, null, 2));
|
||||
self.hook(pendingAuth, () => {
|
||||
let sortedNetworks = [];
|
||||
|
||||
|
||||
@@ -19,192 +19,267 @@ export default () => {
|
||||
class_name: "notification-card-container menu",
|
||||
spacing: 0,
|
||||
vertical: true,
|
||||
hexpand: true,
|
||||
hexpand: false,
|
||||
vexpand: false,
|
||||
child: Widget.Box({
|
||||
vexpand: false,
|
||||
spacing: 0,
|
||||
vertical: true,
|
||||
setup: (self) => {
|
||||
self.hook(notifs, () => {
|
||||
const imageContainer = (notif) => {
|
||||
if (notif.image !== undefined) {
|
||||
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: () => {
|
||||
notif.invoke(action.id);
|
||||
},
|
||||
child: Widget.Box({
|
||||
hpack: "center",
|
||||
hexpand: true,
|
||||
children: [
|
||||
Widget.Label({
|
||||
class_name:
|
||||
"notification-action-buttons-label menu",
|
||||
hexpand: true,
|
||||
label: action.label,
|
||||
}),
|
||||
],
|
||||
}),
|
||||
});
|
||||
}),
|
||||
}),
|
||||
];
|
||||
}
|
||||
|
||||
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 menu",
|
||||
icon,
|
||||
children: [
|
||||
Widget.Box({
|
||||
class_name: "notification-menu-controls",
|
||||
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.Separator({
|
||||
class_name: "menu-separator notifications",
|
||||
}),
|
||||
Widget.Box({
|
||||
hpack: "end",
|
||||
children: notifs.bind("notifications").as((n) => {
|
||||
if (n.length > 0) {
|
||||
return [
|
||||
Widget.Button({
|
||||
class_name: "clear-notifications-button",
|
||||
on_primary_click: () => notifs.clear(),
|
||||
child: Widget.Label({
|
||||
class_name: "clear-notifications-label",
|
||||
label: "clear",
|
||||
}),
|
||||
}),
|
||||
];
|
||||
}
|
||||
return [];
|
||||
}),
|
||||
}),
|
||||
Widget.Box({
|
||||
class_name: "menu-content-container notifications",
|
||||
hpack: "center",
|
||||
expand: false,
|
||||
spacing: 0,
|
||||
vertical: true,
|
||||
setup: (self) => {
|
||||
self.hook(notifs, () => {
|
||||
const imageContainer = (notif) => {
|
||||
if (notif.image !== undefined) {
|
||||
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}")`,
|
||||
}),
|
||||
}),
|
||||
];
|
||||
}
|
||||
|
||||
const sortedNotifications = notifs.notifications.sort(
|
||||
(a, b) => b.time - a.time,
|
||||
);
|
||||
return [];
|
||||
};
|
||||
|
||||
return (self.children = sortedNotifications.map((notif) => {
|
||||
return Widget.Box({
|
||||
class_name: "notification-card menu",
|
||||
vpack: "start",
|
||||
hexpand: true,
|
||||
children: [
|
||||
...imageContainer(notif),
|
||||
Widget.Box({
|
||||
vpack: "start",
|
||||
vertical: true,
|
||||
hexpand: true,
|
||||
class_name: `notification-card-content ${notif.image === undefined ? "noimg" : " menu"}`,
|
||||
children: [
|
||||
Widget.Box({
|
||||
vertical: false,
|
||||
hexpand: true,
|
||||
children: [
|
||||
Widget.Box({
|
||||
class_name: "notification-card-header menu",
|
||||
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: () => {
|
||||
notif.invoke(action.id);
|
||||
},
|
||||
child: Widget.Box({
|
||||
hpack: "center",
|
||||
hexpand: true,
|
||||
vpack: "start",
|
||||
children: [
|
||||
Widget.Label({
|
||||
class_name:
|
||||
"notification-card-header-label menu",
|
||||
hpack: "start",
|
||||
"notification-action-buttons-label menu",
|
||||
hexpand: true,
|
||||
vexpand: true,
|
||||
max_width_chars:
|
||||
notif.image === undefined ? 27 : 20,
|
||||
truncate: "end",
|
||||
wrap: true,
|
||||
label: notif["summary"],
|
||||
label: action.label,
|
||||
}),
|
||||
],
|
||||
}),
|
||||
Widget.Box({
|
||||
class_name: "notification-card-header menu",
|
||||
hexpand: true,
|
||||
hpack: "end",
|
||||
children: [NotificationIcon(notif)],
|
||||
}),
|
||||
],
|
||||
});
|
||||
}),
|
||||
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:
|
||||
notif.image === undefined ? 35 : 28,
|
||||
wrap: true,
|
||||
class_name: "notification-card-body-label menu",
|
||||
label: notif["body"],
|
||||
}),
|
||||
],
|
||||
}),
|
||||
...actionsContainer(notif),
|
||||
],
|
||||
}),
|
||||
];
|
||||
}
|
||||
|
||||
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 menu",
|
||||
icon,
|
||||
}),
|
||||
Widget.Button({
|
||||
class_name: "close-notification-button menu",
|
||||
on_primary_click: () => {
|
||||
notifs.CloseNotification(notif.id);
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
const sortedNotifications = notifs.notifications.sort(
|
||||
(a, b) => b.time - a.time,
|
||||
);
|
||||
|
||||
if (notifs.notifications.length <= 0) {
|
||||
return (self.children = [
|
||||
Widget.Box({
|
||||
vpack: "center",
|
||||
hpack: "center",
|
||||
expand: true,
|
||||
child: Widget.Label({
|
||||
label: "",
|
||||
hpack: "center",
|
||||
class_name: "placehold-label dim",
|
||||
label: "You're all caught up :)",
|
||||
}),
|
||||
}),
|
||||
],
|
||||
});
|
||||
}));
|
||||
});
|
||||
},
|
||||
}),
|
||||
]);
|
||||
}
|
||||
|
||||
return (self.children = sortedNotifications.map((notif) => {
|
||||
return Widget.Box({
|
||||
class_name: "notification-card menu",
|
||||
vpack: "center",
|
||||
hexpand: false,
|
||||
children: [
|
||||
...imageContainer(notif),
|
||||
Widget.Box({
|
||||
vpack: "center",
|
||||
vertical: true,
|
||||
hexpand: true,
|
||||
class_name: `notification-card-content ${notif.image === undefined ? "noimg" : " menu"}`,
|
||||
children: [
|
||||
Widget.Box({
|
||||
vertical: false,
|
||||
hexpand: true,
|
||||
children: [
|
||||
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:
|
||||
notif.image === undefined ? 27 : 20,
|
||||
truncate: "end",
|
||||
wrap: true,
|
||||
label: notif["summary"],
|
||||
}),
|
||||
],
|
||||
}),
|
||||
Widget.Box({
|
||||
class_name: "notification-card-header menu",
|
||||
hexpand: true,
|
||||
hpack: "end",
|
||||
children: [NotificationIcon(notif)],
|
||||
}),
|
||||
],
|
||||
}),
|
||||
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:
|
||||
notif.image === undefined ? 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",
|
||||
}),
|
||||
}),
|
||||
],
|
||||
});
|
||||
}));
|
||||
});
|
||||
},
|
||||
}),
|
||||
],
|
||||
}),
|
||||
],
|
||||
}),
|
||||
|
||||
@@ -17,10 +17,6 @@ export default () => {
|
||||
hexpand: true,
|
||||
setup: (self) => {
|
||||
self.hook(notifs, () => {
|
||||
if (notifs.dnd) {
|
||||
return [];
|
||||
}
|
||||
|
||||
const imageContainer = (notif) => {
|
||||
if (notif.image !== undefined) {
|
||||
return [
|
||||
|
||||
Reference in New Issue
Block a user