`9d4452b`

Improve GUI spacing and layout breathing room

Authored by mfwolffe <wolffemf@dukes.jmu.edu> 3 months ago

SHA: 9d4452b4cb66483a33ae540eabf48478d3470735
Parents: 9f6cd44
Tree: 351ecb7

2 changed files

Status	File	+	-
M	`gartop/src/gui/app.rs`	21	11
M	`gartop/src/gui/process_list.rs`	5	5

gartop/src/gui/app.rsmodified

  /// Graph height.
  const GRAPH_HEIGHT: u32 = 150;
 +/// Horizontal content padding.
 +const CONTENT_PADDING: u32 = 16;
++
 +/// Vertical gap between sections.
 +const SECTION_GAP: u32 = 12;
++
  /// Default window dimensions.
  const DEFAULT_WIDTH: u32 = 800;
  const DEFAULT_HEIGHT: u32 = 600;
          // Create components
          let header = HeaderBar::new(Rect::new(0, 0, width, HEADER_HEIGHT));
 -        let tab_bar = TabBar::new(Rect::new(0, HEADER_HEIGHT as i32, width, TAB_BAR_HEIGHT));
 +        let tab_bar_y = HEADER_HEIGHT + 4; // Small gap below header
 +        let tab_bar = TabBar::new(Rect::new(0, tab_bar_y as i32, width, TAB_BAR_HEIGHT));
          let process_list = Self::create_process_list(width, height);
          // Check if daemon is available
      /// Create process list with correct bounds.
      fn create_process_list(width: u32, height: u32) -> ProcessList {
 -        let content_start = HEADER_HEIGHT + TAB_BAR_HEIGHT + GRAPH_HEIGHT + 24; // 24 for graph label
 +        // Account for: header + gap + tab bar + section gap + graph label + graph + section gap
 +        let tab_bar_y = HEADER_HEIGHT + 4;
 +        let content_start = tab_bar_y + TAB_BAR_HEIGHT + SECTION_GAP + 20 + GRAPH_HEIGHT + SECTION_GAP;
          let list_height = height.saturating_sub(content_start);
 -        ProcessList::new(Rect::new(0, content_start as i32, width, list_height))
 +        let list_width = width.saturating_sub(CONTENT_PADDING * 2);
 +        ProcessList::new(Rect::new(CONTENT_PADDING as i32, content_start as i32, list_width, list_height))
+     }
      /// Check if daemon is available by attempting a connection.
      /// Render the content for the active tab.
      fn render_tab_content(&self, content_y: i32, _content_height: u32) -> Result<()> {
 -        let padding = 12;
 -        let graph_width = self.width - (padding * 2) as u32;
 +        let graph_width = self.width - (CONTENT_PADDING * 2);
          // Get Cairo context for graph rendering
          let ctx = self.renderer.context()?;
              ..LineGraph::default()
          };
 -        let mut y = content_y + padding as i32;
 +        let mut y = content_y + SECTION_GAP as i32;
          match self.tab_bar.active() {
              Tab::Cpu => {
                  };
                  self.renderer.text(
                      &cpu_label,
 -                    padding as f64,
 +                    CONTENT_PADDING as f64,
                      y as f64 + 14.0,
                      &TextStyle {
                          font_family: "monospace".to_string(),
                  y += 20;
                  // CPU Graph
 -                let graph_rect = Rect::new(padding as i32, y, graph_width, GRAPH_HEIGHT);
 +                let graph_rect = Rect::new(CONTENT_PADDING as i32, y, graph_width, GRAPH_HEIGHT);
                  let mut cpu_series = DataSeries::new("CPU", self.theme.cpu_color);
                  cpu_series.set_values(self.cpu_history.iter().map(|s| s.usage_percent).collect());
                  graph.render(&ctx, graph_rect, &[cpu_series], &self.theme);
                  };
                  self.renderer.text(
                      &mem_label,
 -                    padding as f64,
 +                    CONTENT_PADDING as f64,
                      y as f64 + 14.0,
                      &TextStyle {
                          font_family: "monospace".to_string(),
                  y += 20;
                  // Memory Graph
 -                let graph_rect = Rect::new(padding as i32, y, graph_width, GRAPH_HEIGHT);
 +                let graph_rect = Rect::new(CONTENT_PADDING as i32, y, graph_width, GRAPH_HEIGHT);
                  let mut mem_series = DataSeries::new("Memory", self.theme.memory_color);
                  let mut swap_series = DataSeries::new("Swap", self.theme.swap_color);
                  mem_series.set_values(self.memory_history.iter().map(|s| s.usage_percent).collect());
          // Update component bounds
          self.header = HeaderBar::new(Rect::new(0, 0, width, HEADER_HEIGHT));
 -        self.tab_bar.set_bounds(Rect::new(0, HEADER_HEIGHT as i32, width, TAB_BAR_HEIGHT));
 +        let tab_bar_y = HEADER_HEIGHT + 4;
 +        self.tab_bar.set_bounds(Rect::new(0, tab_bar_y as i32, width, TAB_BAR_HEIGHT));
          self.process_list = Self::create_process_list(width, height);
          self.process_list.set_processes(self.processes.clone());

gartop/src/gui/process_list.rsmodified

              ..text_style.clone()
          };
 -        // Column positions
 +        // Column positions (PID can be 7 digits, ~56px at 11px monospace)
          let x = self.bounds.x as f64;
          let col_pid = x + 8.0;
 -        let col_name = x + 70.0;
 -        let col_cpu = x + 220.0;
 -        let col_mem = x + 290.0;
 -        let col_user = x + 380.0;
 +        let col_name = x + 80.0;
 +        let col_cpu = x + 230.0;
 +        let col_mem = x + 300.0;
 +        let col_user = x + 390.0;
          // Header
          let header_y = self.bounds.y as f64 + 16.0;