ui: Refactor styling a bit, ensure infobox is stylable

This commit is contained in:
Blaž Hrastnik 2021-08-20 10:58:44 +09:00
parent cbd39d67a4
commit 68626b8f78
3 changed files with 13 additions and 11 deletions

View file

@ -6,7 +6,8 @@ use tui::widgets::{Block, Borders, Paragraph, Widget};
impl Component for Info { impl Component for Info {
fn render(&mut self, viewport: Rect, surface: &mut Surface, cx: &mut Context) { fn render(&mut self, viewport: Rect, surface: &mut Surface, cx: &mut Context) {
let style = cx.editor.theme.get("ui.popup"); let text_style = cx.editor.theme.get("ui.text.focus");
let popup_style = text_style.patch(cx.editor.theme.get("ui.popup"));
// Calculate the area of the terminal to modify. Because we want to // Calculate the area of the terminal to modify. Because we want to
// render at the bottom right, we use the viewport's width and height // render at the bottom right, we use the viewport's width and height
@ -19,12 +20,12 @@ impl Component for Info {
width, width,
height, height,
)); ));
surface.clear_with(area, style); surface.clear_with(area, popup_style);
let block = Block::default() let block = Block::default()
.title(self.title.as_str()) .title(self.title.as_str())
.borders(Borders::ALL) .borders(Borders::ALL)
.border_style(style); .border_style(popup_style);
let margin = Margin { let margin = Margin {
vertical: 0, vertical: 0,
@ -33,6 +34,8 @@ impl Component for Info {
let inner = block.inner(area).inner(&margin); let inner = block.inner(area).inner(&margin);
block.render(area, surface); block.render(area, surface);
Paragraph::new(self.text.as_str()).render(inner, surface); Paragraph::new(self.text.as_str())
.style(text_style)
.render(inner, surface);
} }
} }

View file

@ -284,7 +284,8 @@ const BASE_WIDTH: u16 = 30;
impl Prompt { impl Prompt {
pub fn render_prompt(&self, area: Rect, surface: &mut Surface, cx: &mut Context) { pub fn render_prompt(&self, area: Rect, surface: &mut Surface, cx: &mut Context) {
let theme = &cx.editor.theme; let theme = &cx.editor.theme;
let text_color = theme.get("ui.text.focus"); let prompt_color = theme.get("ui.text");
let completion_color = theme.get("ui.statusline");
let selected_color = theme.get("ui.menu.selected"); let selected_color = theme.get("ui.menu.selected");
// completion // completion
@ -326,15 +327,13 @@ impl Prompt {
let mut row = 0; let mut row = 0;
let mut col = 0; let mut col = 0;
// TODO: paginate
for (i, (_range, completion)) in for (i, (_range, completion)) in
self.completion.iter().enumerate().skip(offset).take(items) self.completion.iter().enumerate().skip(offset).take(items)
{ {
let color = if Some(i) == self.selection { let color = if Some(i) == self.selection {
// Style::default().bg(Color::Rgb(104, 60, 232))
selected_color // TODO: just invert bg selected_color // TODO: just invert bg
} else { } else {
text_color completion_color
}; };
surface.set_stringn( surface.set_stringn(
area.x + col * (1 + col_width), area.x + col * (1 + col_width),
@ -377,12 +376,12 @@ impl Prompt {
let line = area.height - 1; let line = area.height - 1;
// render buffer text // render buffer text
surface.set_string(area.x, area.y + line, &self.prompt, text_color); surface.set_string(area.x, area.y + line, &self.prompt, prompt_color);
surface.set_string( surface.set_string(
area.x + self.prompt.len() as u16, area.x + self.prompt.len() as u16,
area.y + line, area.y + line,
&self.line, &self.line,
text_color, prompt_color,
); );
} }
} }

View file

@ -42,7 +42,7 @@ module = "#ff0000"
"ui.help" = { bg = "#7958DC", fg = "#171452" } "ui.help" = { bg = "#7958DC", fg = "#171452" }
"ui.text" = { fg = "lavender" } "ui.text" = { fg = "lavender" }
"ui.text.focus" = { fg = "lilac" } "ui.text.focus" = { fg = "white" }
"ui.selection" = { bg = "#540099" } "ui.selection" = { bg = "#540099" }
"ui.selection.primary" = { bg = "#540099" } "ui.selection.primary" = { bg = "#540099" }