Add channel name header to chat panel

Max Brunsfeld created 4 years ago

Change summary

zed/assets/themes/_base.toml |  4 +++-
zed/assets/themes/dark.toml  |  2 +-
zed/src/channel.rs           |  4 ++++
zed/src/chat_panel.rs        | 23 +++++++++++++++++++++++
zed/src/theme.rs             |  2 ++
5 files changed, 33 insertions(+), 2 deletions(-)

Detailed changes

zed/assets/themes/_base.toml

@@ -24,9 +24,11 @@ color = "$text.0.color"
 
 [chat_panel]
 padding = { top = 10.0, bottom = 10.0, left = 10.0, right = 10.0 }
+channel_name = { extends = "$text.0", weight = "bold" }
+channel_name_hash = { text = "$text.2", padding.right = 5.0 }
 
 [chat_panel.message]
-body = "$text.0"
+body = "$text.1"
 sender.margin.right = 10.0
 sender.text = { extends = "$text.0", weight = "bold" }
 timestamp.text = "$text.2"

zed/assets/themes/dark.toml

@@ -6,7 +6,7 @@ extends = "_base"
 2 = "#131415"
 
 [text]
-base = { family = "Helvetica", size = 12.0 }
+base = { family = "Helvetica", size = 14.0 }
 0 = { extends = "$text.base", color = "#ffffff" }
 1 = { extends = "$text.base", color = "#b3b3b3" }
 2 = { extends = "$text.base", color = "#7b7d80" }

zed/src/channel.rs

@@ -237,6 +237,10 @@ impl Channel {
         }
     }
 
+    pub fn name(&self) -> &str {
+        &self.details.name
+    }
+
     pub fn send_message(&mut self, body: String, cx: &mut ModelContext<Self>) -> Result<()> {
         let channel_id = self.details.id;
         let current_user_id = self.current_user_id()?;

zed/src/chat_panel.rs

@@ -99,6 +99,28 @@ impl ChatPanel {
         cx.notify();
     }
 
+    fn render_channel_name(&self, cx: &RenderContext<Self>) -> ElementBox {
+        let settings = self.settings.borrow();
+        let theme = &settings.theme.chat_panel;
+        if let Some((channel, _)) = self.active_channel.as_ref() {
+            let channel = channel.read(cx);
+            Flex::row()
+                .with_child(
+                    Container::new(
+                        Label::new("#".to_string(), theme.channel_name_hash.label.clone()).boxed(),
+                    )
+                    .with_style(&theme.channel_name_hash.container)
+                    .boxed(),
+                )
+                .with_child(
+                    Label::new(channel.name().to_string(), theme.channel_name.clone()).boxed(),
+                )
+                .boxed()
+        } else {
+            Empty::new().boxed()
+        }
+    }
+
     fn render_active_channel_messages(&self, cx: &RenderContext<Self>) -> ElementBox {
         let messages = if let Some((channel, _)) = self.active_channel.as_ref() {
             let channel = channel.read(cx);
@@ -184,6 +206,7 @@ impl View for ChatPanel {
         let theme = &self.settings.borrow().theme;
         Container::new(
             Flex::column()
+                .with_child(self.render_channel_name(cx))
                 .with_child(self.render_active_channel_messages(cx))
                 .with_child(self.render_input_box())
                 .boxed(),

zed/src/theme.rs

@@ -62,6 +62,8 @@ pub struct ChatPanel {
     #[serde(flatten)]
     pub container: ContainerStyle,
     pub message: ChatMessage,
+    pub channel_name: TextStyle,
+    pub channel_name_hash: ContainedLabel,
 }
 
 #[derive(Deserialize)]