nat/ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

improve notifications

Browse Source
This commit is contained in:
gnat 2024-09-25 11:09:57 -07:00
parent af9d9e3451
commit 9e70891175
3 changed files with 68 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
style/components/notification-popups.scss
View File

@ -16,12 +16,23 @@
margin-bottom: 25px; margin-bottom: 25px;
min-width: 24rem; min-width: 24rem;
padding: 0px; padding: 0px;
border: 2px solid $fg; border: 1px solid $fg;
border-right: 25px solid $hl-alt-2; border-right: none;
background: $bg; background: $bg;
}
&.critical { .urgency-indicator {
border-right: 25px solid $hl; min-width: 15px;
margin-bottom: 25px;
&.normal, &.low {
background: $hl-alt-2;
border: 1px solid $hl-alt-2;
}
&.urgent {
background: $hl;
border: 1px solid $hl
} }
} }
@ -30,8 +41,6 @@
} }
.timeout-bar { .timeout-bar {
margin: 5px 0px 0;
margin-top: 5px;
background: $bg-alt-1; background: $bg-alt-1;
> trough > progress { > trough > progress {
@ -53,8 +62,7 @@
.icon { .icon {
min-width: 68px; min-width: 68px;
min-height: 68px; min-height: 68px;
margin-right: 1em; margin: 5px;
margin-left: 1em;
} }
.icon image { .icon image {
@ -70,6 +78,7 @@
.title { .title {
font-size: 28px; font-size: 28px;
padding-right: 5px;
} }
.actions .action-button { .actions .action-button {

23
style/style.css
View File

@ -243,16 +243,21 @@
margin-bottom: 25px; margin-bottom: 25px;
min-width: 24rem; min-width: 24rem;
padding: 0px; padding: 0px;
border: 2px solid #f2f4f8; border: 1px solid #f2f4f8;
border-right: 25px solid #42be65; border-right: none;
background: #161616; } background: #161616; }
.notifications .revealer .notification.critical { .notifications .revealer .urgency-indicator {
border-right: 25px solid #FF7EB6; } min-width: 15px;
margin-bottom: 25px; }
.notifications .revealer .urgency-indicator.normal, .notifications .revealer .urgency-indicator.low {
background: #42be65;
border: 1px solid #42be65; }
.notifications .revealer .urgency-indicator.urgent {
background: #FF7EB6;
border: 1px solid #FF7EB6; }
.notifications .revealer .body { .notifications .revealer .body {
margin-right: 1em; } margin-right: 1em; }
.notifications .revealer .timeout-bar { .notifications .revealer .timeout-bar {
margin: 5px 0px 0;
margin-top: 5px;
background: #262626; } background: #262626; }
.notifications .revealer .timeout-bar > trough > progress { .notifications .revealer .timeout-bar > trough > progress {
background-image: none; background-image: none;
@ -266,8 +271,7 @@
.notifications .revealer .icon { .notifications .revealer .icon {
min-width: 68px; min-width: 68px;
min-height: 68px; min-height: 68px;
margin-right: 1em; margin: 5px; }
margin-left: 1em; }
.notifications .revealer .icon image { .notifications .revealer .icon image {
font-size: 58px; font-size: 58px;
margin: 5px; margin: 5px;
@ -276,7 +280,8 @@
min-width: 68px; min-width: 68px;
min-height: 68px; } min-height: 68px; }
.notifications .revealer .title { .notifications .revealer .title {
font-size: 28px; } font-size: 28px;
padding-right: 5px; }
.notifications .revealer .actions .action-button { .notifications .revealer .actions .action-button {
margin: 0 .4em; margin: 0 .4em;
margin-top: .8em; margin-top: .8em;

44
windows/notifications.js
View File

@ -3,8 +3,6 @@ const { Pango } = imports.gi;
Notifications.popupTimeout = 3000; Notifications.popupTimeout = 3000;
function notification_icon({ app_entry, app_icon, image }) { function notification_icon({ app_entry, app_icon, image }) {
if (image) { if (image) {
return Widget.Box({ return Widget.Box({
@ -29,7 +27,8 @@ function notification_icon({ app_entry, app_icon, image }) {
const notification = (n) => { const notification = (n) => {
const icon = Widget.Box({ const icon = Widget.Box({
vpack: 'start', vpack: 'center',
hpack: 'start',
class_name: 'icon', class_name: 'icon',
child: notification_icon(n), child: notification_icon(n),
}) })
@ -38,6 +37,7 @@ const notification = (n) => {
className: 'title', className: 'title',
label: n.summary, label: n.summary,
xalign: 0, xalign: 0,
maxWidthChars: 40,
justify: 'left', justify: 'left',
}) })
@ -65,16 +65,16 @@ const notification = (n) => {
})), })),
}) })
const buttons = Widget.Box({ // const buttons = Widget.Box({
hpack: 'end', // hpack: 'end',
children: [ // children: [
Widget.Button({ // Widget.Button({
className: 'button', // className: 'button',
onClicked: () => n.dismiss(), // onClicked: () => n.dismiss(),
child: Widget.Label('') // child: Widget.Label('')
}) // })
] // ]
}) // })
const timeout_progress = Widget.ProgressBar({ const timeout_progress = Widget.ProgressBar({
className: 'timeout-bar', className: 'timeout-bar',
@ -91,11 +91,13 @@ const notification = (n) => {
} }
}) })
const layout = Widget.Box({ const layout = Widget.Button({
className: `notification ${n.urgency}`, child: Widget.Box({
children: [
Widget.Box({
className: 'notification',
vertical: true, vertical: true,
children: [ children: [
buttons,
Widget.Box([ Widget.Box([
icon, icon,
Widget.Box({ Widget.Box({
@ -108,6 +110,14 @@ const notification = (n) => {
actions, actions,
timeout_progress timeout_progress
] ]
}),
Widget.Box({
vexpand: false,
classNames: ['urgency-indicator', n.urgency]
})
]
}),
onPrimaryClick: n.dismiss,
}) })
return Widget.Revealer({ return Widget.Revealer({
@ -141,7 +151,7 @@ export const NotificationPopups = Widget.Window({
name: 'notifications', name: 'notifications',
anchor: ['top', 'right'], anchor: ['top', 'right'],
layer: 'overlay', layer: 'overlay',
margins: [5, 0, 0, 0], margins: [15, 0, 0, 0],
child: Widget.Box({ child: Widget.Box({
className: 'notifications', className: 'notifications',
vertical: true, vertical: true,