Improve styling of chat messages and channel select

Max Brunsfeld and Nathan Sobo created 4 years ago

Co-Authored-By: Nathan Sobo <[e-mail]>

Change summary

zed/assets/themes/_base.toml | 30 ++++++++++++-----------
zed/src/chat_panel.rs        | 48 ++++++++++++++++++++-----------------
zed/src/theme.rs             |  2 +
3 files changed, 44 insertions(+), 36 deletions(-)

Detailed changes

zed/assets/themes/_base.toml

@@ -28,22 +28,23 @@ color = "$text.0.color"
 [chat_panel]
 channel_name = { extends = "$text.0", weight = "bold" }
 channel_name_hash = { text = "$text.2", padding.right = 5 }
+padding = 10
 
 [chat_panel.message]
 body = "$text.1"
-sender = { extends = "$text.0", weight = "bold", margin.right = 10.0 }
+sender = { extends = "$text.0", weight = "bold", margin.right = 10 }
 timestamp = "$text.2"
-padding = { top = 10, bottom = 10, left = 10, right = 10 }
+padding.bottom = 10
 
 [chat_panel.channel_select.item]
-padding = { top = 4, bottom = 4, left = 4, right = 4 }
+padding = 4
 name = "$text.1"
-hash = { extends = "$text.2", margin.right = 5.0 }
+hash = { extends = "$text.2", margin.right = 5 }
 
 [chat_panel.channel_select.hovered_item]
 extends = "$chat_panel.channel_select.item"
 background = "$surface.2"
-corner_radius = 6.0
+corner_radius = 6
 
 [chat_panel.channel_select.active_item]
 extends = "$chat_panel.channel_select.item"
@@ -56,27 +57,28 @@ name = "$text.0"
 [chat_panel.channel_select.header]
 extends = "$chat_panel.channel_select.active_item"
 padding.bottom = 0
+padding.left = 0
 
 [chat_panel.channel_select.menu]
-padding = { top = 4, bottom = 4, left = 4, right = 4 }
-corner_radius = 6.0
-border = { color = "#000000", width = 1.0 }
+padding = 4
+corner_radius = 6
+border = { color = "#000000", width = 1 }
 background = "$surface.0"
 
 [selector]
 background = "$surface.2"
 text = "$text.0"
-padding = { top = 6.0, bottom = 6.0, left = 6.0, right = 6.0 }
-margin.top = 12.0
-corner_radius = 6.0
-shadow = { offset = [0.0, 0.0], blur = 12.0, color = "#00000088" }
+padding = 6
+margin.top = 12
+corner_radius = 6
+shadow = { offset = [0, 0], blur = 12, color = "#00000088" }
 
 [selector.item]
 background = "#424344"
 text = "$text.1"
 highlight_text = { extends = "$text.base", color = "#18a3ff", weight = "bold" }
-border = { color = "#000000", width = 1.0 }
-padding = { top = 6.0, bottom = 6.0, left = 6.0, right = 6.0 }
+border = { color = "#000000", width = 1 }
+padding = 6
 
 [selector.active_item]
 extends = "$selector.item"

zed/src/chat_panel.rs

@@ -172,35 +172,39 @@ impl ChatPanel {
         let now = OffsetDateTime::now_utc();
         let settings = self.settings.borrow();
         let theme = &settings.theme.chat_panel.message;
-        Flex::column()
-            .with_child(
-                Flex::row()
-                    .with_child(
-                        Container::new(
-                            Label::new(
-                                message.sender.github_login.clone(),
-                                theme.sender.text.clone(),
+        Container::new(
+            Flex::column()
+                .with_child(
+                    Flex::row()
+                        .with_child(
+                            Container::new(
+                                Label::new(
+                                    message.sender.github_login.clone(),
+                                    theme.sender.text.clone(),
+                                )
+                                .boxed(),
                             )
+                            .with_style(&theme.sender.container)
                             .boxed(),
                         )
-                        .with_style(&theme.sender.container)
-                        .boxed(),
-                    )
-                    .with_child(
-                        Container::new(
-                            Label::new(
-                                format_timestamp(message.timestamp, now),
-                                theme.timestamp.text.clone(),
+                        .with_child(
+                            Container::new(
+                                Label::new(
+                                    format_timestamp(message.timestamp, now),
+                                    theme.timestamp.text.clone(),
+                                )
+                                .boxed(),
                             )
+                            .with_style(&theme.timestamp.container)
                             .boxed(),
                         )
-                        .with_style(&theme.timestamp.container)
                         .boxed(),
-                    )
-                    .boxed(),
-            )
-            .with_child(Text::new(message.body.clone(), theme.body.clone()).boxed())
-            .boxed()
+                )
+                .with_child(Text::new(message.body.clone(), theme.body.clone()).boxed())
+                .boxed(),
+        )
+        .with_style(&theme.container)
+        .boxed()
     }
 
     fn render_input_box(&self) -> ElementBox {

zed/src/theme.rs

@@ -73,6 +73,8 @@ pub struct ChatPanel {
 
 #[derive(Deserialize)]
 pub struct ChatMessage {
+    #[serde(flatten)]
+    pub container: ContainerStyle,
     pub body: TextStyle,
     pub sender: ContainedText,
     pub timestamp: ContainedText,