improve notifications
This commit is contained in:
gnat
parent
af9d9e3451
commit
9e70891175
@ -16,12 +16,23 @@
|
||||
margin-bottom: 25px;
|
||||
min-width: 24rem;
|
||||
padding: 0px;
|
||||
border: 2px solid $fg;
|
||||
border-right: 25px solid $hl-alt-2;
|
||||
border: 1px solid $fg;
|
||||
border-right: none;
|
||||
background: $bg;
|
||||
}
|
||||
|
||||
&.critical {
|
||||
border-right: 25px solid $hl;
|
||||
.urgency-indicator {
|
||||
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 {
|
||||
margin: 5px 0px 0;
|
||||
margin-top: 5px;
|
||||
background: $bg-alt-1;
|
||||
|
||||
> trough > progress {
|
||||
@ -53,8 +62,7 @@
|
||||
.icon {
|
||||
min-width: 68px;
|
||||
min-height: 68px;
|
||||
margin-right: 1em;
|
||||
margin-left: 1em;
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
.icon image {
|
||||
@ -68,8 +76,9 @@
|
||||
min-height: 68px;
|
||||
}
|
||||
|
||||
.title {
|
||||
.title {
|
||||
font-size: 28px;
|
||||
padding-right: 5px;
|
||||
}
|
||||
|
||||
.actions .action-button {
|
||||
|
||||
@ -243,16 +243,21 @@
|
||||
margin-bottom: 25px;
|
||||
min-width: 24rem;
|
||||
padding: 0px;
|
||||
border: 2px solid #f2f4f8;
|
||||
border-right: 25px solid #42be65;
|
||||
border: 1px solid #f2f4f8;
|
||||
border-right: none;
|
||||
background: #161616; }
|
||||
.notifications .revealer .notification.critical {
|
||||
border-right: 25px solid #FF7EB6; }
|
||||
.notifications .revealer .urgency-indicator {
|
||||
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 {
|
||||
margin-right: 1em; }
|
||||
.notifications .revealer .timeout-bar {
|
||||
margin: 5px 0px 0;
|
||||
margin-top: 5px;
|
||||
background: #262626; }
|
||||
.notifications .revealer .timeout-bar > trough > progress {
|
||||
background-image: none;
|
||||
@ -266,8 +271,7 @@
|
||||
.notifications .revealer .icon {
|
||||
min-width: 68px;
|
||||
min-height: 68px;
|
||||
margin-right: 1em;
|
||||
margin-left: 1em; }
|
||||
margin: 5px; }
|
||||
.notifications .revealer .icon image {
|
||||
font-size: 58px;
|
||||
margin: 5px;
|
||||
@ -276,7 +280,8 @@
|
||||
min-width: 68px;
|
||||
min-height: 68px; }
|
||||
.notifications .revealer .title {
|
||||
font-size: 28px; }
|
||||
font-size: 28px;
|
||||
padding-right: 5px; }
|
||||
.notifications .revealer .actions .action-button {
|
||||
margin: 0 .4em;
|
||||
margin-top: .8em;
|
||||
|
||||
@ -3,8 +3,6 @@ const { Pango } = imports.gi;
|
||||
|
||||
Notifications.popupTimeout = 3000;
|
||||
|
||||
|
||||
|
||||
function notification_icon({ app_entry, app_icon, image }) {
|
||||
if (image) {
|
||||
return Widget.Box({
|
||||
@ -29,7 +27,8 @@ function notification_icon({ app_entry, app_icon, image }) {
|
||||
|
||||
const notification = (n) => {
|
||||
const icon = Widget.Box({
|
||||
vpack: 'start',
|
||||
vpack: 'center',
|
||||
hpack: 'start',
|
||||
class_name: 'icon',
|
||||
child: notification_icon(n),
|
||||
})
|
||||
@ -38,6 +37,7 @@ const notification = (n) => {
|
||||
className: 'title',
|
||||
label: n.summary,
|
||||
xalign: 0,
|
||||
maxWidthChars: 40,
|
||||
justify: 'left',
|
||||
})
|
||||
|
||||
@ -65,16 +65,16 @@ const notification = (n) => {
|
||||
})),
|
||||
})
|
||||
|
||||
const buttons = Widget.Box({
|
||||
hpack: 'end',
|
||||
children: [
|
||||
Widget.Button({
|
||||
className: 'button',
|
||||
onClicked: () => n.dismiss(),
|
||||
child: Widget.Label('')
|
||||
})
|
||||
]
|
||||
})
|
||||
// const buttons = Widget.Box({
|
||||
// hpack: 'end',
|
||||
// children: [
|
||||
// Widget.Button({
|
||||
// className: 'button',
|
||||
// onClicked: () => n.dismiss(),
|
||||
// child: Widget.Label('')
|
||||
// })
|
||||
// ]
|
||||
// })
|
||||
|
||||
const timeout_progress = Widget.ProgressBar({
|
||||
className: 'timeout-bar',
|
||||
@ -91,23 +91,33 @@ const notification = (n) => {
|
||||
}
|
||||
})
|
||||
|
||||
const layout = Widget.Box({
|
||||
className: `notification ${n.urgency}`,
|
||||
vertical: true,
|
||||
children: [
|
||||
buttons,
|
||||
Widget.Box([
|
||||
icon,
|
||||
const layout = Widget.Button({
|
||||
child: Widget.Box({
|
||||
children: [
|
||||
Widget.Box({
|
||||
className: 'notification',
|
||||
vertical: true,
|
||||
children: [
|
||||
title, body
|
||||
Widget.Box([
|
||||
icon,
|
||||
Widget.Box({
|
||||
vertical: true,
|
||||
children: [
|
||||
title, body
|
||||
]
|
||||
})
|
||||
]),
|
||||
actions,
|
||||
timeout_progress
|
||||
]
|
||||
}),
|
||||
Widget.Box({
|
||||
vexpand: false,
|
||||
classNames: ['urgency-indicator', n.urgency]
|
||||
})
|
||||
]),
|
||||
actions,
|
||||
timeout_progress
|
||||
]
|
||||
]
|
||||
}),
|
||||
onPrimaryClick: n.dismiss,
|
||||
})
|
||||
|
||||
return Widget.Revealer({
|
||||
@ -141,7 +151,7 @@ export const NotificationPopups = Widget.Window({
|
||||
name: 'notifications',
|
||||
anchor: ['top', 'right'],
|
||||
layer: 'overlay',
|
||||
margins: [5, 0, 0, 0],
|
||||
margins: [15, 0, 0, 0],
|
||||
child: Widget.Box({
|
||||
className: 'notifications',
|
||||
vertical: true,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user