UI improvements: redesign message input bar, reply preview, and more

src/home/editing_pane.rs

@@ -29,32 +29,30 @@ live_design! {
 
     EditingContent = <View> {
         width: Fill,
-        height: Fit,
+        height: Fit { max: Rel(0.625) }
         align: {x: 0.5, y: 1.0}, // centered horizontally, bottom-aligned
         padding: { left: 20, right: 20, top: 10, bottom: 10 }
+        margin: {top: 2}
         spacing: 10,
         flow: Down,
 
-        show_bg: true,
-        draw_bg: {
-            color: (COLOR_PRIMARY)
-        }
+        show_bg: false // don't cover up the RoomInputBar
 
         <View> {
-            width: Fill
-            height: Fit
+            width: Fill, height: Fit
             flow: Right
             align: {y: 0.5}
             padding: {left: 5, right: 5}
 
             <Label> {
                 width: Fill,
+                flow: Right, // do not wrap
+                margin: {top: 3}
                 draw_text: {
                     text_style: <USERNAME_TEXT_STYLE> {},
                     color: #222,
-                    wrap: Ellipsis,
                 }
-                text: "Editing message:"
+                text: "Editing:"
             }
 
             cancel_button = <RobrixIconButton> {
@@ -81,7 +79,7 @@ live_design! {
                 height: Fit,
                 padding: 13,
                 spacing: 0,
-                margin: {left: 5, right: 5},
+                margin: {left: 5},
 
                 draw_bg: {
                     border_color: (COLOR_FG_ACCEPT_GREEN),
@@ -99,25 +97,17 @@ live_design! {
         <LineH> { }
 
         edit_text_input = <MentionableTextInput> {
-            width: Fill, height: Fit,
-            margin: { bottom: 5 }
-            padding: { top: 3 }
-            align: {y: 0.5}
-            persistent = {
-                center = {
-                    text_input = {
-                        empty_text: "Enter edited message..."
-                    }
-                }
-            }
+            width: Fill
+            height: Fit { max: Rel(0.625) }
+            margin: { bottom: 5, top: 5 }
         }
     }
 
 
     pub EditingPane = {{EditingPane}} {
         visible: false,
         width: Fill,
-        height: Fit,
+        height: Fit { max: Rel(0.625) }
         align: {x: 0.5, y: 1.0}
         // TODO: FIXME: this is a hack to make the editing pane
         //              able to slide out of the bottom of the screen.

src/home/location_preview.rs

@@ -22,17 +22,21 @@ live_design! {
     use crate::shared::avatar::*;
     use crate::shared::icon_button::*;
 
-    pub LocationPreview = {{LocationPreview}} {
+    pub LocationPreview = {{LocationPreview}}<RoundedView> {
         visible: false
         width: Fill
         height: Fit
         flow: Down
-        padding: {left: 12.0, top: 12.0, bottom: 12.0, right: 10.0}
-        spacing: 15
+        // to align this view just below the RoomInputBar's curved border
+        margin: {top: 1}
+        padding: {left: 12, top: 10, bottom: 10, right: 10}
+        spacing: 8
 
         show_bg: true,
         draw_bg: {
-            color: #xF0F5FF,
+            color: (COLOR_LOCATION_PREVIEW_BG),
+            border_radius: 5.0,
+            border_size: 2.0
         }
 
         <Label> {
@@ -50,24 +54,24 @@ live_design! {
             width: Fill,
             height: Fit,
             align: {x: 0.0, y: 0.5},
-            padding: {left: 5.0}
+            padding: {left: 10, bottom: 7}
             draw_text: {
                 wrap: Word,
                 color: (MESSAGE_TEXT_COLOR),
                 text_style: <MESSAGE_TEXT_STYLE>{},
             }
-            text: "Fetching current location..."
+            text: "➡ Fetching current location..."
         }
 
         <View> {
             width: Fill, height: Fit
-            flow: Right,
+            flow: RightWrap,
             align: {x: 0.0, y: 0.5}
-            spacing: 15
 
             cancel_location_button = <RobrixIconButton> {
                 align: {x: 0.5, y: 0.5}
                 padding: 15,
+                margin: {right: 15}
                 draw_icon: {
                     svg_file: (ICON_FORBIDDEN)
                     color: (COLOR_FG_DANGER_RED),
@@ -158,10 +162,10 @@ impl Widget for LocationPreview {
     fn draw_walk(&mut self, cx: &mut Cx2d, scope: &mut Scope, walk: Walk) -> DrawStep {
         let text = match self.coords {
             Some(Ok(c)) => {
-                format!("Current location: {:.6}, {:.6}", c.latitude, c.longitude)
+                format!("➡ Current location: {:.6}, {:.6}", c.latitude, c.longitude)
             }
-            Some(Err(e)) => format!("Error getting location: {e:?}"),
-            None => String::from("Current location is not yet available."),
+            Some(Err(e)) => format!("➡ Error getting location: {e:?}"),
+            None => String::from("➡ Current location is not yet available."),
         };
         self.label(id!(location_label)).set_text(cx, &text);
         self.view.draw_walk(cx, scope, walk)

src/home/room_screen.rs

@@ -500,12 +500,16 @@ live_design! {
                 flow: Down,
 
                 // First, display the timeline of all messages/events.
-                timeline = <Timeline> {}
+                timeline = <Timeline> {
+                    // margin: {bottom: 10}
+                }
 
                 // Below that, display a typing notice when other users in the room are typing.
                 typing_notice = <TypingNotice> { }
 
-                room_input_bar = <RoomInputBar> { }
+                room_input_bar = <RoomInputBar> {
+                    // margin: {top: 20}
+                }
             }
 
             // Note: here, we're within a View that has an Overlay flow,

src/home/tombstone_footer.rs

@@ -39,10 +39,7 @@ live_design! {
         padding: 20,
         spacing: 8
 
-        show_bg: true
-        draw_bg: {
-            color: (COLOR_SECONDARY)
-        }
+        show_bg: false // don't cover up the RoomInputBar
 
         replacement_reason = <Label> {
             width: Fill, height: Fit,

src/room/reply_preview.rs

@@ -20,7 +20,7 @@ live_design! {
         width: Fill
         height: Fit
         flow: Down
-        padding: {left: 10.0, bottom: 5.0, top: 5.0}
+        padding: {left: 16.0, bottom: 5.0, top: 2.0, right: 11.0}
         cursor: Hand,
 
         <View> {
@@ -41,7 +41,7 @@ live_design! {
             reply_preview_username = <Label> {
                 width: Fill,
                 flow: Right, // do not wrap
-                margin: { left: 5.0 }
+                margin: { left: 5.0, top: 2 }
                 draw_text: {
                     text_style: <USERNAME_TEXT_STYLE> { font_size: 10 },
                     color: (USERNAME_TEXT_COLOR)
@@ -77,7 +77,7 @@ live_design! {
         width: Fill
         height: Fit
         flow: Down
-        padding: {left: 20, right: 20}
+        padding: { left: 9, right: 9 }
 
         // Displays a "Replying to" label and a cancel button
         // above the preview of the message being replied to.
@@ -86,11 +86,14 @@ live_design! {
             height: Fit
             flow: Right
             align: {y: 0.5}
-            padding: {left: 10, right: 5, top: 10, bottom: 10}
+            padding: {left: 14, right: 6, top: 10, bottom: 0}
 
             <Label> {
                 width: Fill,
                 flow: Right, // do not wrap
+                // Vertically align the text with the X icon in the cancel_reply_button
+                padding: {top: 5}
+
                 draw_text: {
                     text_style: <USERNAME_TEXT_STYLE> {},
                     color: #222,
@@ -104,7 +107,7 @@ live_design! {
                 height: Fit,
                 padding: 13,
                 spacing: 0,
-                margin: {left: 5, right: 5},
+                margin: {left: 5, right: 0},
 
                 draw_bg: {
                     border_color: (COLOR_FG_DANGER_RED),
@@ -119,11 +122,11 @@ live_design! {
             }
         }
 
+        reply_preview_content = <ReplyPreviewContent> { }
+
         <LineH> {
-            margin: {bottom: 5.0}
+            margin: {top: 4.0, left: 5, right: 5} //, bottom: 10}
         }
-
-        reply_preview_content = <ReplyPreviewContent> { }
     }
 
     // A small inline preview of a message that was replied to by another message

src/room/room_input_bar.rs

@@ -40,11 +40,28 @@ live_design! {
     ICO_LOCATION_PERSON = dep("crate://self/resources/icons/location-person.svg")
 
 
-    pub RoomInputBar = {{RoomInputBar}} {
+    pub RoomInputBar = {{RoomInputBar}}<RoundedView> {
         width: Fill,
         height: Fit { max: Rel(0.625) }
         flow: Down,
 
+        // These margins are a hack to make the borders of the RoomInputBar
+        // line up with the boundaries of its parent widgets.
+        // This only works if the border_color is the same as its parents,
+        // which is currently `COLOR_SECONDARY`.
+        margin: {left: -4, right: -4, bottom: -4 }
+
+        show_bg: true,
+        draw_bg: {
+            color: (COLOR_PRIMARY)
+            border_radius: 5.0,
+            border_color: (COLOR_SECONDARY),
+            border_size: 2.0
+            // uniform shadow_color: #0006
+            // shadow_radius: 0.0,
+            // shadow_offset: vec2(0.0,0.0)
+        }
+
         // The top-most element is a preview of the message that the user is replying to, if any.
         replying_preview = <ReplyingPreview> { }
 
@@ -70,12 +87,17 @@ live_design! {
                 // even when the mentionable_text_input box is very tall.
                 align: {y: 1.0},
                 padding: 6,
-                show_bg: true
-                draw_bg: {color: (COLOR_PRIMARY)}
 
                 location_button = <RobrixIconButton> {
+                    margin: {left: 4}
                     spacing: 0,
-                    draw_icon: {svg_file: (ICO_LOCATION_PERSON)},
+                    draw_icon: {
+                        svg_file: (ICO_LOCATION_PERSON)
+                        color: (COLOR_ACTIVE_PRIMARY_DARKER)
+                    },
+                    draw_bg: {
+                        color: (COLOR_LOCATION_PREVIEW_BG),
+                    }
                     icon_walk: {width: Fit, height: 23, margin: {bottom: -1}}
                     text: "",
                 }
@@ -89,7 +111,7 @@ live_design! {
                 mentionable_text_input = <MentionableTextInput> {
                     width: Fill,
                     height: Fit { max: Rel(0.625) }
-                    margin: { bottom: 12 },
+                    margin: { top: 5, bottom: 12, left: 1, right: 1 },
 
                     persistent = {
                         center = {
@@ -104,6 +126,7 @@ live_design! {
                     // Disabled by default; enabled when text is inputted
                     enabled: false,
                     spacing: 0,
+                    margin: {right: 4}
                     draw_icon: {
                         svg_file: (ICON_SEND),
                         color: (COLOR_FG_DISABLED),

src/shared/styles.rs

@@ -101,11 +101,13 @@ live_design! {
 
     pub COLOR_PRIMARY = #ffffff
     pub COLOR_PRIMARY_DARKER = #fefefe
-    pub COLOR_SECONDARY = #eef2f4
+    pub COLOR_SECONDARY = #EFEFEF
 
     pub COLOR_ACTIVE_PRIMARY = #0f88fe
     pub COLOR_ACTIVE_PRIMARY_DARKER = #106fcc
 
+    pub COLOR_LOCATION_PREVIEW_BG = #F0F5FF
+
     pub COLOR_AVATAR_BG = #52b2ac
     pub COLOR_AVATAR_BG_IDLE = #d8d8d8