From d06800f1dd47315f5738c529d40d1e0952ee2115 Mon Sep 17 00:00:00 2001 From: Mathspy Date: Thu, 30 Jun 2022 05:26:00 -0400 Subject: [PATCH] Add mode specific styles (#2676) * Add mode specific styles In similar vein to neovim's lualine and similar statusline packages this allows helix users to style their mode based on which mode it is thus making each mode more visually distinct at a glance * Add an example based on rosepine * Add editor.colors-mode config * Document statusline mode styles --- book/src/configuration.md | 1 + book/src/themes.md | 7 +++++-- helix-term/src/ui/editor.rs | 21 ++++++++++++++------- helix-view/src/editor.rs | 3 +++ runtime/themes/rose_pine.toml | 3 +++ 5 files changed, 26 insertions(+), 9 deletions(-) diff --git a/book/src/configuration.md b/book/src/configuration.md index af85379f..1cc8602a 100644 --- a/book/src/configuration.md +++ b/book/src/configuration.md @@ -46,6 +46,7 @@ hidden = false | `auto-info` | Whether to display infoboxes | `true` | | `true-color` | Set to `true` to override automatic detection of terminal truecolor support in the event of a false negative. | `false` | | `rulers` | List of column positions at which to display the rulers. Can be overridden by language specific `rulers` in `languages.toml` file. | `[]` | +| `color-modes` | Whether to color the mode indicator with different colors depending on the mode itself | `false` | ### `[editor.lsp]` Section diff --git a/book/src/themes.md b/book/src/themes.md index 6c6393de..06f920d3 100644 --- a/book/src/themes.md +++ b/book/src/themes.md @@ -219,6 +219,9 @@ These scopes are used for theming the editor interface. | `ui.linenr.selected` | Line number for the line the cursor is on | | `ui.statusline` | Statusline | | `ui.statusline.inactive` | Statusline (unfocused document) | +| `ui.statusline.normal` | Statusline mode during normal mode ([only if `editor.color-modes` is enabled][editor-section]) | +| `ui.statusline.insert` | Statusline mode during insert mode ([only if `editor.color-modes` is enabled][editor-section]) | +| `ui.statusline.select` | Statusline mode during select mode ([only if `editor.color-modes` is enabled][editor-section]) | | `ui.popup` | Documentation popups (e.g space-k) | | `ui.popup.info` | Prompt for multiple key options | | `ui.window` | Border lines separating splits | @@ -226,7 +229,7 @@ These scopes are used for theming the editor interface. | `ui.text` | Command prompts, popup text, etc. | | `ui.text.focus` | | | `ui.text.info` | The key: command text in `ui.popup.info` boxes | -| `ui.virtual.ruler` | Ruler columns (see the [`editor.rulers` config][rulers-config])| +| `ui.virtual.ruler` | Ruler columns (see the [`editor.rulers` config][editor-section])| | `ui.virtual.whitespace` | Visible white-space characters | | `ui.virtual.indent-guide` | Vertical indent width guides | | `ui.menu` | Code and command completion menus | @@ -246,4 +249,4 @@ These scopes are used for theming the editor interface. | `diagnostic.warning` | Diagnostics warning (editing area) | | `diagnostic.error` | Diagnostics error (editing area) | -[rulers-config]: ./configuration.md#editor-section +[editor-section]: ./configuration.md#editor-section diff --git a/helix-term/src/ui/editor.rs b/helix-term/src/ui/editor.rs index 948803eb..a7c67a21 100644 --- a/helix-term/src/ui/editor.rs +++ b/helix-term/src/ui/editor.rs @@ -161,7 +161,7 @@ impl EditorView { .area .clip_top(view.area.height.saturating_sub(1)) .clip_bottom(1); // -1 from bottom to remove commandline - self.render_statusline(doc, view, statusline_area, surface, theme, is_focused); + self.render_statusline(editor, doc, view, statusline_area, surface, is_focused); } pub fn render_rulers( @@ -732,11 +732,11 @@ impl EditorView { pub fn render_statusline( &self, + editor: &Editor, doc: &Document, view: &View, viewport: Rect, surface: &mut Surface, - theme: &Theme, is_focused: bool, ) { use tui::text::{Span, Spans}; @@ -745,10 +745,11 @@ impl EditorView { // Left side of the status line. //------------------------------- - let mode = match doc.mode() { - Mode::Insert => "INS", - Mode::Select => "SEL", - Mode::Normal => "NOR", + let theme = &editor.theme; + let (mode, mode_style) = match doc.mode() { + Mode::Insert => (" INS ", theme.get("ui.statusline.insert")), + Mode::Select => (" SEL ", theme.get("ui.statusline.select")), + Mode::Normal => (" NOR ", theme.get("ui.statusline.normal")), }; let progress = doc .language_server() @@ -767,7 +768,13 @@ impl EditorView { // statusline surface.set_style(viewport.with_height(1), base_style); if is_focused { - surface.set_string(viewport.x + 1, viewport.y, mode, base_style); + let color_modes = editor.config().color_modes; + surface.set_string( + viewport.x, + viewport.y, + mode, + if color_modes { mode_style } else { base_style }, + ); } surface.set_string(viewport.x + 5, viewport.y, progress, base_style); diff --git a/helix-view/src/editor.rs b/helix-view/src/editor.rs index c160dd37..1ed27e99 100644 --- a/helix-view/src/editor.rs +++ b/helix-view/src/editor.rs @@ -161,6 +161,8 @@ pub struct Config { pub whitespace: WhitespaceConfig, /// Vertical indent width guides. pub indent_guides: IndentGuidesConfig, + /// Whether to color modes with different colors. Defaults to `false`. + pub color_modes: bool, } #[derive(Debug, Default, Clone, PartialEq, Serialize, Deserialize)] @@ -414,6 +416,7 @@ impl Default for Config { rulers: Vec::new(), whitespace: WhitespaceConfig::default(), indent_guides: IndentGuidesConfig::default(), + color_modes: false, } } } diff --git a/runtime/themes/rose_pine.toml b/runtime/themes/rose_pine.toml index 09b1e25c..fd53abd5 100644 --- a/runtime/themes/rose_pine.toml +++ b/runtime/themes/rose_pine.toml @@ -9,6 +9,9 @@ "ui.selection" = { bg = "highlight" } "comment" = "subtle" "ui.statusline" = {fg = "foam", bg = "surface" } +"ui.statusline.insert" = {fg = "base", bg = "foam", modifiers = ["bold"]} +"ui.statusline.normal" = {fg = "base", bg = "rose", modifiers = ["bold"]} +"ui.statusline.select" = {fg = "base", bg = "iris", modifiers = ["bold"]} "ui.statusline.inactive" = { fg = "iris", bg = "surface" } "ui.cursor" = { fg = "rose", modifiers = ["reversed"] } "ui.text" = { fg = "text" }