Clean up project panel theme

Max Brunsfeld created 3 years ago

Change summary

assets/themes/cave-dark.json              | 60 ++++++++++--------------
assets/themes/cave-light.json             | 60 ++++++++++--------------
assets/themes/dark.json                   | 60 ++++++++++--------------
assets/themes/light.json                  | 60 ++++++++++--------------
assets/themes/solarized-dark.json         | 60 ++++++++++--------------
assets/themes/solarized-light.json        | 60 ++++++++++--------------
assets/themes/sulphurpool-dark.json       | 60 ++++++++++--------------
assets/themes/sulphurpool-light.json      | 60 ++++++++++--------------
crates/project_panel/src/project_panel.rs | 56 ++++++++++------------
crates/theme/src/theme.rs                 |  6 -
styles/src/styleTree/projectPanel.ts      | 44 ++++++++----------
11 files changed, 247 insertions(+), 339 deletions(-)

Detailed changes

assets/themes/cave-dark.json

@@ -937,6 +937,7 @@
       "top": 6,
       "bottom": 6
     },
+    "indent_width": 20,
     "entry": {
       "height": 24,
       "icon_color": "#8b8792",
@@ -946,41 +947,30 @@
         "family": "Zed Mono",
         "color": "#8b8792",
         "size": 14
-      }
-    },
-    "hovered_entry": {
-      "height": 24,
-      "background": "#5852603d",
-      "icon_color": "#8b8792",
-      "icon_size": 8,
-      "icon_spacing": 8,
-      "text": {
-        "family": "Zed Mono",
-        "color": "#e2dfe7",
-        "size": 14
-      }
-    },
-    "selected_entry": {
-      "height": 24,
-      "icon_color": "#8b8792",
-      "icon_size": 8,
-      "icon_spacing": 8,
-      "text": {
-        "family": "Zed Mono",
-        "color": "#e2dfe7",
-        "size": 14
-      }
-    },
-    "hovered_selected_entry": {
-      "height": 24,
-      "background": "#5852603d",
-      "icon_color": "#8b8792",
-      "icon_size": 8,
-      "icon_spacing": 8,
-      "text": {
-        "family": "Zed Mono",
-        "color": "#efecf4",
-        "size": 14
+      },
+      "hover": {
+        "background": "#5852603d",
+        "text": {
+          "family": "Zed Mono",
+          "color": "#e2dfe7",
+          "size": 14
+        }
+      },
+      "active": {
+        "background": "#5852605c",
+        "text": {
+          "family": "Zed Mono",
+          "color": "#e2dfe7",
+          "size": 14
+        }
+      },
+      "active_hover": {
+        "background": "#5852603d",
+        "text": {
+          "family": "Zed Mono",
+          "color": "#efecf4",
+          "size": 14
+        }
       }
     }
   },

assets/themes/cave-light.json

@@ -937,6 +937,7 @@
       "top": 6,
       "bottom": 6
     },
+    "indent_width": 20,
     "entry": {
       "height": 24,
       "icon_color": "#585260",
@@ -946,41 +947,30 @@
         "family": "Zed Mono",
         "color": "#585260",
         "size": 14
-      }
-    },
-    "hovered_entry": {
-      "height": 24,
-      "background": "#8b87921f",
-      "icon_color": "#585260",
-      "icon_size": 8,
-      "icon_spacing": 8,
-      "text": {
-        "family": "Zed Mono",
-        "color": "#26232a",
-        "size": 14
-      }
-    },
-    "selected_entry": {
-      "height": 24,
-      "icon_color": "#585260",
-      "icon_size": 8,
-      "icon_spacing": 8,
-      "text": {
-        "family": "Zed Mono",
-        "color": "#26232a",
-        "size": 14
-      }
-    },
-    "hovered_selected_entry": {
-      "height": 24,
-      "background": "#8b87921f",
-      "icon_color": "#585260",
-      "icon_size": 8,
-      "icon_spacing": 8,
-      "text": {
-        "family": "Zed Mono",
-        "color": "#19171c",
-        "size": 14
+      },
+      "hover": {
+        "background": "#8b87921f",
+        "text": {
+          "family": "Zed Mono",
+          "color": "#26232a",
+          "size": 14
+        }
+      },
+      "active": {
+        "background": "#8b87922e",
+        "text": {
+          "family": "Zed Mono",
+          "color": "#26232a",
+          "size": 14
+        }
+      },
+      "active_hover": {
+        "background": "#8b87921f",
+        "text": {
+          "family": "Zed Mono",
+          "color": "#19171c",
+          "size": 14
+        }
       }
     }
   },

