121 lines
4.0 KiB
JavaScript
121 lines
4.0 KiB
JavaScript
|
import Widget from 'resource:///com/github/Aylur/ags/widget.js';
|
||
|
import { lookUpIcon, timeout } from 'resource:///com/github/Aylur/ags/utils.js';
|
||
|
|
||
|
const NotificationIcon = ({ appEntry, appIcon, image }) => {
|
||
|
if (image) {
|
||
|
return Widget.Box({
|
||
|
valign: 'start',
|
||
|
hexpand: false,
|
||
|
className: 'icon img',
|
||
|
style: `
|
||
|
background-image: url("${image}");
|
||
|
background-size: contain;
|
||
|
background-repeat: no-repeat;
|
||
|
background-position: center;
|
||
|
min-width: 78px;
|
||
|
min-height: 78px;
|
||
|
`,
|
||
|
});
|
||
|
}
|
||
|
|
||
|
let icon = 'dialog-information-symbolic';
|
||
|
if (lookUpIcon(appIcon))
|
||
|
icon = appIcon;
|
||
|
|
||
|
if (lookUpIcon(appEntry))
|
||
|
icon = appEntry;
|
||
|
|
||
|
return Widget.Box({
|
||
|
valign: 'start',
|
||
|
hexpand: false,
|
||
|
className: 'icon',
|
||
|
style: `
|
||
|
min-width: 78px;
|
||
|
min-height: 78px;
|
||
|
`,
|
||
|
children: [Widget.Icon({
|
||
|
icon, size: 58,
|
||
|
halign: 'center', hexpand: true,
|
||
|
valign: 'center', vexpand: true,
|
||
|
})],
|
||
|
});
|
||
|
};
|
||
|
|
||
|
export const Notification = n => Widget.EventBox({
|
||
|
className: `notification ${n.urgency}`,
|
||
|
onPrimaryClick: () => n.dismiss(),
|
||
|
properties: [['hovered', false]],
|
||
|
onHover: self => {
|
||
|
if (self._hovered)
|
||
|
return;
|
||
|
|
||
|
// if there are action buttons and they are hovered
|
||
|
// EventBox onHoverLost will fire off immediately,
|
||
|
// so to prevent this we delay it
|
||
|
timeout(300, () => self._hovered = true);
|
||
|
},
|
||
|
onHoverLost: self => {
|
||
|
if (!self._hovered)
|
||
|
return;
|
||
|
|
||
|
self._hovered = false;
|
||
|
n.dismiss();
|
||
|
},
|
||
|
vexpand: false,
|
||
|
child: Widget.Box({
|
||
|
vertical: true,
|
||
|
children: [
|
||
|
Widget.Box({
|
||
|
children: [
|
||
|
NotificationIcon(n),
|
||
|
Widget.Box({
|
||
|
hexpand: true,
|
||
|
vertical: true,
|
||
|
children: [
|
||
|
Widget.Box({
|
||
|
children: [
|
||
|
Widget.Label({
|
||
|
className: 'title',
|
||
|
xalign: 0,
|
||
|
justification: 'left',
|
||
|
hexpand: true,
|
||
|
maxWidthChars: 24,
|
||
|
truncate: 'end',
|
||
|
wrap: true,
|
||
|
label: n.summary,
|
||
|
useMarkup: true,
|
||
|
}),
|
||
|
Widget.Button({
|
||
|
className: 'close-button',
|
||
|
valign: 'start',
|
||
|
child: Widget.Icon('window-close-symbolic'),
|
||
|
onClicked: n.close.bind(n),
|
||
|
}),
|
||
|
],
|
||
|
}),
|
||
|
Widget.Label({
|
||
|
className: 'description',
|
||
|
hexpand: true,
|
||
|
useMarkup: true,
|
||
|
xalign: 0,
|
||
|
justification: 'left',
|
||
|
label: n.body,
|
||
|
wrap: true,
|
||
|
}),
|
||
|
],
|
||
|
}),
|
||
|
],
|
||
|
}),
|
||
|
Widget.Box({
|
||
|
className: 'actions',
|
||
|
children: n.actions.map(({ id, label }) => Widget.Button({
|
||
|
className: 'action-button',
|
||
|
onClicked: () => n.invoke(id),
|
||
|
hexpand: true,
|
||
|
child: Widget.Label(label),
|
||
|
})),
|
||
|
}),
|
||
|
],
|
||
|
}),
|
||
|
});
|