update notifications

lua/widgets/notifications/init.lua

@@ -21,7 +21,10 @@ local notification_icon = function(n)
 end
 
 local make_notification = function(n)
+	print(n:get_urgency())
 	local layout = Widget.Box({
+		children = {
+			Widget.Box({
 				vertical = true,
 				css = 'min-width: 200px; min-height: 50px;',
 				children = {
@@ -35,28 +38,27 @@ local make_notification = function(n)
 										class_name = 'title',
 										label = n.summary,
 										xalign = 0,
-								max_width_chars = 32,
+										justify = 0,
-								justify = 0
+										ellipsize = pango.EllipsizeMode.END,
 									}),
 									Widget.Label({
 										class_name = 'body',
 										label = n.body,
 										xalign = 0,
 										justify = 0,
-								max_width_chars = 32,
 										wrap = true,
 										wrap_mode = pango.WrapMode.WORD_CHAR,
 										use_markup = true
 									})
 								}
-					})
+							}),
 						}
 					}),
 					Widget.ProgressBar({
 						class_name = 'timeout-bar',
 						hexpand = true,
 						valign = 2,
-				fraction = bind(Variable(1):poll(((n.expire_timeout > 0 and n.expire_timeout or popup_timeout_seconds) * 1000 + 255) // 100, function(prev)
+						fraction = bind(Variable(1):poll(((n.expire_timeout > 0 and n.expire_timeout or popup_timeout_seconds) * 1000 + 250) // 100, function(prev)
 							if prev > .01 then
 								return prev - .01
 							end
@@ -64,6 +66,11 @@ local make_notification = function(n)
 						end)),
 					})
 				}
+			}),
+			Widget.Box({
+				class_name = 'urgency-indicator ' .. n.urgency
+			})
+		}
 	})
 
 	return Widget.Revealer({
@@ -71,7 +78,7 @@ local make_notification = function(n)
 		transition_duration = 250,
 		class_name = 'notifications',
 		child = Widget.Revealer({
-			transition_type = 'SLIDE_LEFT',
+			transition_type = 'SLIDE_DOWN',
 			transition_duration = 250,
 			child = layout,
 			setup = function(self)

style/widgets/notifications.scss

@@ -1,9 +1,8 @@
 .notifications {
   > * {
     > box {
-      margin: 10px 20px;
+      margin: 10px 15px;
       border: 1px solid $fg;
-      border-right: none;
       background: $bg;
 
       .title {
@@ -27,6 +26,18 @@
           background-color: $hl-alt-1;
         }
       }
+
+      .urgency-indicator {
+        min-width: 25px;
+
+        &.NORMAL, &.LOW {
+          background: $hl-alt-2;
+        }
+
+        &.CRITICAL {
+          background: $hl;
+        }
+      }
     }
   }
 }