Style the chat panel further

Max Brunsfeld created 2 years ago

Change summary

crates/collab_ui/src/chat_panel.rs  | 13 +++++--
crates/gpui/src/views/select.rs     |  6 +++
crates/theme/src/theme.rs           |  1 
styles/src/style_tree/chat_panel.ts | 47 ++++++++++++++++++++----------
4 files changed, 46 insertions(+), 21 deletions(-)

Detailed changes

crates/collab_ui/src/chat_panel.rs

@@ -97,7 +97,7 @@ impl ChatPanel {
             .with_style(move |cx| {
                 let style = &theme::current(cx).chat_panel.channel_select;
                 SelectStyle {
-                    header: style.header.container,
+                    header: Default::default(),
                     menu: style.menu,
                 }
             })
@@ -269,14 +269,17 @@ impl ChatPanel {
                     .contained()
                     .with_style(theme.chat_panel.channel_select.container),
             )
-            .with_child(self.render_active_channel_messages())
+            .with_child(self.render_active_channel_messages(&theme))
             .with_child(self.render_input_box(&theme, cx))
             .into_any()
     }
 
-    fn render_active_channel_messages(&self) -> AnyElement<Self> {
+    fn render_active_channel_messages(&self, theme: &Arc<Theme>) -> AnyElement<Self> {
         let messages = if self.active_chat.is_some() {
-            List::new(self.message_list.clone()).into_any()
+            List::new(self.message_list.clone())
+                .contained()
+                .with_style(theme.chat_panel.list)
+                .into_any()
         } else {
             Empty::new().into_any()
         };
@@ -381,6 +384,8 @@ impl ChatPanel {
                     .with_style(theme.hash.container),
             )
             .with_child(Label::new(channel.name.clone(), theme.name.clone()))
+            .aligned()
+            .left()
             .contained()
             .with_style(theme.container)
             .into_any()

crates/gpui/src/views/select.rs

@@ -1,5 +1,7 @@
 use crate::{
-    elements::*, platform::MouseButton, AppContext, Entity, View, ViewContext, WeakViewHandle,
+    elements::*,
+    platform::{CursorStyle, MouseButton},
+    AppContext, Entity, View, ViewContext, WeakViewHandle,
 };
 
 pub struct Select {
@@ -102,6 +104,7 @@ impl View for Select {
                 .contained()
                 .with_style(style.header)
             })
+            .with_cursor_style(CursorStyle::PointingHand)
             .on_click(MouseButton::Left, move |_, this, cx| {
                 this.toggle(cx);
             }),
@@ -128,6 +131,7 @@ impl View for Select {
                                     cx,
                                 )
                             })
+                            .with_cursor_style(CursorStyle::PointingHand)
                             .on_click(MouseButton::Left, move |_, this, cx| {
                                 this.set_selected_index(ix, cx);
                             })

crates/theme/src/theme.rs

@@ -629,6 +629,7 @@ pub struct IconButton {
 pub struct ChatPanel {
     #[serde(flatten)]
     pub container: ContainerStyle,
+    pub list: ContainerStyle,
     pub channel_select: ChannelSelect,
     pub input_editor: FieldEditor,
     pub message: ChatMessage,

styles/src/style_tree/chat_panel.ts

@@ -13,10 +13,10 @@ export default function chat_panel(): any {
 
     const channel_name = {
         padding: {
-            // top: 4,
+            left: SPACING,
+            right: SPACING,
+            top: 4,
             bottom: 4,
-            // left: 4,
-            right: 4,
         },
         hash: {
             ...text(layer, "sans", "base"),
@@ -26,23 +26,33 @@ export default function chat_panel(): any {
 
     return {
         background: background(layer),
-        padding: {
-            top: SPACING,
-            bottom: SPACING,
-            left: SPACING,
-            right: SPACING,
+        list: {
+            margin: {
+                left: SPACING,
+                right: SPACING,
+            }
         },
         channel_select: {
-            header: { ...channel_name },
+            header: {
+                ...channel_name,
+                border: border(layer, { bottom: true })
+            },
             item: channel_name,
-            active_item: channel_name,
-            hovered_item: channel_name,
-            hovered_active_item: channel_name,
+            active_item: {
+                ...channel_name,
+                background: background(layer, "on", "active"),
+            },
+            hovered_item: {
+                ...channel_name,
+                background: background(layer, "on", "hovered"),
+            },
+            hovered_active_item: {
+                ...channel_name,
+                background: background(layer, "on", "active"),
+            },
             menu: {
-                padding: {
-                    top: 10,
-                    bottom: 10,
-                }
+                background: background(layer, "on"),
+                border: border(layer, { bottom: true })
             }
         },
         input_editor: {
@@ -54,6 +64,11 @@ export default function chat_panel(): any {
             }),
             selection: theme.players[0],
             border: border(layer, "on"),
+            margin: {
+                left: SPACING,
+                right: SPACING,
+                bottom: SPACING,
+            },
             padding: {
                 bottom: 4,
                 left: 8,