Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add Alternating Colors for Help Table #466

Merged
merged 10 commits into from
Jul 2, 2024
Merged

Add Alternating Colors for Help Table #466

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
dccbe93
add alternating row colors for help table
przb Jun 13, 2024
f787a96
add support for dark gray coloring
przb Jun 24, 2024
3535a91
add secondary row to the ComponentStyle struct
przb Jun 24, 2024
06f21e1
run cargo fmt
przb Jun 26, 2024
121f965
remove dark gray from coloring for rgb values instead
przb Jul 2, 2024
28d01b8
disable alternate row coloring by default
przb Jul 2, 2024
6b2b714
add secondary row to the component styles docs
przb Jul 2, 2024
1173bf0
add extended dracula theme with secondary row styling
przb Jul 2, 2024
a02fd3c
Merge branch 'alternating_help_table_colors' of github.com:przb/spoti…
przb Jul 2, 2024
dec43d0
add brief description for dracula2
przb Jul 2, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 16 additions & 0 deletions spotify_player/src/config/theme.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,9 @@ pub struct Palette {
pub bright_blue: Color,
#[serde(default = "Color::bright_yellow")]
pub bright_yellow: Color,

#[serde(default = "Color::dark_gray")]
pub dark_gray: Color,
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I added support for dark gray coloring, but is there a better way to add support for coloring modifications? Dark and Bright colors seem to have some repetition. And should other dark colors be added as well?

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No you shouldn't add new field to the palette, it represents the basic 16-color palette with additional fields for background and foreground.

}

#[derive(Clone, Debug, Default, Deserialize)]
Expand All @@ -74,6 +77,7 @@ pub struct ComponentStyle {
pub playlist_desc: Option<Style>,
pub table_header: Option<Style>,
pub selection: Option<Style>,
pub secondary_row: Option<Style>,
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I named this secondary row because I thought it could be used in more places than just the help table, but let me know if it should just be for the help table.

}

#[derive(Default, Clone, Debug, Deserialize)]
Expand Down Expand Up @@ -102,6 +106,7 @@ pub enum StyleColor {
BrightCyan,
BrightBlue,
BrightYellow,
DarkGray,
Rgb { r: u8, g: u8, b: u8 },
}

Expand Down Expand Up @@ -284,6 +289,12 @@ impl Theme {
Some(s) => s.style(&self.palette),
}
}
pub fn secondary_row(&self) -> tui::style::Style {
match &self.component_style.secondary_row {
None => Style::default().bg(StyleColor::DarkGray).style(&self.palette),
Some(s) => s.style(&self.palette),
}
}
}

impl Style {
Expand Down Expand Up @@ -379,6 +390,7 @@ impl StyleColor {
Self::BrightCyan => palette.bright_cyan.color,
Self::BrightBlue => palette.bright_blue.color,
Self::BrightYellow => palette.bright_yellow.color,
Self::DarkGray => style::Color::DarkGray,
Self::Rgb { r, g, b } => style::Color::Rgb(r, g, b),
}
}
Expand Down Expand Up @@ -463,6 +475,9 @@ impl Color {
pub fn bright_white() -> Self {
style::Color::White.into()
}
pub fn dark_gray() -> Self {
style::Color::DarkGray.into()
}
}

impl From<&str> for Color {
Expand Down Expand Up @@ -519,6 +534,7 @@ impl Default for Palette {
bright_magenta: Color::bright_magenta(),
bright_cyan: Color::bright_cyan(),
bright_white: Color::bright_white(),
dark_gray: Color::dark_gray(),
}
}
}
9 changes: 8 additions & 1 deletion spotify_player/src/ui/page.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -567,12 +567,19 @@ pub fn render_commands_help_page(frame: &mut Frame, ui: &mut UIStateGuard, rect:
let help_table = Table::new(
map.into_iter()
.skip(scroll_offset)
.map(|(command, keys)| {
.enumerate()
.map(|(i, (command, keys))| {
Row::new(vec![
Cell::from(format!("{command:?}")),
Cell::from(format!("[{keys}]")),
Cell::from(command.desc()),
])
// adding alternating row colors
.style(if (i + scroll_offset) % 2 == 0 {
ui.theme.secondary_row()
} else {
ui.theme.app()
})
})
.collect::<Vec<_>>(),
COMMAND_TABLE_CONSTRAINTS,
Expand Down