assets/themes/dark.json

@@ -937,6 +937,7 @@
       "top": 6,
       "bottom": 6
     },
+    "indent_width": 20,
     "entry": {
       "height": 24,
       "icon_color": "#555555",
@@ -946,41 +947,30 @@
         "family": "Zed Mono",
         "color": "#808080",
         "size": 14
-      }
-    },
-    "hovered_entry": {
-      "height": 24,
-      "background": "#232323",
-      "icon_color": "#555555",
-      "icon_size": 8,
-      "icon_spacing": 8,
-      "text": {
-        "family": "Zed Mono",
-        "color": "#f1f1f1",
-        "size": 14
-      }
-    },
-    "selected_entry": {
-      "height": 24,
-      "icon_color": "#555555",
-      "icon_size": 8,
-      "icon_spacing": 8,
-      "text": {
-        "family": "Zed Mono",
-        "color": "#f1f1f1",
-        "size": 14
-      }
-    },
-    "hovered_selected_entry": {
-      "height": 24,
-      "background": "#232323",
-      "icon_color": "#555555",
-      "icon_size": 8,
-      "icon_spacing": 8,
-      "text": {
-        "family": "Zed Mono",
-        "color": "#ffffff",
-        "size": 14
+      },
+      "hover": {
+        "background": "#232323",
+        "text": {
+          "family": "Zed Mono",
+          "color": "#f1f1f1",
+          "size": 14
+        }
+      },
+      "active": {
+        "background": "#2b2b2b",
+        "text": {
+          "family": "Zed Mono",
+          "color": "#f1f1f1",
+          "size": 14
+        }
+      },
+      "active_hover": {
+        "background": "#232323",
+        "text": {
+          "family": "Zed Mono",
+          "color": "#ffffff",
+          "size": 14
+        }
       }
     }
   },

assets/themes/light.json

@@ -937,6 +937,7 @@
       "top": 6,
       "bottom": 6
     },
+    "indent_width": 20,
     "entry": {
       "height": 24,
       "icon_color": "#9c9c9c",
@@ -946,41 +947,30 @@
         "family": "Zed Mono",
         "color": "#636363",
         "size": 14
-      }
-    },
-    "hovered_entry": {
-      "height": 24,
-      "background": "#eaeaea",
-      "icon_color": "#9c9c9c",
-      "icon_size": 8,
-      "icon_spacing": 8,
-      "text": {
-        "family": "Zed Mono",
-        "color": "#2b2b2b",
-        "size": 14
-      }
-    },
-    "selected_entry": {
-      "height": 24,
-      "icon_color": "#9c9c9c",
-      "icon_size": 8,
-      "icon_spacing": 8,
-      "text": {
-        "family": "Zed Mono",
-        "color": "#2b2b2b",
-        "size": 14
-      }
-    },
-    "hovered_selected_entry": {
-      "height": 24,
-      "background": "#eaeaea",
-      "icon_color": "#9c9c9c",
-      "icon_size": 8,
-      "icon_spacing": 8,
-      "text": {
-        "family": "Zed Mono",
-        "color": "#000000",
-        "size": 14
+      },
+      "hover": {
+        "background": "#eaeaea",
+        "text": {
+          "family": "Zed Mono",
+          "color": "#2b2b2b",
+          "size": 14
+        }
+      },
+      "active": {
+        "background": "#e3e3e3",
+        "text": {
+          "family": "Zed Mono",
+          "color": "#2b2b2b",
+          "size": 14
+        }
+      },
+      "active_hover": {
+        "background": "#eaeaea",
+        "text": {
+          "family": "Zed Mono",
+          "color": "#000000",
+          "size": 14
+        }
       }
     }
   },

assets/themes/solarized-dark.json

@@ -937,6 +937,7 @@
       "top": 6,
       "bottom": 6
     },
