Make SAO UI notification panel prettier

scripts/sao-ui/src/notifications.rs

@@ -6,15 +6,37 @@ use api::*;
 use canary_script::*;
 use canary_textwrap::{Content, Layout, TextCache};
 
+use dialog::{DialogBodyStyle, DialogHeaderStyle};
 use shell::Offset;
 use text::{Label, LabelText};
 
+pub struct NotificationStyle {
+    pub header: DialogHeaderStyle,
+    pub body: DialogBodyStyle,
+    pub rounding: f32,
+}
+
+impl Default for NotificationStyle {
+    fn default() -> Self {
+        Self {
+            header: DialogHeaderStyle {
+                height: 12.0,
+                ..Default::default()
+            },
+            body: Default::default(),
+            rounding: THEME.metrics.surface_rounding,
+        }
+    }
+}
+
 pub struct NotificationPanel {
     panel: Panel,
-    summary: Offset<Label>,
+    style: NotificationStyle,
+    summary: Label,
     text_cache: TextCache,
     body: Content,
     body_layout: Layout,
+    header_rect: Rect,
     body_rect: Rect,
 }
 
@@ -23,7 +45,21 @@ impl PanelImpl for NotificationPanel {
 
     fn draw(&mut self) {
         let ctx = DrawContext::new(self.panel);
-        ctx.draw_rounded_rect(self.body_rect, 5.0, THEME.palette.base);
+
+        ctx.draw_partially_rounded_rect(
+            CornerFlags::TOP,
+            self.header_rect,
+            self.style.rounding,
+            self.style.header.color,
+        );
+
+        ctx.draw_partially_rounded_rect(
+            CornerFlags::BOTTOM,
+            self.body_rect,
+            self.style.rounding,
+            self.style.body.color,
+        );
+
         self.summary.draw(&ctx);
 
         let ctx = ctx.with_offset(Vec2::new(5.0, 20.0));
@@ -32,7 +68,15 @@ impl PanelImpl for NotificationPanel {
     }
 
     fn on_resize(&mut self, new_size: Vec2) {
-        self.body_rect = Rect::from_xy_size(Vec2::ZERO, new_size);
+        let style = &self.style;
+        let width = new_size.x;
+        let body_height = new_size.y - style.header.height;
+        let body_height = body_height.max(0.0);
+        let header_size = Vec2::new(width, style.header.height);
+        let body_size = Vec2::new(width, body_height);
+
+        self.header_rect = Rect::from_xy_size(Vec2::ZERO, header_size);
+        self.body_rect = Rect::from_xy_size(self.header_rect.bl(), body_size);
 
         let width = (new_size.x - 10.0) / 5.0;
         self.body_layout = self.body.layout(&mut self.text_cache, width);
@@ -48,19 +92,20 @@ impl NotificationPanel {
         let msg = msg.to_vec();
         let msg: canary_notifications::Contents = serde_json::from_slice(&msg).unwrap();
 
-        let font = Font::new(crate::DISPLAY_FONT);
+        let style = NotificationStyle::default();
+        let font = style.header.text_font;
         let text = msg.summary;
         let text = LabelText { font, text };
+        let scale = style.header.height * style.header.text_scale_factor;
         let summary = Label::new(
             text,
             text::HorizontalAlignment::Left,
-            10.0,
-            THEME.palette.text,
-            0.0,
-            0.0,
-            0.0,
+            scale,
+            style.header.text_color,
+            5.0,
+            5.0,
+            style.header.height * (1.0 - style.header.text_baseline),
         );
-        let summary = Offset::new(summary, Vec2::new(5.0, 12.0));
 
         let font = Font::new(crate::CONTENT_FONT);
         let text = msg.body.unwrap_or(String::new());
@@ -68,14 +113,17 @@ impl NotificationPanel {
         let body = Content::from_plain(&mut text_cache, font, &text);
         let body_layout = body.layout(&text_cache, 0.0);
 
-        let body_rect = Rect::from_xy_size(Vec2::ZERO, Vec2::ZERO);
+        let header_rect = Default::default();
+        let body_rect = Default::default();
 
         Box::new(Self {
+            style,
             panel,
             summary,
             text_cache,
             body,
             body_layout,
+            header_rect,
             body_rect,
         })
     }