update UI

kdash-rs · Jan 15, 2024 · 9bbe7c7 · 9bbe7c7
1 parent fe68df0
commit 9bbe7c7
Show file tree

Hide file tree

Showing 4 changed files with 74 additions and 42 deletions.
diff --git a/src/banner.rs b/src/banner.rs
@@ -1,6 +1,8 @@
-pub const BANNER: &str = r"  _  ______            _
- | |/ /  _ \  __ _ ___| |__
- | ' /| | | |/ _` / __| '_ \
- | . \| |_| | (_| \__ \ | | |
- |_|\_\____/ \__,_|___/_| |_|
+pub const BANNER: &str = r"
+██╗  ██╗     
+██║ ██╔╝     
+█████╔╝█████╗
+██╔═██╗╚════╝
+██║  ██╗     
+╚═╝  ╚═╝          
 ";
diff --git a/src/ui/mod.rs b/src/ui/mod.rs
@@ -5,6 +5,7 @@ pub mod utils;
 
 use ratatui::{
   layout::{Alignment, Constraint, Rect},
+  style::Modifier,
   text::{Line, Span, Text},
   widgets::{Block, Borders, Paragraph, Tabs, Wrap},
   Frame,
@@ -14,8 +15,8 @@ use self::{
   help::draw_help,
   overview::draw_overview,
   utils::{
-    horizontal_chunks_with_margin, layout_block, style_default, style_failure, style_help,
-    style_main_background, style_primary, style_secondary, title_style_logo, vertical_chunks,
+    horizontal_chunks_with_margin, style_default, style_failure, style_header, style_header_text,
+    style_help, style_main_background, style_primary, style_secondary, vertical_chunks,
   },
 };
 use crate::app::{
@@ -32,20 +33,29 @@ pub fn draw(f: &mut Frame<'_>, app: &mut App) {
   let chunks = if !app.api_error.is_empty() {
     let chunks = vertical_chunks(
       vec![
-        Constraint::Length(3),
-        Constraint::Length(3),
-        Constraint::Min(0),
+        Constraint::Length(1), // title
+        Constraint::Length(3), // header tabs
+        Constraint::Length(3), // error
+        Constraint::Min(0),    // main tabs
       ],
       f.size(),
     );
-    draw_app_error(f, app, chunks[1]);
+    draw_app_error(f, app, chunks[2]);
     chunks
   } else {
-    vertical_chunks(vec![Constraint::Length(3), Constraint::Min(0)], f.size())
+    vertical_chunks(
+      vec![
+        Constraint::Length(1), // title
+        Constraint::Length(3), // header tabs
+        Constraint::Min(0),    // main tabs
+      ],
+      f.size(),
+    )
   };
 
-  // draw header and logo
-  draw_app_header(f, app, chunks[0]);
+  draw_app_title(f, app, chunks[0]);
+  // draw header tabs amd text
+  draw_app_header(f, app, chunks[1]);
 
   let last_chunk = chunks[chunks.len() - 1];
   match app.get_current_route().id {
@@ -64,6 +74,37 @@ pub fn draw(f: &mut Frame<'_>, app: &mut App) {
   }
 }
 
+fn draw_app_title(f: &mut Frame<'_>, app: &App, area: Rect) {
+  let title = Paragraph::new(Span::styled(
+    app.title,
+    style_header_text(app.light_theme).add_modifier(Modifier::BOLD),
+  ))
+  .style(style_header())
+  .block(Block::default())
+  .alignment(Alignment::Left);
+  f.render_widget(title, area);
+
+  let text = format!(
+    "v{} with ♥ in Rust {}",
+    env!("CARGO_PKG_VERSION"),
+    nw_loading_indicator(app.is_loading)
+  );
+
+  let meta = Paragraph::new(Span::styled(text, style_header_text(app.light_theme)))
+    .style(style_header())
+    .block(Block::default())
+    .alignment(Alignment::Right);
+  f.render_widget(meta, area);
+}
+
+fn nw_loading_indicator<'a>(loading: bool) -> &'a str {
+  if loading {
+    "..."
+  } else {
+    ""
+  }
+}
+
 fn draw_app_header(f: &mut Frame<'_>, app: &App, area: Rect) {
   let chunks =
     horizontal_chunks_with_margin(vec![Constraint::Length(60), Constraint::Min(0)], area, 1);
@@ -75,7 +116,7 @@ fn draw_app_header(f: &mut Frame<'_>, app: &App, area: Rect) {
     .map(|t| Line::from(Span::styled(&t.title, style_default(app.light_theme))))
     .collect();
   let tabs = Tabs::new(titles)
-    .block(layout_block(title_style_logo(app.title, app.light_theme)))
+    .block(Block::default().borders(Borders::ALL))
     .highlight_style(style_secondary(app.light_theme))
     .select(app.main_tabs.index);
 

diff --git a/src/ui/overview.rs b/src/ui/overview.rs
@@ -35,10 +35,10 @@ pub fn draw_overview(f: &mut Frame<'_>, app: &mut App, area: Rect) {
 fn draw_status_block(f: &mut Frame<'_>, app: &mut App, area: Rect) {
   let chunks = horizontal_chunks(
     vec![
-      Constraint::Length(35),
+      Constraint::Length(45),
       Constraint::Min(10),
       Constraint::Length(30),
-      Constraint::Length(32),
+      Constraint::Length(15),
     ],
     area,
   );
@@ -105,15 +105,8 @@ fn draw_filter_block(f: &mut Frame<'_>, app: &App, area: Rect) {
 
 fn draw_logo_block(f: &mut Frame<'_>, app: &App, area: Rect) {
   // Banner text with correct styling
-  let text = format!(
-    "{}\n v{} with ♥ in Rust {}",
-    BANNER,
-    env!("CARGO_PKG_VERSION"),
-    nw_loading_indicator(app.is_loading)
-  );
-  let mut text = Text::from(text);
+  let mut text = Text::from(BANNER);
   text.patch_style(style_logo(app.light_theme));
-
   // Contains the banner
   let paragraph = Paragraph::new(text).block(Block::default().borders(Borders::ALL));
   f.render_widget(paragraph, area);
@@ -231,14 +224,6 @@ fn get_nm_ratio(node_metrics: &[KubeNodeMetrics], f: fn(b: &KubeNodeMetrics) ->
   }
 }
 
-fn nw_loading_indicator<'a>(loading: bool) -> &'a str {
-  if loading {
-    "..."
-  } else {
-    ""
-  }
-}
-
 #[cfg(test)]
 mod tests {
   use super::*;

diff --git a/src/ui/utils.rs b/src/ui/utils.rs
@@ -33,8 +33,10 @@ pub const COLOR_GREEN: Color = Color::Rgb(72, 213, 150);
 pub const COLOR_RED: Color = Color::Rgb(249, 167, 164);
 pub const COLOR_ORANGE: Color = Color::Rgb(255, 170, 66);
 pub const COLOR_WHITE: Color = Color::Rgb(255, 255, 255);
+pub const COLOR_MAGENTA: Color = Color::Rgb(199, 146, 234);
+pub const COLOR_DARK_GRAY: Color = Color::Rgb(50, 50, 50);
 // light theme colors
-pub const COLOR_MAGENTA: Color = Color::Rgb(139, 0, 139);
+pub const COLOR_MAGENTA_DARK: Color = Color::Rgb(153, 26, 237);
 pub const COLOR_GRAY: Color = Color::Rgb(91, 87, 87);
 pub const COLOR_BLUE: Color = Color::Rgb(0, 82, 163);
 pub const COLOR_GREEN_DARK: Color = Color::Rgb(20, 97, 73);
@@ -84,6 +86,7 @@ fn get_yaml_themes() -> &'static YamlThemes {
 #[derive(Debug, PartialEq, Eq, Hash, PartialOrd, Ord)]
 pub enum Styles {
   Default,
+  Header,
   Logo,
   Failure,
   Warning,
@@ -98,12 +101,13 @@ pub fn theme_styles(light: bool) -> BTreeMap<Styles, Style> {
   if light {
     BTreeMap::from([
       (Styles::Default, Style::default().fg(COLOR_GRAY)),
+      (Styles::Header, Style::default().fg(COLOR_DARK_GRAY)),
       (Styles::Logo, Style::default().fg(COLOR_GREEN_DARK)),
       (Styles::Failure, Style::default().fg(COLOR_RED_DARK)),
       (Styles::Warning, Style::default().fg(COLOR_ORANGE_DARK)),
       (Styles::Success, Style::default().fg(COLOR_GREEN_DARK)),
       (Styles::Primary, Style::default().fg(COLOR_BLUE)),
-      (Styles::Secondary, Style::default().fg(COLOR_MAGENTA)),
+      (Styles::Secondary, Style::default().fg(COLOR_MAGENTA_DARK)),
       (Styles::Help, Style::default().fg(COLOR_BLUE)),
       (
         Styles::Background,
@@ -113,6 +117,7 @@ pub fn theme_styles(light: bool) -> BTreeMap<Styles, Style> {
   } else {
     BTreeMap::from([
       (Styles::Default, Style::default().fg(COLOR_WHITE)),
+      (Styles::Header, Style::default().fg(COLOR_DARK_GRAY)),
       (Styles::Logo, Style::default().fg(COLOR_GREEN)),
       (Styles::Failure, Style::default().fg(COLOR_RED)),
       (Styles::Warning, Style::default().fg(COLOR_ORANGE)),
@@ -132,13 +137,12 @@ pub fn title_style(txt: &str) -> Span<'_> {
   Span::styled(txt, style_bold())
 }
 
-pub fn title_style_logo(txt: &str, light: bool) -> Span<'_> {
-  Span::styled(
-    txt,
-    style_logo(light)
-      .add_modifier(Modifier::BOLD)
-      .add_modifier(Modifier::ITALIC),
-  )
+pub fn style_header_text(light: bool) -> Style {
+  *theme_styles(light).get(&Styles::Header).unwrap()
+}
+
+pub fn style_header() -> Style {
+  Style::default().bg(COLOR_MAGENTA)
 }
 
 pub fn style_bold() -> Style {