Skip to content

Commit

Permalink
Update demo gif
Browse files Browse the repository at this point in the history
  • Loading branch information
@phire22
phire22 committed May 4, 2024
1 parent c608cfa commit 7b9bbd5
Show file tree
Hide file tree
Showing 8 changed files with 80 additions and 91 deletions.
19 changes: 7 additions & 12 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,12 +22,7 @@ You can adjust the behavior of [`ListState`] with the following options:

### Example
```rust
use ratatui::buffer::Buffer;
use ratatui::layout::Rect;
use ratatui::style::{Color, Style, Stylize};
use ratatui::text::Text;
use ratatui::widgets::{Paragraph, Widget};
use ratatui::Frame;
use ratatui::prelude::*;
use tui_widget_list::{List, ListState, ListWidget, RenderContext};

#[derive(Debug, Clone)]
Expand Down Expand Up @@ -56,7 +51,9 @@ impl ListWidget for ListItem {

// Highlight the selected widget
if context.is_selected {
self.style = Style::default().bg(Color::Rgb(251, 155, 100));
self.style = Style::default()
.bg(Color::Rgb(255, 153, 0))
.fg(Color::Rgb(28, 28, 32));
};

// Example: set main axis size to 1
Expand All @@ -68,16 +65,14 @@ impl ListWidget for ListItem {

impl Widget for ListItem {
fn render(self, area: Rect, buf: &mut Buffer) {
Paragraph::new(Text::from(self.text))
.style(self.style)
.render(area, buf);
Line::from(self.text).style(self.style).render(area, buf);
}
}

pub fn render(f: &mut Frame) {
let list = List::new(vec![
ListItem::new("1"),
ListItem::new("2"),
ListItem::new("Item 1"),
ListItem::new("Item 2"),
]);
let mut state = ListState::default();
f.render_stateful_widget(list, f.size(), &mut state);
Expand Down
Binary file modified examples/demo.gif
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
118 changes: 55 additions & 63 deletions examples/demo.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@ use crossterm::terminal::{
use ratatui::buffer::Buffer;
use ratatui::layout::Rect;
use ratatui::prelude::*;
use ratatui::style::palette::tailwind::SLATE;
use ratatui::style::{Color, Style};
use ratatui::widgets::{Block, BorderType, Borders, Paragraph, Widget};
use ratatui::Terminal;
Expand All @@ -20,17 +19,17 @@ pub struct TextContainer {
title: String,
content: Vec<String>,
style: Style,
height: u16,
selected_color: Color,
expand: bool,
}

impl TextContainer {
pub fn new(title: &str, content: Vec<String>) -> Self {
pub fn new(title: &str, content: Vec<String>, selected_color: Color) -> Self {
Self {
title: title.to_string(),
content,
style: Style::default(),
height: 2,
selected_color,
expand: false,
}
}
Expand All @@ -39,19 +38,21 @@ impl TextContainer {
impl ListWidget for TextContainer {
fn pre_render(mut self, context: &RenderContext) -> (Self, u16) {
if context.index % 2 == 0 {
self.style = THEME.even;
self.style = Style::default().bg(Color::Rgb(28, 28, 32));
} else {
self.style = THEME.odd;
self.style = Style::default().bg(Color::Rgb(0, 0, 0));
}

let mut main_axis_size = 2;
if context.is_selected {
self.style = THEME.selection;
self.height = 3 + self.content.len() as u16;
self.style = Style::default()
.bg(self.selected_color)
.fg(Color::Rgb(28, 28, 32));
self.expand = true;
main_axis_size = 3 + self.content.len() as u16;
}

let height = self.height;
(self, height)
(self, main_axis_size)
}
}

Expand Down Expand Up @@ -190,41 +191,34 @@ impl App {
}
}

// pub fn ui(f: &mut Frame, app: &mut App) {
// use Constraint::{Min, Percentage};
// let area = f.size();
// let [top, bottom] = Layout::vertical([Percentage(75), Min(0)]).areas(area);
//
// f.render_stateful_widget(demo_text_list(), top, &mut app.text_list_state);
// f.render_stateful_widget(demo_color_list(), bottom, &mut app.color_list_state);
// }
impl Widget for &mut App {
fn render(self, area: Rect, buf: &mut Buffer)
where
Self: Sized,
{
use Constraint::{Min, Percentage};
let [top, bottom] = Layout::vertical([Percentage(75), Min(0)]).areas(area);
demo_text_list().render(top, buf, &mut self.text_list_state);
demo_color_list().render(bottom, buf, &mut self.color_list_state);
let colors = demo_colors();
let selected_color = match self.color_list_state.selected {
Some(index) => colors[index],
None => colors[1],
};

let text_list = demo_text_list(selected_color);
text_list.render(top, buf, &mut self.text_list_state);

let color_list = List::new(
colors
.into_iter()
.map(|color| ColoredContainer::new(color))
.collect(),
)
.scroll_direction(ScrollAxis::Horizontal);
color_list.render(bottom, buf, &mut self.color_list_state);
}
}

pub struct Theme {
pub root: Style,
pub even: Style,
pub odd: Style,
pub selection: Style,
}

pub const THEME: Theme = Theme {
root: Style::new().bg(SLATE.c900),
even: Style::new().bg(SLATE.c900).fg(SLATE.c50),
odd: Style::new().bg(SLATE.c800).fg(SLATE.c50),
selection: Style::new().bg(Color::Rgb(30, 129, 176)).fg(SLATE.c50),
};

fn demo_text_list() -> List<'static, TextContainer> {
fn demo_text_list(selected_color: Color) -> List<'static, TextContainer> {
let monday: Vec<String> = vec![
String::from("1. Exercise for 30 minutes"),
String::from("2. Work on the project for 2 hours"),
Expand All @@ -246,45 +240,43 @@ fn demo_text_list() -> List<'static, TextContainer> {
String::from("2. Document ideas and refine tasks"),
];
let friday: Vec<String> = vec![
String::from("1. Have a one-on-one with a team lead"),
String::from("2. Attent demo talk"),
String::from("1. Have a recap meeting"),
String::from("2. Attent conference talk"),
String::from("3. Go running for 1 hour"),
];
let saturday: Vec<String> = vec![
String::from("1. Work on a personal coding project for 2 hours"),
String::from("1. Work on coding project"),
String::from("2. Read a chapter from a book"),
String::from("3. Go for a short walk"),
];
let sunday: Vec<String> = vec![
String::from("1. Plan and outline goals for the upcoming week"),
String::from("2. Attend an online workshop"),
String::from("1. Plan upcoming trip"),
String::from("2. Read in the park"),
String::from("3. Go to dinner with friends"),
String::from("4. Watch a movie"),
];
List::new(vec![
TextContainer::new("Monday", monday),
TextContainer::new("Tuesday", tuesday),
TextContainer::new("Wednesday", wednesday),
TextContainer::new("Thursday", thursday),
TextContainer::new("Friday", friday),
TextContainer::new("Saturday", saturday),
TextContainer::new("Sunday", sunday),
TextContainer::new("Monday", monday, selected_color),
TextContainer::new("Tuesday", tuesday, selected_color),
TextContainer::new("Wednesday", wednesday, selected_color),
TextContainer::new("Thursday", thursday, selected_color),
TextContainer::new("Friday", friday, selected_color),
TextContainer::new("Saturday", saturday, selected_color),
TextContainer::new("Sunday", sunday, selected_color),
])
.style(THEME.root)
.style(Style::default())
}

fn demo_color_list() -> List<'static, ColoredContainer> {
List::new(vec![
ColoredContainer::new(Color::Rgb(255, 0, 255)), // Neon Pink
ColoredContainer::new(Color::Rgb(0, 255, 255)), // Neon Cyan
ColoredContainer::new(Color::Rgb(255, 255, 0)), // Neon Yellow
ColoredContainer::new(Color::Rgb(102, 255, 102)), // Neon Green
ColoredContainer::new(Color::Rgb(255, 102, 102)), // Neon Red
ColoredContainer::new(Color::Rgb(153, 51, 255)), // Neon Purple
ColoredContainer::new(Color::Rgb(255, 102, 204)), // Neon Magenta
ColoredContainer::new(Color::Rgb(255, 255, 102)), // Neon Lemon
ColoredContainer::new(Color::Rgb(51, 255, 153)), // Neon Turquoise
ColoredContainer::new(Color::Rgb(102, 255, 255)), // Neon Aqua
])
.scroll_direction(ScrollAxis::Horizontal)
fn demo_colors() -> Vec<Color> {
vec![
Color::Rgb(255, 102, 102), // Neon Red
Color::Rgb(255, 153, 0), // Neon Orange
Color::Rgb(255, 204, 0), // Neon Yellow
Color::Rgb(0, 204, 102), // Neon Green
Color::Rgb(0, 204, 255), // Neon Blue
Color::Rgb(102, 51, 255), // Neon Purple
Color::Rgb(255, 51, 204), // Neon Magenta
Color::Rgb(51, 255, 255), // Neon Cyan
Color::Rgb(255, 102, 255), // Neon Pink
Color::Rgb(102, 255, 255), // Neon Aqua
]
}
7 changes: 5 additions & 2 deletions examples/demo.tape
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,14 +4,17 @@ Set Margin 10
Set Padding 2
Set BorderRadius 10
Set Width 1200
Set Height 600
Set Height 700
Set PlaybackSpeed 1.0

Hide
Type "cargo run --example demo"
Sleep 0.1s
Enter
Sleep 0.5s
Show

Sleep 1.5s
[email protected] 7
Sleep 0.5s
[email protected] 11
Sleep 1.5s
Binary file modified examples/simple.gif
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 3 additions & 1 deletion examples/simple.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,9 @@ impl ListWidget for ListItem<'_> {
}
if context.is_selected {
self.prefix = Some(">>");
self.style = Style::default().bg(Color::Rgb(251, 155, 100));
self.style = Style::default()
.bg(Color::Rgb(255, 153, 0))
.fg(Color::Rgb(28, 28, 32));
};

(self, 1)
Expand Down
4 changes: 3 additions & 1 deletion examples/simple.tape
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,13 @@ Set BorderRadius 10
Set Width 1200
Set Height 300
Set PlaybackSpeed 1.0

Hide
Type "cargo run --example simple"
Enter
Sleep 0.1s
Sleep 0.5s
Show

Sleep 1.5s
[email protected] 20
Sleep 1.5s
19 changes: 7 additions & 12 deletions src/lib.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,12 +22,7 @@
//!
//! ## Example
//! ```
//! use ratatui::buffer::Buffer;
//! use ratatui::layout::Rect;
//! use ratatui::style::{Color, Style, Stylize};
//! use ratatui::text::Text;
//! use ratatui::widgets::{Paragraph, Widget};
//! use ratatui::Frame;
//! use ratatui::prelude::*;
//! use tui_widget_list::{List, ListState, ListWidget, RenderContext};
//!
//! #[derive(Debug, Clone)]
Expand Down Expand Up @@ -56,7 +51,9 @@
//!
//! // Highlight the selected widget
//! if context.is_selected {
//! self.style = Style::default().bg(Color::Rgb(251, 155, 100));
//! self.style = Style::default()
//! .bg(Color::Rgb(255, 153, 0))
//! .fg(Color::Rgb(28, 28, 32));
//! };
//!
//! // Example: set main axis size to 1
Expand All @@ -68,16 +65,14 @@
//!
//! impl Widget for ListItem {
//! fn render(self, area: Rect, buf: &mut Buffer) {
//! Paragraph::new(Text::from(self.text))
//! .style(self.style)
//! .render(area, buf);
//! Line::from(self.text).style(self.style).render(area, buf);
//! }
//! }
//!
//! pub fn render(f: &mut Frame) {
//! let list = List::new(vec![
//! ListItem::new("1"),
//! ListItem::new("2"),
//! ListItem::new("Item 1"),
//! ListItem::new("Item 2"),
//! ]);
//! let mut state = ListState::default();
//! f.render_stateful_widget(list, f.size(), &mut state);
Expand Down

0 comments on commit 7b9bbd5

Please sign in to comment.