From db1aad13f5d981a3514643eacf4d4a96777ace9f Mon Sep 17 00:00:00 2001 From: Phani Pavan K Date: Thu, 9 Oct 2025 12:01:39 +0530 Subject: [PATCH] change layout and title --- src/main.rs | 3 +- src/ui/mod.rs | 89 ++++++++++++++++++++++++++++++--------------------- 2 files changed, 55 insertions(+), 37 deletions(-) diff --git a/src/main.rs b/src/main.rs index 0f33605..56816a7 100644 --- a/src/main.rs +++ b/src/main.rs @@ -109,7 +109,8 @@ fn runApp(app: &mut AppState, terminal: &mut Terminal) -> Result< app.screen = CurrentScreen::Main; app.currentlyEditing = None; } - (KeyModifiers::NONE, KeyCode::Tab) => app.nextField(), + (KeyModifiers::NONE, KeyCode::Tab | KeyCode::Right) => app.nextField(), + (KeyModifiers::NONE, KeyCode::Left) => app.prevField(), (KeyModifiers::SHIFT, KeyCode::Tab) => app.prevField(), (_, KeyCode::Char(v)) => { if let Some(e) = &app.currentlyEditing { diff --git a/src/ui/mod.rs b/src/ui/mod.rs index 89564ad..b4c8652 100644 --- a/src/ui/mod.rs +++ b/src/ui/mod.rs @@ -14,32 +14,39 @@ use crate::app::{AppState, status::EditingField}; use crate::ui::centeredRect::centered_rect; pub fn ui(frame: &mut Frame, app: &AppState) { - let chunks = Layout::default() - .direction(ratatui::layout::Direction::Vertical) - .constraints([ - Constraint::Length(3), - Constraint::Min(3), - Constraint::Length(3), - ]) + // Split entire body into left title+body and right screen+keybinds chunks + let screenChunks = Layout::default() + .direction(ratatui::layout::Direction::Horizontal) + .constraints([Constraint::Fill(5), Constraint::Fill(2)]) .split(frame.area()); - let footerChunks = Layout::default() - .direction(ratatui::layout::Direction::Horizontal) - .constraints([Constraint::Percentage(50), Constraint::Percentage(50)]) - .split(chunks[2]); + // Split left chunk into title and body + let titleBodyChunks = Layout::default() + .direction(ratatui::layout::Direction::Vertical) + .constraints([Constraint::Length(3), Constraint::Min(3)]) + .split(screenChunks[0]); + // Split right chunk into header and keybind area + let headerKeybindChunks = Layout::default() + .direction(ratatui::layout::Direction::Vertical) + .constraints([Constraint::Length(3), Constraint::Min(3)]) + .split(screenChunks[1]); + + // ------------------------ + // Create and add title block let titleBlock = Block::default() - .borders(Borders::ALL) + .borders(Borders::all()) .style(Style::default()); let title = Paragraph::new(Text::styled( - "Create new entry", + "SteckBrett, a network ports plugboard", Style::default().fg(Color::Green), )) .block(titleBlock); - frame.render_widget(title, chunks[0]); + frame.render_widget(title, titleBodyChunks[0]); + // Create and add body let mut currentItems = Vec::::new(); for (i, e) in app.entries.iter().enumerate() { currentItems.push(ListItem::new(Line::from(Span::styled( @@ -47,9 +54,10 @@ pub fn ui(frame: &mut Frame, app: &AppState) { Style::default().fg(Color::Yellow), )))); } - let list = List::new(currentItems); - frame.render_widget(list, chunks[1]); + let list = List::new(currentItems).block(Block::default().borders(Borders::all())); + frame.render_widget(list, titleBodyChunks[1]); + // Renter exit prompt if let CurrentScreen::Exit = app.screen { let exitPopup = Block::default() .title("Save and Exit?") @@ -68,6 +76,7 @@ pub fn ui(frame: &mut Frame, app: &AppState) { frame.render_widget(exitPara, area); } + // Editing screen popup if let Some(edit) = &app.currentlyEditing { let popup = Block::default() .title("Add an entry") @@ -112,7 +121,9 @@ pub fn ui(frame: &mut Frame, app: &AppState) { frame.render_widget(toPortPara, fields[3]); }; - let screenHelp = vec![ + // -------------------------------- + // Current page title and status + let screenHeader = vec![ match app.screen { CurrentScreen::Main => Span::styled("Main Screen", Style::default().fg(Color::Green)), CurrentScreen::Add => Span::styled("Add entry", Style::default().fg(Color::Yellow)), @@ -141,30 +152,36 @@ pub fn ui(frame: &mut Frame, app: &AppState) { }, ]; - let helpFooter = - Paragraph::new(Line::from(screenHelp)).block(Block::default().borders(Borders::ALL)); + let screenHeaderPara = Paragraph::new(Line::from(screenHeader)) + .block(Block::default().borders(Borders::TOP | Borders::LEFT | Borders::RIGHT)); + // Keybinds Entry let keybinds = { match app.screen { - CurrentScreen::Main => Span::styled( - "(a) add entry / (q) save and quit", - Style::default().fg(Color::Red), - ), - CurrentScreen::Add => Span::styled( - "(l) localhost / (enter/tab) next field / (c) clear / (C) clear all / (esc) main menu", - Style::default().fg(Color::Red), - ), - CurrentScreen::Settings => Span::styled("", Style::default().fg(Color::Red)), - CurrentScreen::Exit => Span::styled( - "(enter) save and exit / (esc) main menu", - Style::default().fg(Color::Red), - ), + CurrentScreen::Main => Text::from(vec![ + Line::from("(a) add entry").style(Style::default().fg(Color::Green)), + Line::from("(q) save and quit").style(Style::default().fg(Color::Green)), + ]), + CurrentScreen::Add => Text::from(vec![ + Line::from("(l) localhost"), + Line::from("(enter) next field"), + Line::from("(c) clear"), + Line::from("(C) clear all"), + Line::from("(esc) main menu"), + ]), + CurrentScreen::Settings => { + Text::from(Line::from("").style(Style::default().fg(Color::Red))) + } + CurrentScreen::Exit => Text::from(vec![ + Line::from("(enter) save and exit").style(Style::default().fg(Color::Red)), + Line::from("(esc) main menu").style(Style::default().fg(Color::Red)), + ]), } }; - let keyBindFooter = - Paragraph::new(Line::from(keybinds)).block(Block::default().borders(Borders::ALL)); + let keyBindFooter = Paragraph::new(keybinds) + .block(Block::default().borders(Borders::BOTTOM | Borders::LEFT | Borders::RIGHT)); - frame.render_widget(helpFooter, footerChunks[0]); - frame.render_widget(keyBindFooter, footerChunks[1]); + frame.render_widget(screenHeaderPara, headerKeybindChunks[0]); + frame.render_widget(keyBindFooter, headerKeybindChunks[1]); }