From 346c2af86dcc5f3a7b0c33da723cc3aff5bb0b98 Mon Sep 17 00:00:00 2001 From: wiru Date: Thu, 18 Apr 2024 23:28:13 -0300 Subject: [PATCH] feat: adding ayu as the main applicaiton theme --- colors/src/colors.rs | 108 +++++++++----------- tui/src/components/dashboard/dashboard.rs | 93 +++++++++++------ tui/src/components/dashboard/schema_list.rs | 19 ++-- 3 files changed, 113 insertions(+), 107 deletions(-) diff --git a/colors/src/colors.rs b/colors/src/colors.rs index 64c6dc1..5ae38c3 100644 --- a/colors/src/colors.rs +++ b/colors/src/colors.rs @@ -1,11 +1,10 @@ use crossterm::style::Color; -#[derive(Debug)] +#[derive(Debug, Default)] pub struct Colors { pub primary: PrimaryColors, pub normal: NormalColors, pub bright: BrightColors, - pub cursor_line: Color, } #[derive(Debug)] @@ -40,21 +39,6 @@ pub struct BrightColors { pub white: Color, } -impl Default for Colors { - fn default() -> Self { - Colors { - primary: Default::default(), - normal: Default::default(), - bright: Default::default(), - cursor_line: Color::Rgb { - r: 0xE1, - g: 0xC5, - b: 0x8D, - }, - } - } -} - impl Default for PrimaryColors { fn default() -> Self { PrimaryColors { @@ -86,44 +70,44 @@ impl Default for NormalColors { fn default() -> Self { NormalColors { black: Color::Rgb { - r: 0x0B, - g: 0x0E, - b: 0x14, + r: 0x03, + g: 0x03, + b: 0x03, }, red: Color::Rgb { - r: 0xF8, - g: 0x70, - b: 0x70, + r: 0xD9, + g: 0x57, + b: 0x57, }, green: Color::Rgb { - r: 0x36, - g: 0xC6, - b: 0x92, + r: 0xAA, + g: 0xd9, + b: 0x4C, }, yellow: Color::Rgb { - r: 0xE1, - g: 0xC5, - b: 0x8D, + r: 0xE6, + g: 0xB4, + b: 0x50, }, blue: Color::Rgb { - r: 0x5F, - g: 0xB0, - b: 0xFC, + r: 0x59, + g: 0xBA, + b: 0xE6, }, magenta: Color::Rgb { - r: 0xB7, - g: 0x7E, - b: 0xE0, + r: 0x6C, + g: 0x59, + b: 0x80, }, cyan: Color::Rgb { - r: 0x54, - g: 0xCE, - b: 0xD6, + r: 0x95, + g: 0xE6, + b: 0xCB, }, white: Color::Rgb { - r: 0xCE, - g: 0xCE, - b: 0xCE, + r: 0xBF, + g: 0xBD, + b: 0xB6, }, } } @@ -133,9 +117,9 @@ impl Default for BrightColors { fn default() -> Self { BrightColors { black: Color::Rgb { - r: 0x51, - g: 0x5C, - b: 0x68, + r: 0x11, + g: 0x15, + b: 0x1C, }, red: Color::Rgb { r: 0xFB, @@ -143,34 +127,34 @@ impl Default for BrightColors { b: 0x73, }, green: Color::Rgb { - r: 0x79, - g: 0xDC, - b: 0xAA, + r: 0x7F, + g: 0xD9, + b: 0x4C, }, yellow: Color::Rgb { - r: 0xFF, - g: 0xE5, - b: 0x9E, + r: 0xE6, + g: 0xB6, + b: 0x73, }, blue: Color::Rgb { - r: 0x7A, - g: 0xB0, - b: 0xDF, + r: 0x73, + g: 0xB8, + b: 0xFF, }, magenta: Color::Rgb { - r: 0xC3, - g: 0x97, - b: 0xD8, + r: 0xD2, + g: 0xA6, + b: 0xFF, }, cyan: Color::Rgb { - r: 0x70, - g: 0xC0, - b: 0xBA, + r: 0x95, + g: 0xE6, + b: 0xCB, }, white: Color::Rgb { - r: 0xFF, - g: 0xFF, - b: 0xFF, + r: 0xFC, + g: 0xFC, + b: 0xFC, }, } } diff --git a/tui/src/components/dashboard/dashboard.rs b/tui/src/components/dashboard/dashboard.rs index a7569b4..2010c9e 100644 --- a/tui/src/components/dashboard/dashboard.rs +++ b/tui/src/components/dashboard/dashboard.rs @@ -14,7 +14,7 @@ use ratatui::{ layout::{Alignment, Constraint, Direction, Flex, Layout, Rect}, style::{Style, Stylize}, text::Line, - widgets::{Block, Borders, Clear, Padding, Paragraph, StatefulWidget, Widget, Wrap}, + widgets::{Block, Clear, Padding, Paragraph, StatefulWidget, Widget, Wrap}, Frame, }; use std::ops::{Div, Not}; @@ -75,7 +75,6 @@ impl<'a> Dashboard<'a> { filter: String::new(), sender: None, error_message: String::default(), - pane_focus: PaneFocus::List, }) } @@ -318,63 +317,83 @@ impl<'a> Dashboard<'a> { } fn build_hint_text(&self) -> Line<'static> { - "[j/k -> up/down] [n -> new] [enter -> select item] [? -> help] [q -> quit]" - .fg(self.colors.bright.black) + "[j/k -> up/down] [n -> new] [enter -> select item] [? -> help] [ -> quit]" + .fg(self.colors.normal.magenta) .to_centered_line() } - fn build_help_popup(&self) -> Paragraph<'_> { + fn make_overlay(&self, size: Rect) -> Paragraph<'_> { + let lines: Vec> = + vec!["助ける".repeat(size.width.into()).into(); size.height.into()]; + + Paragraph::new(lines) + .fg(self.colors.primary.hover) + .bg(self.colors.primary.background.into()) + .italic() + .bold() + } + + fn draw_help_popup(&self, size: Rect, frame: &mut Frame) { + frame.render_widget(Clear, size); + let overlay = self.make_overlay(size); + frame.render_widget(overlay, size); + let lines = vec![ Line::from(vec![ - "h/".fg(self.colors.normal.magenta), + "h/".fg(self.colors.bright.magenta), " - select left item".into(), ]), Line::from(vec![ - "j/".fg(self.colors.normal.magenta), + "j/".fg(self.colors.bright.magenta), " - select item below".into(), ]), Line::from(vec![ - "k/".fg(self.colors.normal.magenta), + "k/".fg(self.colors.bright.magenta), " - select item above".into(), ]), Line::from(vec![ - "l/".fg(self.colors.normal.magenta), + "l/".fg(self.colors.bright.magenta), " - select right item".into(), ]), Line::from(vec![ - "n/c".fg(self.colors.normal.magenta), + "n/c".fg(self.colors.bright.magenta), " - creates a new collection".into(), ]), Line::from(vec![ - "d".fg(self.colors.normal.magenta), + "d".fg(self.colors.bright.magenta), " - deletes the selected collection".into(), ]), Line::from(vec![ - "?".fg(self.colors.normal.magenta), + "?".fg(self.colors.bright.magenta), " - toggle this help window".into(), ]), Line::from(vec![ - "enter".fg(self.colors.normal.magenta), + "enter".fg(self.colors.bright.magenta), " - select item under cursor".into(), ]), Line::from(vec![ - "/".fg(self.colors.normal.magenta), + "/".fg(self.colors.bright.magenta), " - enter filter mode".into(), ]), Line::from(vec![ - "q".fg(self.colors.normal.magenta), - " - quits the application".into(), + "".fg(self.colors.bright.magenta), + " - quits the application".into(), ]), + Line::from(""), + Line::from("press any key to go back".fg(self.colors.normal.magenta)).centered(), ]; - Paragraph::new(lines).wrap(Wrap { trim: true }).block( - Block::default() - .title("Help") - .title_style(Style::default().fg(self.colors.normal.white.into())) - .borders(Borders::ALL) - .border_style(Style::default().fg(self.colors.bright.black.into())) - .padding(Padding::new(2, 2, 1, 1)) - .bg(self.colors.normal.black.into()), - ) + + frame.render_widget(Clear, self.layout.help_popup); + frame.render_widget( + Paragraph::new(lines).wrap(Wrap { trim: true }).block( + Block::default().padding(Padding::new(2, 2, 1, 1)).bg(self + .colors + .primary + .background + .into()), + ), + self.layout.help_popup, + ); } fn build_filter_input(&self) -> Line<'_> { @@ -384,7 +403,7 @@ impl<'a> Dashboard<'a> { fn build_title(&self) -> anyhow::Result> { let title = BigText::builder() .pixel_size(PixelSize::Quadrant) - .style(Style::default().fg(self.colors.normal.magenta.into())) + .style(Style::default().fg(self.colors.bright.magenta.into())) .lines(vec!["Select a collection".into()]) .alignment(Alignment::Center) .build()?; @@ -432,12 +451,21 @@ impl<'a> Dashboard<'a> { Ok((layout, empty_message)) } + + fn draw_background(&self, size: Rect, frame: &mut Frame) { + frame.render_widget(Clear, size); + frame.render_widget( + Block::default().bg(self.colors.primary.background.into()), + size, + ); + } } impl Component for Dashboard<'_> { - fn draw(&mut self, frame: &mut Frame, _: Rect) -> anyhow::Result<()> { - let title = self.build_title()?; + fn draw(&mut self, frame: &mut Frame, size: Rect) -> anyhow::Result<()> { + self.draw_background(size, frame); + let title = self.build_title()?; frame.render_widget(title, self.layout.title_pane); match (self.schemas.is_empty(), self.list_state.items.is_empty()) { @@ -482,9 +510,7 @@ impl Component for Dashboard<'_> { } if self.pane_focus == PaneFocus::Help { - Clear.render(self.layout.help_popup, frame.buffer_mut()); - let list_keymaps_popup = self.build_help_popup(); - list_keymaps_popup.render(self.layout.help_popup, frame.buffer_mut()); + self.draw_help_popup(size, frame); } if self.pane_focus == PaneFocus::Prompt { @@ -537,6 +563,7 @@ impl Component for Dashboard<'_> { } fn build_layout(size: Rect) -> DashboardLayout { + let size = Rect::new(size.x + 1, size.y, size.width - 1, size.height); let [top, help_pane] = Layout::default() .direction(Direction::Vertical) .constraints([Constraint::Fill(1), Constraint::Length(1)]) @@ -552,9 +579,9 @@ fn build_layout(size: Rect) -> DashboardLayout { .areas(top); let help_popup = Rect::new( - size.width / 4, + size.width.div(2).saturating_sub(25), size.height.div(2).saturating_sub(7), - size.width / 2, + 50, 14, ); let confirm_popup = Rect::new( diff --git a/tui/src/components/dashboard/schema_list.rs b/tui/src/components/dashboard/schema_list.rs index 0ed29ee..7ecba1d 100644 --- a/tui/src/components/dashboard/schema_list.rs +++ b/tui/src/components/dashboard/schema_list.rs @@ -6,8 +6,8 @@ use ratatui::{ layout::{Constraint, Direction, Flex, Layout, Rect}, style::{Style, Stylize}, widgets::{ - Block, BorderType, Borders, Paragraph, Scrollbar, ScrollbarOrientation, ScrollbarState, - StatefulWidget, Widget, + Block, BorderType, Borders, Clear, Paragraph, Scrollbar, ScrollbarOrientation, + ScrollbarState, StatefulWidget, Widget, }, }; @@ -87,18 +87,13 @@ impl<'a> SchemaList<'a> { fn build_card(&self, state: &SchemaListState, schema: &Schema, index: usize) -> Paragraph<'_> { let lines = vec![ - schema - .info - .name - .clone() - .fg(self.colors.normal.yellow) - .into(), + schema.info.name.clone().fg(self.colors.normal.white).into(), schema .info .description .clone() .unwrap_or_default() - .fg(self.colors.normal.white) + .fg(self.colors.bright.yellow) .into(), ]; @@ -106,9 +101,9 @@ impl<'a> SchemaList<'a> { .selected .is_some_and(|selected| selected.eq(&(index + state.scroll))) { - self.colors.normal.green + self.colors.bright.magenta } else { - self.colors.bright.black + self.colors.primary.hover }; Paragraph::new(lines).block( @@ -124,7 +119,7 @@ impl StatefulWidget for SchemaList<'_> { type State = SchemaListState; fn render(self, size: Rect, buf: &mut Buffer, state: &mut Self::State) { - let list_size = Rect::new(size.x, size.y, size.width.saturating_sub(1), size.height); + let list_size = Rect::new(size.x, size.y, size.width.saturating_sub(3), size.height); let scrollbar_size = Rect::new(size.width.saturating_sub(1), size.y, 1, size.height); let mut rects = self.build_layout(&list_size);