Wire project panel themes into rust

Mikayla Maki created

Change summary

crates/project_panel/src/project_panel.rs | 33 +++++++++-----
crates/theme/src/theme.rs                 | 12 +++++
crates/theme/src/ui.rs                    | 55 ------------------------
styles/src/styleTree/projectPanel.ts      | 23 +++++----
4 files changed, 47 insertions(+), 76 deletions(-)

Detailed changes

crates/project_panel/src/project_panel.rs 🔗

@@ -6,8 +6,8 @@ use gpui::{
     actions,
     anyhow::{anyhow, Result},
     elements::{
-        AnchorCorner, ChildView, ComponentHost, ContainerStyle, Empty, Flex, MouseEventHandler,
-        ParentElement, ScrollTarget, Stack, Svg, UniformList, UniformListState,
+        AnchorCorner, ChildView, ContainerStyle, Empty, Flex, Label,
+        MouseEventHandler, ParentElement, ScrollTarget, Stack, Svg, UniformList, UniformListState,
     },
     geometry::vector::Vector2F,
     keymap_matcher::KeymapContext,
@@ -28,7 +28,7 @@ use std::{
     path::Path,
     sync::Arc,
 };
-use theme::{ui::FileName, ProjectPanelEntry};
+use theme::ProjectPanelEntry;
 use unicase::UniCase;
 use workspace::Workspace;
 
@@ -1079,6 +1079,17 @@ impl ProjectPanel {
         let kind = details.kind;
         let show_editor = details.is_editing && !details.is_processing;
 
+        let mut filename_text_style = style.text.clone();
+        filename_text_style.color = details
+            .git_status
+            .as_ref()
+            .map(|status| match status {
+                GitFileStatus::Added => style.status.git.inserted,
+                GitFileStatus::Modified => style.status.git.modified,
+                GitFileStatus::Conflict => style.text.color,
+            })
+            .unwrap_or(style.text.color);
+
         Flex::row()
             .with_child(
                 if kind == EntryKind::Dir {
@@ -1106,16 +1117,12 @@ impl ProjectPanel {
                     .flex(1.0, true)
                     .into_any()
             } else {
-                ComponentHost::new(FileName::new(
-                    details.filename.clone(),
-                    details.git_status,
-                    FileName::style(style.text.clone(), &theme::current(cx)),
-                ))
-                .contained()
-                .with_margin_left(style.icon_spacing)
-                .aligned()
-                .left()
-                .into_any()
+                Label::new(details.filename.clone(), filename_text_style)
+                    .contained()
+                    .with_margin_left(style.icon_spacing)
+                    .aligned()
+                    .left()
+                    .into_any()
             })
             .constrained()
             .with_height(style.height)

crates/theme/src/theme.rs 🔗

@@ -446,6 +446,18 @@ pub struct ProjectPanelEntry {
     pub icon_color: Color,
     pub icon_size: f32,
     pub icon_spacing: f32,
+    pub status: EntryStatus,
+}
+
+#[derive(Clone, Debug, Deserialize, Default)]
+pub struct EntryStatus {
+    pub git: GitProjectStatus,
+}
+
+#[derive(Clone, Debug, Deserialize, Default)]
+pub struct GitProjectStatus {
+    pub modified: Color,
+    pub inserted: Color,
 }
 
 #[derive(Clone, Debug, Deserialize, Default)]

crates/theme/src/ui.rs 🔗

@@ -1,6 +1,5 @@
 use std::borrow::Cow;
 
-use fs::repository::GitFileStatus;
 use gpui::{
     color::Color,
     elements::{
@@ -12,11 +11,11 @@ use gpui::{
     platform,
     platform::MouseButton,
     scene::MouseClick,
-    Action, AnyElement, Element, EventContext, MouseState, View, ViewContext,
+    Action, Element, EventContext, MouseState, View, ViewContext,
 };
 use serde::Deserialize;
 
-use crate::{ContainedText, Interactive, Theme};
+use crate::{ContainedText, Interactive};
 
 #[derive(Clone, Deserialize, Default)]
 pub struct CheckboxStyle {
@@ -253,53 +252,3 @@ where
         .constrained()
         .with_height(style.dimensions().y())
 }
-
-pub struct FileName {
-    filename: String,
-    git_status: Option<GitFileStatus>,
-    style: FileNameStyle,
-}
-
-pub struct FileNameStyle {
-    template_style: LabelStyle,
-    git_inserted: Color,
-    git_modified: Color,
-    git_deleted: Color,
-}
-
-impl FileName {
-    pub fn new(filename: String, git_status: Option<GitFileStatus>, style: FileNameStyle) -> Self {
-        FileName {
-            filename,
-            git_status,
-            style,
-        }
-    }
-
-    pub fn style<I: Into<LabelStyle>>(style: I, theme: &Theme) -> FileNameStyle {
-        FileNameStyle {
-            template_style: style.into(),
-            git_inserted: theme.editor.diff.inserted,
-            git_modified: theme.editor.diff.modified,
-            git_deleted: theme.editor.diff.deleted,
-        }
-    }
-}
-
-impl<V: View> gpui::elements::Component<V> for FileName {
-    fn render(&self, _: &mut V, _: &mut ViewContext<V>) -> AnyElement<V> {
-        // Prepare colors for git statuses
-        let mut filename_text_style = self.style.template_style.text.clone();
-        filename_text_style.color = self
-            .git_status
-            .as_ref()
-            .map(|status| match status {
-                GitFileStatus::Added => self.style.git_inserted,
-                GitFileStatus::Modified => self.style.git_modified,
-                GitFileStatus::Conflict => self.style.git_deleted,
-            })
-            .unwrap_or(self.style.template_style.text.color);
-
-        Label::new(self.filename.clone(), filename_text_style).into_any()
-    }
-}

styles/src/styleTree/projectPanel.ts 🔗

@@ -13,6 +13,17 @@ export default function projectPanel(colorScheme: ColorScheme) {
         iconSpacing: 8,
     }
 
+    let status = {
+        git: {
+            modified: isLight
+                ? colorScheme.ramps.yellow(0.6).hex()
+                : colorScheme.ramps.yellow(0.5).hex(),
+            inserted: isLight
+                ? colorScheme.ramps.green(0.4).hex()
+                : colorScheme.ramps.green(0.5).hex(),
+        }
+    }
+
     let entry = {
         ...baseEntry,
         text: text(layer, "mono", "variant", { size: "sm" }),
@@ -29,16 +40,7 @@ export default function projectPanel(colorScheme: ColorScheme) {
             background: background(layer, "active"),
             text: text(layer, "mono", "active", { size: "sm" }),
         },
-        status: {
-            git: {
-                modified: isLight
-                    ? colorScheme.ramps.yellow(0.6).hex()
-                    : colorScheme.ramps.yellow(0.5).hex(),
-                inserted: isLight
-                    ? colorScheme.ramps.green(0.4).hex()
-                    : colorScheme.ramps.green(0.5).hex(),
-            }
-        }
+        status
     }
 
     return {
@@ -70,6 +72,7 @@ export default function projectPanel(colorScheme: ColorScheme) {
         entry,
         draggedEntry: {
             ...baseEntry,
+            status,
             text: text(layer, "mono", "on", { size: "sm" }),
             background: withOpacity(background(layer, "on"), 0.9),
             border: border(layer),