+    "indent_width": 20,
     "entry": {
       "height": 24,
       "icon_color": "#93a1a1",
@@ -946,41 +947,30 @@
         "family": "Zed Mono",
         "color": "#93a1a1",
         "size": 14
-      }
-    },
-    "hovered_entry": {
-      "height": 24,
-      "background": "#586e753d",
-      "icon_color": "#93a1a1",
-      "icon_size": 8,
-      "icon_spacing": 8,
-      "text": {
-        "family": "Zed Mono",
-        "color": "#eee8d5",
-        "size": 14
-      }
-    },
-    "selected_entry": {
-      "height": 24,
-      "icon_color": "#93a1a1",
-      "icon_size": 8,
-      "icon_spacing": 8,
-      "text": {
-        "family": "Zed Mono",
-        "color": "#eee8d5",
-        "size": 14
-      }
-    },
-    "hovered_selected_entry": {
-      "height": 24,
-      "background": "#586e753d",
-      "icon_color": "#93a1a1",
-      "icon_size": 8,
-      "icon_spacing": 8,
-      "text": {
-        "family": "Zed Mono",
-        "color": "#fdf6e3",
-        "size": 14
+      },
+      "hover": {
+        "background": "#586e753d",
+        "text": {
+          "family": "Zed Mono",
+          "color": "#eee8d5",
+          "size": 14
+        }
+      },
+      "active": {
+        "background": "#586e755c",
+        "text": {
+          "family": "Zed Mono",
+          "color": "#eee8d5",
+          "size": 14
+        }
+      },
+      "active_hover": {
+        "background": "#586e753d",
+        "text": {
+          "family": "Zed Mono",
+          "color": "#fdf6e3",
+          "size": 14
+        }
       }
     }
   },

assets/themes/solarized-light.json

@@ -937,6 +937,7 @@
       "top": 6,
       "bottom": 6
     },
+    "indent_width": 20,
     "entry": {
       "height": 24,
       "icon_color": "#586e75",
@@ -946,41 +947,30 @@
         "family": "Zed Mono",
         "color": "#586e75",
         "size": 14
-      }
-    },
-    "hovered_entry": {
-      "height": 24,
-      "background": "#93a1a11f",
-      "icon_color": "#586e75",
-      "icon_size": 8,
-      "icon_spacing": 8,
-      "text": {
-        "family": "Zed Mono",
-        "color": "#073642",
-        "size": 14
-      }
-    },
-    "selected_entry": {
-      "height": 24,
-      "icon_color": "#586e75",
-      "icon_size": 8,
-      "icon_spacing": 8,
-      "text": {
-        "family": "Zed Mono",
-        "color": "#073642",
-        "size": 14
-      }
-    },
-    "hovered_selected_entry": {
-      "height": 24,
-      "background": "#93a1a11f",
-      "icon_color": "#586e75",
-      "icon_size": 8,
-      "icon_spacing": 8,
-      "text": {
-        "family": "Zed Mono",
-        "color": "#002b36",
-        "size": 14
+      },
+      "hover": {
+        "background": "#93a1a11f",
+        "text": {
+          "family": "Zed Mono",
+          "color": "#073642",
+          "size": 14
+        }
+      },
+      "active": {
+        "background": "#93a1a12e",
+        "text": {
+          "family": "Zed Mono",
+          "color": "#073642",
+          "size": 14
+        }
+      },
+      "active_hover": {
+        "background": "#93a1a11f",
+        "text": {
+          "family": "Zed Mono",
+          "color": "#002b36",
+          "size": 14
+        }
       }
     }
   },

assets/themes/sulphurpool-dark.json

@@ -937,6 +937,7 @@
       "top": 6,
       "bottom": 6
     },
