Right align scrollbar with track in completion popup (#2754)

- Align the scollbar to the right edge of the popup rather than at
  a margin of one.
- Add a scrollbar track and a new scope `ui.menu.scroll`.
pull/2890/head
Gokul Soumya 2 years ago committed by GitHub
parent c113531db9
commit a26943de4e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -231,6 +231,7 @@ These scopes are used for theming the editor interface.
| `ui.virtual.indent-guide` | Vertical indent width guides |
| `ui.menu` | Code and command completion menus |
| `ui.menu.selected` | Selected autocomplete item |
| `ui.menu.scroll` | `fg` sets thumb color, `bg` sets track color of scrollbar |
| `ui.selection` | For selections in the editing area |
| `ui.selection.primary` | |
| `warning` | Diagnostics warning (gutter) |

@ -310,7 +310,7 @@ impl<T: Item + 'static> Component for Menu<T> {
use tui::widgets::TableState;
table.render_table(
area.clip_left(Self::LEFT_PADDING as u16),
area.clip_left(Self::LEFT_PADDING as u16).clip_right(1),
surface,
&mut TableState {
offset: scroll,
@ -320,20 +320,32 @@ impl<T: Item + 'static> Component for Menu<T> {
if let Some(cursor) = self.cursor {
let offset_from_top = cursor - scroll;
let cell = &mut surface[(area.x, area.y + offset_from_top as u16)];
cell.set_style(selected);
let left = &mut surface[(area.left(), area.y + offset_from_top as u16)];
left.set_style(selected);
let right = &mut surface[(
area.right().saturating_sub(1),
area.y + offset_from_top as u16,
)];
right.set_style(selected);
}
let fits = len <= win_height;
let scroll_style = theme.get("ui.menu.scroll");
for (i, _) in (scroll..(scroll + win_height).min(len)).enumerate() {
let cell = &mut surface[(area.x + area.width - 1, area.y + i as u16)];
if !fits {
// Draw scroll track
cell.set_symbol("▐"); // right half block
cell.set_fg(scroll_style.bg.unwrap_or(helix_view::theme::Color::Reset));
}
let is_marked = i >= scroll_line && i < scroll_line + scroll_height;
if !fits && is_marked {
let cell = &mut surface[(area.x + area.width - 2, area.y + i as u16)];
cell.set_symbol("▐");
// cell.set_style(selected);
// cell.set_style(if is_marked { selected } else { style });
// Draw scroll thumb
cell.set_fg(scroll_style.fg.unwrap_or(helix_view::theme::Color::Reset));
}
}
}

@ -73,6 +73,7 @@ diagnostic = { modifiers = ["underlined"] }
"ui.window" = { bg = "gray" }
"ui.menu" = { fg = "white", bg = "gray" }
"ui.menu.selected" = { fg = "black", bg = "blue" }
"ui.menu.scroll" = { fg = "white", bg = "light-gray" }
[palette]

@ -69,6 +69,7 @@ label = "honey"
"ui.menu" = { fg = "lavender", bg = "revolver" }
"ui.menu.selected" = { fg = "revolver", bg = "white" }
"ui.menu.scroll" = { fg = "lavender", bg = "comet" }
diagnostic = { modifiers = ["underlined"] }
# "diagnostic.hint" = { fg = "revolver", bg = "lilac" }

Loading…
Cancel
Save