make toasts pretty

wgui/doc/widgets.md

@@ -104,6 +104,10 @@ _Translated by key_
 
 _Text size in pixel units_
 
+`wrap`: "1" | "0" (default: "0")
+
+_Enable text wrapping?_
+
 `color`: #FFAABB | #FFAABBCC
 
 `align`: "left" | "right" | "center" | "justified" | "end"

wgui/src/parser/widget_label.rs

@@ -2,7 +2,8 @@ use crate::{
 	i18n::Translation,
 	layout::WidgetID,
 	parser::{
-		AttribPair, ParserContext, ParserFile, parse_children, parse_widget_universal,
+		AttribPair, ParserContext, ParserFile, parse_check_i32, parse_children, parse_i32, parse_widget_universal,
+		print_invalid_attrib,
 		style::{parse_style, parse_text_style},
 	},
 	widget::label::{WidgetLabel, WidgetLabelParams},
@@ -23,6 +24,13 @@ pub fn parse_widget_label<'a>(
 	for pair in attribs {
 		let (key, value) = (pair.attrib.as_ref(), pair.value.as_ref());
 		match key {
+			"wrap" => {
+				if let Some(num) = parse_i32(value) {
+					params.style.wrap = num == 1;
+				} else {
+					print_invalid_attrib(key, value);
+				}
+			}
 			"text" => {
 				if !value.is_empty() {
 					params.content = Translation::from_raw_text(value);

wlx-overlay-s/src/assets/gui/toast.xml

@@ -1,12 +1,25 @@
 <layout>
   <elements>
     <div interactable="0">
-      <rectangle max_width="500" max_height="400" padding="4" box_sizing="content_box" flex_wrap="wrap" flex_direction="row" gap="4" color="#000000c0" border_color="~color_accent" border="2" round="8" justify_content="space_between">
-        <div width="100%" padding="4">
-          <label text="toast title" id="toast_title" weight="bold" />
+      <rectangle
+        max_width="500"
+        padding="16"
+        flex_direction="column"
+        gap="8"
+        color="#000000c0" border_color="~color_accent" border="2" round="8">
+
+        <!-- Toast title -->
+        <div flex_direction="row" align_items="center" gap="8">
+          <sprite src="icons/bell.svg" min_width="32" min_height="32" max_width="32" max_height="32" flex_grow="1" />
+          <label wrap="1" id="toast_title" weight="bold" size="25" padding_left="16" padding_right="16" />
         </div>
-        <div width="100%" height="100%" padding="4" flex_wrap="wrap">
-          <label text="toast body goes here" id="toast_body" wrap="1" />
+
+        <!-- A simple separator -->
+        <rectangle width="100%" height="2" color="~color_accent" />
+
+        <div>
+          <!-- Toast message -->
+          <label id="toast_body" wrap="1" size="20" padding_left="16" padding_right="16" />
         </div>
       </rectangle>
     </div>

wlx-overlay-s/src/assets/icons/bell.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><!-- Icon from Material Symbols by Google - https://github.com/google/material-design-icons/blob/master/LICENSE -->
+  <path fill="white" d="M12 18.5q.625 0 1.063-.437T13.5 17h-3q0 .625.438 1.063T12 18.5M7 16h10v-2h-1v-2.6q0-1.525-.788-2.787T13 7V5.5h-2V7q-1.425.35-2.212 1.613T8 11.4V14H7zm5 6q-2.075 0-3.9-.788t-3.175-2.137T2.788 15.9T2 12t.788-3.9t2.137-3.175T8.1 2.788T12 2t3.9.788t3.175 2.137T21.213 8.1T22 12t-.788 3.9t-2.137 3.175t-3.175 2.138T12 22" />
+</svg>