wallet: add spacing between messages

bin/darkwallet/src/app/node.rs

@@ -244,6 +244,9 @@ pub fn create_chatview(name: &str) -> SceneNode {
     let prop = Property::new("line_height", PropertyType::Float32, PropertySubType::Pixel);
     node.add_property(prop).unwrap();
 
+    let prop = Property::new("message_spacing", PropertyType::Float32, PropertySubType::Pixel);
+    node.add_property(prop).unwrap();
+
     let mut prop = Property::new("timestamp_color", PropertyType::Float32, PropertySubType::Color);
     prop.set_array_len(4);
     prop.set_range_f32(0., 1.);

bin/darkwallet/src/app/schema.rs

@@ -104,6 +104,21 @@ const TIMESTAMP_WIDTH: f32 = 135.;
 #[cfg(target_os = "linux")]
 const TIMESTAMP_WIDTH: f32 = 60.;
 
+#[cfg(target_os = "android")]
+const MESSAGE_SPACING: f32 = 15.;
+#[cfg(target_os = "linux")]
+const MESSAGE_SPACING: f32 = 8.;
+
+#[cfg(target_os = "android")]
+const LINE_HEIGHT: f32 = 58.;
+#[cfg(target_os = "linux")]
+const LINE_HEIGHT: f32 = 30.;
+
+#[cfg(target_os = "android")]
+const CHATVIEW_BASELINE: f32 = 36.;
+#[cfg(target_os = "linux")]
+const CHATVIEW_BASELINE: f32 = 30.;
+
 pub(super) async fn make_test(app: &App, window: SceneNodePtr) {
     let window_scale = PropertyFloat32::wrap(&window, Role::Internal, "scale", 0).unwrap();
 
@@ -586,8 +601,9 @@ pub(super) async fn make(app: &App, window: SceneNodePtr) {
     node.set_property_f32(Role::App, "font_size", FONTSIZE).unwrap();
     node.set_property_f32(Role::App, "timestamp_font_size", TIMESTAMP_FONTSIZE).unwrap();
     node.set_property_f32(Role::App, "timestamp_width", TIMESTAMP_WIDTH).unwrap();
-    node.set_property_f32(Role::App, "line_height", FONTSIZE * 1.6).unwrap();
-    node.set_property_f32(Role::App, "baseline", FONTSIZE * 1.2).unwrap();
+    node.set_property_f32(Role::App, "line_height", LINE_HEIGHT).unwrap();
+    node.set_property_f32(Role::App, "message_spacing", MESSAGE_SPACING).unwrap();
+    node.set_property_f32(Role::App, "baseline", CHATVIEW_BASELINE).unwrap();
     node.set_property_u32(Role::App, "z_index", 1).unwrap();
     //node.set_property_bool(Role::App, "debug", true).unwrap();
 

bin/darkwallet/src/ui/chatview/mod.rs

@@ -203,6 +203,8 @@ impl ChatView {
             PropertyFloat32::wrap(node_ref, Role::Internal, "timestamp_width", 0).unwrap();
         let line_height =
             PropertyFloat32::wrap(node_ref, Role::Internal, "line_height", 0).unwrap();
+        let message_spacing =
+            PropertyFloat32::wrap(node_ref, Role::Internal, "message_spacing", 0).unwrap();
         let baseline = PropertyFloat32::wrap(node_ref, Role::Internal, "baseline", 0).unwrap();
         let timestamp_color =
             PropertyColor::wrap(node_ref, Role::Internal, "timestamp_color").unwrap();
@@ -269,10 +271,13 @@ impl ChatView {
             async fn redraw(self_: Arc<ChatView>) {
                 self_.redraw_all().await;
             }
+            on_modify.when_change(baseline.prop(), redraw);
             on_modify.when_change(font_size.prop(), redraw);
             on_modify.when_change(timestamp_font_size.prop(), redraw);
             on_modify.when_change(timestamp_color.prop(), redraw);
             on_modify.when_change(timestamp_width.prop(), redraw);
+            on_modify.when_change(line_height.prop(), redraw);
+            on_modify.when_change(message_spacing.prop(), redraw);
             on_modify.when_change(text_color.prop(), redraw);
             on_modify.when_change(nick_colors.clone(), redraw);
             on_modify.when_change(hi_bg_color.prop(), redraw);
@@ -294,6 +299,7 @@ impl ChatView {
                     timestamp_font_size,
                     timestamp_width,
                     line_height,
+                    message_spacing,
                     baseline,
                     timestamp_color,
                     text_color,

bin/darkwallet/src/ui/chatview/page.rs

@@ -156,7 +156,7 @@ impl PrivMessage {
             );
         }
 
-        self.render_timestamp(&mut mesh, baseline, timestamp_color);
+        self.render_timestamp(&mut mesh, baseline, line_height, timestamp_color);
         let off_x = timestamp_width;
 
         let nick_color = select_nick_color(&self.nick, nick_colors);
@@ -201,7 +201,9 @@ impl PrivMessage {
         mesh
     }
 
-    fn render_timestamp(&self, mesh: &mut MeshBuilder, baseline: f32, timestamp_color: Color) {
+    fn render_timestamp(&self, mesh: &mut MeshBuilder, baseline: f32, line_height: f32, timestamp_color: Color) {
+        let off_y = self.wrapped_lines.len() as f32 * line_height;
+
         let glyph_pos_iter = GlyphPositionIter::new(
             self.timestamp_font_size,
             self.window_scale,
@@ -210,6 +212,7 @@ impl PrivMessage {
         );
         for (mut glyph_rect, glyph) in glyph_pos_iter.zip(self.time_glyphs.iter()) {
             let uv_rect = self.atlas.fetch_uv(glyph.glyph_id).expect("missing glyph UV rect");
+            glyph_rect.y -= off_y;
 
             mesh.draw_box(&glyph_rect, timestamp_color, uv_rect);
         }
@@ -585,6 +588,7 @@ pub struct MessageBuffer {
     timestamp_font_size: PropertyFloat32,
     timestamp_width: PropertyFloat32,
     line_height: PropertyFloat32,
+    msg_spacing: PropertyFloat32,
     baseline: PropertyFloat32,
     timestamp_color: PropertyColor,
     text_color: PropertyColor,
@@ -607,6 +611,7 @@ impl MessageBuffer {
         timestamp_font_size: PropertyFloat32,
         timestamp_width: PropertyFloat32,
         line_height: PropertyFloat32,
+        msg_spacing: PropertyFloat32,
         baseline: PropertyFloat32,
         timestamp_color: PropertyColor,
         text_color: PropertyColor,
@@ -628,6 +633,7 @@ impl MessageBuffer {
             timestamp_font_size,
             timestamp_width,
             line_height,
+            msg_spacing,
             baseline,
             timestamp_color,
             text_color,
@@ -701,12 +707,20 @@ impl MessageBuffer {
 
     pub async fn calc_total_height(&mut self) -> f32 {
         let line_height = self.line_height.get();
+        let msg_spacing = self.msg_spacing.get();
         let mut height = 0.;
 
         let msgs = self.msgs_with_date();
         let mut msgs = pin!(msgs);
 
+        let mut is_first = true;
+
         while let Some(msg) = msgs.next().await {
+            if is_first {
+                is_first = false;
+                height += msg_spacing;
+            }
+
             height += msg.height(line_height);
         }
 
@@ -816,6 +830,7 @@ impl MessageBuffer {
     /// Generate caches and return meshes
     pub async fn gen_meshes(&mut self, rect: &Rectangle, scroll: f32) -> Vec<(f32, GfxDrawMesh)> {
         let line_height = self.line_height.get();
+        let msg_spacing = self.msg_spacing.get();
         let baseline = self.baseline.get();
         let timestamp_width = self.timestamp_width.get();
         let debug_render = self.debug.get();
@@ -859,6 +874,8 @@ impl MessageBuffer {
             );
 
             meshes.push((current_pos, mesh));
+
+            current_pos += msg_spacing;
             current_pos += mesh_height;
         }
 
@@ -952,6 +969,7 @@ impl MessageBuffer {
 
     pub async fn select_line(&mut self, y: f32) {
         let line_height = self.line_height.get();
+        let msg_spacing = self.msg_spacing.get();
 
         let msgs = self.msgs_with_date();
         let mut msgs = pin!(msgs);
@@ -973,6 +991,7 @@ impl MessageBuffer {
                 break
             }
 
+            current_pos += msg_spacing;
             current_pos += mesh_height;
         }
     }