Implemented direct styling for ignored and cut project panel entries

Mikayla Maki created 3 years ago

Change summary

crates/db/test-db.db                      |  0 
crates/project_panel/src/project_panel.rs | 22 ++++++----
crates/theme/src/theme.rs                 |  5 +
styles/src/styleTree/components.ts        |  4 +
styles/src/styleTree/projectPanel.ts      | 51 +++++++++++++++---------
5 files changed, 51 insertions(+), 31 deletions(-)

Detailed changes

crates/db/test-db.db

crates/project_panel/src/project_panel.rs

@@ -1015,15 +1015,19 @@ impl ProjectPanel {
         let show_editor = details.is_editing && !details.is_processing;
         MouseEventHandler::<Self>::new(entry_id.to_usize(), cx, |state, cx| {
             let padding = theme.container.padding.left + details.depth as f32 * theme.indent_width;
-            let mut style = theme.entry.style_for(state, details.is_selected).clone();
-            if details.is_ignored {
-                style.text.color.fade_out(theme.ignored_entry_fade);
-                style.icon_color.fade_out(theme.ignored_entry_fade);
-            }
-            if details.is_cut {
-                style.text.color.fade_out(theme.cut_entry_fade);
-                style.icon_color.fade_out(theme.cut_entry_fade);
-            }
+
+            let entry_style = if details.is_ignored && details.is_cut {
+                &theme.ignored_and_cut_entry
+            } else if details.is_ignored {
+                &theme.ignored_entry
+            } else if details.is_cut {
+                &theme.cut_entry
+            } else {
+                &theme.entry
+            };
+
+            let style = entry_style.style_for(state, details.is_selected).clone();
+
             let row_container_style = if show_editor {
                 theme.filename_editor.container
             } else {

crates/theme/src/theme.rs

@@ -326,8 +326,9 @@ pub struct ProjectPanel {
     #[serde(flatten)]
     pub container: ContainerStyle,
     pub entry: Interactive<ProjectPanelEntry>,
-    pub cut_entry_fade: f32,
-    pub ignored_entry_fade: f32,
+    pub ignored_entry: Interactive<ProjectPanelEntry>,
+    pub cut_entry: Interactive<ProjectPanelEntry>,
+    pub ignored_and_cut_entry: Interactive<ProjectPanelEntry>,
     pub filename_editor: FieldEditor,
     pub indent_width: f32,
 }

styles/src/styleTree/components.ts

@@ -89,6 +89,7 @@ interface TextProperties {
   size?: keyof typeof fontSizes;
   weight?: FontWeight;
   underline?: boolean;
+  color?: string;
 }
 
 export function text(
@@ -132,11 +133,12 @@ export function text(
   }
 
   let size = fontSizes[properties?.size || "sm"];
+  let color = properties?.color || style.foreground;
 
   return {
     family: fontFamilies[fontFamily],
-    color: style.foreground,
     ...properties,
+    color,
     size,
   };
 }

styles/src/styleTree/projectPanel.ts

@@ -3,30 +3,43 @@ import { background, foreground, text } from "./components";
 
 export default function projectPanel(colorScheme: ColorScheme) {
   let layer = colorScheme.middle;
+
+  let entry = {
+    height: 24,
+    iconColor: foreground(layer, "variant"),
+    iconSize: 8,
+    iconSpacing: 8,
+    text: text(layer, "mono", "variant", { size: "sm" }),
+    hover: {
+      background: background(layer, "variant", "hovered"),
+    },
+    active: {
+      background: background(layer, "active"),
+      text: text(layer, "mono", "active", { size: "sm" }),
+    },
+    activeHover: {
+      background: background(layer, "active"),
+      text: text(layer, "mono", "active", { size: "sm" }),
+    },
+  };
+
   return {
     background: background(layer),
     padding: { left: 12, right: 12, top: 6, bottom: 6 },
     indentWidth: 8,
-    entry: {
-      height: 24,
-      iconColor: foreground(layer, "variant"),
-      iconSize: 8,
-      iconSpacing: 8,
-      text: text(layer, "mono", "variant", { size: "sm" }),
-      hover: {
-        background: background(layer, "variant", "hovered"),
-      },
-      active: {
-        background: background(layer, "active"),
-        text: text(layer, "mono", "active", { size: "sm" }),
-      },
-      activeHover: {
-        background: background(layer, "active"),
-        text: text(layer, "mono", "active", { size: "sm" }),
-      },
+    entry,
+    ignoredEntry: {
+      ...entry,
+      text: text(layer, "mono", "variant", { color: "#ff00cc" }),
+    },
+    cutEntry: {
+      ...entry,
+      text: text(layer, "mono", "variant", { color: "#ff00cc" }),
+    },
+    ignoredAndCutEntry: {
+      ...entry,
+      text: text(layer, "mono", "variant", { color: "#ffb700" }),
     },
-    cutEntryFade: 0.4,
-    ignoredEntryFade: 0.6,
     filenameEditor: {
       background: background(layer, "on"),
       text: text(layer, "mono", "on", { size: "sm" }),