improve notifications

style/components/notification-popups.scss

@@ -16,12 +16,23 @@
       margin-bottom: 25px;
       min-width: 24rem;
       padding: 0px;
-      border: 2px solid $fg;
+      border: 1px solid $fg;
-      border-right: 25px solid $hl-alt-2; 
+      border-right: none;
       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 {
-      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: 5px;
-      margin-left: 1em;
     }
 
     .icon image {
@@ -70,6 +78,7 @@
 
     .title {
       font-size: 28px;
+      padding-right: 5px;
     }
 
     .actions .action-button {

style/style.css

@@ -243,16 +243,21 @@
     margin-bottom: 25px;
     min-width: 24rem;
     padding: 0px;
-    border: 2px solid #f2f4f8;
+    border: 1px solid #f2f4f8;
-    border-right: 25px solid #42be65;
+    border-right: none;
     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 {
     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: 5px; }
-    margin-left: 1em; }
   .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;

windows/notifications.js

@@ -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({
+    // 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({
         className: 'timeout-bar',
@@ -91,23 +91,33 @@ const notification = (n) => {
         }
     })
 
-    const layout = Widget.Box({
+    const layout = Widget.Button({
-        className: `notification ${n.urgency}`,
+        child: Widget.Box({
-        vertical: true, 
+            children: [ 
-        children: [
-            buttons, 
-            Widget.Box([
-                icon,
                 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,