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
pull/2921/head
Mathspy 2 years ago committed by GitHub
parent ed89f8897e
commit d06800f1dd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -46,6 +46,7 @@ hidden = false
| `auto-info` | Whether to display infoboxes | `true` | | `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` | | `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. | `[]` | | `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 ### `[editor.lsp]` Section

@ -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.linenr.selected` | Line number for the line the cursor is on |
| `ui.statusline` | Statusline | | `ui.statusline` | Statusline |
| `ui.statusline.inactive` | Statusline (unfocused document) | | `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` | Documentation popups (e.g space-k) |
| `ui.popup.info` | Prompt for multiple key options | | `ui.popup.info` | Prompt for multiple key options |
| `ui.window` | Border lines separating splits | | `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` | Command prompts, popup text, etc. |
| `ui.text.focus` | | | `ui.text.focus` | |
| `ui.text.info` | The key: command text in `ui.popup.info` boxes | | `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.whitespace` | Visible white-space characters |
| `ui.virtual.indent-guide` | Vertical indent width guides | | `ui.virtual.indent-guide` | Vertical indent width guides |
| `ui.menu` | Code and command completion menus | | `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.warning` | Diagnostics warning (editing area) |
| `diagnostic.error` | Diagnostics error (editing area) | | `diagnostic.error` | Diagnostics error (editing area) |
[rulers-config]: ./configuration.md#editor-section [editor-section]: ./configuration.md#editor-section

@ -161,7 +161,7 @@ impl EditorView {
.area .area
.clip_top(view.area.height.saturating_sub(1)) .clip_top(view.area.height.saturating_sub(1))
.clip_bottom(1); // -1 from bottom to remove commandline .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( pub fn render_rulers(
@ -732,11 +732,11 @@ impl EditorView {
pub fn render_statusline( pub fn render_statusline(
&self, &self,
editor: &Editor,
doc: &Document, doc: &Document,
view: &View, view: &View,
viewport: Rect, viewport: Rect,
surface: &mut Surface, surface: &mut Surface,
theme: &Theme,
is_focused: bool, is_focused: bool,
) { ) {
use tui::text::{Span, Spans}; use tui::text::{Span, Spans};
@ -745,10 +745,11 @@ impl EditorView {
// Left side of the status line. // Left side of the status line.
//------------------------------- //-------------------------------
let mode = match doc.mode() { let theme = &editor.theme;
Mode::Insert => "INS", let (mode, mode_style) = match doc.mode() {
Mode::Select => "SEL", Mode::Insert => (" INS ", theme.get("ui.statusline.insert")),
Mode::Normal => "NOR", Mode::Select => (" SEL ", theme.get("ui.statusline.select")),
Mode::Normal => (" NOR ", theme.get("ui.statusline.normal")),
}; };
let progress = doc let progress = doc
.language_server() .language_server()
@ -767,7 +768,13 @@ impl EditorView {
// statusline // statusline
surface.set_style(viewport.with_height(1), base_style); surface.set_style(viewport.with_height(1), base_style);
if is_focused { 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); surface.set_string(viewport.x + 5, viewport.y, progress, base_style);

@ -161,6 +161,8 @@ pub struct Config {
pub whitespace: WhitespaceConfig, pub whitespace: WhitespaceConfig,
/// Vertical indent width guides. /// Vertical indent width guides.
pub indent_guides: IndentGuidesConfig, 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)] #[derive(Debug, Default, Clone, PartialEq, Serialize, Deserialize)]
@ -414,6 +416,7 @@ impl Default for Config {
rulers: Vec::new(), rulers: Vec::new(),
whitespace: WhitespaceConfig::default(), whitespace: WhitespaceConfig::default(),
indent_guides: IndentGuidesConfig::default(), indent_guides: IndentGuidesConfig::default(),
color_modes: false,
} }
} }
} }

@ -9,6 +9,9 @@
"ui.selection" = { bg = "highlight" } "ui.selection" = { bg = "highlight" }
"comment" = "subtle" "comment" = "subtle"
"ui.statusline" = {fg = "foam", bg = "surface" } "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.statusline.inactive" = { fg = "iris", bg = "surface" }
"ui.cursor" = { fg = "rose", modifiers = ["reversed"] } "ui.cursor" = { fg = "rose", modifiers = ["reversed"] }
"ui.text" = { fg = "text" } "ui.text" = { fg = "text" }

Loading…
Cancel
Save