Update status bar theming

Conrad Irwin and Nate Butler created 2 years ago

Co-Authored-By: Nate Butler <[e-mail]>

Change summary

Cargo.lock                          |  1 +
crates/theme/src/theme.rs           |  2 +-
crates/vim/Cargo.toml               |  1 +
crates/vim/src/mode_indicator.rs    |  5 ++++-
crates/vim/src/vim.rs               |  5 ++---
crates/workspace/src/status_bar.rs  |  8 ++------
styles/src/style_tree/status_bar.ts | 31 ++++++++++++++-----------------
7 files changed, 25 insertions(+), 28 deletions(-)

Detailed changes

Cargo.lock

@@ -8514,6 +8514,7 @@ dependencies = [
  "indoc",
  "itertools",
  "language",
+ "language_selector",
  "log",
  "nvim-rs",
  "parking_lot 0.11.2",

crates/theme/src/theme.rs

@@ -402,7 +402,7 @@ pub struct StatusBar {
     pub height: f32,
     pub item_spacing: f32,
     pub cursor_position: TextStyle,
-    pub vim_mode_indicator: TextStyle,
+    pub vim_mode_indicator: ContainedText,
     pub active_language: Interactive<ContainedText>,
     pub auto_update_progress_message: TextStyle,
     pub auto_update_done_message: TextStyle,

crates/vim/Cargo.toml

@@ -33,6 +33,7 @@ search = { path = "../search" }
 settings = { path = "../settings" }
 workspace = { path = "../workspace" }
 theme = { path = "../theme" }
+language_selector = { path = "../language_selector"}
 
 [dev-dependencies]
 indoc.workspace = true

crates/vim/src/mode_indicator.rs

@@ -40,7 +40,10 @@ impl View for ModeIndicator {
             Mode::Visual { line: false } => "-- VISUAL --",
             Mode::Visual { line: true } => "VISUAL LINE ",
         };
-        Label::new(text, theme.vim_mode_indicator.clone()).into_any()
+        Label::new(text, theme.vim_mode_indicator.text.clone())
+            .contained()
+            .with_style(theme.vim_mode_indicator.container)
+            .into_any()
     }
 }
 

crates/vim/src/vim.rs

@@ -289,9 +289,8 @@ impl Vim {
                                     Some(cx.add_view(|_| ModeIndicator::new(vim.state.mode)));
                             };
                             let mode_indicator = vim.mode_indicator.as_ref().unwrap();
-                            // TODO: would it be better to depend on the diagnostics crate
-                            // so we can pass the type directly?
-                            let position = status_bar.position_of_named_item("DiagnosticIndicator");
+                            let position = status_bar
+                                .position_of_item::<language_selector::ActiveBufferLanguage>();
                             if let Some(position) = position {
                                 status_bar.insert_item_after(position, mode_indicator.clone(), cx)
                             } else {

crates/workspace/src/status_bar.rs

@@ -107,17 +107,13 @@ impl StatusBar {
     where
         T: StatusItemView,
     {
-        self.position_of_named_item(T::ui_name())
-    }
-
-    pub fn position_of_named_item(&self, name: &str) -> Option<usize> {
         for (index, item) in self.left_items.iter().enumerate() {
-            if item.as_ref().ui_name() == name {
+            if item.as_ref().ui_name() == T::ui_name() {
                 return Some(index);
             }
         }
         for (index, item) in self.right_items.iter().enumerate() {
-            if item.as_ref().ui_name() == name {
+            if item.as_ref().ui_name() == T::ui_name() {
                 return Some(index + self.left_items.len());
             }
         }

styles/src/style_tree/status_bar.ts

@@ -1,6 +1,8 @@
 import { background, border, foreground, text } from "./components"
 import { interactive, toggleable } from "../element"
 import { useTheme } from "../common"
+import { text_button } from "../component/text_button"
+
 export default function status_bar(): any {
     const theme = useTheme()
 
@@ -26,21 +28,16 @@ export default function status_bar(): any {
             right: 6,
         },
         border: border(layer, { top: true, overlay: true }),
-        cursor_position: text(layer, "sans", "variant"),
-        vim_mode_indicator: text(layer, "mono", "variant"),
-        active_language: interactive({
-            base: {
-                padding: { left: 6, right: 6 },
-                ...text(layer, "sans", "variant"),
-            },
-            state: {
-                hovered: {
-                    ...text(layer, "sans", "on"),
-                },
-            },
+        cursor_position: text(layer, "sans", "variant", { size: "xs" }),
+        vim_mode_indicator: {
+            margin: { left: 6 },
+            ...text(layer, "mono", "variant", { size: "xs" }),
+        },
+        active_language: text_button({
+            color: "variant"
         }),
-        auto_update_progress_message: text(layer, "sans", "variant"),
-        auto_update_done_message: text(layer, "sans", "variant"),
+        auto_update_progress_message: text(layer, "sans", "variant", { size: "xs" }),
+        auto_update_done_message: text(layer, "sans", "variant", { size: "xs" }),
         lsp_status: interactive({
             base: {
                 ...diagnostic_status_container,
@@ -60,9 +57,9 @@ export default function status_bar(): any {
         }),
         diagnostic_message: interactive({
             base: {
-                ...text(layer, "sans"),
+                ...text(layer, "sans", { size: "xs" }),
             },
-            state: { hovered: text(layer, "sans", "hovered") },
+            state: { hovered: text(layer, "sans", "hovered", { size: "xs" }) },
         }),
         diagnostic_summary: interactive({
             base: {
@@ -118,7 +115,7 @@ export default function status_bar(): any {
                         icon_color: foreground(layer, "variant"),
                         label: {
                             margin: { left: 6 },
-                            ...text(layer, "sans", { size: "sm" }),
+                            ...text(layer, "sans", { size: "xs" }),
                         },
                     },
                     state: {