Remove additional wrapping elements in the chat panel (#14013)

Marshall Bowers created 2 years ago

This PR removes some wrapping elements that were used inside of the chat
panel.

To facilitate this, the `Label` component now has a `weight` method to
change the font weight.

Release Notes:

- N/A

Change summary

crates/collab_ui/src/chat_panel.rs                  | 40 ++++++---------
crates/ui/src/components/label/highlighted_label.rs |  7 ++
crates/ui/src/components/label/label.rs             |  5 +
crates/ui/src/components/label/label_like.rs        | 13 ++++
4 files changed, 39 insertions(+), 26 deletions(-)

Detailed changes

crates/collab_ui/src/chat_panel.rs

@@ -355,11 +355,10 @@ impl ChatPanel {
                 .child(Icon::new(IconName::ReplyArrowRight).color(Color::Muted))
                 .child(Avatar::new(user_being_replied_to.avatar_uri.clone()).size(rems(0.7)))
                 .child(
-                    div().font_weight(FontWeight::SEMIBOLD).child(
-                        Label::new(format!("@{}", user_being_replied_to.github_login))
-                            .size(LabelSize::XSmall)
-                            .color(Color::Muted),
-                    ),
+                    Label::new(format!("@{}", user_being_replied_to.github_login))
+                        .size(LabelSize::XSmall)
+                        .weight(FontWeight::SEMIBOLD)
+                        .color(Color::Muted),
                 )
                 .child(
                     div().overflow_y_hidden().child(
@@ -490,22 +489,16 @@ impl ChatPanel {
                         |this| {
                             this.child(
                                 h_flex()
+                                    .gap_2()
                                     .text_ui_sm(cx)
                                     .child(
-                                        div().absolute().child(
-                                            Avatar::new(message.sender.avatar_uri.clone())
-                                                .size(rems(1.)),
-                                        ),
+                                        Avatar::new(message.sender.avatar_uri.clone())
+                                            .size(rems(1.)),
                                     )
                                     .child(
-                                        div()
-                                            .pl(cx.rem_size() + px(6.0))
-                                            .pr(px(8.0))
-                                            .font_weight(FontWeight::BOLD)
-                                            .child(
-                                                Label::new(message.sender.github_login.clone())
-                                                    .size(LabelSize::Small),
-                                            ),
+                                        Label::new(message.sender.github_login.clone())
+                                            .size(LabelSize::Small)
+                                            .weight(FontWeight::BOLD),
                                     )
                                     .child(
                                         Label::new(time_format::format_localized_timestamp(
@@ -1044,13 +1037,12 @@ impl Render for ChatPanel {
                                         .id(("reply-preview", reply_to_message_id))
                                         .child(Label::new("Replying to ").size(LabelSize::Small))
                                         .child(
-                                            div().font_weight(FontWeight::BOLD).child(
-                                                Label::new(format!(
-                                                    "@{}",
-                                                    user_being_replied_to.github_login.clone()
-                                                ))
-                                                .size(LabelSize::Small),
-                                            ),
+                                            Label::new(format!(
+                                                "@{}",
+                                                user_being_replied_to.github_login.clone()
+                                            ))
+                                            .size(LabelSize::Small)
+                                            .weight(FontWeight::BOLD),
                                         )
                                         .when_some(channel_id, |this, channel_id| {
                                             this.cursor_pointer().on_click(cx.listener(

crates/ui/src/components/label/highlighted_label.rs

@@ -1,6 +1,6 @@
 use std::ops::Range;
 
-use gpui::{HighlightStyle, StyledText};
+use gpui::{FontWeight, HighlightStyle, StyledText};
 
 use crate::{prelude::*, LabelCommon, LabelLike, LabelSize, LineHeightStyle};
 
@@ -29,6 +29,11 @@ impl LabelCommon for HighlightedLabel {
         self
     }
 
+    fn weight(mut self, weight: FontWeight) -> Self {
+        self.base = self.base.weight(weight);
+        self
+    }
+
     fn line_height_style(mut self, line_height_style: LineHeightStyle) -> Self {
         self.base = self.base.line_height_style(line_height_style);
         self

crates/ui/src/components/label/label.rs

@@ -85,6 +85,11 @@ impl LabelCommon for Label {
         self
     }
 
+    fn weight(mut self, weight: gpui::FontWeight) -> Self {
+        self.base = self.base.weight(weight);
+        self
+    }
+
     /// Sets the line height style of the label using a [`LineHeightStyle`].
     ///
     /// # Examples

crates/ui/src/components/label/label_like.rs

@@ -1,4 +1,4 @@
-use gpui::{relative, AnyElement, Styled};
+use gpui::{relative, AnyElement, FontWeight, Styled};
 use smallvec::SmallVec;
 
 use crate::prelude::*;
@@ -25,6 +25,9 @@ pub trait LabelCommon {
     /// Sets the size of the label using a [`LabelSize`].
     fn size(self, size: LabelSize) -> Self;
 
+    /// Sets the font weight of the label.
+    fn weight(self, weight: FontWeight) -> Self;
+
     /// Sets the line height style of the label using a [`LineHeightStyle`].
     fn line_height_style(self, line_height_style: LineHeightStyle) -> Self;
 
@@ -41,6 +44,7 @@ pub trait LabelCommon {
 #[derive(IntoElement)]
 pub struct LabelLike {
     size: LabelSize,
+    weight: FontWeight,
     line_height_style: LineHeightStyle,
     pub(crate) color: Color,
     strikethrough: bool,
@@ -52,6 +56,7 @@ impl LabelLike {
     pub fn new() -> Self {
         Self {
             size: LabelSize::Default,
+            weight: FontWeight::default(),
             line_height_style: LineHeightStyle::default(),
             color: Color::Default,
             strikethrough: false,
@@ -67,6 +72,11 @@ impl LabelCommon for LabelLike {
         self
     }
 
+    fn weight(mut self, weight: FontWeight) -> Self {
+        self.weight = weight;
+        self
+    }
+
     fn line_height_style(mut self, line_height_style: LineHeightStyle) -> Self {
         self.line_height_style = line_height_style;
         self
@@ -118,6 +128,7 @@ impl RenderOnce for LabelLike {
             })
             .when(self.italic, |this| this.italic())
             .text_color(self.color.color(cx))
+            .font_weight(self.weight)
             .children(self.children)
     }
 }