+    "indent_width": 20,
     "entry": {
       "height": 24,
       "icon_color": "#979db4",
@@ -946,41 +947,30 @@
         "family": "Zed Mono",
         "color": "#979db4",
         "size": 14
-      }
-    },
-    "hovered_entry": {
-      "height": 24,
-      "background": "#5e66873d",
-      "icon_color": "#979db4",
-      "icon_size": 8,
-      "icon_spacing": 8,
-      "text": {
-        "family": "Zed Mono",
-        "color": "#dfe2f1",
-        "size": 14
-      }
-    },
-    "selected_entry": {
-      "height": 24,
-      "icon_color": "#979db4",
-      "icon_size": 8,
-      "icon_spacing": 8,
-      "text": {
-        "family": "Zed Mono",
-        "color": "#dfe2f1",
-        "size": 14
-      }
-    },
-    "hovered_selected_entry": {
-      "height": 24,
-      "background": "#5e66873d",
-      "icon_color": "#979db4",
-      "icon_size": 8,
-      "icon_spacing": 8,
-      "text": {
-        "family": "Zed Mono",
-        "color": "#f5f7ff",
-        "size": 14
+      },
+      "hover": {
+        "background": "#5e66873d",
+        "text": {
+          "family": "Zed Mono",
+          "color": "#dfe2f1",
+          "size": 14
+        }
+      },
+      "active": {
+        "background": "#5e66875c",
+        "text": {
+          "family": "Zed Mono",
+          "color": "#dfe2f1",
+          "size": 14
+        }
+      },
+      "active_hover": {
+        "background": "#5e66873d",
+        "text": {
+          "family": "Zed Mono",
+          "color": "#f5f7ff",
+          "size": 14
+        }
       }
     }
   },

assets/themes/sulphurpool-light.json

@@ -937,6 +937,7 @@
       "top": 6,
       "bottom": 6
     },
+    "indent_width": 20,
     "entry": {
       "height": 24,
       "icon_color": "#5e6687",
@@ -946,41 +947,30 @@
         "family": "Zed Mono",
         "color": "#5e6687",
         "size": 14
-      }
-    },
-    "hovered_entry": {
-      "height": 24,
-      "background": "#979db41f",
-      "icon_color": "#5e6687",
-      "icon_size": 8,
-      "icon_spacing": 8,
-      "text": {
-        "family": "Zed Mono",
-        "color": "#293256",
-        "size": 14
-      }
-    },
-    "selected_entry": {
-      "height": 24,
-      "icon_color": "#5e6687",
-      "icon_size": 8,
-      "icon_spacing": 8,
-      "text": {
-        "family": "Zed Mono",
-        "color": "#293256",
-        "size": 14
-      }
-    },
-    "hovered_selected_entry": {
-      "height": 24,
-      "background": "#979db41f",
-      "icon_color": "#5e6687",
-      "icon_size": 8,
-      "icon_spacing": 8,
-      "text": {
-        "family": "Zed Mono",
-        "color": "#202746",
-        "size": 14
+      },
+      "hover": {
+        "background": "#979db41f",
+        "text": {
+          "family": "Zed Mono",
+          "color": "#293256",
+          "size": 14
+        }
+      },
+      "active": {
+        "background": "#979db42e",
+        "text": {
+          "family": "Zed Mono",
+          "color": "#293256",
+          "size": 14
+        }
+      },
+      "active_hover": {
+        "background": "#979db41f",
+        "text": {
+          "family": "Zed Mono",
+          "color": "#202746",
+          "size": 14
+        }
       }
     }
   },

crates/project_panel/src/project_panel.rs

