From aed9250b57fa0fa132639f58dc67d3608c823113 Mon Sep 17 00:00:00 2001
From: Kevin Boos <1139460+kevinaboos@users.noreply.github.com>
Date: Thu, 8 Feb 2024 17:49:45 -0800
Subject: [PATCH] Cleanup message input bar, fix keyboard view, better send
icon (#42)
---
resources/icon_send.svg | 8 +++
src/home/room_screen.rs | 142 +++++++++++++++++++++-------------------
2 files changed, 81 insertions(+), 69 deletions(-)
create mode 100644 resources/icon_send.svg
diff --git a/resources/icon_send.svg b/resources/icon_send.svg
new file mode 100644
index 00000000..06a0487a
--- /dev/null
+++ b/resources/icon_send.svg
@@ -0,0 +1,8 @@
+
\ No newline at end of file
diff --git a/src/home/room_screen.rs b/src/home/room_screen.rs
index 96b257db..794c577e 100644
--- a/src/home/room_screen.rs
+++ b/src/home/room_screen.rs
@@ -54,6 +54,7 @@ live_design! {
ICO_FAV = dep("crate://self/resources/icon_favorite.svg")
ICO_COMMENT = dep("crate://self/resources/icon_comment.svg")
ICO_REPLY = dep("crate://self/resources/icon_reply.svg")
+ ICO_SEND = dep("crate://self/resources/icon_send.svg")
ICO_LIKES = dep("crate://self/resources/icon_likes.svg")
ICO_USER = dep("crate://self/resources/icon_user.svg")
ICO_ADD = dep("crate://self/resources/icon_add.svg")
@@ -131,7 +132,7 @@ live_design! {
}
}
padding: 9.0
- text: "1"
+ text: ""
}
LineH = {
@@ -464,89 +465,92 @@ live_design! {
IMG_KEYBOARD_ICON = dep("crate://self/resources/img/keyboard_icon.png")
RoomScreen = {{RoomScreen}} {
- width: Fill, height: Fill
- flow: Down
+ width: Fill, height: Fill,
show_bg: true,
draw_bg: {
color: #fff
}
- // First, display the timeline of all messages/events.
- timeline = {}
-
- // Below that, display a view that holds the message input bar.
- {
- width: Fill, height: Fit
- flow: Right, align: {y: 0.5}, padding: 10.
- show_bg: true,
- draw_bg: {
- color: #fff
- }
+ {
+ width: Fill, height: Fill,
+ flow: Down,
- message_input = {
- width: Fill, height: Fit, margin: 0
- align: {y: 0.5}
- empty_message: "Write a message..."
+ // First, display the timeline of all messages/events.
+ timeline = {}
+
+ // Below that, display a view that holds the message input bar.
+ {
+ width: Fill, height: Fit
+ flow: Right, align: {y: 1.0}, padding: 10.
+ show_bg: true,
draw_bg: {
color: #fff
}
- draw_text: {
- text_style:{},
-
- fn get_color(self) -> vec4 {
- return #ccc
+
+ message_input = {
+ width: Fill, height: Fit, margin: 0
+ align: {y: 0.5}
+ empty_message: "Write a message..."
+ draw_bg: {
+ color: #fff
+ }
+ draw_text: {
+ text_style:{},
+
+ fn get_color(self) -> vec4 {
+ return #ccc
+ }
}
- }
- // TODO find a way to override colors
- draw_cursor: {
- instance focus: 0.0
- uniform border_radius: 0.5
- fn pixel(self) -> vec4 {
- let sdf = Sdf2d::viewport(self.pos * self.rect_size);
- sdf.box(
- 0.,
- 0.,
- self.rect_size.x,
- self.rect_size.y,
- self.border_radius
- )
- sdf.fill(mix(#0f0, #0b0, self.focus));
- return sdf.result
+ // TODO find a way to override colors
+ draw_cursor: {
+ instance focus: 0.0
+ uniform border_radius: 0.5
+ fn pixel(self) -> vec4 {
+ let sdf = Sdf2d::viewport(self.pos * self.rect_size);
+ sdf.box(
+ 0.,
+ 0.,
+ self.rect_size.x,
+ self.rect_size.y,
+ self.border_radius
+ )
+ sdf.fill(mix(#0f0, #0b0, self.focus));
+ return sdf.result
+ }
}
- }
- // TODO find a way to override colors
- draw_select: {
- instance hover: 0.0
- instance focus: 0.0
- uniform border_radius: 2.0
- fn pixel(self) -> vec4 {
- let sdf = Sdf2d::viewport(self.pos * self.rect_size);
- sdf.box(
- 0.,
- 0.,
- self.rect_size.x,
- self.rect_size.y,
- self.border_radius
- )
- sdf.fill(mix(#0e0, #0d0, self.focus)); // Pad color
- return sdf.result
+ // TODO find a way to override colors
+ draw_select: {
+ instance hover: 0.0
+ instance focus: 0.0
+ uniform border_radius: 2.0
+ fn pixel(self) -> vec4 {
+ let sdf = Sdf2d::viewport(self.pos * self.rect_size);
+ sdf.box(
+ 0.,
+ 0.,
+ self.rect_size.x,
+ self.rect_size.y,
+ self.border_radius
+ )
+ sdf.fill(mix(#0e0, #0d0, self.focus)); // Pad color
+ return sdf.result
+ }
}
}
- }
- {
- source: (IMG_SMILEY_FACE_BW),
- width: 36., height: 36.
- }
- {
- source: (IMG_PLUS),
- width: 36., height: 36.
- }
- send_message_button = {
- draw_icon: {svg_file: (ICO_REPLY)},
- icon_walk: {width: 15.0, height: Fit},
- text: "Send",
+ // {
+ // source: (IMG_SMILEY_FACE_BW),
+ // width: 36., height: 36.
+ // }
+ // {
+ // source: (IMG_PLUS),
+ // width: 36., height: 36.
+ // }
+ send_message_button = {
+ draw_icon: {svg_file: (ICO_SEND)},
+ icon_walk: {width: 15.0, height: Fit},
+ }
}
}
}