From 9e708911755c893fedbed599521b79b93e7db5f0 Mon Sep 17 00:00:00 2001
From: gnat <natalieconnolly621@gmail.com>
Date: Wed, 25 Sep 2024 11:09:57 -0700
Subject: [PATCH] improve notifications

---
 style/components/notification-popups.scss | 27 ++++++----
 style/style.css                           | 23 +++++----
 windows/notifications.js                  | 62 +++++++++++++----------
 3 files changed, 68 insertions(+), 44 deletions(-)

diff --git a/style/components/notification-popups.scss b/style/components/notification-popups.scss
index 14045f2..6d3c4ea 100644
--- a/style/components/notification-popups.scss
+++ b/style/components/notification-popups.scss
@@ -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 {
diff --git a/style/style.css b/style/style.css
index 300e49b..f0ffb51 100644
--- a/style/style.css
+++ b/style/style.css
@@ -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;
diff --git a/windows/notifications.js b/windows/notifications.js
index 43e32dc..fa959f8 100644
--- a/windows/notifications.js
+++ b/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({
-        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,