Merge pull request #67 from kyoto7250/fix/issue-11

add a message in error modal to show close button
kyoto7250 · Jun 18, 2024 · 4c3d60e · 4c3d60e
2 parents 0b086e6 + a2f3849
commit 4c3d60e
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 20 deletions.
diff --git a/src/components/error.rs b/src/components/error.rs
@@ -4,8 +4,9 @@ use crate::config::KeyConfig;
 use crate::event::Key;
 use anyhow::Result;
 use ratatui::{
-    layout::{Alignment, Rect},
+    layout::{Alignment, Constraint, Direction, Layout, Rect},
     style::{Color, Style},
+    text::{Line, Span},
     widgets::{Block, Borders, Clear, Paragraph, Wrap},
     Frame,
 };
@@ -17,16 +18,16 @@ pub struct ErrorComponent {
 }
 
 impl ErrorComponent {
+    const WIDTH: u16 = 65;
+    const HEIGHT: u16 = 10;
     pub fn new(key_config: KeyConfig) -> Self {
         Self {
             error: String::new(),
             visible: false,
             key_config,
         }
     }
-}
 
-impl ErrorComponent {
     pub fn set(&mut self, error: String) -> anyhow::Result<()> {
         self.error = error;
         self.show()
@@ -36,21 +37,41 @@ impl ErrorComponent {
 impl DrawableComponent for ErrorComponent {
     fn draw(&self, f: &mut Frame, _area: Rect, _focused: bool) -> Result<()> {
         if self.visible {
-            let width = 65;
-            let height = 10;
-            let error = Paragraph::new(self.error.to_string())
-                .block(Block::default().title("Error").borders(Borders::ALL))
-                .style(Style::default().fg(Color::Red))
-                .alignment(Alignment::Left)
-                .wrap(Wrap { trim: true });
+            let error = Block::default()
+                .title("Error")
+                .borders(Borders::ALL)
+                .style(Style::default().fg(Color::Red));
+
             let area = Rect::new(
-                (f.size().width.saturating_sub(width)) / 2,
-                (f.size().height.saturating_sub(height)) / 2,
-                width.min(f.size().width),
-                height.min(f.size().height),
+                (f.size().width.saturating_sub(Self::WIDTH)) / 2,
+                (f.size().height.saturating_sub(Self::HEIGHT)) / 2,
+                Self::WIDTH.min(f.size().width),
+                Self::HEIGHT.min(f.size().height),
             );
+            let chunks = Layout::default()
+                .vertical_margin(1)
+                .horizontal_margin(1)
+                .direction(Direction::Vertical)
+                .constraints([Constraint::Min(1), Constraint::Length(1)].as_ref())
+                .split(area);
+
             f.render_widget(Clear, area);
             f.render_widget(error, area);
+            f.render_widget(
+                Paragraph::new(self.error.to_string()).wrap(Wrap { trim: true }),
+                chunks[0],
+            );
+            f.render_widget(
+                Paragraph::new(Line::from(vec![Span::styled(
+                    format!(
+                        "Press [{}] to close this modal.",
+                        self.key_config.exit_popup
+                    ),
+                    Style::default(),
+                )]))
+                .alignment(Alignment::Right),
+                chunks[1],
+            );
         }
         Ok(())
     }

diff --git a/src/components/help.rs b/src/components/help.rs
@@ -24,15 +24,14 @@ pub struct HelpComponent {
 impl DrawableComponent for HelpComponent {
     fn draw(&self, f: &mut Frame, _area: Rect, _focused: bool) -> Result<()> {
         if self.visible {
-            const SIZE: (u16, u16) = (65, 24);
-            let scroll_threshold = SIZE.1 / 3;
+            let scroll_threshold = Self::HEIGHT / 3;
             let scroll = self.selection.saturating_sub(scroll_threshold);
 
             let area = Rect::new(
-                (f.size().width.saturating_sub(SIZE.0)) / 2,
-                (f.size().height.saturating_sub(SIZE.1)) / 2,
-                SIZE.0.min(f.size().width),
-                SIZE.1.min(f.size().height),
+                (f.size().width.saturating_sub(Self::WIDTH)) / 2,
+                (f.size().height.saturating_sub(Self::HEIGHT)) / 2,
+                Self::WIDTH.min(f.size().width),
+                Self::HEIGHT.min(f.size().height),
             );
 
             f.render_widget(Clear, area);
@@ -105,6 +104,8 @@ impl Component for HelpComponent {
 }
 
 impl HelpComponent {
+    const WIDTH: u16 = 65;
+    const HEIGHT: u16 = 24;
     pub const fn new(key_config: KeyConfig) -> Self {
         Self {
             cmds: vec![],