This PR adds `Color::from_hsl` that returns a valid `Color::Rgb`.
```rust
let color: Color = Color::from_hsl(360.0, 100.0, 100.0);
assert_eq!(color, Color::Rgb(255, 255, 255));
let color: Color = Color::from_hsl(0.0, 0.0, 0.0);
assert_eq!(color, Color::Rgb(0, 0, 0));
```
HSL stands for Hue (0-360 deg), Saturation (0-100%), and Lightness
(0-100%) and working with HSL the values can be more intuitive. For
example, if you want to make a red color more orange, you can change the
Hue closer toward yellow on the color wheel (i.e. increase the Hue).
Related #763
Added convenience functions left_aligned(), centered() and
right_aligned() plus unit tests. Updated example code.
Signed-off-by: Eelco Empting <me@eelco.de>
This PR adds:
- subjectively better-looking list example
- change list example to a todo list example
- status of a TODO can be changed, further info can be seen under the list.
This adds for table:
- Added new flex method with flex field
- Deprecated segment_size method and removed segment_size field
- Updated documentation
- Updated tests
This is a somewhat arbitrary size for the layout cache based on adding
the columns and rows on my laptop's terminal (171+51 = 222) and doubling
it for good measure and then adding a bit more to make it a round
number. This gives enough entries to store a layout for every row and
every column, twice over, which should be enough for most apps. For
those that need more, the cache size can be set with
`Layout::init_cache()`.
Fixes: https://github.com/ratatui-org/ratatui/issues/820
In table.rs
- added scrollbar to the table
- colors changed to use style::palette::tailwind
- now colors can be changed with keys (l or →) for the next color, (h or
←) for the previous color
- added a footer for key info
For table.tape
- typing speed changed to 0.75s from 0.5s
- screen size changed to fit
- pushed keys changed to show the current example better
Fixes: https://github.com/ratatui-org/ratatui/issues/800
The current `List` example will unselect and reset the position of a
list.
This PR will save the last selected item, and updates `List` to honor
its offset, preventing the list from resetting when the user
`unselect()`s a `StatefulList`.
Fixes#758, fixes#801
This PR adds:
- `style` and `alignment` to `Text`
- impl `Widget` for `Text`
- replace `Text` manual draw to call for Widget impl
All places that use `Text` have been updated and support its new
features expect paragraph which still has a custom implementation.
Adds `proportional`, `symmetric`, `left`, `right`, `top`, and `bottom`
constructors for Padding struct.
Proportional is
```
/// **NOTE**: Terminal cells are often taller than they are wide, so to make horizontal and vertical
/// padding seem equal, doubling the horizontal padding is usually pretty good.
```
Fixes: https://github.com/ratatui-org/ratatui/issues/798
This uses the new `spacing` feature of the `Layout` struct to allocate
columns spacing in the `Table` widget.
This changes the behavior of the table column layout in the following
ways:
1. Selection width is always allocated.
- if a user does not want a selection width ever they should use
`HighlightSpacing::Never`
2. Column spacing is prioritized over other constraints
- if a user does not want column spacing, they should use
`Table::new(...).column_spacing(0)`
---------
Co-authored-by: Josh McKinney <joshka@users.noreply.github.com>
This PR adds the
[`McGugan`](https://www.willmcgugan.com/blog/tech/post/ceo-just-wants-to-draw-boxes/)
border set, which allows for tighter borders.
For example, with the `flex` example you can get this effect (top is
mcgugan wide, bottom is mcgugan tall):
<img width="759" alt="image"
src="https://github.com/ratatui-org/ratatui/assets/1813121/756bb50e-f8c3-4eec-abe8-ce358058a526">
<img width="759" alt="image"
src="https://github.com/ratatui-org/ratatui/assets/1813121/583485ef-9eb2-4b45-ab88-90bd7cb14c54">
As of this PR, `MCGUGAN_WIDE` has to be styled manually, like so:
```rust
let main_color = color_for_constraint(*constraint);
let cell = buf.get_mut(block.x, block.y + 1);
cell.set_style(Style::reset().fg(main_color).reversed());
let cell = buf.get_mut(block.x, block.y + 2);
cell.set_style(Style::reset().fg(main_color).reversed());
let cell = buf.get_mut(block.x + block.width.saturating_sub(1), block.y + 1);
cell.set_style(Style::reset().fg(main_color).reversed());
let cell = buf.get_mut(block.x + block.width.saturating_sub(1), block.y + 2);
cell.set_style(Style::reset().fg(main_color).reversed());
```
`MCGUGAN_TALL` has to be styled manually, like so:
```rust
let main_color = color_for_constraint(*constraint);
for x in block.x + 1..(block.x + block.width).saturating_sub(1) {
let cell = buf.get_mut(x, block.y);
cell.set_style(Style::reset().fg(main_color).reversed());
let cell = buf.get_mut(x, block.y + block.height - 1);
cell.set_style(Style::reset().fg(main_color).reversed());
}
```
Issue: https://github.com/ratatui-org/ratatui/issues/816
This PR adds:
`std::fmt::Display` for `Text`, `Line`, and `Span` structs.
Display implementation displays actual content while ignoring style.
This commit adds `scroll` to the flex example. It also adds more examples to showcase how constraints interact. It improves the UI to make it easier to understand and short terminal friendly.
<img width="380" alt="image" src="https://github.com/ratatui-org/ratatui/assets/1813121/30541efc-ecbe-4e28-b4ef-4d5f1dc63fec"/>
---------
Co-authored-by: Dheepak Krishnamurthy <me@kdheepak.com>
```shell
cargo run --example demo2 --features="crossterm widget-calendar"
```
Press `d` to activate destroy mode and Enjoy!
Vendors a copy of tui-big-text to allow us to use it in the demo.
This PR adds a new way to space elements in a `Layout`.
Loosely based on
[flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/), this
PR adds a `Flex` enum with the following variants:
- Start
- Center
- End
- SpaceAround
- SpaceBetween
<img width="380" alt="image" src="https://github.com/ratatui-org/ratatui/assets/1813121/b744518c-eae7-4e35-bbc4-fe3c95193cde">
It also adds two more variants, to make this backward compatible and to
make it replace `SegmentSize`:
- StretchLast (default in the `Flex` enum, also behavior matches old
default `SegmentSize::LastTakesRemainder`)
- Stretch (behavior matches `SegmentSize::EvenDistribution`)
The `Start` variant from above matches `SegmentSize::None`.
This allows `Flex` to be a complete replacement for `SegmentSize`, hence
this PR also deprecates the `segment_size` constructor on `Layout`.
`SegmentSize` is still used in `Table` but under the hood `segment_size`
maps to `Flex` with all tests passing unchanged.
I also put together a simple example for `Flex` layouts so that I could
test it visually, shared below:
https://github.com/ratatui-org/ratatui/assets/1813121/c8716c59-493f-4631-add5-feecf4bd4e06
TableState, ListState, and ScrollbarState can now be serialized and deserialized
using serde.
```rust
#[derive(Debug, Clone, serde::Serialize, serde::Deserialize)]
struct AppState {
list_state: ListState,
table_state: TableState,
scrollbar_state: ScrollbarState,
}
let app_state = AppState::default();
let serialized = serde_json::to_string(app_state);
let app_state = serde_json::from_str(serialized);
```
The `ratatui::style::palette::tailwind` module contains the default
Tailwind color palette. This is useful for styling components with
colors that match the Tailwind color palette.
See https://tailwindcss.com/docs/customizing-colors for more information
on Tailwind.
```rust
use ratatui::style::palette::tailwind::SLATE;
Line::styled("Hello", SLATE.c500);
```
