From daf4e713d1485132be360c76d32171037de18ee5 Mon Sep 17 00:00:00 2001
From: Jason Lee <huacnlee@gmail.com>
Date: Thu, 27 Jun 2024 23:12:52 +0800
Subject: [PATCH] Fix ListItem check icon.

---
 crates/ui/src/checkbox.rs       |  5 +++--
 crates/ui/src/dropdown.rs       |  5 +++--
 crates/ui/src/icon.rs           | 16 ++++++++++++----
 crates/ui/src/list/list_item.rs | 29 +++++++++++++++--------------
 4 files changed, 33 insertions(+), 22 deletions(-)

diff --git a/crates/ui/src/checkbox.rs b/crates/ui/src/checkbox.rs
index 57da762c..7f4eda22 100644
--- a/crates/ui/src/checkbox.rs
+++ b/crates/ui/src/checkbox.rs
@@ -10,6 +10,7 @@ use crate::{
     selectable::{Selectable, Selection},
     stock::{h_flex, v_flex},
     theme::{ActiveTheme, Colorize as _},
+    IconName,
 };
 
 type OnClick = Box<dyn Fn(&Selection, &mut WindowContext) + 'static>;
@@ -114,8 +115,8 @@ impl RenderOnce for Checkbox {
                             .size_3()
                             .text_color(icon_color)
                             .map(|this| match self.checked {
-                                Selection::Selected => this.path("icons/check.svg"),
-                                Selection::Indeterminate => this.path("icons/minus.svg"),
+                                Selection::Selected => this.path(IconName::Check.path()),
+                                Selection::Indeterminate => this.path(IconName::Minus.path()),
                                 _ => this,
                             }),
                     ),
diff --git a/crates/ui/src/dropdown.rs b/crates/ui/src/dropdown.rs
index c090b3e6..09049758 100644
--- a/crates/ui/src/dropdown.rs
+++ b/crates/ui/src/dropdown.rs
@@ -184,10 +184,11 @@ where
                     }))
                     .child(
                         h_flex()
+                            .w_full()
                             .items_center()
                             .justify_between()
-                            .child(title)
-                            .child(IconName::ChevronDown),
+                            .child(div().flex_1().child(title))
+                            .child(div().w_4().h_4().child(IconName::ChevronDown)),
                     ),
             )
             .when(self.open, |this| {
diff --git a/crates/ui/src/icon.rs b/crates/ui/src/icon.rs
index 77e7d395..14cc06b0 100644
--- a/crates/ui/src/icon.rs
+++ b/crates/ui/src/icon.rs
@@ -1,4 +1,6 @@
-use gpui::{svg, IntoElement, RenderOnce, SharedString, Styled as _, Svg, WindowContext};
+use gpui::{svg, IntoElement, RenderOnce, SharedString, Styled, Svg, WindowContext};
+
+use crate::theme::ActiveTheme;
 
 #[derive(IntoElement)]
 pub enum IconName {
@@ -38,10 +40,16 @@ pub struct Icon {
     path: SharedString,
 }
 
+impl Styled for Icon {
+    fn style(&mut self) -> &mut gpui::StyleRefinement {
+        self.base.style()
+    }
+}
+
 impl Icon {
     pub fn new(name: IconName) -> Self {
         Self {
-            base: svg().flex_none().size_full(),
+            base: svg().flex_none().size_4(),
             path: name.path(),
         }
     }
@@ -56,7 +64,7 @@ impl Icon {
 }
 
 impl RenderOnce for Icon {
-    fn render(self, _cx: &mut WindowContext) -> impl IntoElement {
-        self.base.path(self.path)
+    fn render(self, cx: &mut WindowContext) -> impl IntoElement {
+        self.base.text_color(cx.theme().foreground).path(self.path)
     }
 }
diff --git a/crates/ui/src/list/list_item.rs b/crates/ui/src/list/list_item.rs
index 06728e54..f2abfbdb 100644
--- a/crates/ui/src/list/list_item.rs
+++ b/crates/ui/src/list/list_item.rs
@@ -1,6 +1,6 @@
 use gpui::{
-    div, prelude::FluentBuilder as _, ClickEvent, Div, ElementId, InteractiveElement, IntoElement,
-    MouseButton, MouseDownEvent, ParentElement, RenderOnce, SharedString, Stateful,
+    div, prelude::FluentBuilder as _, AnyElement, ClickEvent, Div, ElementId, InteractiveElement,
+    IntoElement, MouseButton, MouseDownEvent, ParentElement, RenderOnce, SharedString, Stateful,
     StatefulInteractiveElement as _, Style, Styled, WindowContext,
 };
 
@@ -11,7 +11,7 @@ pub struct ListItem {
     base: Stateful<Div>,
     disabled: bool,
     selected: bool,
-    check_icon: Option<IconName>,
+    check_icon: Option<Icon>,
     on_click: Option<Box<dyn Fn(&ClickEvent, &mut WindowContext) + 'static>>,
     on_secondary_mouse_down: Option<Box<dyn Fn(&MouseDownEvent, &mut WindowContext) + 'static>>,
 }
@@ -29,7 +29,7 @@ impl ListItem {
     }
 
     pub fn check_icon(mut self, icon: IconName) -> Self {
-        self.check_icon = Some(icon);
+        self.check_icon = Some(Icon::new(icon));
         self
     }
 
@@ -87,9 +87,7 @@ impl RenderOnce for ListItem {
     fn render(self, cx: &mut WindowContext) -> impl IntoElement {
         h_flex()
             .id("item-group")
-            .items_center()
-            .gap_2()
-            .w_full()
+            .flex_none()
             .relative()
             .gap_x_2()
             .text_base()
@@ -105,12 +103,15 @@ impl RenderOnce for ListItem {
                 this.hover(|this| this.bg(cx.theme().accent))
             })
             .when(self.selected, |this| this.bg(cx.theme().accent))
-            .child(self.base.when(self.selected, |this| {
-                if let Some(icon) = self.check_icon {
-                    this.child(icon)
-                } else {
-                    this
-                }
-            }))
+            .child(self.base.w_full().items_center().justify_between().when(
+                self.selected,
+                |this| {
+                    if let Some(icon) = self.check_icon {
+                        this.child(icon.text_color(cx.theme().muted))
+                    } else {
+                        this
+                    }
+                },
+            ))
     }
 }