@@ -1,8 +1,9 @@
+use editor::Editor;
 use gpui::{
     actions,
     elements::{
-        Align, ConstrainedBox, Empty, Flex, Label, MouseEventHandler, ParentElement, ScrollTarget,
-        Svg, UniformList, UniformListState,
+        ConstrainedBox, Empty, Flex, Label, MouseEventHandler, ParentElement, ScrollTarget, Svg,
+        UniformList, UniformListState,
     },
     impl_internal_actions, keymap,
     platform::CursorStyle,
@@ -477,35 +478,26 @@ impl ProjectPanel {
     ) -> ElementBox {
         let is_dir = details.is_dir;
         MouseEventHandler::new::<Self, _, _>(entry_id.to_usize(), cx, |state, _| {
-            let style = match (details.is_selected, state.hovered) {
-                (false, false) => &theme.entry,
-                (false, true) => &theme.hovered_entry,
-                (true, false) => &theme.selected_entry,
-                (true, true) => &theme.hovered_selected_entry,
-            };
+            let style = theme.entry.style_for(state, details.is_selected);
             Flex::row()
                 .with_child(
-                    ConstrainedBox::new(
-                        Align::new(
-                            ConstrainedBox::new(if is_dir {
-                                if details.is_expanded {
-                                    Svg::new("icons/disclosure-open.svg")
-                                        .with_color(style.icon_color)
-                                        .boxed()
-                                } else {
-                                    Svg::new("icons/disclosure-closed.svg")
-                                        .with_color(style.icon_color)
-                                        .boxed()
-                                }
-                            } else {
-                                Empty::new().boxed()
-                            })
-                            .with_max_width(style.icon_size)
-                            .with_max_height(style.icon_size)
-                            .boxed(),
-                        )
-                        .boxed(),
-                    )
+                    ConstrainedBox::new(if is_dir {
+                        if details.is_expanded {
+                            Svg::new("icons/disclosure-open.svg")
+                                .with_color(style.icon_color)
+                                .boxed()
+                        } else {
+                            Svg::new("icons/disclosure-closed.svg")
+                                .with_color(style.icon_color)
+                                .boxed()
+                        }
+                    } else {
+                        Empty::new().boxed()
+                    })
+                    .with_max_width(style.icon_size)
+                    .with_max_height(style.icon_size)
+                    .aligned()
+                    .constrained()
                     .with_width(style.icon_size)
                     .boxed(),
                 )
@@ -518,10 +510,12 @@ impl ProjectPanel {
                         .boxed(),
                 )
                 .constrained()
-                .with_height(theme.entry.height)
+                .with_height(theme.entry.default.height)
                 .contained()
                 .with_style(style.container)
-                .with_padding_left(theme.container.padding.left + details.depth as f32 * 20.)
+                .with_padding_left(
+                    theme.container.padding.left + details.depth as f32 * theme.indent_width,
+                )
                 .boxed()
         })
         .on_click(move |cx| {

crates/theme/src/theme.rs

@@ -208,10 +208,8 @@ pub struct ChatPanel {
 pub struct ProjectPanel {
     #[serde(flatten)]
     pub container: ContainerStyle,
-    pub entry: ProjectPanelEntry,
-    pub hovered_entry: ProjectPanelEntry,
-    pub selected_entry: ProjectPanelEntry,
-    pub hovered_selected_entry: ProjectPanelEntry,
+    pub entry: Interactive<ProjectPanelEntry>,
+    pub indent_width: f32,
 }
 
 #[derive(Debug, Deserialize, Default)]

styles/src/styleTree/projectPanel.ts

@@ -1,34 +1,30 @@
 import Theme from "../themes/theme";
-import { Color } from "../utils/color";
 import { panel } from "./app";
-import { backgroundColor, iconColor, text, TextColor } from "./components";
+import { backgroundColor, iconColor, text } from "./components";
 
 export default function projectPanel(theme: Theme) {
-  function entry(theme: Theme, textColor: TextColor, background?: Color) {
-    return {
+  return {
+    ...panel,
+    padding: { left: 12, right: 12, top: 6, bottom: 6 },
+    indentWidth: 20,
+    entry: {
       height: 24,
-      background,
       iconColor: iconColor(theme, "muted"),
       iconSize: 8,
       iconSpacing: 8,
-      text: text(theme, "mono", textColor, { size: "sm" }),
-    };
-  }
-
-  return {
-    ...panel,
-    entry: entry(theme, "muted"),
-    hoveredEntry: entry(
-      theme,
-      "primary",
-      backgroundColor(theme, 300, "hovered")
-    ),
-    selectedEntry: entry(theme, "primary"),
-    hoveredSelectedEntry: entry(
-      theme,
-      "active",
-      backgroundColor(theme, 300, "hovered")
-    ),
-    padding: { left: 12, right: 12, top: 6, bottom: 6 },
+      text: text(theme, "mono", "muted", { size: "sm" }),
+      hover: {
+        background: backgroundColor(theme, 300, "hovered"),
+        text: text(theme, "mono", "primary", { size: "sm" }),
+      },
+      active: {
+        background: backgroundColor(theme, 300, "active"),
+        text: text(theme, "mono", "primary", { size: "sm" }),
+      },
+      activeHover: {
+        background: backgroundColor(theme, 300, "hovered"),
+        text: text(theme, "mono", "active", { size: "sm" }),
+      }
+    },
   };
 }